Enhance Power Pages forms functionality with jQuery methods

Dustin Miner

This post provides examples of how Power Pages functionality can be improved with jQuery methods

Example – a choice control (Data type = Choice)

This example discusses applying jQuery methods to the ‘Portal User?’ control in Figure 1. The control being a Dataverse column defined as follows:

  • Data Type = Choice, synced with a global choice which contains the values No = 0, Yes = 1
  • Component (Nothing was selected)
Figure 1 – a multistep form

The following code snippet shows jQuery method ‘closest’ which traverses the DOM. It also shows the jQuery methods ‘hide’ & ‘show’ which (unsurprisingly) hide and show the control on the form

$("#cpl_portaluser").closest("td").hide();
$("#cpl_portaluser").closest("td").show();

The following code snippet specifies if the control is visible on the form

$("#cpl_portaluser").is(":visible");

The following code snippet gets and sets the form’s label. It retrieves the value “Portal User?”

$("#cpl_portaluser_label.field-label").text();
$("#cpl_portaluser").closest('td').find('label').text('Portal User?');

The following code snippet adds a line break to the label

$("#cpl_portaluser").closest('td').find('label').html('Portal<br>User?');

The following code snippet gets (line 1) and sets (line 2) the control’s value. (Note: the value of ‘1’ would normally be defined as an enum as placed in a web file.)

$("#cpl_portaluser").val();
$("#cpl_portaluser").val('1');

Example – a choice control (Data type = Yes/no)

This example discusses applying jQuery methods to the ‘Person Not In List’ control in Figure 2. The control being a Dataverse column defined as follows:

  • Data Type = Yes/no, with a local choice which contains the values No = 0, Yes = 1
  • Component = Yes/No (default), rendered as a Checkbox
Figure 2 – a multistep form

The following code snippet gets (line 1 & 2) and sets (line 2) the control’s value.

$("#cpl_personnotinlist").prop("checked");
$("#cpl_personnotinlist").is(":checked");
$("#cpl_personnotinlist").prop("checked", true);

Example – a subgrid control

This example discusses applying jQuery methods to the ‘Premises’ subgrid in Figure 3. The subgrid being part of a multistep form

Note:

  • sub_ApplicationPremises is the name of the subgrid
  • cpl_applicationpremises is the logical name for the entity
Figure 3 – a multistep form

The following code snippet executes when the ‘Next’ button is pressed (Figure 3). This is part of page validation and performs as follows:

  • Line 1 checks if there is at least one record in the Premises subgrid (Figure 3). If there isn’t, then validation fails
  • If the Premises subgrid contains one or more records, it checks each record to determine if one or more records has the value ‘Contains List Of Services’ equals ‘No’ (line 11). If found, the validation fails

To achieve this functionality, it leverages the jQuery methods ‘find’, ‘each’, ‘attr’ & ‘text’

if ($("tr").find("[data-entity='cpl_applicationpremises']").length === 0) {
    return false;
} else {
    var found = false;
    newValidator.errormessage = `<a href='#${logicalName}' referencecontrolid='${logicalName}' onclick='javascript:scrollToAndFocus(\"${logicalName}\",\" ${logicalName} \");return false;'>Add a service offered at the premises</a>`;
    $('tr[data-entity="cpl_applicationpremises"]').each(function () {
        $(this).find('td[data-value]').each(function () {
            if ($(this).attr('data-attribute') === 'cpl_containslistofservices') {
                let dataValue = $(this).attr('data-value');
                let parsedValue = JSON.parse(dataValue);
                if ((parsedValue.Value == ContainsListOfServices.NO)) {
                    console.info("Match found:", $(this).text());
                    found = true;
                    return false;
                }
            }
        });
        if (found) return false;
    });
    return !found;
}

Further Reading

For the syntax to get and set Dataverse lookup columns in Power pages Get and set a dataverse lookup column

Customise power pages form fields with the following in mind

References

https://www.w3schools.com/jquery/

Post Views: 72

Related Posts