Customise Power Pages form fields with the following in mind

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

$("#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 the 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: 48

Related Posts