Use in-built App components

Hello World - Create Data Table

1. To App Platform!

You know that my_first_page page we created earlier? Let's go back there and into the page builder... remember, arrow in the action column?

2. Component Library

In the component library, we have a BUNCH of pre-built components that you can simply drag and drop onto the App Builder canvas and start using. Feel free to experiment with them if you want!

3. Click on Data Table

In our Hello World project, we're going to use the Data Table. This component allows us to utilise a workflow to generate the content of the table.

4. Add a Data Source

Once the data table has been dragged onto the empty canvas, click on "Add a Data Source"

5. Click on Run Workflow On Load

Choosing "Run Workflow on Load" ensures that whenever the page is loaded, the latest data comes in. "Use Latest Workflow" could be used if you were returning data on a cron and didn't want to load it every time for instance.

6. Choose Workflow Output

Once the workflow has finished, you'll see form_output in the available list

7. Click on Submit

8. Click on Hide View column

Now we'll hide some columns that you don't need to display to the user. Next to View and Trigger ID, click the dots and select the Hide X Column.

9. Click on Hide Trigger Id column

10. Click on Add a Column

Now let's make sure the user can actually get to the form, rather than just view a list.

11. Accessor

In the Accessor dropdown, select the view key. By leaving the URL blank later on, the action button will automatically use the value from this key. In the Jinja from the last step, we made sure the value was the link to that form.

12. Change the Type

Change the Type to action

13. Change the Column Name

Add a header, which is the column name for this action button.

14. Button Function

Under the Button Function, select the Open a link option.

If you want to make your data table more user friendly, you can even add a tooltip to let them know what's going to happen

16. Test the Page

Hit the Green Play button in the top right, this is a "Test" button that runs the page as if you navigated to it normally. All being well, you should see a list of forms returned with an action column. If you click the link, you should go directly to that form!

17. Click on Publish

Publish the page to save it

18. Navigate to the page

At the top of the menu bar, you'll see a url that is unique to your app. Clicking this navigates to the page itself, the same one you'll send to your users.

💡 You're done!
Wow, you've just created your first workflow backed App in Rewst. There was a LOT here, but this is something you can provide to your techs and they can easily navigate to the forms they have access to. It's not the prettiest (yet), but a functional App is an awesome start. Now, let's see what else we can do eh....