Form tab - Quote UI Layout

Updated on Jun 1, 2023
Published on Jul 1, 2022
8 minute(s) read

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.

Example:

A company wants to add a Managed Service option to the Line Items table where the seller can specify whether the client is a Standard Client or an Enterprise Client.

The Mobileforce CPQ admin must create two column objects, one for Header Row #1 and one for Template Row #2 that also has an input object.

Form objects

The following section lists 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 group inputs (actions) within a specific heading that typically represent a sub-section of your workflow (for example, viewing Approval History).
- Tables group 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.

Example:

The Mobileforce CPQ Admin creates a column object in Header Row #1 with the label of Managed Service. By default, the object is placed as the last column in the row. Then the Admin moves the row to the applicable position, as Col #4.

The Admin creates a second column object in Template Row #2 with no label and moves the row to Col #4 to match the Client Type column in the header 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.

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

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.

Example:

The Mobileforce CPQ Admin creates an input for the Col #5 column object in Template Row #2. The Type is changed to Pick List, and two items are added to the Value List Items section: Standard and Enterprise.

Most Input fields 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 specifies various validation checks that can be performed on data in the fields. This includes whether the field is "required" or not, and in the case the field is a text field, its length and allowed case (upper/lower). Additionally, there is also "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.

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.

An example: Adding a column in the Line Items Table

This example shows you how you can modify the Line Items Table by adding a column. Since a column is being added, all entries (rows) in the line items table would include values for this column.

The new column provides a user input in the Quote UI Layout that the seller can use to select the appropriate tagged price for a product.

Every time a seller adds an entry to the Line Items table, they will need to specify a value for this column. We can configure this column to take a default value to make it easier for the seller: they only have to provide a value for this column, if it's not the default value.

Let us first provide meaning for this new column. If you recall, we described tagged price book entries for products, and then we defined a Pricing Rule in Quote Template to select the tagged price book entry. We now use this new column in the Quote UI Layout to let the seller select the tag.

A new "drop down" selection field called "managed_service_option" is added to the line items table. The seller can then use this dropdown to decide which Managed Service Product/Pricing option (Standard or Enterprise) to include in the quote, and the price will appropriately change.

Note:

Changing the Line Items table layout in the Quote UI Layout to add a column for "Managed Service" would affect all products that are added to the line items table.

An example: Adding a Drop-Down input in the Quote Section

A better approach than the previous example is to include the "Managed Service" selection as a drop down in the quote section and not inside the Line Items table. Doing this would simplify the addition of products to the Line Items table. This is achieved by adding a "Managed Service" drop down to the Quote Info section as follows:

With this addition, a new quote would have the Managed Service Selection on a one-time basis, in the Quote Info section, rather than having to select it each time a product is added to the line items table.