Design section Overview

Main design functions

When selecting Design, you can configure multiple detailes of the Offer.

Panel direction lets you control the direction: up to down or left to right.

Wizard configuration enhances form interactions with user-friendly navigation, guided completion, dynamic logic, post-purchase restrictions, actions, 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.

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.

Chart settings - enabling Display Subscription Details allows you to configure how data is retrieved from the Vendor API.

There are two available options: real-time data retrieval or cached data, which is updated every 30 minutes. Select the Display Subscription Details checkbox. If the checkbox is not ticked, no new option is visible.

A new checkbox will appear:

• Fetch live data always - visible only if the Display Subscription Details checkbox is ticked. This option disables caching, ensuring that Product Management always retrieves live data from Vendor.
  
• If the Fetch live data checkbox is not selected, data will be displayed using the default caching interval of 30 minutes.
  

These configuration options allow you to balance data freshness with Product Management performance optimization.

Enabled view modes enables calculated prices in default and in-line views.

Plan wide quantity settings - create a Usage-Based Subscription pricing plan with an optional number field with default and minimum value of 0.

• Configure primary quantity control - With this option plan must have a form element as number box as Quantity
  
   
• Plan doesn't have any quantity - With this option plan, plan wide Quantity is set as empty (null)
  
• 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

Design section contains multiple controls available for the Pricing Plan Designer in order to easily configure complex Offers for the Products.

Dynamic Logic for Show/Hide Controls

Product Management allows you to dynamically show or hide form controls based on conditions you configure. This functionality is available for most controls in the Design section, enabling you to create conditional forms that adapt to user input.

How Show/Hide Functionality Works

When you enable Show/hide dynamically for a control:

1. A new Dynamic Logic tab appears for the Plan
   
2. You can configure conditions that determine when the control is visible or hidden
   
3. You can configure the values if hidden
   
4. The control's visibility changes automatically based on the conditions you set
5. When a control is hidden, its default value is used if the control requires a form data variable

Controls Supporting Show/Hide

The following controls support dynamic show/hide functionality:

• Text (including multiline/TextArea)
• Link
• File Upload
• Action Button
• Number
• Checkbox
• Date
• Panel (including all child controls)
• Radio
• Image
• Icon
• Video
• IFrame
• Dropdown
• Multi Dropdown
• Label
• LineBreak
• Space
• Business controls (Microsoft Tenant Domain, Universal Tenant Domain, Vendor Configuration)

Special Behavior for Panels

When you enable Show/hide dynamically for a Panel:

• All child controls within the panel automatically inherit the show/hide setting
• All child controls are hidden when the panel is hidden
• The "Depending on control" value for all child controls automatically matches the parent panel's value
• If you disable Dynamic logic on the panel, child controls can then have their own independent Dynamic logic settings

Text

This control is useful for collecting contact information, such as names, phone numbers, or email addresses, from the Customer that is filling the fields on the Offer page.

NOTE! 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.

 

Text properties

Label that can be renamed and displays a label visible to end users.

NOTE! This field is language dependent. If you don't fill it, we will use data from English.

 

Unique Key is an identifier that is used for provisioning purposes. The checkbox below, called Required, defines if it is required for the Customer to fill in this field.

Default Value defines which value the Customer will see at the start of the buying process. It is set to 1 by default.

Is multiline defines if the Customer can see a single line or multiple lines.

Pattern type is enabled only when Is multiline is unchecked. It defines which validation type will be applied when Customer tries to fill control.

Pattern type is a drop-down menu with options Custom, Email, and Phone.

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.

Min Length is a number box (an optional field). It defines the minimum length of the Customer's input.

Max Length is a number box (an optional field). It defines the maximum length of the Customer's input.

Pre-purchase validation options - those fields define:

• If the External Validation should be run before the Customer will purchase the Offer. This additional check sends the information via API to the Vendor in order to check if data entered by the Customer is valid. In case of incorrect data, the Customer will not be able to purchase the Offer.
• Set personalized validation message defines what message the Customer will see in case of incorrect data entered.
  

Recalculate on Input Change is an ability to mark a text field with an optional toggle to always update Price when user changes the text field's contents.

If this option is marked, it defines if the Offer Price will be automatically recalculated for the Customer on the Offer page after entering, for example, a valid Promotion Code.

Dynamic Logic allows you to configure additional conditions for the Text fields to be or not to be visible for the Customers.

If the checkbox is ticked, a new tab under the Plan is visible.

In this tab you can set the condition for a given Text type field.

After Purchase - similarly to the Dynamic Logic, if it's selected, a new tab is visible in order to create a restriction for the given Text field.

It allows you to configure Post-Purchase Restrictions related to the field.

Tooltip configuration allows you to configure helpful tooltips on a given text field for the Offer.

To know more how set a Tooltip, see this section: Tooltips.

Link

The Link component allows users to add links to external resources or pages within the Product Management presenter form.

Link properties

Label that can be renamed and displays a label visible to end users.

Unique key - an identifier that is used for provisioning purposes.

Default value - defines which value the Customer will see. A URL address should be added here.

Tooltip configuration - if needed, you can configure the helpful tooltip visible for the users as an "i" icon next to your field.

External data for Link control

Design section supports dynamically generated links via external data sources, enabling link controls to adapt based on real-time form inputs (e.g., tenant selection). By leveraging sequences to fetch and populate URLs, users are directed to the correct destination—such as the appropriate Microsoft admin console—without manual configuration.

External data options

Use external values — Enables the link URL to be loaded dynamically based on the current form context (e.g., which tenant or product is selected), instead of displaying a fixed, pre-configured URL. Use this when the correct destination changes depending on what the user has selected in the form.

Use external values with prices — Extends the above by also including pricing data alongside the dynamically loaded value. Not applicable for standard Link controls used for navigation.

Run External Validation — Triggers a validation check on the loaded URL before the user can proceed. Use this when you need to confirm that the resolved link is valid before allowing the form to move forward.

NOTE! Enabling external values requires additional configuration. Please contact support to set this up.

File upload

File Upload control allows you to configure uploading custom files to the Offer page.

File upload properties

Label that can be renamed and displays a label visible to end users.

Unique key - an identifier that is used for provisioning purposes.

File Upload Settings - you can configure here what conditions need to be fulfilled by the file to make it possible to upload to the given Offer.

Configuration contains max amount, max size in MB, allowed formats, selection mode, and required file width and file height.

Upload interface

The File Upload component provides an intuitive drag-and-drop interface for Customers:

Customers can either:

• Drag and drop files directly into the designated area
• Click the upload area to browse and select files from their device
  

The interface displays:

• Upload instructions: "Drag & drop images here, or click to browse"
• Accepted file formats: "PNG, JPG, JPEG up to 5MB each"
• Visual feedback during file selection and upload

Validation and error handling

The File Upload component performs both client-side and server-side validation:

Client-side validation checks:

• File size does not exceed the configured maximum
• File extension matches allowed types
• Image dimensions meet specified width/height requirements (if configured)

Error messages are displayed inline when:

• Files are too large: "File exceeds maximum size of X MB"
• File types are not allowed: "File type not permitted. Allowed types: PNG, JPG, PDF"
• Dimensions are incorrect: "Image dimensions must be exactly XXX x XXX pixels"
• Network or server errors occur: "Upload failed. Please try again"

Dynamic Logic - allows you to configure additional conditions for the File Upload fields to be or not to be visible for the Customers.

If the checkbox is ticked, a new tab under the Plan is visible.

In this tab you can set the condition for a given Upload File type field.

Tooltip configuration - if needed, you can configure the helpful tooltip visible for the users as an "i" icon next to your field.

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.

Action button properties

Label can be renamed and displays what the end-user sees.

Unique key is an identifier that is used for provisioning purposes.

Action name is a mandatory field, where you can specify the name of the action that the Action Button incurs.

Specific custom AXI route allows you to define action path for integration route for the button.

Configure integration - if the checkbox is ticked, you can define if the response should be:

• Custom - in such case fill the fields below
  
• or if you prefer to allow to show response from Vendor configuration instead
  

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

Product Management prevents configurations from being added to the cart when a validation failure occurs on the pricing plan. The system ensures that only valid configurations are processed.

Number

Number is used to collect some quantitative metrics from the Customer. For example, the control "Quantity" can participate in the calculations so as to form a Price of the form Quantity * 10 $.

Number properties

Label that can be renamed and displays a label visible to the end user.

Unique Key is an identifier that is used for provisioning purposes.

Use as Quantity - Use value from this number field as the "main" Quantity users see for your Offer.

External quantity rules allows you to configure in detail Quantity rules for the Offer.

Default Value - a Quantity that is the default during purchasing.

Min Value / Max Value - Quantity control restrictions, the Max Value cannot be more than 9 digits.

Pre-purchase validation options - those fields define:

• If the External Validation should be run before the Customer will purchase the Offer. This additional check sends the information via API to the Vendor in order to check if data entered by the Customer is valid. In case of incorrect data, the Customer will not be able to purchase the Offer.
  
• Set personalized validation message defines what message the Customer will see in case of incorrect data entered.
  

Dynamic Logic - allows you to configure additional conditions for the Number fields to be or not to be visible for the Customers.

If the checkbox is ticked, a new tab under the Plan is visible.

In this tab you can set the condition for a given Number type field.

Dynamic Min/Max value - you can enable it to determine the Min or Max Value with a different control. Static Min and Max Value are still required as a fallback option for edge cases.

After Purchase - similarly to the Dynamic Logic, if it's selected, a new tab is visible in order to create a restriction for the given Number field.

It allows you to configure Post-Purchase Restrictions related to the field.

Tooltip configuration - if needed, you can configure the helpful tooltip visible for the users as an "i" icon next to your field.

Checkbox

Checkbox allows users to select or deselect specific options they want to include in their configured Product on the Offer page.

Checkbox properties

Label that can be renamed and displays a label visible to the end user.

Unique Key is an identifier that is used for provisioning purposes.

Required - if ticked, the configured Checkbox needs to be ticked by the Customer in order to purchase the Product.

Is checked by default - you can decide if the checkbox will be or will not be checked by default.

Run External Validation - this is a pre-purchase validation option. You can decide if the External Validation should be run before the Customer will purchase the Offer. This additional check sends the information via API to the Vendor in order to check if data entered by the Customer is valid. In case of incorrect data, the Customer will not be able to purchase the Offer.

Dynamic Logic - allows you to configure additional conditions for the Checkbox fields to be or not to be visible for the Customers.

If the checkbox is ticked, a new tab under the Plan is visible.

In this tab you can set the condition for a given Checkbox type field.

After Purchase - similarly to the Dynamic Logic, if it's selected, a new tab is visible in order to create a restriction for the given Checkbox field.

It allows you to configure Post-Purchase Restrictions related to the field.

Tooltip configuration - if needed, you can configure the helpful tooltip visible for the users as an "i" icon next to your field.

Date

This control is intended to add the date field to the Offer page.

Date properties

Label that can be renamed and displays a label visible to the end user.

Unique key is an identifier that is used for provisioning purposes.

Required indicates whether it is necessary for the Customer to complete this field.

Default Value - date box. This is a mandatory field, where you define which day the Customer will see at the start of buying. Equals to today by default.

You can specify other date by clicking on the calendar icon.

Dynamic Logic - allows you to configure additional conditions for the Date fields to be or not to be visible for the Customers.

If the checkbox is ticked, a new tab under the Plan is visible.

In this tab you can set the condition for a given Date type field.

After Purchase - similarly to the Dynamic Logic, if it's selected, a new tab is visible in order to create a restriction for the given Date field.

It allows you to configure Post-Purchase Restrictions related to the field.

Tooltip configuration - if needed, you can configure the helpful tooltip visible for the users as an "i" icon next to your field.

Panel

This control is responsible for design of the Offer page.

Panel properties

Label that can be renamed and displays a label visible to the end user.

Panel Direction - the direction of drawing (horizontal/vertical).

Radio

Radio control type is needed for cases when an Offer needs to be configured with multiple selections which can influence the Price. For 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 - affects the Price.

Radio properties

Label that can be renamed. This field affects the label visible to the end user.

Unique Key is an identifier that is used for provisioning purposes or when the pricing plan is updated. If you rename a unique key when cloning a plan, this will be considered a new control.

Use external values and Use external values with prices - those options allow you to use external values. You can choose only one of these.

Run External Validation - this is a pre-purchase validation option. You can decide if the External Validation should be run before the Customer will purchase the Offer. This additional check sends the information via API to the Vendor in order to check if data entered by the Customer is valid. In case of incorrect data, the Customer will not be able to purchase the Offer.

Use a Billing Cycle - check this option to use a Billing Cycle.

Default Value defines which value the Customer will see at the start of buying. By default is set to title1 item from items list.

Items - you can increase the number of items and change the title names.

You can add multiple items by clicking "+" icon.

Dynamic Logic - allows you to configure additional conditions for the Radio fields to be or not to be visible for the Customers.

If the checkbox is ticked, a new tab under the Plan is visible.

In this tab you can set the condition for a given Radio type field.

After Purchase - similarly to the Dynamic Logic, if it's selected, a new tab is visible in order to create a restriction for the given Radio field.

It allows you to configure Post-Purchase Restrictions related to the field.

Tooltip configuration - if needed, you can configure the helpful tooltip visible for the users as an "i" icon next to your field.

Image

Image control allows you to add images to the form, which could be used to illustrate Products, demonstrate features, or provide visual cues to Customers.

Image properties

Label that can be renamed. This field affects the label visible to the end user.

Unique Key is an identifier that is used for provisioning purposes or when the pricing plan is updated. If you rename a unique key when cloning a plan, this will be considered a new control.

Select Image - you can choose the image that will be added to the Offer page.

Enter the file path and click green button next to it to upload the image.

You can also set the image size.

On the dropdown list there are 3 options: Small (16x16), Medium (32x32), and Large (48x48) - with proportional scaling to fit various design needs.

Dynamic Logic - allows you to configure additional conditions for the Image fields to be or not to be visible for the Customers.

If the checkbox is ticked, a new tab under the Plan is visible.

In this tab you can set the condition for a given Image type field.

Tooltip configuration - if needed, you can configure the helpful tooltip visible for the users as an "i" icon next to your Image.

Icon

Icon control allows you 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.

Icon properties

Label that can be renamed. This field affects the label visible to the end user.

Unique Key is an identifier that is used for provisioning purposes or when the pricing plan is updated. If you rename a unique key when cloning a plan, this will be considered a new control.

Select Icon - you can choose the icon that will be added to the Offer page.

Enter the file path and click green button next to it to upload the icon.

You can also set the image size.

On the dropdown list there are 3 options: Small (16x16), Medium (32x32), and Large (48x48) - with proportional scaling to fit various design needs.

Dynamic Logic - allows you to configure additional conditions for the Icon fields to be or not to be visible for the Customers.

If the checkbox is ticked, a new tab under the Plan is visible.

In this tab you can set the condition for a given Icon type field.

Tooltip configuration - if needed, you can configure the helpful tooltip visible for the users as an "i" icon next to your Image.

Video

This control allows you to embed and display video content within an Offer page.

Video properties

Label that can be renamed. This field affects the label visible to the end user.

Unique Key is an identifier that is used for provisioning purposes or when the pricing plan is updated. If you rename a unique key when cloning a plan, this will be considered a new control.

Select Video - you can choose the video that will be added to the Offer page.

Dynamic Logic - allows you to configure additional conditions for the Video to be or not to be visible for the Customers.

If the checkbox is ticked, a new tab under the Plan is visible.

In this tab you can set the condition for a given Video type field.

Tooltip configuration - if needed, you can configure the helpful tooltip visible for the users as an "i" icon next to your Video.

IFrame

This control allows you 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.

IFrame properties

Label that can be renamed. This field affects the label visible to the end user.

Unique Key is an identifier that is used for provisioning purposes or when the pricing plan is updated. If you rename a unique key when cloning a plan, this will be considered a new control.

Enter URL is the field where the URL from which content should be displayed can be entered.

Pressing the LOAD URL button 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.

Dynamic Logic - allows you to configure additional conditions for the IFrame to be or not to be visible for the Customers.

If the checkbox is ticked, a new tab under the Plan is visible.

In this tab you can set the condition for a given IFrame type field.

Tooltip configuration - if needed, you can configure the helpful tooltip visible for the users as an "i" icon next to your IFrame file.

Dropdown and multidropdown

Those controls allow you to configure single and multi dropdown list fields to the Offer page.

Dropdown and multidropdown properties

Hide for end user - this toggle allows you to hide the given dropdown for Customers.

The rest Dropdown properties are the same as in Radio section.

Business

In Business section you can add a Tenant control, 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.

Microsoft Tenant Domain properties

Label that can be renamed. This field affects the label visible to the end user.

Unique key is an identifier that is used for provisioning purposes or when the pricing plan is updated. If you rename a unique key when cloning a plan, this will be considered a new control.

Required indicates whether it is necessary for the Customer to fill this field.

Run External Validation - this is a pre-purchase validation option. You can decide if the External Validation should be run before the Customer will purchase the Offer. This additional check sends the information via API to the Vendor in order to check if data entered by the Customer is valid. In case of incorrect data, the Customer will not be able to purchase the Offer.

Universal Tenant Domain properties

Label that can be renamed. This field affects the label visible to the end user.

Unique key is an identifier that is used for provisioning purposes or when the pricing plan is updated. If you rename a unique key when cloning a plan, this will be considered a new control.

Required indicates whether it is necessary for the Customer to fill this field.

Vendor - mandatory field, you must choose here applicable Vendor from the dropdown list.

Run External Validation - this is a pre-purchase validation option. You can decide if the External Validation should be run before the Customer will purchase the Offer. This additional check sends the information via API to the Vendor in order to check if data entered by the customer is valid. In case of not correct data the customer will be not able to purchase the Offer.

Vendor Configuration properties

Hide for end user - 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.

Label that can be renamed. This field affects the label visible to the end user.

Unique Key is an identifier that is used for provisioning purposes or when the pricing plan is updated. If you rename a unique key when cloning a plan, this will be considered a new control.

Items - you can increase the number of items and change the title names.

You can add multiple items by clicking "+" icon.

Tooltip configuration - if needed, you can configure the helpful tooltip visible for the users as an "i" icon next to your field.

Design

Those controls provide useful description messages for Customers.

Design properties

Label that can be renamed. This field affects the label visible to the end user.

LineBreak Label - control to improve the design. Used as part of horizontal panels. It allows for achieving line breaks.

Space Label - It allows you to add space to improve the design.

Tooltips

With the controls described above, the tooltip function may be used as a helpful resource to guide your Customer while making a purchase.

The tooltips are applicable to all controls available in Design section. Only Panel cannot contain the tooltips.

The tooltip Message field supports rich text formatting. You can apply bold, italic, underline, and add hyperlinks using the formatting toolbar that appears in the message editor. A new line can be added by pressing the Enter key. Tooltip text is also justified to align by width for a consistent, professional appearance.

To set up the tooltip:

1. Check the checkbox.
   
2. Set the Tooltip type. The dropdown list offers 2 options:
   

• Standard 
  
  The configured tooltip is reflected on the Offer page and visible for the Customers as a floating element above the field it describes. Note that links inside a Standard tooltip are rendered but cannot be clicked in Preview mode.
  
• Pop-up window
  
  This option displays a pop-up window for the Customers when they click the tooltip icon. The pop-up renders the message without a heading and supports full rich text, including clickable links that open in a new tab.
  

3. Choose if the Tooltip should be displayed in Default style (floating above the elements it describes) or In Line.
   

4. Enter and format the text that will be visible in the Tooltip. Use the formatting toolbar to apply bold, italic, underline, or add a hyperlink. Press Enter to add a new line.

   

5. When adding a hyperlink in the message editor, a dialog prompts you to enter the link URL (starting with http:// or https://).

   

Summary

Product Managers use the Design section to create and configure various form controls for Offers. Available controls include text fields, links, file uploads, action buttons, numbers, checkboxes, dates, panels, radio buttons, images, icons, videos, iframes, dropdowns, business elements, and design elements. Each control has specific properties and configuration options, including validation rules, dynamic logic, post-purchase restrictions, and tooltips. The section also provides main design functions for panel direction, wizard configuration, plan settings, chart settings, view modes, and quantity settings.

Related content

• Accessing CPQ and configuring Pricing Plans
• Vendor Settings in CPQ
• CPQ Presenter action types