Designer

Before you start

For this guide, we will need the following:

• An Elsa Server project

• An Elsa Studio instance

  docker pull elsaworkflows/elsa-studio-v3:latest
  docker run -t -i -e ASPNETCORE_ENVIRONMENT='Development' -e HTTP_PORTS=8080 -e ELSASERVER__URL=https://localhost:5001/elsa/api -p 14000:8080 elsaworkflows/elsa-studio-v3:latest

Port Numbers

When starting Elsa Studio, make sure you provide it with the correct URL to the Elsa Server application.

For example, if Elsa Server runs on https://localhost:5001, the Docker command should look like this:

docker run -t -i -e ASPNETCORE_ENVIRONMENT='Development' -e HTTP_PORTS=8080 -e ELSASERVER__URL=https://localhost:5001/elsa/api -p 14000:8080 elsaworkflows/elsa-studio-v3:latest

Please return here when you are ready.

Workflow Overview

We will define a new workflow called GetUser. The purpose of the workflow is to handle inbound HTTP requests by fetching a user by a given user ID from a backend API and writing them back to the client in JSON format.

For the backend API, we will use JSONPlaceholder, which returns fake data using real HTTP responses.

Our workflow will parse the inbound HTTP request by getting the desired user ID from a route parameter and use that value to make an API call to JSONPlaceholder.

The following is an example of such an HTTP request that you can try right now from your browser: https://jsonplaceholder.typicode.com/users/2

The response should look similar to this:

{
  "id": 2,
  "name": "Ervin Howell",
  "username": "Antonette",
  "email": "[email protected]",
  "address": {
    "street": "Victor Plains",
    "suite": "Suite 879",
    "city": "Wisokyburgh",
    "zipcode": "90566-7771",
    "geo": {
      "lat": "-43.9509",
      "lng": "-34.4618"
    }
  },
  "phone": "010-692-6593 x09125",
  "website": "anastasia.net",
  "company": {
    "name": "Deckow-Crist",
    "catchPhrase": "Proactive didactic contingency",
    "bs": "synergize scalable supply-chains"
  }
}

Our workflow will essentially be a proxy sitting in front of the JSONPlaceholder API and return the response.

Designing the Workflow

Follow these steps to create the workflow using Elsa Studio.

1

Create Get User Workflow

Create a new workflow called Get User

2

Add Activities

Add and connect the following activities to the design surface:

• HTTP Endpoint

• Set Variable

• HTTP Request (flow)

• HTTP Response (for 200 OK)

• HTTP Response (for 404 Not Found)

3

Create Variables

Create the following variables:

Name	Type	Storage
RouteData	ObjectDictionary	Workflow Instance
UserId	string	Workflow Instance
User	Object	Workflow Instance

4

Configure Activities

Configure the activities as follows:

HTTP Endpoint

Input

Property	Value	Syntax
Path	users/{userid}	Default
Supported Methods	Get	Default

Output

Common

Set Variable

Input

Property	Value	Syntax
Variable	UserId	Default
Value	{{ Variables.RouteData.userid }}	Liquid

HTTP Request (flow)

Input

Property	Value	Syntax
Expected Status Codes	200, 404	Default
Url	return $"https://jsonplaceholder.typicode.com/users/{Variables.UserId}";	C#
Method	GET	Default

Output

HTTP Response (200)

Input

Property	Value	Syntax
Status Code	OK	Default
Content	variables.User	JavaScript

HTTP Response (404)

Input

Property	Value	Syntax
Status Code	NotFound	Default
Content	User not found	Default

5

Connect Activities

Connect each activity to the next. Ensure that you connect the 200 and 404 outcomes of the HTTP Request (flow) activity to the appropriate HTTP Response activity.

6

Publish

Publish the workflow.

The final result should look like this:

Running the Workflow

Since the workflow uses the HTTP Endpoint activity, it will trigger when we send an HTTP request to the /workflows/users/{userId} path.

Try it out by navigating to https://localhost:5001/workflows/users/2.

The response should look similar to this:

{
  "id": 2,
  "name": "Ervin Howell",
  "username": "Antonette",
  "email": "[email protected]",
  "address": {
    "street": "Victor Plains",
    "suite": "Suite 879",
    "city": "Wisokyburgh",
    "zipcode": "90566-7771",
    "geo": {
      "lat": "-43.9509",
      "lng": "-34.4618"
    }
  },
  "phone": "010-692-6593 x09125",
  "website": "anastasia.net",
  "company": {
    "name": "Deckow-Crist",
    "catchPhrase": "Proactive didactic contingency",
    "bs": "synergize scalable supply-chains"
  }
}

Summary

In this guide, we learned how to design a workflow using Elsa Studio.

We leveraged the HttpEndpoint activity and used is as a trigger to start the workflow.

The workflow is able to read route parameters and store it in a variable, which we then used as an input to send an API call to the JSONPlaceholder API that in turn returns the requested user.

We have also seen how to handle various responses from JSONPlaceholder: 200 OK and 404 Not Found

The workflow created in this guide can be found here.