Difference between revisions of "Panels"

From pmusers
Jump to: navigation, search
Line 34: Line 34:
 
For example, the following code adds a warning below the existing content in the panel:
 
For example, the following code adds a warning below the existing content in the panel:
 
<source lang=javascript>
 
<source lang=javascript>
$("#displayTitle").find("div.panel-body").append('<div style="margin-left:25px;"><b>Warning:</b> Only select a maximum of 3 clients.');
+
$("#displayTitle").find("div.panel-body").append('<div style="margin-left:25px;"><b>Warning:</b> Only select a maximum of 3 clients.</div>');
 
</source>
 
</source>
  

Revision as of 01:17, 25 July 2019

The HTML structure of panels

A panel has the following HTML structure:

<div>
  <div id="myPanel" class="panel panel-default pmdynaform-panel  pmdynaform-field-panel form-group col-sm-12 col-md-12 col-lg-12 pmdynaform-field" style="border-width:1px">
    <div class="panel-heading" style="display:none;">
      <h3 class="panel-title">
        <div class="header-content">
          <span>untitled-panel</span>
        </div>
      </h3>
    </div>
    <div class="panel-body"></div>
    <div class="panel-footer" style="display:none">
      <div class="footer-content"></div>
      <div>footer pmdynaform!</div>
    </div>
  </div>
</div>

The outer div which holds the panel's ID (which is "myPanel" in this example), encloses three <div>s. The <div>s with the classes "panel-heading" and "panel-footer" are hidden and can be ignored. The <div> with the "panel-body" class is where HTML code will be added.

Manipulating panels with JavaScript

To add content dynamically to a panel, use jQuery's [.html() function to write HTML code to the <div> with the "panel-body" class.

For example, the following JavaScript code places a new title in a panel with the ID "displayTitle":

$("#displayTitle").find("div.panel-body").html('<h2>New <font color="blue">Product Lines</font></h2>');

If needing to insert content before or after the existing content in a panel, then use the .prepend() or .append() functions.

For example, the following code adds a warning below the existing content in the panel:

$("#displayTitle").find("div.panel-body").append('<div style="margin-left:25px;"><b>Warning:</b> Only select a maximum of 3 clients.</div>');

Dynamic panel content

A panel can be used to display dynamic content that depends on a variable set in a previous Dynaform. Add a hidden field which is associated with a variable set by the previous Dynaform. Then, add JavaScript code which will read the value in that hidden field to determine what content should be added to the panel.

For example, a panel with the ID "instructions" should contain instructions for the user, depending on whether the user selected "cash" or "credit" in the "paymentMethod" variable. Add a hidden field associated with the "paymentMethod" variable. Then, add the following JavaScript to the Dynaform:

var payment = $("#paymentMethod").getValue();
if (payment == 'cash') {
  $("#instructions").find("div.panel-body").html('<p>Verify cash amount was paid in full.</p>');
}
else if (payment == 'credit') {
  $("#instructions").find("div.panel-body").html('<p>Call bank to verify loan details.</p>');
}
else {  
  $("#instructions").find("div.panel-body").html('<p><font color=red>Unknown payment method.>/font></p>');
}

Inserting a horizontal rule in a Dynaform

Panels have their own spacing and formatting issues. The border property of a panel can be set to 0px, which mostly eliminates the border, but there is a still a faint grey line underneath the panel. The easiest solution to use JavaScript instead of a panel to insert a block of HTML code into a Dynaform.

For example, to insert a green horizontal rule <hr>, the following JavaScript can be added to the Dynaform:

$("#fieldID").closest("div.row").after('<hr style="background-color:green; height:1px; width:90%; margin-top:0px">');

Where fieldID is the ID of a field after which the <hr> will be inserted. jQuery's .after() function is used to insert the HTML code after the div holding a row in the Dynaform. The .before() function can be used to insert before a field's row.