This topic provides information on Handling Other Variants.

For other types of variants:

1. Create a master component named masterComponent
2. Add all possible variant combinations as individual components inside it
3. Use conditional UI logic to control the visibility or behaviour of each variant based on the selected property

For example:

Let’s say you want to create a Payment Schedule component with the following variants:

1. Pay Now – No additional fields
2. Pay Later – Includes a single date input
3. Recurring Payment – Includes a date range (From and To date inputs)

To make this work with the plugin:

• Create a fourth variant called ‘masterComponent’
• Inside masterComponent, include all the UI elements from all three variants (i.e., the date input and both date range fields)
• Apply conditional logic to show or hide specific elements based on the selected variant (e.g., only show the date range when ‘Recurring Payment’ is selected)

This setup ensures the plugin can map and configure all possible states of the component correctly.

Tip: Make sure the variant property (e.g., Schedule Type) is clearly named and consistent across all variants.

Here’s the detailed procedure on how to apply conditional logic: Add Conditions.