• 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

Editing Data in a ViewBox

Description

You can connect a textbox editor to a ViewBox control so that you can update the data in the ViewBox.

A textbox editor can be linked to a ViewBox control to edit data.

Edited data

Add a TextBox Control to Edit ViewBox data.

1. In the UX Builder's UX Controls page open the 'Containers' menu. Click the [Container] option.

   

2. From the Container Type list select the 'EditorSet' option and 'OK' to add an EditorSet to the component.

   

3. Highlight the EditorSet. In the 'Containers' menu click on the [Container] option a second time.

   

4. Select the 'Editor' option and click 'Insert After' to add it to the EditorSet.

   

5. Highlight the Editor. In the Editor container's properties list on the right click the button next to the 'Set value in editor' property. This should be in the Editor Properties section.

   

6. Add the following javascript to the 'Set value in editor' dialog and click OK.

   {dialog.object}.setValue('editor_1_edit',value);

   

7. Click the button next to the 'Get value from editor' property, this is also in the Editor Properties section.

   

8. In the 'Commit Editor' add the following code:

   return {dialog.object}.getValue('editor_1_edit');

   

9. Highlight the Editor. Open the 'Data Controls' menu and click on the [TextBox] option. Give the textbox the name 'editor_1_edit'.

   

10. Highlight the TextBox control. Open the 'Other Controls' menu and click on the [Button] option to add a button control underneath the textbox.

    

11. In the properties list on the right change the 'Button text' property to read 'Done'. This property is in the Button Properties section.

    

12. Scroll down the properties list to the 'Javascript - (Touch, Mouse, Pointer Events) section. Click the button next to the 'click' property.

    

13. In the 'Edit Click Event' dialog select 'Text mode', add the following code, and click 'Save':

    {dialog.object}.editorCommit('EDITORSET_1')

    

14. Highlight the 'Done' button in the tree. In the Other Controls menu click on the [Button] option a second time to add another button to the component.

    

15. In the properties list set the 'Button text' property for this button to read 'Cancel'.

    

16. In the 'Javascript - (Touch, Mouse, Pointer Events) section click the button next to the 'click' property

    

17. In the 'Edit Click Event' dialog again select 'Text mode'. Add the following code and click 'Save'.

    {dialog.object}.editorCancel('EDITORSET_1');

    

18. Highlight [EditorSet End: EDITORSET_1]. Open the 'Data Controls' menu and click on the [ViewBox] option to add a ViewBox control below the EditorSet. Give the ViewBox the name 'form'.

    

19. Highlight the ViewBox control. In the properties list click the button next to the 'ViewBox properties' property in the ViewBox Properties section. The ViewBox Builder will open.

    

20. In the Data Source pane click the button next to the 'ViewBox type' property and change its setting to 'Data'.

    

21. In the ViewBox Data section click the dropdown next to the 'Datasource type' property and select 'Static JSON'.

    

22. Add the following JSON data and click OK.

    {
        firstname: 'Selwyn',
        lastname: 'Rabins',
        title: 'President'
    }

    

23. Open the ViewBox Layout pane and select the 'Freeform editor' option.

    

24. Add the following HTML to the template.

    <div a5-item="edit" a5-value="firstname" class="item">
        <div class="title">First name</div>
        {firstname}
    </div>
    <div a5-item="edit" a5-value="lastname" class="item">
        <div class="title">Last name</div>
        {lastname}
    </div>
    <div a5-item="edit" a5-value="title" class="item">
        <div class="title">Title</div>
        {title}
    </div>

    

25. Open the CSS pane and add the following CSS classes.

    .item {
    padding: 4px;
    cursor: default;
    }
    .itemSelected {
    background: #bbd0ff;
    }
    .title {
    font-size: 75%;
    color: #999;
    }

    

26. Open the Items pane and click the 'Add item' button. Give the item the name 'edit'

    

27. In the properties list on the right check the 'Selectable' property in the Item Properties section.

    

28. Set the 'Selected class name' property in the same section to be the 'itemSelected' class that you defined.

    

29. Click the button next to the 'onSelect' property in the Javascript section of the item properties list.

    

30. Add the following Javascript and click OK.

    var val = this.data[v];
    {dialog.object}.editorFromValue('EDITORSET_1','EDITOR_1',val,{
        field: v
    },function(value,settings){
        var fObj = {dialog.object}.getControl('form');
        fObj.data[settings.field] = value;
        fObj.refresh(true);
    });

    

31. Close the ViewBox Builder and run the component in Live Preview.

    

32. Highlight one of the fields and change the name of the field in the Textbox editor

    

33. Click the 'Done' button and you should see the JSON data in the field change.