In part 1 of this blog series, I have discussed and highlighted some tips and tricks of using layout controls in web form. In my part 2 blog, I will reveal some tips and tricks on using the input controls in web form.
Text Input and Text Area Fields Controls
Text Input is a very common control used in 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 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.
Tips:
- 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
Select control let you add 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 dynamic drop down list, using data definition or a REST connector.
You can also allow users to select multiple value 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.
Tips:
- 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 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 current PCS version that the response in 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 allow user to select one option at a time. The data will be bind to a String type.
Tips:
- 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 apply 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.
Tips:
- Currently the money control only support 5 currency sign. Use USD if you require “$” sign.
- Both controls follow the basic rounding rules for the decimal places. Using money control as an example, if 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 type.
- Date Control: Bind to date data type.
- Date Time Control: Bind to Date Time data type.
- Time Control: Bind to Time data type.
Tips:
- Remember to set the desire data and time format.
- If you want to set the default value to 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.
Tips:
- Currently the default value for URL control cannot accept the URL with more than 2 levels deep, e.g. it will have validation error when you enter: http://www.mycompany.com/level1/level2/level3, it will accept http://www.mycompany.com/level1/level2, this is the limitation in the current version of PCS.
Email and Phone Controls
The Email control will validate the email format. Error will be shown on the form when user enter an incorrect email format. The Phone control only support 2 format, US and international. Read the PCS Documentation for more details on the properties:
Tips:
- 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. User need 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 user select the control.
Message Control
Message control is used to display informative message to the user, it can be used to display alert or instruction when user enter 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.
Tips:
- You can use event to display summary information when user change the value of other control.
Image and Video Controls
Image and video controls allow you to add 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.
Tips:
- 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 require 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 section 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.
Tips:
- Table control also allows you to add layout type control like panel. With combination of panel or other basic controls like input text, you can have multiple controls in one column. For example, I can add a panel in a column with horizontal layout, and add an input text and a button in the panel.
- 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 large number of rows in a repeatable section, it is recommended that you add a section control with lazy loading enabled.
All content listed on this page is the property of Oracle Corp. Redistribution not allowed without written permission