Form tab - Quote UI Layout

The Form tab of the Quote UI Layout page, allows admins to specify how the Quote user interface is displayed and rendered for Mobileforce CPQ users, providing the complete specification for the user interface where you can add layout elements, such as tabs, sections, tables and rows.. The page is divided into two panes:

• The left pane is a tree-like structure listing the tabs, sections and inputs for the layout. This pane supports drag-and-drop functionality, allowing you to reorder tabs, sections, and input fields.
• The right pane provides a preview of the entire form, in three form factors: Phone, Tablet, or Computer. Additionally, click the Details button to view the information regarding the selected object in the left panel.

Form objects

The following section list and describes the objects that you can create from the Form editor, as well as the available objects that can be created, inside the object, when it is selected.

Tab objects

Clicking Add Tab creates a new Tab object. Tabs are designed to reflect the highest workflow action in the user interface. Admins should organize tabs with the following best practices in mind:

• Each tab should represent a high-level action of your proposal/quote workflow (for example, Approving Quotes).
• Admins should organize tabs from left to right to represent the beginning to end processing of proposals within the workflow.
• The content of each tab is organized into sections and tables.
  • Sections groups inputs (actions) within a specific heading that typically represent a sub-section of your workflow (for example, viewing Approval History)
  • Tables groups inputs (actions) and data into tabular format (for example, Line Items or Approval History) to better organize data for sellers.

When a tab is selected, you can add the following child objects: Sections, Tables, Rows.

Section objects

Clicking Add Section creates a new Section object within the selected tab, or as a subsection within the selected section. Sections are designed to group inputs and tables, typically a sub-section of your workflow, within the specified tab.

When a section is selected, you can add the following child objects: Sections, Tables, Rows.

Table objects

Clicking Add Table creates a new Table object within the selected tab or section. Admins should create a table in order to display inputs in either a column or tabular format. When you create a Table object, Mobileforce automatically adds a child Row object, as well as a child Column object inside the Row, to the table.

When a table is selected, you can add the following child objects: Rows.

Row objects

Clicking Add Row creates a new Row object within the selected tab, section, or table. Even if you want to create a single input field for a tab, it must include a single Row and Column object.

Rows allow you to specify individual vertical inputs for the associated tab, section or table. When you or Mobileforce creates a Row object, Mobileforce automatically adds a child Column object to the row.

If the Row object is the child of the table object, you can select whether it is a Header, Body, Footer, Spacer, or Template row. from the Details tab.

When a row is selected, you can add the following child objects: Columns.

Column objects

Clicking Add Column creates an additional column to your table or section. Columns allow you to specify individual horizontal inputs for the associated row.

When the child object is the child of a row object, each column represents the category used to organize data or inputs in the table.

When a column is selected, you can add the following child objects: Inputs.

Adding inputs

When you click Add Input a pop-up window displays allowing you to specify the details of the input.

When finished, click Add to add the input to the parent Column object. You can then update the inputs from the Details tab.

Click Save when you are finished updating the input.

Most Input fields also have additional sections in addition to Core and UI sections:

• Access Control:: in this section, you can specify the visibility (show, hide, conditional), editability (editable, read-only, conditional), whether the field is lockable (yes, no), and whether the field is disabled (enable, disable, conditional).

• Validation: This section spefies various validation checks that can be peformed on data in the fields. This includes whether the field is "required" or not, and in case the field is a text field, its length, and allowed case (upper/lower). Even more powerful, is the "custom validation" that is performed by Mobileforce using the powerful form expression language. Please note that data is validated in a field only if the field is editable. Hidden, disabled, or readonly input fields are not validated.

• Actions: This section specifies what action to take in case the input is a "change" action, or an "input" action.

The following screenshot shows the remaining sections in the input field details.

Managing objects

From the Form page, you can do the following:

• To edit an object, click to select it in the left pane, its details are displayed in the right. Edit the desired fields and click Save.
• To delete an object, click to highlight it in the left pane, and click Delete.
• To reorder an object, click to select it in the left pane and drag it to the desired location, If the desired location is invalid, a red X is displayed next to your cursor.