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.

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" 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.
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 "Show initial price" option allows immediate display of initial prices within 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 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 Customer will see a single line or multiline.
1e. Pattern type dropdown with options "Custom", "Email", "Phone"; is enabled only when "Is multiline" is unchecked; defines which validation type will be applied when Customer tries to fill control.
1g. Custom RegEx Pattern is enabled only when "Is multiline" is unchecked and "Pattern type" = "Custom"; defines which regex validation will be applied.
1h. Min Length number box, optional; defines if Customer input should have at least "Min Length" chars. Max Length - number box, optional; defines if Customer input should have not 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 clicked 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 that can be re-named and displays what the end-user sees. 
2.1b. Unique Key is an identifier that is used for provisioning purposes. 

2.1c. Action name - is mandatory field, you can add company info and choose between options, Specific custom AXI route or Configure integration.

2.1d. Dynamic Logic - You will be able to configure it on "Dynamic logic" tab later.

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 re-named 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 re-named 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 "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 then 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 re-named 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.
Default Value date box; is required; defines which value Customer will see on the start of buying. Equals to today by default
5d. You will be able to configure it on "Dynamic logic" tab later

6.  Panel - control for design.

6a. The label that can be re-named 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 Choice Price Table function).

↓

7a. The label that can be re-named 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 items alignment: Vertical or Horizontal. 

7f. Render as a boxed - By enabling this option, you can choose box size, border color and option to hide the circle.

7.g Items - Can increase the amount of items and change the title names.

7.h You will be able to configure it on "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 re-named 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 Edit Offer view. You can also set the image size
8d. Dynamic logic - You will be able to configure it on "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 re-named 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 Customer to fill this field.

11. Design - Provides useful description messages for Customers.

11a The label that can be re-named and displays what the end-user sees.

11b LineBreak - control to improve the design. Used as part of horizontal panels. It allows achieving line breaks.  
11c Space - control to improve the design.