Mission 6 - List Projects

Estimated time for completing this mission: 15 mins

Learning Objective

Learn to use containers to read, and display our project lists.

Background Information

Container is a very useful tool to create a dynamic list of your tables. The container lets you transform a table into a custom list of elements that represent columns in your dataset. Each custom layout is applied to each row of the table automatically when running the application.

Classic applications are:

• Shopping items
• Shipping items
• Personal data
• Project list

BLOX used in this mission:

Logic BLOX

• MyData/MyProjectsImage

App BLOX

• Container
• Panel
• Label
• Image

Data

We will use MyProjectsImage data. If you would like to download the data set, click here: MyProjectsImage.xls

Steps

Please refer to Navigation Guide to perform the steps below

App Designer:

Use container to show projects

1. First click on the "+" sign on the top left corner to create a new page.

2. Drop the Panel BLOX to the canvas and make it larger.

3. Drop the Container BLOX into the Panel.

4. Drop 4 Label BLOX into the Container.

5. Drop 1 Image BLOX into the Container.

6. Arrange the labels as you like to present the Project information.

7. Optionally, style the container and labels according to your liking with borders, backgrounds, etc., see example below.

8. Once the layout of the app is done, double click on the container.

9. This will open the configuration side-bar and under Data Source select the MyProjectsImage data table.

10. Now go through the four labels and the image by double clicking each and make sure that the bound data source is MyProjectsImage while picking the correct column. For example, pick the Project column for the Project name label.

11. Now we can run the app and we get the following list of projects for each row in the bound data source.

Results and Summary

The result should show custom list of elements from the example table.

Well done! Now let's move on to the next mission!