Contents x
      Add Product UI Layouts
      • 11 May 2023
      • 4 Minutes to read
      • Contributors
      • Print
      • Dark
        Light
      Contents

      Add Product UI Layouts

      • Updated on 11 May 2023
      • 4 Minutes to read
      • Contributors
      • Print
      • Dark
        Light
      Article Summary

      Mobileforce CPQ allows you to create a layout for products that your organization wants to be customizable by sellers.

      Products that are customizable are referred to as** Configurable Products**. In order to enable a seller to customize such products, there often needs to be a user interface which the seller uses to select customization (or configuration) options for the product. Such a user interface is created using a "Product UI Layout" that lets the seller select the components needed to customize or configure the product.

      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 Product UI Layout

      For convenience, Mobileforce has built-in Export, Import and Copy functions so all Product 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 Product UI Layout

      Click the Product UI Layouts link from the CPQ Admin page. Then, from the Product UI Layout page, click Create.

      image.png

      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.

      image.png

      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.

      image.png

      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.

      Putting it all together: An example Product UI Layout

      Was this article helpful?
      What's Next
      Take your Sales & Service Ops to the NEXT LEVEL.
      Software
      Solutions
      Company
      Connect With Us
      Sales and Support
      Copyright © Mobileforce Software, Inc. All Rights Reserved