Courses

1. Building Courses page

This page shows the second screen your users will see.

Tip: In the template, we have already created this page so that you can directly start customizing widgets.

To build the Courses page:

1. After defining the API Calls in the previous step, now we can proceed to building the Courses page. To start fetching data from the Courses API, select the Courses Page.

2. On the Properties Panel, DataSource, click on the {{x}} Variable icon, and select Courses API from the dropdown menu.

3. To add an AppBar, select the Courses page, and then turn on the Show App Bar toggle ON. Under App Bar Title, enter the text as Courses and under Text Span Style Properties, select the Font Token as Title Large, text Color as #FFFFFF. For z-coordinates (to make sure that the App Bar appears on top of everything), set the Elevation as 2. We have selected the Background Color as #04A24C and Back Icon Color as #FFFFFF.

4. Now, for displaying different courses, we can wrap all the items in a GridView. For fetching data from the API, we need to define the DataSource here. Click on the variable icon ahead of DataSource, and enter the values dataSource.data For spacing, give its margin a top value of 10px.

4. To dislay Courses side by side, create a Column widget. For making it prettier, provide it with a Padding of 16px on all sides, Margin of 10px on all sides, and Border Radius of 10px on all corners. For different background colors on all Courses, we can fetch the backgroundColor from the API itself. Click on the variable icon besides Background Color, and enter the value currentItem.attributes.courseColor

5. Now, add an Image Widget inside the Column Widget. For fetching the image from the API itself, click on the variable icon besides the Image Source, and enter the value currentItem.attributes.courseImage

6. To make the Image smaller, under Widget Properties, change the Box Fit to Scale Down, with an Aspect Ratio of 1 . Also, navigate to the Default Properties, and align the Widget to Top Left and give it a height of 50px.

7. Add a Text Widget inside the Column Widget. To fetch the Course's name from the API, click on the variable icon besides the Text, and enter the value currentItem.attributes.courseName For size, under Text Span Style Properties, give it a Font Token of Headline Small

8. For spacing and alignment, go to Default Properties and align it as Top Left Under Styling Properties, give it a margin of value 10px

9. Insert a new Text Widget inside the Column Widget. Again, for fetching data from the API, click on the variable icon besides Text, and give it a value of currentItem.attributes.Type For spacing and alignment, go to Default Properties and align it as Top Left Under Styling Properties, give it a margin of value 10px

2. Navigating to Articles Page

For Navigation, first we need to create a new page, "Articles" (Note: You are free to name it whatever you wish). Navigate to the Column widget, under Default Properties, click on the Event Handlers button, and add an event with the Action: Go to Page and select the Articles page from the dropdown. Now, you can navigate from the Courses page to the Articles page.

Event Handler added