Articles

1. Building Articles page

This page shows the third 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 Articles page:

1. Since we have already defined the API Calls in the previous steps, now we can proceed to building the Articles page. To start fetching data from the Articles API, select the Articles Page.

2. On the Properties Panel, navigate to DataSource, click on the {{x}} Variable icon, and select Articles API from the dropdown menu. Since we defined a Variable while defining the Articles API, we need to provide a Page Parameter which appears as the name of the variable we defined before.

3. For our example, we defined it as courseName, click on the {{x}} Variable icon, and enter the value courseName

4. To add an AppBar, select the Articles page, and then turn on the Show App Bar toggle ON. Under App Bar Title, enter the text as Articlesand 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.

5. Now, for displaying different articles, we can wrap all the items in a ListView. 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

6. To dislay Articles with an image, and some text, create a Row widget. To make it prettier, provide it with a Margin of 16px on Left, Top and Right, and Border Radius of 8px on all corners. Assign a background color for each Row, #FEE7CD. Also, set the Height to 200px.

7. Now, add an Image Widget inside the Row Widget. We can set the image as static for now, you can download the image from here. Navigate to Image Source under Widget Properties, you can directly paste the URL, or add the image by uploading it from Media Assets. Set Box Fit as Fit Height to make sure that the Image is displayed properly.

8. Add a Text Widget inside the Column Widget. To fetch the Article's name from the API, click on the variable icon besides the Text, and enter the value currentItem.attributes.articleName For size, under Text Span Style Properties, give it a Font Token of Label Large

2. Navigating Articles

To make sure that the user is redirected to the Article clicked, we need to add an Event Handler on every Row Widget.

1. First, select the Row Widget and navigate to Default Properties, add an Event Handler.

2. Select Action as Open Url, click on the variable icon besides the Url text, and enter the value currentItem.attributes.articleLink and select LaunchMode as WebView.

Add navigation for articles