Coast Demo Tutorial: UI Design
The heavy lifting on your end is now done. Since we've already indicated to Coast the fields we want to show, on both the request and the response, you can select one of Coast's pre-built UIs to enable user interactivity on this demo. Get to value quickly with a gallery UI, but you can always add, remove or custom-style any blocks on screen to get your demo experience tailored exactly how you wish.
Request
Simply head over the the Design screen (found in the top bar) and voila, Coast has auto-formatted the API details we provided. UI. Now, let' just select a gallery UI to get the screen populated with some nice interactive components.
Recall that Coast uses Airbnb as the default prospect while in the Builder. Anytime you see Airbnb, remember that on live demo links, this will be replaced with your prospect's information.
Hit Presentation Mode and type into any of the fields on the mobile screen to see them update in real time in the code block to see Coast work its magic 🪄
This looks pretty good to me, out of the box! Any edits you wish to make on the UI can be done using the panel on the right-hand side. Coast uses a block-based system for designs, read more about how this works in the Blocks section. To change the narrative text in the Guide Panel above thew code block, just click and make the edits you want, in-line.
To begin making any edits, you will need to be in Edit mode. Get into Edit mode by clicking the pencil icon in the top right corner of the designer.
Response
Just like the request, Coast's builder automatically formatted the code block for the response. Let's select a gallery template to instantly populate the UI ⚡️.
If you recall, during Response Setup, we indicated to display the userEmail, accountStatus as well as createdAt fields. As a result, this data was automatically populated in the UI.
While in Presentation Mode, hover over any of th
Note the dynamic value of the createdAt and
userEmail fields. Also, we are seeing the UI Transformer at work here,
with the clean 🧼 date formatting on the UI.
For this example, the Payment Successful text is clearly not relevant. Let's change this to a welcome message, personalized to the user's information.
In Edit, mode, click the text block containing Payment Successful and you will various text-specific controls on the right panel. We will update the contents to Welcome the new user. To grab the user-input name from the local database, click on up the State on the left panel.
Let's now navigate through the Local Database to get the user's name. userSignup → inputs → firstName will copy the path to the user's first name to your clipboard.
Now, let's paste this path into the text block.
