Guides & tutorials

Custom integration with HTTP request module: invoking an AWS lambda function

Import this tutorial scenario in your workspace
Table of contents

Thinking about creating a form with a complex flow and calling many API calls? In this tutorial we’ll invoke an AWS Lambda function thanks to our HTTP request action. 

Previous requirements

Before starting, make sure you meet these requirements: 

  • An Arengu account to create and customize this complex form. 
  • A ‘Hello world’ Lambda function and its API endpoint: we have followed this tutorial to create a Lambda function and an API with AWS API Gateway. It only takes 10 minutes but it’s absolutely necessary in order to follow this tutorial step by step.

What are we going to build?

A basic sign-up form but with a complex flow, whose process is:

  1. Receive the form submission of the user.
  2. Get the day of the week from an external site.
  3. Call the AWS API and send the name of the user and the day of the week.
  4. Show a ‘thank you’ page with the message received from the API request.

Create a signup form in Arengu

Let’s start by using one of our templates, then we’ll add a new field. Go to Arengu, create a form and select the “Signup with email and password template” option, then drag and drop a Text field to the Step 1 of the form with the following settings:

  • ID: change it to ´name´, because it will be our reference in the following steps. 
  • Required: check this box to force the user to fill it.

Open the submission flow editor

Just after the Step 1 you will find a box labeled as “Signup flow”. If you click on it, a new left panel will appear. Click on the “Preview form in a new tab” button next to “execute Signup flow”. 

Get current time and store the day of the week

We’ll use a free external service (timeapi.io) to get the current date. This isn’t the most efficient way to get the date, but it’s a good example to use the `HTTP request` action again. Once you are in the flow editor, add a new HTTP request action with the following settings:

  • ID: getTime.
  • Alias: getTime.
  • URL: https://www.timeapi.io/api/Time/current/zone?timeZone=Europe/Amsterdam
  • Method: GET.

Calling to that URL, our flow will receive a JSON object like this:

{
  "year":2022,
  "month":4,
  "day":18,
  "hour":19,
  "minute":5,
  "seconds":8,
  "milliSeconds":695,
  "dateTime":"2022-04-18T19:05:08.695813",
  "date":"04/18/2022",
  "time":"19:05",
  "timeZone":"Europe/Amsterdam",
  "dayOfWeek":"Monday",
  "dstActive":true
}

As we only want to use the value of “dayOfWeek”, but we want our form to access this value in any other step, let’s store it as a state variable: add a new action called “Store state variable” with these values:

  • Alias: setDayOfWeek.
  • Data fields: dayOfWeek: {{getTime.body.dayOfWeek}} . Here we are using a variable, which is a reference to another action, to store it as a state variable. Setting a recognizable ID in each field and action is a good practice in case you want to access their values. As in the previous action we set the ID as “getTime”, now we are getting its values easily. You can read more about variables in Arengu.

Calling to an AWS Lambda function

Add another HTTP request action, and set the fields:

  • ID: lambdaCall.
  • Alias: lambdaCall.
  • URL: your endpoint provided by AWS API Gateway, with the user’s name as a query parameter, for instance: http://whatever.amazonaws.com/test/helloworld?name={{input.body.name}}&city=Seattle. You can use a reference to a previous field as in this case, in the middle of a URL. Find more examples of how to use variables in Arengu.
  • Body: to meet our AWS Lambda requirements we’ll send a JSON like this: { “time”: “evening” }.
  • Headers: day: {{state.dayOfWeek}}. In the previous step we stored “dayOfWeek” as a state variable, and here we are using it.

Store the API’s response

Apart from calling an external API, our form built in Arengu can also use the received response. The ‘Hello world’ example in the previously mentioned tutorial of AWS sends to the caller a JSON object with a message in the body. An extract of a sample message:

We want to use this message as a ‘Thank you’ message after the form submission, so we are going to store it as a state variable. Again, add a new “Store state variable” action and set:

  • ID: lambdaResponse.
  • Alias: lambdaResponse.
  • Data fields: lambdaResponse: {{lambdaCall.body.message}}.

Have you finished the flow edition? Make sure you ‘Publish’ the changes by clicking on the upper right green button. 

A custom ‘Thank you’ message provided by our API

Go back to the form editor, click on the last block called “Ending screen” and follow these steps:

  • Disable “Redirection” if enabled.
  • Turn “Thank you block” on.
  • Content: {{state.lambdaResponse}}.

Preview, test and debug

After publishing the changes in the form, let’s test it: click on “Preview”, submit the form and our API’s message will appear. We used the name “Alberto” and the city “Seattle” on Monday, so this is our result:

In case something fails, you can debug your submission flow. Check the “Executions” tab in the flow editor and you will see something like this. 

Ready to build your own form? Try to create your own complex flow with all the custom integrations you need thanks to our HTTP request action. Moreover, you can start checking out our native integrations. Sign up free or book a demo with our team.

Do you have any questions about Arengu and its potential? Contact us by chat or mail and we’ll guide you to build your form. 

You might like to read

See more tutorials

Getting started with Arengu

Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.