Design Section Overview
Introduction
In the Design section, Product Managers have the ability to create various controls. This feature allows users to customize the appearance and functionality of their design by adding different types of controls. These controls can include buttons, text boxes, drop-down menus, sliders, check-boxes, and more. By incorporating these controls into their design, users can enhance the user experience and tailor the interface to meet their specific needs.
In this article:
Main Design Functions
When selecting Design, you can perform the following actions:
1. Properties – it lets you control the panel direction: up to down or left to right.
2. Wizard Configuration – it enhances form interactions with user-friendly navigation, guided completion, dynamic logic, post-purchase restrictions, custom billing settings, primary quantity handling, and backward compatibility. When you enable Enable Form Wizard with Panels, the following wizard styles will appear: Tabs, Numeric, and Slide.
3. Plan Settings – if you enable Display name in purchase flow, the offer name will be displayed during the new subscription flow. It will display details based on the current subscription context, such as the vendor subscription ID.
4. Enabled View Modes – it enables calculated prices in the default and in-line views.
5. In-Line View Mode Settings – this section is shown only when In-Line View mode is enabled. Enabling the Show initial price option allows immediate display of initial prices within the plan settings view. This addition should enable users to visualize the initial price of plans as part of the configuration process.
6. Language Selection – this option allows Product Managers to select available languages from the drop-down list. Pricing Plan List, General Pricing Plan Properties, Design Section and Toolbox Section will then be localized to the selected language.
7. Plan Wide Quantity Settings - Create a usage based pricing plan with an optional number field with default (and minimum) value of 0.
a. Configure primary quantity control
With this option plan must have a form element as number box as quantity
b. Plan doesn't have any quantity
With this option plan, plan wide quantity is set as empty (null)
c. Set default quantity value
Define default quantity and all plans would return that value as a quantity plan wide
Controls available in the Design section
1. Text - this control is useful for collecting contact information (such as names, phone numbers or email addresses).
Properties of the control:
1a. Label that can be renamed and displays a label visible to end users.
1b. Unique Key is an identifier that is used for provisioning purposes. Note that the checkbox below, called Required, defines if it is required for the customer to fill in this field.
1c. Default Value defines which value the customer will see at the start of the buying process. It is set to 1 by default.
1d. Is multiline defines if the customer can see a single line or multiple lines.
1e. Pattern type is a drop-down menu with options Custom, Email, and Phone. IT is enabled only when Is multiline is unchecked. It defines which validation type will be applied when Customer tries to fill control.
1f. Custom RegEx Pattern is enabled only when Is multiline is unchecked and Pattern type is equal to Custom. It defines which regex validation will be applied.
1g. Min Length is a number box (an optional field). It defines the minimum length of the customer's input.
1h. Max Length is a number box (an optional field). It defines the maximum length of the customer's input.
Each option has an arrow to move it up or down on the list. Clicking an arrow moves the option up or down by one position.
2. Link - The Link component allows users to add links to external resources or pages within the CPQ presenter form.
2.1. Action Button -This feature is designed to improve user interaction, simplify the data submission process, and provide immediate and clear feedback in case of errors.
When clicking the button, it collects and sends form values from controls in the same panel to the specified endpoint or route. The button efficiently handles API responses by displaying a tooltip with a validation message if the response is 400 or 500. After the first click, it will be disabled until a response is received.
2.1a. The label can be renamed and displays what the end-user sees.
2.1b. A unique Key is an identifier that is used for provisioning purposes.
2.1c. Action name - is a mandatory field, where you can specify the name of the action that the Action Button incurs.
2.1d. Dynamic Logic - You will be able to configure it on the "Dynamic logic" tab later.
The platform prevents configurations from being added to the cart when a validation failure occurs on the pricing plan. The system uses "IsValid" and "Invalid" flags to enable or disable the "Add to Cart" button, ensuring that only valid configurations are processed.
2.2 Text Area - The Text Area presenter module extends the functionality of the module and allows you to embed external content into the form.
2.2a Label can be renamed and displays a label visible to the end user.
2.2b Unique Key is an identifier that is used for provisioning purposes.
2.2c Default Value - a quantity that is the default during purchasing.
3. Number defines unit price and is a mandatory field.
Number - is used to collect some quantitative metrics from the customer. Example: the control "Quantity" can participate in the calculations so as to form a price of the form Quantity * 10 $. The control is used only inside the Quantity Price Table function.
3a. The label that can be renamed and displays a label visible to the end user.
3b. Unique Key is an identifier that is used for provisioning purposes.
3c. Use as Quantity - Use value from this number field as the "main" quantity users see for your offer
3d. Default Value - a quantity that is the default during purchasing
3e. Min Value / Max Value - quantity control restrictions, the Max Value cannot be more than 9 digits.
4. Checkbox - allows users to select or deselect specific options they want to include in their configured product.
5. Date - intended to add the date.
5a. The label that can be renamed and displays a label visible to the end user.
5b. Unique Key is an identifier that is used for provisioning purposes.
5c. Required indicates whether it is necessary for the customer to complete this field.
A default Value date box; is required; defines which value the Customer will see at the start of buying. Equals to today by default
5d. You will be able to configure it on the "Dynamic logic" tab later
6. Panel - control for design.
6a. The label that can be renamed and displays a label visible to the end user.
6b. Panel Direction - the direction of drawing (horizontal/vertical).
7. Radio - needed for cases when an offer needs to be configured with multiple selections which can influence the price. Example: control "Color" with options "Red", "Green", "Yellow"; does not affect the price. Control "Memory Size" with options "128 GB" and "256GB"; 128GB costs $ 10, 256GB costs $ 30 affect the price (this can be used for the Choice Price Table function).
↓
7a. The label that can be renamed. This field affects the label visible to the end user.
7b. Unique Key is an identifier that is used for provisioning purposes or when the pricing plan is updated. If rename a unique key when cloning a plan, this will be considered a new control.
7c. Click the checkbox based on the following options you will use: Use external values, Use external values with prices, Use as Billing Cycle
7d.Default Value defines which value the Customer will see at the start of buying. Equals to 1 by default.
7e. Radio group settings -Can choose item alignment: Vertical or Horizontal.
7f. Render as a boxed - By enabling this option, you can choose the box size, border color, and option to hide the circle.
7g. Items - Can increase the number of items and change the title names.
7h. You will be able to configure it on the "Dynamic logic" tab later.
8. Image - allows users to add images to the form, which could be used to illustrate products, demonstrate features, or provide visual cues to clients.
8a. The label that can be renamed. This field affects the label visible to the end user.
8b. Unique Key is an identifier that is used for provisioning purposes or when the pricing plan is updated. If rename a unique key when cloning a plan, this will be considered a new control.
8c. Select Image is used to choose the image that was already added in the Edit Offer view. You can also set the image size
8d. Dynamic logic - You will be able to configure it on the Dynamic logic tab later.
8.1 Icon - allows users to drag and drop icon packs into pricing plans, making the design more intuitive and visually appealing. Icons can be uploaded and integrated into forms, boosting usability and accessibility with full support for both mouse and keyboard interactions.
8.1a. The label that can be renamed. This field affects the label visible to the end user.
8.1b. Unique Key is an identifier that is used for provisioning purposes or when the pricing plan is updated. If rename a unique key when cloning a plan, this will be considered a new control.
8.1c. Select Icon includes search functionality and offers three size options: small (16x16), medium (32x32), and large (48x48) - with proportional scaling to fit various design needs.
8.1 d. Dynamic logic - You will be able to configure it on the "Dynamic logic" tab later.
8.2 Video - allows users to embed and display video content within an offer form.
8.2a. The label that can be renamed. This field affects the label visible to the end user.
8.2b. Unique Key is an identifier that is used for provisioning purposes or when the pricing plan is updated. If rename a unique key when cloning a plan, this will be considered a new control.
8.2c. Select Video is used to choose the video that was already added in the Edit Offer view.
8.2d. Dynamic logic - You will be able to configure it on the "Dynamic logic" tab later.
8.3 IFrame - allows users to add IFrame components, which provide the capability to embed and show external content within the offer form. The IFrame component displays content from any valid URL, including webpages, videos, and documents.
8.3a. The label that can be renamed. This field affects the label visible to the end user.
8.3b. Unique Key is an identifier that is used for provisioning purposes or when the pricing plan is updated. If rename a unique key when cloning a plan, this will be considered a new control.
8.3c. Enter URL is the field where the URL from which content should be displayed can be entered.
Only https URLs are allowed.
Pressing the LOAD URL button system validates the domain if it is in the whitelist, if it is, the URL is loaded. If it is not, an error "Domain "domainname" is not allowed." will appear.
8.3d. Dynamic logic - You will be able to configure it on the "Dynamic logic" tab later.
9. Dropdown - performs the same function as a radio, the only difference is appearance.
10. Business - It is possible to add a 'Tenant' control in the form designer, providing a way for the customer to choose the Azure Tenant for which they are ordering a subscription, with the following options: Universal Tenant Domain, Microsoft Tenant Domain, and Vendor Configuration.
10a. The label that can be renamed. This field affects the label visible to the end user.
10b. Unique Key is an identifier that is used for provisioning purposes or when the pricing plan is updated. If rename a unique key when cloning a plan, this will be considered a new control.
10c. Required defines if it's required for the Customer to fill this field.
10d. Hide for end user toggle in VendorConfiguration control allows you to decide if the vendor configuration details are visible to the end user. You can either check or uncheck it to hide or show the control for end users. By default, this control is checked which means that the vendor configuration details are not visible to end users.
11. Design - Provides useful description messages for Customers.
11a. The label that can be renamed. This field affects the label visible to the end user.
11b. LineBreak - control to improve the design. Used as part of horizontal panels. It allows for achieving line breaks.
11c. Space - It allows to add space to improve the design.
Tooltips
With the functions described above, the tooltip function may be used as an helpful resource to guide your customer while making a purchase.
The tooltips are applicable to all controls available in Design. Only Panel cannot contain the tooltips.
To set up the tooltip, check the checkbox (1):
And Apply the Displayed text In Message (2) Section. You can decide if the tooltip will appear as standard:
which looks like in preview:
Or as a pop-up window:
Result:
Was this article helpful?
Articles in this section
- Design Section Overview
- How to Set up and Operate Usage Based Offer
- What is 'Per Usage' Formula?
- What is the choice price table?
- What is the constant function?
- Configure quantity change rules
- What is quantity price table function?
- What is Tier mode?
- How to calculate with tier mode Graduated?
- How to calculate with tier mode Up to?
Add comment
Please sign in to leave a comment.