Form tab - Quote UI Layout
  • 20 Mar 2023
  • 5 Minutes to read
  • Contributors
  • Dark
    Light

Form tab - Quote UI Layout

  • Dark
    Light

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.

image.png

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.

Example:

When a Section is selected, as the Info section is in the screenshot above, the Add Tab, Add Section, Add Table, and Add Row buttons are displayed.

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.

Example:

If you are creating a line item table, representing the items being purchased in the quote, you would create a Header row with the labels for each column. Additionally you would create a Body row that would represent each item being purchased in the quote.

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.

Example:

If you are creating a line item table, the columns would represent the inputs that you want displayed from the products selected from the price book, and the inputs you want the sellers to specify. For example, Product Code, Description, Quantity, Discount, etc.

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

Note:

Inputs are the lowest object you can create.

Adding inputs

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

image.png

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

image.png

Notes:
  • The fields on the Details pane are unique to the Input type you selected. So, a Text input (as displayed in the above screenshot), would have different fields from a Checkbox input.
  • When entering an Name for the Input, ensure that the name does not include the prefix "cpq_", as this is reserved for pre-defined inputs created by Mobileforce.

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.

Input Field Details of Form Tab.

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.

Was this article helpful?