Coast Demo Tutorial: Request Setup

The first step of any Coast demo is often the most challenging: deciding what endpoints you want to show.

Let's assume the marketing and sales team instructed you to start the demo experience with a user sign up, via the following request:

curl --request POST \
	--url 'https://cocomo.api.com/signup' \
    --header 'Accept: application/json'
    --header 'Authorization: <YOUR_API_KEY>'
    --data '
        {
          "userID": "uid_example",
          "firstName": "Michael",
          "lastName": "Scott",
          "email": "mscott@dundermifflin.com",
          "dateOfBirth": "1961-03-17",
          "ssn": "123-45-6789"
        }
    '

Go ahead and create a new cURL/JSON step to begin wiring up this request. This step type will automatically add 3 new tabs: Request, Processing, Response. We are going to start with the Request.

1. Construct

Start by selecting the POST method and pasting in the URL. Then, add the headers via the form below.

Before moving on, click the settings gear icon to rename this tab to be more personalized to this step. Change the tab Title and DB Key to the following for a more personalized demo. During the response setup, we will see why this change is useful.

Next step is to paste in the request payload. Click on the Body tab, located under the URL, and paste in the --data contents. The Body codeblock must contain valid JSON, this means that all keys and values must be wrapped in " ".

2. Format

Click on Format to start the Data Linking process. On a request tab, the Format screen is where we tell Coast which inputs we want to display to the user, define the input data types, edit the input Display Labels, and, if applicable, apply Dynamic Default Values and/or Input Transformers. Confused? We will get to what all this means in moment.

Coast automatically parsed the request body and we can now start to link and edit our input data. Check off all the fields where we wish to collect data from the user. With each checkbox, we are telling Coast's auto-generated designs to include this field and to link it 🔗 to its corresponding entry in the code block.

In this example, it makes sense to check each field, aside from User Id. We will set up the User Id will be auto-generated, while all other inputs will be driven by the demo user.

Dynamic Default Value

It can be extremely useful in API demos to dynamically prefill data into user-input fields. Let's apply a dynamic prefill to the User Id field.

Click on the User Id row and we will walk through a simple example of how we can apply some JavaScript to pre-fill a unique string to this field.

Anything returned from in the Dynamic Default Value will replace the hardcoded value currently present in the JSON payload. Let's generate a random string to replace the filler value of "uid_example" we currently have in the request body.

Editing Input Type and Display Name

Click on the Date of Birth input and under Field Properties, indicate to Coast that this is a Date Input. Here, we can also rename the Display Label. Now, Coast's auto-generated UI will link this data to a a date-picker, with a label of Birthdate.