Core Skills:
Creating the UI

Creating the UI for your Composer apps (05:50)

Craft your UI visually from individual components like buttons and text fields with the Interface Builder. Attach data and logic to pages to create dynamic content.

Video Transcript

Hi, this Harri from AppGyver, and I’m going to show you how to construct UI for your app with Composer from individual UI components. So, let's get to it.

We have our empty customers page here, which is visible here on my iPhone 6, streaming from it through this app I have here.

So, we will want to have a list of customers and the ability to click through to the details page. Let's just have this one be customer one, and then we'll add a piece of logic that opens the details page.

And we’ll click here... And action type is "Open Page", and we’ll choose "Customer Details". All right, and then "Done", and save changes again.

Then we will go to the other page we have, the Customer Details page, and just add a few items we want here. So, we'll have a name, and this would be "Customer One", and then List Divider, and another one which is "Company".

So, you can see how you can construct your UI from these small components. You could add a button for some purpose, but let’s just stick with this. So now, when I click "Save Changes" and then publish my app, we will see the application on my mobile phone.

Now, when I click my Customer, I’m opening the Details page. Now we would want to to link these two some real data. So, we have some customer data coming in from an API configured for our our app.

When I go here, I can drag the Customer data resource here, and make it so that we’re querying all of the records. I click "Save Changes", and then when I go to the UI side I can – instead of having type in the value manually, I can make this repeat based on the Customer resource.

Now we get one customer per record and then we can dynamically populate the title field based on the customer name. So, then our Details page will need to know which customer name we clicked, so we go to the Logic Editor again, and here we pass in a parameter which is the ID of the currently clicked customer.

Now that is set up, we can go to the Customer Details page, and here we will attach data for an individual record. We choose one, and the identifier will use the passed parameter, so it dynamically knows which parameters were passed.

So now, when I go back the UI, I can simply reference the customer name and customer company here, and then just for good measure will add a comments module for this customer here, and we'll put it on a separate tab. So now, when I click "Save Changes" and publish, we’ll have live data in our application.

We can see here we have our Customers. I click on Lindsay, I get Lindsay’s comments and company. I click on the Oneal Smith, and I get his company and name – and I can add a nice comment here.

So, it is this easy to construct the app UI, link it to data, add some custom navigation, and then add a entire features like comments. All with drag-and-drop. Thank you for watching.