Add Quote UI Layouts

Updated

Updated on Mar 20, 2023
Published on Jul 1, 2022
4 minute(s) read
TL
MS
RS

In Mobileforce CPQ, Quote UI Layouts are the user interface components that are designed to guide the end-user through the Proposal creation workflow as quickly and efficiently as possible.

Mobileforce provides a basic Quote 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 editing them, so you have valid layouts for creating proposals.

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 a 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 Quote UI Layouts link from the CPQ Admin page. Then, from the Quote 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 specify the layout template:

Minimal: Select if you are creating a layout you do not want to integrate with a HubSpot or SugarCRM.
HubSpot Select if you are creating a layout to integrate with your HubSpot CRM.
Sugar CRM Select if you are creating a layout to integrate with your SugarCRM.

Mobileforce CPQ creates a sample based on the selected template and adds it to the Quote UI Layout page, which you can then edit.

Editing Quote UI Layouts

To edit a layout, from the Quote 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, Validate, and Close/Reopen functions are displayed or enabled for sellers. For more information, see General tab - Quote 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 - Quote UI Layout.
Form: Specify how the Proposal user interface is displayed for sellers and approvers, 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 - Quote 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 - Quote UI Layout
Summary: Choose the input variables to show as columns from the Proposals/Quotes page. For more information, see Summary tab - Quote 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 - Quote UI Layout

Restrictions on Quote UI Layouts

Form expressions in UI layouts can only read fields in the UI Layout.

Product UI layouts as well as Quote UI Layout form expressions are limited to only read fields in the 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 quote UI layout form expressions, a product field can be read IF it is declared in the line-item table of the quote, although this only works for top-level product fields. You cannot read fields from grand-child products from the quote, (i.e., products nested within products.) 3. Quote rules can read all top-level product fields.