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, dropdown menus, sliders, checkboxes, 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
• Tooltips

Main Design Functions

When selecting Design, you can perform the following actions:

1. Properties - you can control Panel Direction, Up to down or Left to right.

2. Wizard Configuration - enhances form interactions with user-friendly navigation, guided completion, dynamic logic, post-purchase restrictions, custom billing settings, primary quantity handling, and backward compatibility. When enabling "Enable Form Wizard with Panels" the following wizard style will appear: Tabs, Numeric, Slide.

3. Plan Settings - Enabling "Display name in purchase flow", the offer name will be displayed during the new subscription flow. Enabling "Display name in subscription flow", the name of the subscription will be prominently displayed within the rendering context. Enabling "Display subscription details" will display details based on the current subscription context, such as the vendor subscription ID.

4. Enabled View Modes - Can enable calculated price in: Default, In-Line view.

5. In-Line View Mode Settings - This options 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.

What are the controls available in the Design section?

1. Text - useful for collecting contact information (name, phone, email).

Properties:

1a. Label that can be re-named and displays what the end-user sees.
1b. Unique Key is an identifier that is used for provisioning purposes.
Required defines if it's required for the Customer to fill this field.
1c. Default Value defines which value the Customer will see at the start of buying. Equals to 1 by default.
1d. Is multiline - defines if the Customer will see a single line or multiline.
1e. Pattern type dropdown with options "Custom", "Email", and "Phone"; is enabled only when "Is multiline" is unchecked; 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" = "Custom"; defines which regex validation will be applied.
1g. Min Length number box, optional; defines if Customer input should have at least "Min Length" chars. 1h. Max Length - number box, optional; defines if customer input should not have more than "Max Length" chars.

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 what the end-user sees. 

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 what the end-user sees.

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 what the end-user sees.

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 what the end-user sees.

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 and displays what the end-user sees.

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 and displays what the end-user sees.

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 can be renamed and displays what the end-user sees.

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 can be renamed and displays what the end-user sees.

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 can be renamed and displays what the end-user sees.

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 and displays what the end-user sees.

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 and displays what the end-user sees.

11b. LineBreak - control to improve the design. Used as part of horizontal panels. It allows for achieving line breaks.  
11c. Space - control 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:

Result: