The demo for this solution extensively uses CADT templates. This topic describes how to create a template and define variables within it.
Copy a CADT template
1. Log in to the CADT Official Template Library.
2. Go to the Official API Integration Templates section, find the templates named "Cloud Management Demo Template*", and save them as private templates.
Right-click the target template card and select Save as private template from the shortcut menu.
Modify a template
1. Go to the Private Template List and click Edit template to open its visual editor.
2. The region attribute is located in the upper-left corner of the template. You can configure multiple available regions for a single template.
Click the region drop-down list to switch between configured regions, such as Default, China (Beijing), China (Hangzhou), and China (Shanghai). For any region other than the default, a delete icon appears on the right that you can click to remove its configuration.
3. Double-click a resource icon on the canvas. In the properties pane on the right, properties with an fx button can be defined as variables.
For example, after you double-click the Network Load Balancer (NLB) component on the canvas, the properties pane displays its configuration options. The Instance name field, which has a value of ${nlb_name}, has an fx button next to it. This indicates that the property can be defined as a template variable.
4. Click the fx button to view the definition of the template variable. In the Options field, you can define custom content. The demo for this solution defines the front-end UI style using JSON data. For detailed rules, see the sections below.
The Variable Definition dialog box contains four fields: Variable name (e.g., ${nlb_name}), Placeholder (if left empty, the variable name is used by default), Default value (e.g., nlb), and Options (enter a JSON definition, such as {"title":"NLB Instance Name", "control_type":"Input", "data":[]}). After you complete the fields, click Add variable to save.
For some variables, such as the instance type for an ECS instance, the available options are automatically populated. After you click the fx button, the variable definition dialog box provides a list of valid values for the Default value field.
In the variable editing dialog box, the Default value field is optional. If a value is provided, it is used as the default. Default values are not currently supported for nested properties.
5. Save the template. After saving, you can modify its name and set the region.
In the dialog box, you can also select Set as default template. When setting region tags, ensure the selected region matches the region on the diagram. The Change region on diagram option takes effect only when there is a single region node on the diagram.
6. To add support for more regions, select Copy variables, specify the source region, and then set the target region in the region tags. Also, select Change region on diagram to complete the copy process.
Note: The Change region on diagram option takes effect only when there is a single region node on the diagram. When setting region tags, ensure that the selected region matches the region on the diagram.
Options parameter rules
In this demo, the options for a product property dynamically change the front-end UI style based on the following rules.
For example, for the NLB instance name, in the custom variable dialog box, set Variable name to ${nlb_name}, Placeholder to ${nlb_name}, Default value to nlb, and Options to {"title":"NLB Instance Name", "control_type":"Input", "data":[]}. The options field uses a JSON format to define the front-end UI style. In this case, control_type is set to Input to specify an input box control. After you complete the configuration, click Add variable.
title
This parameter defines the field's label in the UI.
For example, labels such as Instance name, Redis version, Shard specification, and Number of shards are the display names for their corresponding variables in the UI.
config_type
This parameter specifies the UI section where the variable is displayed. By default, it appears in the Resource configuration section. If you set it to network, it is moved to the Network configuration section.
"config_type": "network"
For example, the Backup availability zone parameter is displayed in the Network configuration section.
control_type
The type of UI control for the variable. Valid values include: Select (drop-down list), Number (numeric input), Input (single-line text input), and TextArea (multi-line text input).
"control_type": "Select"
data
The available options. When control_type is Select, this defines the items in the drop-down list.
"data": [{"label":"China (Beijing) Zone H","value":"cn-beijing-h"},{"label":"China (Beijing) Zone L","value":"cn-beijing-l"},{"label":"China (Beijing) Zone I","value":"cn-beijing-i"},{"label":"China (Beijing) Zone F","value":"cn-beijing-f"},{"label":"China (Beijing) Zone G","value":"cn-beijing-g"},{"label":"China (Beijing) Zone J","value":"cn-beijing-j"},{"label":"China (Beijing) Zone K","value":"cn-beijing-k"}]
}
node_name
This field is used only when defining a skip deployment variable for the Virtual Private Cloud (VPC), VSwitch, and security group components. To do this, click the fx button in the upper-right corner of the component's properties.
node_name represents the name defined for these controls in the template, for example, the VPC name.
After you click fx, the Enter skip deployment custom variable dialog box appears. Set Variable name to ${vpc}, Placeholder to ${vpc}, Default value to false, and Options to {"title":"Select VPC","node_name":"vpc","node_type":"vpc","control_type":"Select"}. After you complete the configuration, click Add variable.
node_type
This field is used only when defining a skip deployment variable for the Virtual Private Cloud (VPC), VSwitch, and security group components. To do this, click the fx button in the upper-right corner of the component's properties.
node_type represents the product code for these resources. The demo for this solution currently supports only vpc, vswitch, and security_group.
parent_node
This field is used only when defining a skip deployment variable for the VSwitch and security group components. To do this, click the fx button in the upper-right corner of the component's properties.
parent_node defines the variable name of the parent VPC to which the VSwitch or security group belongs.
In the variable definition dialog box, specify the parent VPC's variable in the Options field's JSON using "parent_node":"${vpc}". This creates a cascading selection between the parent and child resources.