From f45cd4ca5f7e4b13589b2c67aeaf67be11d12cc3 Mon Sep 17 00:00:00 2001
From: Nikhila Jain <99252011+jnikhila@users.noreply.github.com>
Date: Mon, 11 Mar 2024 17:40:18 +0530
Subject: [PATCH] feat: workflow docs (#2082)
## Description
Provide a concise summary of the changes made in this pull request.
- A new section for Workflows added to the sidebar
- Workflows
-
[Overview](https://appsmith-docs-git-feat-workflow-tutorial-get-appsmith.vercel.app/workflows)
- A brief about workflows, components, and links to get started.
- Tutorial
- [Create a basic
workflow](https://appsmith-docs-git-feat-workflow-tutorial-get-appsmith.vercel.app/workflows/tutorials/create-workflow)
- Trigger it from the Appsmith app
- Integrate on Appsmith events and execute the workflow
- Added an interactive Arcade so that users can learn in an interactive
mode
- How-To guides
- [Create Approval
Workflow](https://appsmith-docs-git-feat-workflow-tutorial-get-appsmith.vercel.app/workflows/how-to-guides/create-approval-workflow)
- How to create an approval workflow that showcases a refund approval
example
- Create a workflow to handle automated approvals and manual
approval/rejections
- Trigger workflow to add new refund requests to the workflow
- Read the pending refund requests in the Appsmith app
- Take action in the Appsmith app
- Resolve requests in Workflow
- Notify users of the outcome
- Reference
- [Workflow
Queries](https://appsmith-docs-git-feat-workflow-tutorial-get-appsmith.vercel.app/workflows/reference/workflow-queries)
- To give information on the type of workflow queries and their
parameters
- [Workflow
Functions](https://appsmith-docs-git-feat-workflow-tutorial-get-appsmith.vercel.app/workflows/reference/workflow-functions)
-
[Concept](https://appsmith-docs-git-feat-workflow-tutorial-get-appsmith.vercel.app/workflows/concepts/workflows-in-appsmith)
- To provide information on the Workflow feature in Appsmith and its key
capabilities.
- Granular Access Control
- [ Roles >> Application
resources](https://appsmith-docs-git-feat-workflow-tutorial-get-appsmith.vercel.app/advanced-concepts/granular-access-control/roles#application-resources)
- Updates to add Workflow permissions
## Type of PR
Check the appropriate box:
- [ ] Review Fixes
- [ ] Documentation Overhaul
- [x] Feature/Story
- Link one or more Engineering Tickets
*
- [ ] A-Force
- [ ] Error in documentation
## Documentation tickets
Link to one or more documentation tickets:
- #2076
- #2118
- #2100
- #2099
## Checklist
Choose only the ones that are applicable.
- [x] Checked for Grammarly suggestions.
- [x] Adhered to the writing checklist.
- [x] Adhered the media checklist.
- [ ] Verified and updated cross-references or added redirect rules.
- [ ] Tested the redirect rules on deploy preview.
- [ ] Validated the modifications made to the content on deploy preview.
- [ ] Validated the CSS modifications on different screen sizes.
---
.../config/vocabularies/technical/accept.txt | 34 ++-
.../granular-access-control/roles.md | 2 +-
website/docs/workflows/README.md | 59 ++++-
.../how-to-guides/create-approval-workflow.md | 163 +++++++++++++
.../workflows/reference/workflow-functions.md | 127 ++++++++++
.../workflows/reference/workflow-queries.md | 107 ++++++++
.../workflows/tutorials/create-workflow.md | 229 ++++++++++++++++++
website/sidebars.js | 29 ++-
website/src/css/custom.css | 5 +
.../static/img/appsmith-workflow-concept.svg | 4 +
.../static/img/appsmith-workflow-overview.png | Bin 0 -> 322445 bytes
11 files changed, 754 insertions(+), 5 deletions(-)
create mode 100644 website/docs/workflows/how-to-guides/create-approval-workflow.md
create mode 100644 website/docs/workflows/reference/workflow-functions.md
create mode 100644 website/docs/workflows/reference/workflow-queries.md
create mode 100644 website/docs/workflows/tutorials/create-workflow.md
create mode 100644 website/static/img/appsmith-workflow-concept.svg
create mode 100644 website/static/img/appsmith-workflow-overview.png
diff --git a/.github/styles/config/vocabularies/technical/accept.txt b/.github/styles/config/vocabularies/technical/accept.txt
index c13a550269..b75930ec90 100644
--- a/.github/styles/config/vocabularies/technical/accept.txt
+++ b/.github/styles/config/vocabularies/technical/accept.txt
@@ -38,4 +38,36 @@ Login
Signup
reCAPTCHA
Edition
-Embed
\ No newline at end of file
+Embed
+Datasources
+Workflow
+Workflows
+Webhook
+workflow
+SMTP
+Postman
+assignRequest
+message
+resolutions
+requestName
+metadata
+requestToUsers
+requestToGroups
+Metadata
+Queries
+queries
+Functions
+functions
+JavaScript
+javascript
+Datasource
+datasource
+Human-in-the-Loop
+workflowInstanceId
+resolution
+payload
+executeWorkflow
+data
+Data
+Resolution
+workflows
\ No newline at end of file
diff --git a/website/docs/advanced-concepts/granular-access-control/roles.md b/website/docs/advanced-concepts/granular-access-control/roles.md
index 7f383cd40a..e679de697e 100644
--- a/website/docs/advanced-concepts/granular-access-control/roles.md
+++ b/website/docs/advanced-concepts/granular-access-control/roles.md
@@ -41,7 +41,7 @@ In this section, you'll find permissions related to the application and its reso
| **App** | Create pages and queries inside the app | Edit pages and queries inside the app. | Delete the app and its pages and queries. | View the app and its pages and queries. | - | Make the application public | Export that particular application. |
| **Page** | Create queries on the page. | Edit the page and its queries. | Delete the page and its queries. | View the page and its queries. | - | - | - |
| **Query** | - | Edit the query. | Delete the query. | View the query. | Execute the query. | - | - |
-
+| **Workflows** | Create new workflows and resources inside a workflow. | Required to make changes to the Workflow.| Required to delete a workflow. Users will need **Edit** permission to delete individual actions inside the workflow. | An **Edit** permission also enables the permission to view workflow run history.| An **Edit** permission also enables the **Execute** permission to run workflow.| - | -|
### Datasource and environments
diff --git a/website/docs/workflows/README.md b/website/docs/workflows/README.md
index 7b9b198130..09ef371cc9 100644
--- a/website/docs/workflows/README.md
+++ b/website/docs/workflows/README.md
@@ -1,5 +1,60 @@
---
-description: This page gives you an overview of workflows feature in Appsmith.
+description: This page provides an overview of the workflows feature in Appsmith, detailing its key components and functionality.
+title: Overview
+hide_title: true
---
+
-# Overview
+
+
Overview
+
+
+
+
+
+
+
+Appsmith Workflows are essential for automating tasks and orchestrating processes within applications. By integrating code-based and node-based systems, they provide a practical solution for automating tasks, managing workflows, enabling human-in-the-loop (HITL) interactions, and integrating with external services.
+
+## Workflow capabilities
+
+Appsmith Workflows are versatile and designed to handle a wide range of scenarios:
+
+### Automate business-critical processes
+
+Using app-building capabilities of Appsmith in workflows, developers can automate critical tasks based on business rules and requirements. From ticket assignments in customer support workflows to complex data processing operations, Workflows streamline processes efficiently.
+
+### Enable Human-in-the-Loop interactions
+
+Appsmith Workflows allow for human interventions within automated processes, facilitating informed decision-making through the Appsmith app. Decision points within workflows empower users to review and take appropriate actions, enhancing the efficiency and effectiveness of workflows.
+
+## Explore trigger types
+
+Appsmith supports different trigger types to configure actions and processes within workflows:
+
+- **Webhook**- Triggered by external events or HTTP requests, Webhook triggers enable real-time data processing and action execution based on incoming data. Learn how to use the Webhook triggers in the [Getting started with workflows](#getting-started-with-workflows) tutorial.
+
+- **Integrated Datasource for use in Appsmith Apps**- Seamlessly connect workflows with Appsmith applications using prebuilt integrations. This allows for seamless execution of operations within the app and direct management of workflows from the Appsmith interface. Delve deeper into integrated datasource triggers using Appsmith app in the [Getting started with workflows](#getting-started-with-workflows) tutorial.
+
+- **Scheduled Jobs (Cron Jobs)**- Scheduled to run at specific times or intervals, Scheduled Jobs automate tasks using Cron expressions. Stay tuned for updates on the availability and usage of Scheduled Jobs within Appsmith. (**Coming Soon**)
+
+## Getting started with workflows
+
+Begin exploring Appsmith Workflows with the comprehensive getting started tutorial.
+
+
+ Learn how to create your first workflow, configure webhook trigger to connect with external system, and integrate workflow natively with Appsmith app.
+
+
+
+
+
diff --git a/website/docs/workflows/how-to-guides/create-approval-workflow.md b/website/docs/workflows/how-to-guides/create-approval-workflow.md
new file mode 100644
index 0000000000..a71942d6aa
--- /dev/null
+++ b/website/docs/workflows/how-to-guides/create-approval-workflow.md
@@ -0,0 +1,163 @@
+---
+description: This page provides detailed steps to set up an approval Webhook workflow on Appsmith.
+title: Create Approval Workflow
+hide_title: true
+---
+
+
+
+
Create Approval Workflow
+
+
+
+
+
+
+
+In a human-in-the-loop approval workflow, such as processing refund requests, you can use workflows in Appsmith. The human intervention can happen through your Appsmith app. This page shows how to set up a human-in-the-loop approval workflow using Appsmith.
+
+
+
+
+## Prerequisites
+
+Before you start, make sure you have:
+
+* A self-hosted instance of Appsmith. Refer to the [Appsmith installation guides](/getting-started/setup/installation-guides) for detailed instructions on setting up your Appsmith instance.
+* Basic knowledge of creating a basic workflow in Appsmith. For more information, see [Tutorial - Create Basic Workflow](/workflows/tutorials/create-workflow).
+* Configured your datasource that manages your data and SMTP datasource (to notify users) in your workspace. If not, configure these datasources. For more information on configuring datasource, see the available [Datasources](/connect-data/reference) in Appsmith.
+
+## Create workflow
+
+Follow these steps to set up a webhook workflow within your workspace.
+
+1. Create a new workflow (_Refunds_) in your workspace.
+2. Configure it as a webhook workflow.
+3. Create a query to fetch order details (_getOrderDetails_) details. For example, the below query fetches the order details for the given `order_id` from the `orders` table.
+ ```sql
+ -- The order_id is a parameter, and replaced by actual value passed by the application
+ select * from public. "orders" where order_id = {{this.params.order_id}};
+ ```
+4. Create a query to update the order status once a refund is processed. For example, once a refund is approved, update the order status in the `order` table to `Refund Processed`. In case of rejection, the order status remains unchanged.
+ ```sql
+ -- The order_id are parameters and replaced by actual value passed by the application
+ -- highlight-next-line
+ Update public. "orders" set status = 'Refund Processed' where order_id = {{this.params.order_id}};
+ ```
+5. Create queries to send emails to inform users of the outcome. For example, you can create two queries:
+ * To notify approval (_notifyUser_):
+ * Parameterize the query to include:
+ * Customer name (`{{this.params.customer_name}}`) who raised the request.
+ * Customer email (`{{this.params.customer_email}}`) to send email notification.
+ * To notify rejection (_notifyRejectionToUser_):
+ * Parameterize the query to include:
+ * Customer name (`{{this.params.customer_name}}`) who raised the request.
+ * Customer email (`{{this.params.customer_email}}`) to send email notification.
+ * Rejection reason (`{{this.params.rejection_reason}}`).
+ * Pass these parameters from your app to the workflow.
+
+6. Click the **Publish** button to publish the workflow.
+
+## Set up automatic refunds
+
+When a user submits a refund request through your application, you may want to process automatic refunds based on predefined business rules. For example, you might automatically approve refunds where the refund amount is less than $10. Here's how you can handle this scenario:
+
+1. In your workflow, go to **Main** under _JS Objects_. In the JS code editor, replace the auto-generated code with the following snippet. This code fetches the order details with the given `order_id`. If the order value is less than $10, it initiates a refund and notifies the customer via email.
+
+ ```javascript
+ export default {
+ async executeWorkflow(order) {
+ if (order && order.order_id) {
+ console.log('data' + order.order_id);
+ // Fetch refund details based on the given refund detail
+ const order = await getOrderDetails.run({ "order_id": order.order_id });
+ // Iterate through requests
+ if(order){
+ // Verify the order value
+ if (order.amount < 10) {
+ // Add logic for refund processing if any
+ // Initiate refund for amounts less than $10
+ await initiateRefund.run({
+ "id": order.order_id,
+ "status": 'Refund Processed'
+ });
+ // Send refund approval email to the customer
+ await notifyUser.run({
+ "customer_email": refund_req.customer_email ,
+ "customer_name": refund_req.customer_name
+ });
+ }
+ }
+ }
+ }
+ }
+ ```
+2. Click the **Publish** button in the top right corner to apply your changes.
+3. Execute the workflow whenever a user submits a new refund request.
+
+## Handle approvals or rejections
+
+When managing approvals or rejections, create refund requests and track user actions for further processing. Follow these steps:
+
+1. In your workflow, go to **Main** under _JS Objects_, and add the following function. This function generates a pending request using the `assignRequest` workflow function. For more information, see the [assignRequest](/workflows/reference/workflow-functions#assign-request) function.
+ ```javascript
+ // manage refunds for amounts equal to or more than $10
+ async createandManageRequests(order) {
+ const response = await appsmith.workflows.assignRequest({
+ requestName: "getPendingRefundRequests",
+ message: "Refund raised by " + order.customer_name+ " for amount " + order.amount,
+ requestToUsers: [order.approver_email],
+ resolutions: ["Approve", "Reject"],
+ metadata: { "order": order }
+ });
+
+ if (response && response.resolution === "Approve") {
+ //Add logic for refund processing if any
+ // Initiate refund when user approves
+ await initiateRefund.run({
+ "id": order.order_id,
+ "status": 'Refund Processed'
+ });
+ // Send refund approval email to the customer
+ await notifyUser.run({
+ "customer_email": refund_req.customer_email ,
+ "customer_name": refund_req.customer_name
+
+ });
+ } else if (resolution && response.resolution === "Reject") {
+ // Send refund rejection email to the customer
+ // Supply the rejection reason as a parameter
+ await notifyRejectionToUser.run({
+ "customer_email": refund_req.customer_email ,
+ "customer_name": refund_req.customer_name,
+ "rejection_reason": refund_req.rejection_reason
+ });
+ }
+ }
+ ```
+2. Call the above function when the order value is equal to or more than $10.
+3. In your app, create a workflow query (_getRefundReqs_) to fetch these requests. Configure it as follows:
+ * **Workflow name** - Select **Refunds**.
+ * **Request type** - Select **Get requests**.
+ * **Request name** - Add `getPendingRefundRequests` to it. It is the same request name you added in your workflow _Main_ JS object in `appsmith.workflows.assignRequest()` in the step 1 of this section.
+4. Drag a Table widget and bind the **getRefundReqs** query to it. You may need to transform data based on your user interface requirements. In which case, use a JS object to execute the query, perform transformations, and bind the transformed data to the Table widget.
+5. Create another workflow query (_resolveReqs_) to capture **Approve** or **Reject** actions:
+ * **Workflow name** - Select **Refunds**.
+ * **Request type** - Select **Resolve Requests**.
+ * **Request Id** - Add `{{this.params.requestId}}` to it.
+ * **Resolution** - Add `{{this.params.resolution}}` to it.
+ * **Metadata** - Add `{"rejectionReason" : {{this.params.rejectionReason}}}` to it.
+6. Bind the query (_resolveReqs_) to the `onClick` event of **Approve** and **Reject** buttons, and pass appropriate parameters.
+7. Deploy your app to test the workflow.
+
+## Troubleshooting
+
+If you face issues, contact the support team using the chat widget at the bottom right of this page.
diff --git a/website/docs/workflows/reference/workflow-functions.md b/website/docs/workflows/reference/workflow-functions.md
new file mode 100644
index 0000000000..ae503ca469
--- /dev/null
+++ b/website/docs/workflows/reference/workflow-functions.md
@@ -0,0 +1,127 @@
+---
+description: This page provides detailed information on workflow functions available in Appsmith.
+title: Workflow Functions
+hide_title: true
+---
+
+
+
+
Workflow Functions
+
+
+
+
+
+
+
+Workflow functions are in-built framework functions that enables you to interact with different entities like datasources, queries, external systems, and human-in-the-loop interactions. This page provides information about the workflow functions available in Appsmith, including their signatures, parameters, and usage examples.
+
+## executeWorkflow()
+
+The `executeWorkflow()` function serves as a central control unit for executing workflows and marks the starting point of the workflow execution within Appsmith. This function allows you to create a workflow logic for execution of tasks.
+
+### Signature
+
+```javascript
+executeWorkflow(data: JSON): Promise
+```
+### Parameters
+
+Below are the parameters required by the `executeWorkflow()` function to execute:
+
+#### data `JSON`
+
+
+ The parameter `data` holds the data passed from your App to trigger and process the workflow. For example, consider the following data passed to the workflow where `data` holds the body of the post request when triggered via webhook, and holds `Trigger Data` property of the [Trigger Workflow](/workflows/reference/workflow-queries#trigger-workflow) query when workflow is executed from an Appsmith app.
+
+ ```javascript
+ {
+ "userId": 123,
+ "action": "updateProfile",
+ "data": {
+ "firstName": "John",
+ "lastName": "Doe",
+ "email": "john.doe@example.com"
+ }
+ }
+
+ ```
+ In your workflow, you can access properties within the `data` object like `userId` using dot notation. To access the `userId`, use `data.userId`.
+
+
+### Return type
+
+The `executeWorkflow()` returns a Promise that resolves to a boolean value, either `true` or `false`, indicating the success or failure of the workflow execution.
+
+## assignRequest()
+
+The `assignRequest()` function is part of the `workflows` object within the global `appsmith` object in Appsmith. It allows you to create a decision point in a workflow that require users intervention. The decision point is created as a pending request in the workflow and can be accessed later in your apps to enable users to take action by using [Get requests](/workflows/reference/workflow-queries#get-requests) workflow query. Once you create pending requests, the workflow pauses and awaits for user action.
+
+### Signature
+
+```javascript
+assignRequest({requestName: string, message: string, resolutions: string[], metadata:{key: string, value: any}, requestToUsers: string[], requestToGroups: string[] }) : Promise
+```
+
+### Parameters
+
+Below are the parameters required by the `assignRequest()` function to execute:
+
+#### requestName `String`
+
+
+ The name of the request, which serves as its identifier within the workflow. This name can be used to filter requests as part of [Get requests](/workflows/reference/workflow-queries#get-requests) workflow query by adding it in the `Request name` attribute.
+
+
+#### message `String` `Optional`
+
+ A descriptive message associated with the request, providing more context for users. For example, when creating a refund request, you might include a message like "Refund request raised by User 1".
+
+
+#### resolutions `String[]`
+
+ Represents the possible actions a user can take on the request. The applicable resolution passed to the [Resolve requests](/workflows/reference/workflow-queries#resolve-requests) workflow query to apply the selected resolution. For example, `['Approve', 'Reject']`.
+
+
+#### metadata `JSON` `Optional `
+
+ Add data that may be needed to process the request or display more information to the user in your app. For example, you can include a unique identifier for the record associated with the request. Use the identifier in your app to fetch and show the details to user.
+
+
+#### requestToUsers `String[]`
+
+ The `requestToUsers` parameter allows for targeted assignment of requests to specific Appsmith users. It specifies an array of emails for users to whom the pending requests will be assigned. The users specified here will be able to take action and resolve the pending request. These users need to be a part of the Appsmith instance for assigning the request to them. It's mandatory to supply either `requestToUsers` or `requestToGroups` atribute for request assignment.
+
+
+#### requestToGroups `String[]` `Optional`
+
+
+The `requestToGroups` parameter allows for targeted assignment of requests to specific User groups in Appsmith. If specifies the user group names to which the request will be assigned for resolution. When specified, the request will be assigned to all the users belonging to the groups. Each group name must be configured in your app and have appropriate permissions to perform actions. It's mandatory to supply either `requestToUsers` or `requestToGroups` atribute for request assignment. The workflow restarts upon the first action taken by any user within the assigned group.
+
+
+### Return type
+
+The `assignRequest()` function returns a Promise in a JSON format representing the generated response. The response includes the following data:
+
+#### workflowInstanceId `String`
+
+
+ Represents the unique identifier for the workflow instance.
+
+
+#### resolution `String`
+
+
+ Indicates the resolution applied to the request based on the user action.
+
+
+#### payload `JSON`
+
+
+ It holds the data from the `metadata` attribute used during the processing of the [Resolve Requests](/workflows/reference/workflow-queries#resolve-requests) workflow query.
+
+
\ No newline at end of file
diff --git a/website/docs/workflows/reference/workflow-queries.md b/website/docs/workflows/reference/workflow-queries.md
new file mode 100644
index 0000000000..9fd819918e
--- /dev/null
+++ b/website/docs/workflows/reference/workflow-queries.md
@@ -0,0 +1,107 @@
+---
+description: This page provides detailed information on workflow queries available in Appsmith.
+title: Workflow Queries
+hide_title: true
+---
+
+
+
+
Workflow Queries
+
+
+
+
+
+
+
+Workflow queries in Appsmith applications enable interaction with workflows, allowing users to execute operations within their apps. This page provides detailed information on workflow queries and their parameters.
+
+## Workflow name
+
+Specifies the workflow with which the Appsmith application will interact and execute operations. It allows users to select a specific workflow from all the workflows available in the workspace for interaction and execution.
+
+
+## Request type
+
+Request type defines the operation to execute on the workflow. The available types are:
+
+* **Trigger Workflow:** Triggers the workflow and executes it based on predefined conditions or events, along with the supplied parameters.
+* **Get Requests:** Retrieve information about the requests generated as part of the workflow.
+* **Resolve Requests:** Handles and concludes existing workflow requests raised as part of the `Get Requests` operation.
+
+
+### Trigger Workflow
+
+A `Trigger Workflow` request initiates a workflow run with supplied parameters, and executes the predefined operations within the workflow.
+
+
+#### Trigger data
+
+Trigger data supplies the parameters needed by the workflow to execute. The parameters are supplied in a JSON object. For example:
+```javascript
+{
+ "parameter1": "value1",
+ "parameter2": "value2"
+}
+```
+
+
+### Get requests
+
+A `Get Requests` request retrieves the requests created as part of the workflow, specific to the logged-in user. These requests require human intervention for the user to verify and take action.
+
+
+#### Request names
+
+Filters the requests based on their name. One or more request names can be added to retrieve requests.
+
+
+#### Request name
+
+Specifies the name of the request to fetch, as defined while creating request using the `assignRequests` workflow function. For more information, see [assignRequests](/workflows/reference/workflow-functions#assignrequest).
+
+
+#### Request status
+
+
+Filters requests based on their status. The available statuses are: `Pending` and `Resolved`.
+
+
+#### Limit
+
+
+Specifies the maximum number of requests to retrieve. The default value is set to `10`.
+
+
+#### Skip
+
+
+Specifies the number of requests to skip before returning data. The default value is set to `0`.
+
+
+### Resolve requests
+
+The `Resolve requests` request applies resolutions to existing workflow requests based on user actions.
+
+
+#### Request Id
+
+
+Specifies the ID of the request for which resolution is needed.
+
+
+#### Resolution
+
+
+Applies a resolution to the request based on the action taken. The resolution must match those specified while creating the request using the `assignRequests` workflow function. For example, during request creation, if you defined available resolutions as `Approve` and `Reject`, only these resolutions can be applied to the request when a user takes action. Therefore, when passing resolutions to this attribute, ensure they match the predefined options.
+
+
+#### Metadata
+
+
+Add data that may be needed to process the request or perform additional operation in the workflow. For example, you can include a unique identifier for the record associated with the request. Use the identifier in your workflow to fetch details and perform additional operation.
+
diff --git a/website/docs/workflows/tutorials/create-workflow.md b/website/docs/workflows/tutorials/create-workflow.md
new file mode 100644
index 0000000000..7e5f16180e
--- /dev/null
+++ b/website/docs/workflows/tutorials/create-workflow.md
@@ -0,0 +1,229 @@
+---
+description: This page provides detailed steps to set up a workflow on Appsmith.
+title: Create Basic Workflow
+hide_title: true
+---
+
+
+
+
Create Basic Workflow
+
+
+
+
+
+
+
+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](https://www.appsmith.com/pricing). Refer to the [Appsmith installation guides](/getting-started/setup/installation-guides) for detailed instructions on setting up your Appsmith instance.
+* If you are new to Appsmith, see [Tutorial - Basics](/getting-started/tutorials/start-building).
+* 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](#write-code-in-workflow-to-trigger-email) section.
+
+ ```javascript
+ 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](/connect-data/reference/using-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.
+ ```bash
+ 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:
+ ```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.
+
+ ```javascript
+ 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](#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](#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 `` with your email.
+ ```javascript
+ {
+ "email": ""
+ }
+
+ ```
+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`.
+ ```javascript
+ {
+ "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:
+
+
+