Add Product UI Layouts
- 20 Mar 2023
- 4 Minutes to read
-
Contributors
-
Print
-
DarkLight
Add Product UI Layouts
- Updated on 20 Mar 2023
- 4 Minutes to read
-
Contributors
-
Print
-
DarkLight
Mobileforce CPQ allows you to create a layout for products that your organization wants to be customizable by sellers.
Example:
If your company sells laptops with multiple configurations (different graphics cards, memory, hard drive size, etc.), you can create a product layout that incorporates each of those options, so your sellers can easily select those options when adding that product to a quote.
Product or Service items that are of type Configurable must have an associated Product UI Layout. A Product UI Layout is very similar to a Quote UI Layout and share the same underlying Form Configurator Specification and Engine.
Mobileforce provides a basic Product UI Layout that sellers can use when Mobileforce is installed. However, admin users will typically edit the sample layout to suit their business needs and desired proposal workflow for their business. Additionally, admins can choose to create their own layouts from scratch.
Note:
Mobileforce recommends that you make copies of any sample layouts before you editing them, so you have valid layouts for managing products.
Designing your layout
For convenience, Mobileforce has built-in Export, Import and Copy functions so all UI Layouts can be easily created, copied, and modified fast. Mobileforce also provides a Graphical UI Layout Builder for ease of use in constructing customized UI Layouts and previewing them. These UI Layouts are specified in a familiar XML specification that can even be modified by hand in your editor of choice by first exporting them out of the CPQ System and later importing the modified versions.
Layouts are essentially a HTML Form-type responsive layout specified using a combination of Tabs, Sections and Input Elements of various types, each with its own unique name. Input Elements are roughly modeled after HTML form inputs but with more extensive set of types supported. These input names that are automatically rendered by the system for the end-user are then made available by the CPQ System to be used in Product and Pricing Rule Expressions and also in Quote and Contract Document Templates.
Creating a new layout
Click the Product UI Layouts link from the CPQ Admin page. Then, from the Product UI Layout page, click Create.
Note:
You can export the sample layouts to your local system before they are modified to ensure that you have the original version or to directly edit them using an XML editor. For more information, see Import and Export Layout Files.
Enter the name for the new layout, and click Create to specify the layout template:
- Blank: Select to create a product layout from a blank template.
- Nested Sub-Products: Select to create a product layout that can contain nested products or line items.
Mobileforce CPQ creates a sample based on the selected template and adds it to the Product UI Layout page, which you can then edit.
Editing Product UI Layouts
To edit a layout, from the Product UI Layouts page, click Edit for the desired layout, where you can then modify it.
Note
Additionally, you can:
- Click Create Copy to copy an existing layout, and then click the Edit to modify it.
- Click Delete to delete an existing layout.
At any time you can do the following:
- Click Preview to view the layout in a new tab of your browser.
- Click Save to save any changes you have made to the layout.
The Quote and Proposal UI Layout page has the following tabs where you can modify the layout:
- General: Specify the standard options for the layout, such as the layout name, as well as specify whether the Save and Validate functions are displayed or enabled for sellers. For more information, see General tab - Product UI Layout.
- Types: Allows you to create their own customized data types, which extends the CPQ Systems built-in input field types. For more information, see Types tab - Product UI Layout.
- Form: Specify how the Product user interface is displayed for sellers, providing the complete specification for the user interface where you can add layout elements, such as tabs, sections, tables, and rows. For more information, see Form tab - Product UI Layout.
- Actions: Manage and modify the list of built-in and custom actions that can be performed by the Mobileforce CPQ system, which are all tied to specific events during the Proposal workflow. For more information, see Actions tab - Product UI Layout.
- XML: Allows you to directly edit the code used to create the user interface.This is recommended only for admins who are proficient in modifying the existing XML code based on constructs that represent the Proposal/Quote UI Elements. For more information, see XML tab - Product UI Layout.
Restrictions on Product UI Layouts
Form expressions in UI layouts can only read fields in the UI Layout.
Product UI layout form expressions are limited to only read fields in that specific UI layout.
Internally, the UI layout form expressions read the field values by reading the associated HTML inputs in the form. So if the field isn’t rendered in the form, the form expressions cannot read them..
For product UI layout, product form expressions, either client side (UI layout) or server side (product rules) cannot read fields in their enclosing quote. For UI layout form expressions, they can’t read them because the quote’s fields is not in the product’s form. For rules, the variable environment is restricted to just the product.
Was this article helpful?
