Customise Power Pages form fields

Dustin Miner

This post highlights key considerations when customising basic and multistep form fields in Power Pages

Visibility of a form field (Dataverse column)

Issue: Hiding a Dataverse column directly in Dataverse likely prevents it from appearing in the form’s DOM

Solution: Instead of relying on Dataverse settings, dynamically control form field visibility using jQuery within the form’s custom JavaScript

Presentation of a form field

Issue: The label of a form field appears in bold, however it should display with normal weight

Solution: Add a custom CSS rule for that particular form field. E.g.

label#cpl_portaluser_label { font-weight: normal; }

This ensures the label is rendered without bold styling

Read-only form field

Issue: When certain Dataverse form fields are set to read-only either via Dataverse or jQuery, any value populated via JavaScript may not be saved on form submission. This occurs because the browser treats the field as non-editable, assuming user input was never intended

Solution: For Dataverse columns with a Choice or Currency data type, use CSS to visually disable the field while ensuring JavaScript populated values persist

//in a CSS file
#cpl_portaluser {
    pointer-events: none;
    background-color: #f0f0f0;
    opacity: 0.6;
}


//or in a JavaScript file
$("#cpl_portaluser").css({
    pointer-events: none,
    background-color: #f0f0f0,
    opacity: 0.6
});

For Dataverse columns Date and time (i.e. today’s date) and Contact (i.e. the current portal user) data types, the following can be applied

  • Set the columns to read-only in Dataverse
  • Use Multistep Form Metadata for the two attributes to predefine values and ensure correct handling on save

For Dataverse columns with a Single line of text data type, apply the following jQuery to mark the field as readonly whilst keeping its value editable via JavaScript. Note: setting to “disabled” means the control isn’t highlighted when it’s clicked on (which is desired) however the value isn’t saved to Dataverse. The value isn’t saved to Dataverse because the browser assumes there is nothing to save since the user can’t enter data

$("#cpl_portaluser").prop("readonly", true);

Validation of conditionally mandatory form field

Issue: A Dataverse column that needs to be conditionally mandatory cannot be set as required directly within Dataverse

Solution: Implement page validation to enforce conditional mandatory rules

Static text stored in a form field

Issue: Read-only static text needs to be displayed on a multistep form. Below are two possible solutions

Solution 1: add multistep form metadata type = Attribute

  • Create a metadata entry for this form field
    • Metadata type = Attribute
    • Select the form field where the text should appear
    • Add Description: Yes
    • Position: ‘Above the field’, ‘Below the field’ or ‘Above the label’
    • Description: Enter the static text to be displayed

Solution 2: Use a Dataverse column

  • Create a Dataverse column to store the text:
  • In the form’s custom JavaScript, assign the desired static text to this column.

Regular expression applied to a form field

Issue: A post code field requires validation to ensure only valid entries are accepted

Solution: add multistep form metadata type = Attribute

  • Select the form field where the regex expression needs to be applied to
  • Create a metadata entry for this form field
    • Metadata type = Attribute
    • Add the regex expression. For example, the following regular expression ensures the post code is valid
^(0[289][0-9]{2}[1-9][0-9]{3})$

Change event generated by a form field

Issue: Custom logic needs to be triggered when either of the following are controls are updated on the form

  • a Dataverse choices form field
  • a Dataverse subgrid

Solution: Implement two mutation observers to detect changes in each control and execute the required logic accordingly

Note:

Regarding the Dataverse choices form field, a couple of applications of using an using an observer could be:

  • to hide certain choices from the user
  • to trigger an event handler when a certain choice is selected by the user

Regarding the Dataverse subgrid, an application could be:

  • to trigger an event handler when a record is added to the subgrid

Further Reading

Enhance power pages forms functionality with jquery methods

References

to do

Post Views: 83

Related Posts