Create Basic Workflow

Business

Appsmith Workflows allow you to automate processes, bringing efficiency and connectivity to your applications. This tutorial guides you through the process of setting up a basic workflow, configuring it as a webhook trigger, integrating and triggering the workflow execution from your Appsmith app.

To learn workflows in Appsmith, you'll build workflow that sends a welcome notification email when new users join your organization. By the end of this tutorial, you will know how to:

• Create a workflow and configure it as a webhook
• Trigger the workflow from an external app (Postman)
• Integrate and execute the workflow from your Appsmith app

Prerequisites

Before you start, make sure you have the following:

• A self-hosted instance of Appsmith with a paid subscription. Refer to the Appsmith installation guides for detailed instructions on setting up your Appsmith instance.
• If you are new to Appsmith, see Tutorial - Basics.
• A REST client. For example, Postman.

Create workflow

Follow these steps to build a notification workflow:

To send notifications to the users you will create a workflow, and configure it as a webhook. Follow these steps to create a webhook workflow within your workspace. The newly created workflow can be accessed in all apps in the same workspace:

1. Click the Create New button in your workspace, and choose Workflow. This action creates a new workflow in your workspace and takes you to the Main JS object code editor. Give a meaningful and unique name to your workflow by editing the name Untitled Workflow 1 to Send_Email_Workflow.

2. In the Main JS object code editor, you will see the executeWorkflow function (as shown below). This function executes whenever a workflow run is triggered. It serves as the main function for writing your logic. You'll update the executeWorkflow() function and add code in the Write code in workflow to trigger email section.

   export default {
       /**
       * Entry point for Workflow execution. All activities to be executed should be defined here.
       * @param data  This function takes in a json object as arguments (data) which can be passed when you trigger the workflow.
       * @returns boolean Shall return true or false.
       */
       async executeWorkflow(data) {
           // start writing your code here.
   
           return true;
       }
   }

You've created your first workflow.

Configure SMTP datasource

To send notifications from the workflow, you will need to set up an SMTP datasource and connect it with an email service provider. Follow these steps to set up an SMTP datasource:

1. Click the Data tab. Click the + icon next to Datasources in your workspace to add a new SMTP datasource.

2. Give it a meaningful and unique name. For example, Send_Email_SMTP

3. Enter the following details in the SMTP connection parameter fields:

   • Host Address: Add smtp-relay.brevo.com in the SMTP host address field.
   • Port: Add 587 in the SMTP port field.
   • Username: Add demo.smtp.send.email@gmail.com in the Username field.
   • Password: Add the below key in the SMTP password field.

     xsmtpsib-b80d2e2a0c90517b7fc8f831270473d56621b3fa7b574f340f2f1687dbd904c4-zkJC7SarXVE3YPhg

4. Test and save the datasource configuration.

Write query to send email

Follow these steps to write a query for sending email:

1. Add a query to send a welcome email to the user and configure it as shown below:

   • Rename the query to Send_Welcome_Email
   • Commands - Select Send email.
   • From Email - Add demo.smtp.send.email@gmail.com.
   • To Email - Add your email address in this field.
   • Subject - Add Welcome to the Team!.
   • Body - Add the below text:

     Dear Employee,
     
     Welcome to the team!
     
     We're thrilled to have you on board and look forward to working together. 
     Feel free to reach out if you have any questions or need help. 
     
     Let's achieve great heights together!
     
     Best regards,
     Company

2. Click the Run button to send an email. Check your inbox, you must have received an email from demo.smtp.send.email@gmail.com.

3. Update the Send_Welcome_Email query and remove your email from the To field, and add {{this.params.send_email_to}} to it. Adding {{this.params.send_email_to}} replaces the parameter send_email_to with the actual value at run time.

4. Go to the Main JS object and update the executeworkflow() function to read the email sent as a parameter.

   export default {
      async executeWorkflow(data) {
          //pass email `send_email_to` the query to send email
         const response = await Send_Welcome_Email.run({"send_email_to": data.email});
          // log the response
          console.log(response);
      
          return true;
      }
   }

5. Click the Publish button to publish your latest changes.

You've successfully integrated the email query in workflow.

Configure Webhook trigger

Follow these steps to configure a webhook trigger for the workflow:

1. Click the gear icon ⚙️ in the bottom left corner to configure the workflow settings.
2. Toggle the Webhook trigger property to configure the workflow as a webhook.
3. Copy and save the URL and the Bearer Token. If you wish to connect your workflow with an external app then you will need the URL and the Bearer Token. You'll see this in action in the Send email using Postman section.
4. Click the Publish button in the top right corner to publish your workflow.

You've configured the webhook trigger for the workflow, and it can be integrated and triggered from external apps.

Send email using Postman

To simulate the workflow connection from external app, you will use Postman and execute the workflow. Follow these steps to trigger the workflow execution:

1. Launch the Postman application on your system.
2. Click on the New button, and choose HTTP request in Postman to create a new request.
3. Choose the HTTP method as POST.
4. Enter the workflow URL you copied in the Configure Webhook trigger section.
5. On the Body tab, select raw, and add the below code in the request body. Here you are setting the parameter value for send_email_to. Remember to replace <add_your_email_address> with your email.

   {
       "email": "<add_your_email_address>"
   }
   
6. Click the Send button to execute the request.
7. The below response is generated, and you will receive an email from demo.smtp.send.email@gmail.com.

   {
   "success": true,
   "message": "Workflow instance started running successfully",
   "data": {
       "workflowInstanceId": "workflowInstance-rjwbe41QF1P1s90YwYw-1"
       }
   }

You've successfully executed your first workflow externally, and can integrate the workflow in your external or Appsmith app.

Send email using Appsmith app

To interact with the workflow from your Appsmith app, Appsmith provides workflow queries. In this section, you'll:

• Write a workflow query
• Bind the workflow query to the Button widget
• Pass parameter (email) from Appsmith app to workflow
• Trigger the workflow by clicking the Button widget

Follow these steps to send email from your app:

1. In your application, drag an Input widget onto the canvas, name it inp_Email, and set its label as Email.
2. Drag a Button widget onto the canvas and configure it as shown below:
   • Name it btn_SendEmail
   • Set the label as Send Welcome Email
3. Under Editor > Queries, click New query/API.
4. In the Create new query/API, click Workflows Query, and name it as SendEmailQuery.
5. Add the below details to configure the workflow query:

   • Workflow name - The workflow name dropdown has all the available workflows in your workspace. Select Send_Email_Workflow.

   • Request type - Select Trigger workflow.

   • Trigger Data - Trigger Data passes the parameters from app to the workflow for processing. Add the below code to pass email parameter to the workflow:

     {
         "email" : "{{inp_Email.text}}"
     }
6. Bind the onClick event of the Send Email button to execute the SendEmailQuery query.
7. Input your email in the inp_Email field, and click Send Email button. You'll see an Email sent prompt. Check your inbox, you must have received an email from demo.smtp.send.email@gmail.com.

You've successfully executed your workflow within your Appsmith app.

🚩 Congratulations. You have built your first webhook workflow and integrated it with your Appsmith app.

In this tutorial, you explored how to create a webhook workflow, pass parameters to the workflow, and execute workflow from your Appsmith app. You can use these skills to build your own workflow and integrate it with your apps.

Happy Workflow Building!

See also

• How-to Guides
• Workflow Queries
• Workflow Functions