Dynamic Datagrids
In this example, simulate a list of products. Each item in the products list has an ID code, a name, a brief description, and a photo.
- Click the "+" button of the Data Master tab at the bottom left of the screen. In the dialog box that pops up, name the Data Master; for example: "Product".
- With the "+" button (directly below where you wrote "Product") add all the required fields and the corresponding titles on the right-side table.
If you look closely, you'll see another one next to the Name column titled Type. The qualities assigned to the fields are set there. The information in the data lists and on the forms is represented according to the type. By default, they are Text.
- Select the text type in the row you titled "Photo". Mark File in the drop-down menu that pops open.
- Select the ID as the unique attribute of the describer (use it to set a Data Master as the data source of a drop-down item on a screen).
- Click OK. The one you just created appears in the Data Master tab.
- Drag the Data Table component to the active screen. In the box that pops open, specify the ID, select the Data Master that will provide the data, and specify which attributes you will use as columns. In this example, use the Data Master "Product" with all the attributes.
- Click OK. The space to be occupied by the table is displayed.
- By clicking anywhere on the canvas, a data grid with a empty row is drawn.
- Click the Simulate button to verify the results. The table shows three sample rows.
Let’s change these example rows with others that have more representative data.
- Double click the Data Master "Product". You return to the dialog box that opened when you created it. However, a new tab is now available: View and Edit instances.
- Click it. A table appears in which each column corresponds to a Data Master attribute. Here you define the test data that is displayed in all the tables associated with the Data Master.
- Enter some products and attach some images for the "Photo" field. Click OK.
- Click Simulate and see how the data you added appears, along with the photo.
Customize the Data Tables to form lists of structured data. Following with this example, move the information from the "Code", "Name" and "Description" cells to inside the column with the picture of the product (you need to enlarge it to make it all fit). Delete the rest of the columns. You can also select the entire list and assign different colors to even and odd rows.
Back to all Tutorials