Difference between revisions of "Panels"

From pmusers
Jump to: navigation, search
 
(No difference)

Latest revision as of 01:55, 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 based on case variable

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>');
}

Dynamic panel based on Dynaform field

It is also possible to change the content of a panel based on the value entered by the user in a field in the same Dynaform.

For example, a Dynaform has a dropdown with the ID "howContact" which offers the options "phone_call", "email", "home_visit" or "sms". Depending on what the user selects will change the content in a panel with the ID "contactInstructions".

function setPanelContent(contactType, oldVal) {
  if (contactType == '' || contactType == 'phone_call') {
     $("#contactInstructions").hide(); //hide panel
  }
  else {
    //For all other options, show the panel:
    $("#contactInstructions").show();
 
    if (contactType == 'email' || contactType == 'sms') {
      $("#instructions").find("div.panel-body").html(
        '<p>Make sure that the recipient responds to verify that the email or SMS was received.</p>');
    }
    else if (contactType == 'home_visit') {
      $("#instructions").find("div.panel-body").html(
        "<p>Make sure to <i>call</i> before arriving at client's house so prepared to receive you.</p>");
    } 
  }
}
 
$("#howContact").setOnchange(setPanelContent);

//execute when Dynaform loads:
setPanelContent( $("#howContact").getValue(), "" );

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.

Display panel when a link or button is clicked

The following JavaScript displays an panel with the ID "productsList" when a link field with the ID "showProducts" is clicked:

You can use JavaScript code like this in your Dynaform:

//hide panel when the Dynaform loads:
$("productsList").hide();

//show panel with content when user clicks on link:
$("#showProducts").find("a").click( function() {
   $("#productsList").find("div.panel-body").html(
        '<table cellspacing="0" cellpadding="2" border="1"><tbody>\n'+
        '<tr><td><a href="http//acme.com/roadrunnerTrap.html">Roadrunner Trap</a></td></tr>\n'+
        '<tr><td><a href="http//acme.com/explodingBomb.html">Exploding Bomb</a></td></tr>\n'+
        '<tr><td><a href="http//acme.com/catapult.html">Catapult</a></td></tr>\n'+
        '</tbody></table>'
   );
   $("#productsList").show();
};

The same example can be used for a button instead of a link, by changing the code to:

$("#showProducts").find("button").click( function() {