Coast Demo Tutorial: Response Setup

The following is a sample payload we would expect to receive as a response, from the /signup endpoint.

{
  "createdAt": "string",
  "internalID": "uid_example",
  "userEmail": "mscott@dundermifflin.com",
  "accountStatus": "active"
}

1. Construct

Go ahead and paste this JSON into the response body on the Construct tab, just like we did with the request.

With Coast, even though this demo experience is mocked, we can make use of the Local Database to make it feel real, with Dynamic Default Values.

Specifically, we will want to ensure the userEmail in the response matches the user-input email on the request, as well as populate the createdAt to the present time. Since Coast by default, stores all user-input data linked to a request in the Local Databse, setting this up is easy.

2. Format

Navigate to the Format tab and click on the createdAt. Just like we used the Dynamic Default Value code editor in the request to generate a random ID, we can also use it to pull todays date.

Check off the Created At, User Email and Account Status fields. As with the request, checking these boxes tells Coast's automated design builder to populate the response UI with these data.

Prefill today's date in the createdAt field with this.moment().format.

In addition to pre-filling the value of createdAt in the response, we should also apply some formatting so that its value on the UI is human-readable, and not something like 2023-05-04T19:27:59Z 🤮.

This data formatting is done in the UI Display Transformer. Write any function in here to re-format the data to be displayed on the UI, while keeping its format API-accurate in the code block. Access the data you wish to manipulate via this.val.

Now, let's sync up the userEmail field with the value input in the request on the previous tab. We will do this using the Local Database + Dynamic Default Value. To access the local database inside of the Dynamic Default Value code editor, simply type this.db, followed by the pathway to the data you wish to reference.

Recall on the request Setup, we named the DB Key to be userSignup. So, the user-input email from the request tab is saved at this.db.userSignup.inputs.email.

And just like that, we have a Request, Processing and Response flow, are all wired up. Now it's time to configure how we want the screens to look, in Coast's Designer.