Titles and Subtitles

From pmusers
Jump to: navigation, search

The text in titles and subtitles in DynaForms can be set either through JavaScript or PHP in triggers.

Setting titles with PHP

If the text in a title or subtitle should be set based on a case variable set in a previous DynaForm or trigger, then first add a case variable to the title/subtitle's label property.

In this example, a Dynaform's title can be either "New Client Info" or "Edit Client Info", based on whether the client's record exists or not. The title's label property is set to the @@clientTitle variable.

Titles-clientInfoForm.png

Then, the following trigger is created to set the value in the @@clientTitle variable. If the variables @@clientFirstName and @@clientLastName are set, then the title will be set to "New Client Info", whereas if they are already set, then the title will change to "Edit Client Info":

if (empty(@@clientFirstName) and empty(@@clientLastName)) {
   @@clientTitle = 'New Client Info';
}
else {
   @@clientTitle = 'Edit Client Info';  
}

It is recommended to use the empty() function, because it both checks whether the variable is set and it isn't an empty string, zero or an empty array or object. In the above code example, empty(@@clientFirstName) is the same as isset(@@clientFirstName) && @@clientFirstName == ''.

Then, set this trigger to execute before the above Dynaform:

Titles-setTriggerToExecuteBeforeForm.png

When a Dynaform is displayed when running a case, the @@clientTitle variable will already be set when the Dynaform loads and that title will be displayed in the form:

Titles-titleSetInClientInfoForm.png

To test this example, download and import the process Titles-Dynamic_Titles-1.pmx (right click and select Save link as).

Setting titles with JavaScript

If the text in a title or subtitle needs to be set dynamically when the user is filling out the Dynaform, then JavaScript code can be used to dynamically change the text. If the text in the title/subtitle is based on a value entered into a field, then set an event handler for that field using control.setOnchange().

For example, in the following form, the text in the title whose ID is "clientContractTitle" will be set by the value selected by the user in the "Contract Type" dropdown box:

Titles-dynamicTitleFormInDesigner.png

The "Contract Type" dropdown has the following list of options:

Titles-optionsInContractTypeDropdown.png

The following JavaScript is added to the form which sets the title to "Client Salary" if the "salary" option is selected in the "Contract Type dropdown box. Otherwise, it set the title to "Client Contract".

//set the text in the title, based on the value of the "Contract Type" dropdown:
function setTitle(contractType, newVal) {
  if (contractType == 'salary') {
    $("#clientContractTitle").setValue("Client Salary");
  }
  else {
    $("#clientContractTitle").setValue("Client Contract");
  }
}

//execute when the value changes in the "Contract Type" dropdown
$("#contractType").setOnchange(setTitle);

//execute when the Dynaform loads:
setTitle( $("#contractType").getValue(), '' );

When a case is run, the Dynaform will dynamically change its title based on the value selected by the user in the "Contract Type" dropdown box:

Titles-dynamicTitleWhenFillingOutForm.png

To test this example, import the Dynaform Titles-ClientContract.json (right click and select Save link as).

Setting formatted text in titles/subtitles

The text in a title or subtitle can be set with the control.setValue() function:

$("#title-id").setValue("new text in title");

Unfortunately, setValue() automatically converts characters such as <, > and & into their HTML entities &lt;, &gt; and &amp;, so it is not possible to insert HTML code in a title/subtitle.

To get around this problem, use a jQuery selector to find the <span> which holds the text of the title/subtitle and then change it using the .html() function:

 
$("#myTitle").find("span").html('<font color="orange"><i>Hello</i></font> <a href="http://www.person-search.com">George Tatum</a>');