Form tab - Product UI Layout

• Updated on Jun 1, 2023
• Published on Jul 5, 2022
• 4 minute(s) read
• MS
• RS

The Form tab of the Product UI Layout page allows admins to specify how the custom product user interface is displayed and rendered for Mobileforce CPQ sellers. 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 Product Configuration user interface, 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 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 for configuring the custom options for the product. Admins should organize tabs with the following best practices in mind:

• Each tab should represent a high-level action of your product options (for example, Laptop Configuration).
• Admins should organize tabs from left to right to represent the beginning to end configuration of the product.
• 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, selecting Graphics Card).
  • Tables group inputs (actions) and data into tabular format to better organize data for sellers.

Example:

A hardware company is selling a server that they build and configure for their customers, so they want to create a layout for their sellers to select the applicable product options as well as warranty options.

The Mobileforce CPQ admin creates two tab objects, Product and Support & Warranty to organize the selectable options.

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 on a tab, typically a sub-section of the workflow for configuring the custom options for the product.

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

Example:

The Mobileforce CPQ admin for the hardware company creates three sections on the Product tab: General, Networking Add on, and Add Hard Drives.

Once these are created, the Admin can also create the associated rows, columns, and inputs for the section.

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 options being selected for the product, you would create a Header row with the labels for each column. Additionally, you would create a Body row that would represent each option being selected.

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 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.

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.