How Do I Change The Swipe or Reorder Action Icons
Data Grid 2 now includes the new edit mode, swipe and reorder actions for data grid forms, ready for use in mobile projects. In DGH 2.5 these new actions are grouped in the DGH Template Area editor.
This example will demonstrate how to modify the appearance of one of these new Data Grid 2 actions.
Create a Data grid Form
Add a fresh data grid to a stack by drag/dropping it from the LiveCode tools palette, then double-click it to open the DGH Table Properties view.
As the new actions only apply to the Form type of data grid, we need to change to that view.
Expand the Grid topic and change style from Table (which is the default style when creating a new datagrid) to Form.
Open The Form Builder
The DGH palette changes to the Form Properties view.
Expand the Form topic and then click the Edit... button next to Form Builder... in the list.
This will open DGH's Form Builder view.
Select The “Reorder Action” Template
Click on the Template Area's option menu.
In addition to the classical Row template, specific templates for the Left Swipe, Right Swipe, Edit Action, Select Action and Reorder Action, introduced by dg2 are also present.
For this example select the Reorder Action template from the Template Area’s option menu.
This loads the corresponding control inside the Template Area.
Change The “Reorder Action” Appearance
Select the control inside the template area either by clicking it (1) or by selecting its name in the controls list (2).
Double-click the selected control (a SVG Icon widget in the case) to open its property inspector (3) in the LiveCode IDE.
As this control is selected in the Template Area, you can also access its property inspector by simply pressing the return key of your keyboard.
We will modify this action's appearance by changing the icon being displayed by this widget.
To do this, click on the icon within the Property Inspector (1) to bring up LiveCode's SVG picker. Click on the two arrows icon (2) to represent a switch between two rows.
Of course if you have the path data for another icon you could also replace the existing path data with the new path data.
The change is appears immediately in the Template Area (1).
We can now update the Form Builder's Preview area (and thus the DGH template for this data grid) by clicking the Update button (2).
Finally, we apply the change to the selected data grid by clicking the Apply button (3).
Click the Grid button to return to the DGH's Form Properties view.
Test Our Change Inside The Data Grid Form
In order to test our changes our data grid needs to have some data. Use DGH to add some content to our data grid.
Expand the Content topic and click on the Contents... button.
Add some rows to the Data Preview grid by entering some data into the cells (1), and then click the green validate button (2) to save the data.
The data grid now displays the entered data.
Enable Edit Mode in the Data Grid
In order to see the newly modified reorder icon, enable Edit Mode for the data grid.
Expand the Grid topic of the Form Properties view and click in the Turn DataGrid in Edit Mode checkbox to enable it.
You will immediately see the edit mode icons appear in the data grid with the newly installed ‘reorder’ icon.
The icon used for the “select” action can be changed in a similar manner.
0 Comments
Add your comment