In this tutorial series you are rebuilding the GitHub Example App. Last time you added a swipe view for issues. This time you will add a comments page that the user can navigate to when they select an issue.

Create another page in the app, with no config elements, and the name “Comments”.

Pass Comment Info

The page will require the info about the repo and issue selected by the user in the previous pages, so add the following Page Variables on the right of the editor:

• “owner” – Swift / Java String
• “repo” – String
• “number” – Int / Integer
• “issue_title” – String

Go back to the Issues page. Select the Comment Button and open its Tapped Event. Add a Go To Page Action, selecting the Comments page and the fade transition. Pass the Page Variables from the Data Source the View is displaying and the variables that were passed into the page:

• Pass the owner and repo variables forward.
• Pass the number variable the Data Source - Issue Pager Controller / View Pager - Response /repos/{owner}/{repo}/issues 200 Data TypeItem - Number field.
• Pass the issue_title variable the Data Source - Issue Pager Controller / View Pager - Response /repos/{owner}/{repo}/issues 200 Data TypeItem - Title field.

Select the Back Button and add a Go Back a Page Action to the Tapped Event.

Display Comments

Open the Comments page again – it will have a similar design to the Issues page, but will be slightly simpler. Add a View to occupy the top quarter of the page height, naming it “Header View”, and choosing a background color. Inside it add the following Elements:

• A Button / Text Button on the left at the top, named “Back Button”, with the Text “Back”.
• A Button / Text Button on the right at the top, named “New Comment Button”, with the Text “New Comment”.
• An Image under the Buttons, named “Comment Image”, using the comment asset you used earlier, scaled to around the height of a line of text.
• A Label / Text View to the right of the Image, named “Comments Label” / “Comments Text View”, displaying the Text “Comments on:”.
• A Text View under the comments Elements, named “Issue Name Text View”, with large font, scaled to occupy most of the width and two lines of text, with initial Text “Issue Title”.

Under the Header View, add placeholder Elements similar to the Issues page:

• An Image Element named “Placeholder Image”, with the comments image asset, occupying around a quarter of the page in the center.
• A Label / Text View Element named “Placeholder Label” / “Placeholder Text View”, displaying “No Comments” just under the Image.
• An Activity Indicator / Progress Circle just above the placeholder Elements – set it to Hidden.

On top of the placeholder Elements, add a Page Controller / View Pager, naming it “Comment Page Controller” / “Comment View Pager”. Set the Content Type / Pager Type to Dynamic. Position the Element to occupy the remainder of the page under the Header View, hiding the placeholders.

Add a Page Controller View / Pager View, naming it “Comment View”. Inside it add the following Elements (you might prefer to copy and paste these from the Issues page):

• An Image named “Avatar Image” near the top left, icon sized and with the GitHub image asset.
• A Label / Text View named “Username Label” / “Username Text View”, to the right of the user Image, with “Username” as its Text.
• A Button / Image Button named “Menu Button” to the right of the username, with the menu image you used earlier.
• A Text View under the other Elements, named “Comment Body Text View”, occupying most of the rest of the View, with initial Text “Comment”.

Your page should look something like this:

Request Comments

Add an API request to the page, choosing GET /repos/{owner}/{repo}/issues/{number}/comments. Open the request and select the Path in Parameters. Bind each one to its corresponding Page Variable: number, owner, and repo.

In Responses, bind the fields as follows:

• The Data Source to the Page Controller / View Pager
• user - login to the Username text Element
• body to the Comment Body text Element

Use the same technique as before to load the avatar image, selecting the View inside the Page Controller / View Pager, and adding a Display Image from URL Action to the Load / Loaded Event – select the User - Avatar_url field from the Data source.

Back in the request open Events, choose the 401 unauthorized Event and add a Go To Page Action navigating to the Login page. Select the 200 Event, adding a Stop Animating an Activity Indicator (iOS) / Set Value Action (Android) – hiding the Progress Circle.

Select the page in the Element Tree and open Properties > Events. In the Appeared / Resume Event add the following Actions:

• Run API Request, selecting the GET request.
• Set Value, setting the Issue Name text Element to the issue_title Page Variable.

Finally, select the Back Button and add a Go Back a Page Action to the Tapped Event (choosing true on iOS).

You can test the app now and see the comments display when you tap the Comment Button in the issues. Next time you will add edit pages for issues and comments.