• The ViewBox Control
• Sample ViewBoxes
• Merge JSON data into an HTML ViewBox Template
• Editing Data in a ViewBox
• Selectable Elements
• ViewBox as a Basic List Control
• ViewBox State
• Creating a Step Control Using a ViewBox
• Getting Data for the Current Row in a ViewBox
• ViewBox Layout Controls
• Populating a ViewBox from a REST API

Merge JSON data into an HTML ViewBox Template

Description

Merging JSON data with the HTML ViewBox Template.

JSON data displayed in a ViewBox Template

For more information on this topic, read the guide below or watch this video.

Define the JSON Data

1. In the UX Builder on the UX Controls page open the 'Data Controls'. Select the [ViewBox] option to add a ViewBox control to the component.

   

2. In the properties list click on the button next to the ViewBox properties property, in the ViewBox Properties section.

   

3. Open the Data Source Pane. Set the ViewBox type control to 'Data' in the 'ViewBox Datasource' section.

   

4. In the ViewBox Data section set the Datasource type to be 'Static JSON'

   

5. Click the button next to the 'Static JSON' property.

   

6. In the 'Static JSON Data' dialog add the following JSON and click OK:

   {
   "name": "Fred",
   "city": "Boston"
   }

   

Creating the Template

1. Open the ViewBox Layout pane. Select the 'Genie' option and click the 'Add item' button.

   

2. In the Category list select 'Data Controls' and in the 'Control' list select [Label]. On the right, highlight the two fields for 'name' and 'city' and click OK.

   

3. Click OK to close the ViewBox Builder and run the component in Live Preview. You should see the JSON data displayed.

   

Modify the Template's HTML

1. On the Design tab's UX Controls page highlight the ViewBox control. Click on the ViewBox properties property to open the ViewBox Builder again.

   

2. Open the ViewBox Layout pane and select the 'Freeform editor' choice.

   

3. The Freeform editor should contain the placeholders for the two fields you defined in JSON. This example used the Genie to add these placeholders to the template but it would have been just as easy to type them into the Freeform template by hand.

   

4. Add some HTML around the placeholders Click OK to close the ViewBox.

   

5. Run the component in Live Preview.