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:
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.
On the Properties Panel, DataSource, click on the
{{x}}
Variable icon, and select Courses API from the dropdown menu.
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 as2
. We have selected the Background Color as#04A24C
and Back Icon Color as#FFFFFF
.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.
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
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
To make the Image smaller, under Widget Properties, change the Box Fit to
Scale Down
, with an Aspect Ratio of1
. Also, navigate to the Default Properties, and align the Widget toTop Left
and give it a height of 50px.
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 ofHeadline Small
For spacing and alignment, go to Default Properties and align it as
Top Left
Under Styling Properties, give it a margin of value10px
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 asTop Left
Under Styling Properties, give it a margin of value10px
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.
Last updated