• 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

Selectable Elements

Description

Selectable elements give you the ability to add selectability to the rows of data displayed in a ViewBox control. This is done by defining a cursor in the ViewBox control, with the help of some CSS, and then implement this cursor in the template itself. The result is a cursor that can function like the cursor in, say, a list control.

A selected row of data generated from an SQL database and displayed in HTML.

For an in depth look at implementing selectable elements in a ViewBox control watch this video. The guide below also builds a ViewBox control with a selectable element and examines the construction of the html and CSS involved.

Create a ViewBox with Selectable Rows

1. In the UX Builder's UX Controls page open the 'Data Controls' menu. Click on 'ViewBox' to add a viewbox control to the component.

   

2. In the properties list on the right click on the button next to the 'ViewBox properties'property, in the ViewBox Properties section. The ViewBox Builder will open.

   

3. Open the 'Data Source' pane set the 'ViewBox type' property to 'Data'. This property is in the ViewBox Datasource section.

   

4. Under the ViewBox Data section set the 'Datasource type' property to be 'Database Query'

   

5. Set the Query type property to 'SQL query'.

   

6. In the SQL Query section that appears click the button next to the 'Connection string' property. Set the Connection string to the 'Northwind' database.

   

7. Click the button next to the 'Table name' property and select 'Customers'.

   

8. Click the button next to the 'Fields' property and select the following fields: 'ContactName', 'Address', 'City', and 'Country'.

   

9. Open the ViewBox Layout pane. Check the 'Freeform editor' radio button.

   

10. Add the following HTML to the Freeform editor.

    <h2>{ContactName}</h2>
    <table cellspacing="0">
        <tr>
            <th>Address</th>
            <th>City</th>
            <th>Country</th>
        </tr>
        <tr a5-item='clickonrow'>
            <td>{Address}</td>
            <td>{City}</td>
            <td>{Country}</td>
        </tr>
    </table>

    
    The curly braces {} denote placeholders for the fields that we selected from the Customers table. The <tr></tr> tags represent table rows. The <th></th> tags are headings and the <td></td> tags contain the table data. The line 'a5-item='clickonrow' references an item in the Items pane that will be defined soon. This item will call a CSS class that will set the background color of the selected row.

11. Open the CSS pane. Add the following CSS classes.

    .selectedRow {
        background-color:yellow;
        padding:0px;
        border:0px;
    }
    
    h2 {
        color:#5db0b7;
    }
    
    tr {
        text-align:left;
    }
    
    th {
        padding:11px;
        width:160px;
        text-align:left;
    }
    
    td {
        padding:11px;
        width:160px;
        text-align:left;
    }

    
    The selectedRow class represents the styling on the selected row. The remaining classes -- h2, tr, th, and td -- stylize the html table itself. This gives the table a more presentable appearance, aligning the text, setting the width of the table's cells, adding padding between cells, and setting the color of the header.

12. Open the 'Items' pane and click the 'Add item' button. Name the item 'clickonrow'.

    

13. Check the 'Selectable' checkbox.

    

14. Next to the 'Selected class name' property write 'selectedRow'. Click OK to close the ViewBox control.

    

15. Run the component in Live Preview

    

16. Click on one of the rows containing the Address, City, and Country data. The row should highlight.