In part 1 of this blog series, I have discussed and highlighted some tips and tricks of using layout controls in a web form. In my part 2 blog, I will reveal some tips and tricks on using the input controls in a web form.
Text Input and Text Area Fields Controls
Text Input is a very common control used in the task form. It is recommended you set the min/max length for text input based on your data object schema element so that the appropriate validation message will be displayed if the data doesn’t meet the required length.
For a text area, you will need to set the number of rows if you want to allow users to enter multiple lines in the control, the total length allow in the text area will be controlled by the “Max Length” property regardless of how many rows you set in the “Rows” property.
Set the max length per your data object schema definition, by default it is 0 (unlimited).
Adjust the size of the control using the Width property in the styling section to ensure no wasted space.
Select Control lets you add a drop-down list to your form. You can add a static drop-down list or dynamic drop-down list. You will have 2 options for a dynamic drop-down list, using data definition or a REST connector.
You can also allow users to select multiple values in the select control if you enable “Multiple” in the property, however, you will need to ensure the control is bind to a list/array data type.
If you are using data definition to populate your drop-down list, you will need to make sure your data definition is an array/list type elements.
If you are using the REST connector, you will need to ensure the REST service response field names are to begin in lower case. This is due to the limitation in the current PCS version that the response in the REST call will be mapped to the data object element names that also begin in lower case.
Checklist, Checkbox and Radio Button Controls
Checkbox: Only have true or false value, when it is checked, the value will be true; false when it is unchecked. The data will be bind to a Boolean type.
CheckList: Allow multiple values, you can define your own key and value pair. The source of the data can be from a REST connector, the data definition or static values can be defined by you. The data will be bind to an array type.
Radio button: Similar to CheckList Control, but it only allows the user to select one option at a time. The data will be bind to a String type.
The checklist and radio control options can be displayed horizontally or vertically, by default it is displayed vertically, check the “Inline” property to display horizontally.
The option values for the checklist and radio must be unique, this also applies to the source data in payload and REST Connector.
Number and Money Controls
Number and money controls work almost the same way, both controls bind to the number data type. The main differences are:
Money control: The value will be formatted based on the currency setting, and the value is rounded to 2 decimal places.
Number control: The value will be rounded to 3 decimal places.
Both controls follow the basic rounding rules for the decimal places. Using money control as an example, if the user entered a number with 3 decimal places and the 3rd decimal point is less than five (0, 1, 2, 3, or 4), we leave the 2nd digit after the decimal place alone, any digits after that number will be dropped. If the 3rd decimal point user entered is greater than or equal to five (5, 6, 7, 8, or 9), we then increase the value of the 2nd digit by one, any remaining digits after the 2nd decimal point are dropped.
Date, Time and Date Time Controls
These 3 controls bind to different data types.
Date Control: Bind to the date data type.
Date Time Control: Bind to Date Time data type.
Time Control: Bind to Time data type.
Remember to set the desired date and time format.
If you want to set the default value to the current date, time or date and time, you will need to use an ”On Load” event.
When you render the form with data from a data object, make sure and check that you are using the correct control with the same data type.
URL and Link Controls
Link control allows users to add a hyperlink on the form when users click on the link, the web page will be opened either in a new tab or current tab. URL is just like an input text, but it validates the value entered by the user whether it is a correct URL format.
Email and Phone Controls
Email control will validate the email format. The error will be shown on the form when the user enters an incorrect email format. The Phone control only supports 2 formats, US and international. Read the PCS Documentation for more details on the properties:
If you choose to use the international format for the phone control, you will need to prompt the user to enter the correct international format. The user needs to add the '+' prefix and the country code in front of the number, for example, +14155552671. You can use the “Placeholder” property to guide the users on the acceptable format or use “Hint” property to display a usage guide when the user selects the control.
Message control is used to display an informative message to the user, it can be used to display alert or instruction when the user enters data into the form. The message control allows users to set the style using standard HTML style e.g. heading, paragraph, etc. Message control cannot accept HTML or CSS tag.
You can use the event to display summary information when the user changes the value of other control.
Image and Video Controls
Image and video controls allow you to add an external URL to the resource. You will not be able to upload the image or video to PCS. The image and video source must be hosted in another environment.
For Image control, you will need to provide an absolute or relative web address to the image.
Video control supports YouTube or Vimeo video embedded URL address.
The Image URL cannot be a secured link that requires authentication.
Disable automatic column size in the styling tab and use the device layout column size to adjust the size of the image.
Table and Repeatable Section Controls
Table and repeatable sections are bind to the array data type. Both have similar control properties. Table control only provides the table structure just like the <table></table> in HTML, you will need to add other controls like input text, select, button, etc. to the column for it to function as per your requirement.
By default, the “Users can Add/Remove Rows” property is unchecked for table and repeatable section controls, if you want to allow users to add or remove rows, you will need to make sure it is checked.
Add layout controls in the repeatable section controls to layout your control property.
If you have a large number of rows in a repeatable section, it is recommended that you add a section control with lazy loading enabled.