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.

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.

Step 2

Configure a new application.

Step 3

Provide additional details.

Step 4

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

Step 5

Register ELSA Service and Middleware.

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.

Step 7

Right-click on View and add a new View

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">
            &copy; 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

Step 11

Open Workflow Registry and create a new workflow.

Step 12

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

Provide additional details and save.

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

Step 13

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

Step 14

Publish Workflow.

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.

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.

Step 17

Hit the HTTP Endpoint which we created earlier.

Step 18

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

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!!!