In this blog series, I will be discussing some useful tips and tricks that will be helpful to you when you are designing your form using the new PCS web form controls and events.
In one of my colleague’s blog, he has highlighted some of the features available in PCS web form. In PCS official documentation, it described how to configure the controls. In this blog, I will highlight some tips and tricks when you are designing the form. There will be 3 parts in this blog series:
- PCS Web Form Control Tips and Tricks – Part 1 (Layout Controls and General Tips and Tricks)
- PCS Web Form Control Tips and Tricks – Part 2 (Input Controls)
- PCS Web Form Control Tips and Tricks – Part 3 (Events, Actions and Functions)
General Tips and Tricks
- Before you start designing your form, I would strongly recommend you work with business users to define the requirement like form styles for different devices, form rules/events, data definition/business objects, and identify all integration requirement in the web form.
- Document your web form design and events.
- PCS Web Form allows you to drag existing business object to create a web form. However, it will create a standard layout that might not meet your requirement and you might end up spending more time rearranging the controls that PCS Form created for you. In this scenario, you have an option to create our own form data definition using the business object and bind the controls to the data definition manually.
- In PCS, the main form can contain 1 or more sub form. However, you will not be able to access the data definition in the sub form using event in the main form. If you have a requirement that you need to access the sub form data definition, you will need to detach the sub form in the main form.
- Currently, there is no function to copy the web form from one PCS process to another. You will need to manually export, copy the form definition files and then import the process back into PCS. The steps are listed below:
- Export the PCS Process with the web forms.
- Locate the form definition files in the following folder and copy the files to a temporary location.
- <name of the form>.xsd – SOA\forms\schemas
- <name of the form>.bom — SOA\businessCatalog\OracleWebForms
- <form id>.frm — SOA\forms\Definitions. You can use the name field in the definition file to make sure you locate the correct definition file for the form.
Another way to locate the form definition files is to use the form designer. When you publish the form changes, the composer will display the modified form files to be published.
- Copy the form definition files to the new PCS process (*.exp) to the same folders as above. You can perform this operation using any compression tools.
- Import the updated PCS process export file into PCS.
- It will be difficult to view all the controls in the form designer panel if you have too many controls on the form. To overcome this limitation, you will need to use the browser zoom in/out function to maximize your viewable design area.
Layout Controls – Tabs, Panels and Sections
Before you dive into the input controls like text input, checkbox, select etc., I would recommend that you take some time to learn and thoroughly understand some of the layout control that you can use to arrange your input controls on your web form.
When designing a more responsive and useable form for users when they open a task, you can make use of tabs, panels and sections to group multiple controls. It is also more intuitive for users to know that the control/content are divided in an organized way, so users can easily access the content that they are interested in rather than having all in one web form page.
You will need to understand how the controls are being organized when you drag a control onto a form. By default, the column size in a row is calculated based on the amount of visible controls on it. The row is based on a 12 columns grid system, so for example if the row has 4 controls, each will use 3 columns. When more than 12 controls are added to a row, the remaining controls will be displayed below. On mobile, each control is displayed in one row (when using the automatic calculated size).
You also have an option to uncheck the automatic column calculation, so that you can specify a column size for each media size. If there are still controls that have automatic column span, its size will be calculated using the remaining space. (12 – total amount of manual sizes). If the remaining space is 0, each control will have a column span of 1.
From PCS 16.4.5 onward, tabs and sections will have a lazy loading capability. It will allow the form to render while the control in the tabs and sections are still loading. This feature will speed up the task form loading time as the user will not have to wait for the entire form to load.
Both tabs and sections have a property called Lazy Loading. For sections, if you enable lazy loading, the expanded checkbox will be unchecked automatically, this is because the sections will be rendered when user click the section label to expand the section,
Tips:
- It is recommended that you do not put too many controls in a section or tab, if you have too many controls in a section, I would recommend that you enable the lazy loading feature.
- If the lazy loading feature is enabled, any control validation errors in the collapsed section will not be displayed until the user expand the section. When the user encounters any validation error, you will need to ask the user to expand the section to fix the error.
Tab control
You can organize your tab by dragging the tab to the order that you want, but when the screen has load, the first tab that display on the screen will depend on the setting of a “Selected Tab” property.
Tips:
- If you are to add, delete and organize the order of the tab, you will need to check your “Selected Tab” setting to ensure it is the tab you want to display when users open the task.
- Tab has lazy loading capability, so if you want the tab to be displayed when the task form load, do not enable the lazy loading for the first tab, and do not put too many controls on the first tab.
Panel Control
A panel control can be used to group different controls. By default, it will display the controls vertically, but you can change the way it is displayed by using the layout properties. If you are to change the layout to “Horizontal”, the controls you drop in the panel will be aligned horizontally.
Tips:
- Remember to set the desired layout setting (Vertical or Horizontal) before you add any controls in a panel.
- You can add a panel in a panel to organize your control.
- You can add a panel to a column in a table control.
Section Control
Sections allow you to group your controls on a page. It is recommended you set a meaningful label/title on the section, so that users can easily identify the sections that they are interested in. You can set a static section label, or use the event to change the label. Further discussion on the event will be covered in my later blog.
Tips:
- When the page rendering become slow because you have too many controls in a section, I would recommend that you enable the lazy loading on that section.
- You can use event to expand a section automatically, for example when user click on a tab.
- Use meaningful section label. You can bind the label to a data definition element or use an event to change the label of the section control.
All content listed on this page is the property of Oracle Corp. Redistribution not allowed without written permission