ELSA Workflows Designer Introduction And Implementation Using .NET Core 7 Web Application

We will discuss ELSA Workflow Features and step-by-step practical implementation using .NET Core 7 Web Application.

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application
Fig- From https://www.nuget.org/packages/Elsa.Activities.Workflows

Agenda

Overview
Features
Why ELSA?
ELSA Dashboard Setup

Overview

ELSA Workflows is the library set that helps us create and use workflow capabilities within the .NET Core application.
We can create ELSA Workflows using C# and JSON. It also has a Workflow Designer as an HTML Web Component.
ELSA has reusable components using which we can manage workflows and activities.
We can also run ELSA Workflows within our application using simple-to-use APIs.
ELSA has a set of functionalities using which we can create our custom extensible activities.

Feature

Create different workflows using Workflow Builder API.
Custom Activities.
Default rich set of activities.
Design long-running workflows.
Create and Manage workflows using ELSA Dashboard UI.
HTTP Endpoints to manage and integrate different API endpoints and receive the response. Else, redirect the request as per need.

Why ELSA?

ELSA has a rich set of libraries that allow us to create and extend workflows with minimal effort.
There are many workflows available in the market, like Azure Logic Apps. But there is some restriction to using and managing that within Azure Cloud. ELSA has the option to host Workflow on any cloud provider. Also, we can set up and use workflows on-premise servers.
Also, we can create and run multiple long-running workflows efficiently, which runs one after another.

If you want to learn more about ELSA Workflow, visit the following link

https://elsa-workflows.github.io/elsa-core/

ASP.NET Core Server with Elsa Dashboard

Let’s start practical implementation

Step 1

Create .NET Core Web Application.

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

Step 2

Configure a new application.

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

Step 3

Provide additional details.

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

Step 4

Please install the following NuGet, which we need while implementing the example.

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

Step 5

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

//ELSA
builder.Services.AddElsa(options => 
options.AddHttpActivities()).AddElsaApiEndpoints();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

//ELSA
app.UseHttpActivities();

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();
app.UseAuthorization();
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

Step 6

Create ELSA Dashboard Controller.

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

Step 7

Right-click on View and add a new View

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

Step 8

Open the Index.html file and add the following links and configuration details with the port number.

<link rel="icon" type="image/png" sizes="32x32" href="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/assets/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/assets/images/favicon-16x16.png">
<link rel="stylesheet" href="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/assets/fonts/inter/inter.css">
<link rel="stylesheet" href="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/elsa-workflows-studio.css">
<script src="/_content/Elsa.Designer.Components.Web/monaco-editor/min/vs/loader.js"></script>
<script type="module" src="/_content/Elsa.Designer.Components.Web/elsa-workflows-studio/elsa-workflows-studio.esm.js"></script>

<elsa-studio-root server-url="https://localhost:7236" monaco-lib-path="_content/Elsa.Designer.Components.Web/monaco-editor/min">
    <elsa-studio-dashboard></elsa-studio-dashboard>
</elsa-studio-root>

Step 9

After that, open _Layout.CSS HTML Views/Shared and add the ELSA Dashboard list item.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - ELSADemo</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/ELSADemo.styles.css" asp-append-version="true" />
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <div class="container-fluid">
                <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">ELSADemo</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <ul class="navbar-nav flex-grow-1">
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="ELSADashboard" asp-action="Index">ELSA Dashboard</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            © 2023 - ELSADemo - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

If you want to read more, then check the official ELSA Documentation link

https://elsa-workflows.github.io/elsa-core/docs/quickstarts/quickstarts-aspnetcore-server-dashboard

Step 10

Finally, run the application

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

Step 11

Open Workflow Registry and create a new workflow.

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

Step 12

Next, click on start and select HTTP Endpoint because here we will take HTTP Endpoint Demo.

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

Provide additional details and save.

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

Next, click on plus sign below HTTP Endpoint and add HTTP Response.

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

Step 13

Add the Name and Description of the Workflow from the settings.

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

Step 14

Publish Workflow.

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

Also, if you click on the above dropdown, you can see three options import and export options that help us export and import existing workflows.

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

Step 15

Open Workflow, where we can see workflow details and the number of versions available. Suppose we want to edit the existing Workflow and create a new version. That’s also possible after editing the Workflow.

Step 16

Next, check the workflow instance. Inside that, there are no instances currently available. If we hit HTTP Endpoint, which we created earlier, that will create a new instance.

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

Step 17

Hit the HTTP Endpoint which we created earlier.

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

Step 18

Now, open the workflow instance to check workflow details and output.

ELSA Workflows Designer Introduction and Implementation using .NET Core 7 Web Application

If any error also occurs when we run a workflow, you can also see the Journal section.

This is all about ELSA Workflow.

GitHub Link

https://github.com/Jaydeep-007/ELSADemo

Conclusion

In this article, learn about ELSA and its features with practical implementation. The following article will show you how to create a workflow using C# code inside .NET Crore Application.

Happy Coding!!!

7 Comments

Join the conversation! Your thoughts help the community grow.

Mostafa Asadi1y ago
Thakk You.it is good framework
Ajitha K3y ago
Hi, Have you tried to call external api to trigger workflow? If yes guide me
- Jaydeep Patil3y ago
  I don't but you can take ELSA open source code and then customize it as per your requirement.
Ajitha K3y ago
Hi,Have you integrate with mongodb?
- Jaydeep Patil3y ago
  Hi Anitha, Actually, I don't
Roman Bajracharya3y ago
Hi Jaydeep, can you tell or refer me how I will have to integrate my UI screens to the workflow?
- Jaydeep Patil3y ago
  Hi Roman, check this link https://www.google.com/url?sa=t&source=web&rct=j&url=https://codesandbox.io/examples/package/%40elsa-workflows/elsa-workflow-designer&ved=2ahUKEwjp1NDhx8f-AhXMxDgGHXTgDO8QFnoECDEQAQ&usg=AOvVaw3pyISWzgxBT8hlvlnvZin1