Submitting Data to an Endpoint

TABLE OF CONTENTS

• Step 1: Add the Form Component
• Step 2: Configure the External Data Source
• Step 3:  Create the Data Sets
  • JavaScript Data Set
  • External API Data Set
• Step 4: Add a Button Component
• Step 5: Configure Event Handlers
  • Evaluate Payload Event Handler
  • Send API Request Event Handler
• Step 6: Add a Loading Indicator
• Step 7 (Optional): Display the Result
• Result

In this article, we’ll build a simple form to submit data to an API endpoint. This example demonstrates how to configure an App to collect user input, construct a request payload, and send it to an external API.

The workflow includes the following steps:

1. Build a form for user input.
2. Set up an external data source.
3. Create data sets to hold and send data.
4. Add a button to trigger submission.
5. Configure event handlers to send the request.
6. Add a loading indicator.
7. (Optionally) Display the result.

You can download a ready-to-use example App configured with the steps described in the article. Import the API Request Example.zip file into App Studio, then create a Workspace to test the example App. 

Step 1: Add the Form Component

The form collects the user input that will be passed to the API.

1. Drag and drop the Form component onto the canvas.
2. Rename it to waitForm.
3. Adjust the following toggles:

4. Add a field:

This form will provide the Time value used in the payload. You’ll later map it as inputs.time in the JavaScript data set.

Step 2: Configure the External Data Source

The external data source defines where and how data is sent. 

In this example, the endpoint accepts a time duration (in milliseconds), waits for that period, and then returns a response.

1. Create a new external data source named apiLongTask.
2. Use the following request configuration:

   {  "url": "https://db-api.app.cafex.com/api/v2/app-studio-training/longTask/",  "method": "POST",  "payload": {    "fields": [      {        "name": "time",        "type": "number"      }    ]  },  "requestHeaders": [{"name": "X-DataGateway-API-Key","value": "{{your_api_key_here}}"}] }

Note: Replace {{your_api_key_here}} with your actual API key.

This configuration sends a POST request to the endpoint with the numeric field time.

Step 3:  Create the Data Sets

Data sets define how information flows between your form and the external data source. In this step, we’ll create two data sets: a JavaScript data set to construct the payload and an External API data set to execute the request. 

JavaScript Data Set

This JavaScript data set takes the Time value from the form and wraps it in an object to use as the API request body.

1. Go to App > Configuration.
2. Under Data sets, click Add data set.
   
   

If no value is entered in the form, it defaults to 2000 milliseconds, so the request always contains a valid time value.

External API Data Set

This data set executes the API call.

1. Go to App > Configuration.
2. Under Data sets, click Add data set.

Step 4: Add a Button Component

In this step, we’ll add a Button to trigger the API request.

1. Drag and drop the Button component onto the canvas.
2. For Text, enter Start Task.
3. Configure event handlers, as described in Step 5.

Step 5: Configure Event Handlers

The event handlers define what happens when the button is clicked. In this step, we'll configure two event handlers: the first one evaluates the payload, and the second one sends the API request.

Evaluate Payload Event Handler

This event handler prepares the request body by evaluating the JavaScript data set.

1. Select the Button.
2. Under Configuration > Event handlers, click New event handler.
3. Specify the following:

Send API Request Event Handler

This event handler sends the evaluated payload to the external API.

1. Select the Button.
2. Under Configuration > Event handlers, click New event handler.
3. Specify the following:
    

These two event handlers ensure that the App first prepares the payload from the form input, and then sends the completed request to the endpoint.

Step 6: Add a Loading Indicator

The Loading indicator displays the loading message when the API call is in progress.

1. Drag and drop the Container component onto the canvas.
2. In Appearance > Visibility, enter:
   {{apiLongTask:evaluating}}
3. Drag and drop the Text component inside the container.
4. For Configuration > Text, enter:
    Loading…

This setup displays the loading message only while the API request is being processed.

Step 7 (Optional): Display the Result

To indicate that the request has completed:

1. Drag and drop the Text component onto the canvas.
2. For Configuration > Text, enter:
    Request completed: {{ apiLongTask.responseTime}}ms
3. For Appearance > Visible, specify the mustache expression:
   {{ apiLongTask }}

This shows the message once the API request has finished and returned a response.

Result

When you enter a value in the Time field (for example, 5000 for 5 seconds) and click Start Task:

• The App sends the payload { "time": 5000 } to the endpoint.
  
• The API waits 5 seconds before responding.
• The Loading... message appears during that time.
  
• When complete, the Request completed message is displayed.