Cammand - Camunda Webapps alternative

StephenOTT · June 26, 2021, 4:40pm

Hello all

Wanted to share with the community an alternative to the current Camunda UI Web Apps.

Cammand:

This is a Web Assembly based SPA that aims to provide robust enterprise friendly real-world usage for tasks, management, and administration.

The baseline app provides a “Kitchen Sink” implementation of Runtime and History APIs, so you can view active and completed process instances, tasks, etc.

The general usage is to provide rapid tailoring to configure for your custom needs!

Some of the features:

Runtime and History API visuals
BPMNJs support
Form Render and Form Builder (Build and even test your forms!)
Create a Deployment
Tasklist using Runtime and History APIs
Startable Process Definitions
Themable, Multilingual, etc.
Mobile friendly
Fully Customizable
Component Based (You can quickly pick and choose the parts of the app you want to use)
Authentication Support
Json Variable Submissions for Forms
Transient Variable Submission for Forms
Per Form Field Variable Submissions for Forms

Some initial Screenshots:

Definitions

Process Instances

Deployments

Form Builder

Startable Definitions

Tasklist / User Tasks

BPMN Data (heat maps, overlays with relevant counts: activities competed, waiting, waiting executions, etc)

Enjoy!

Niall · June 27, 2021, 12:05pm

This is fantastic,
Can’t wait to give it a try!

peter1 · June 28, 2021, 1:35am

Looks amazing!! Thanks for sharing. Nice to see another language (dot Net) being used.

mrdavoodi64 · June 28, 2021, 6:25am

Hi @StephenOTT

Thanks for sharing. can you share a step by step guide for end users who don’t know spring framework about how to install and run this app?

Thanks so much

StephenOTT · June 28, 2021, 12:18pm

@mrdavoodi64 There will be a docker setup posted soon that you can run

mh007 · June 28, 2021, 4:56pm

so it is using Camunda in the backend ? But allows for a new front end ? And I 2nd the question about getting a docker :-). What license is it coming with ?

and THANKS

StephenOTT · June 29, 2021, 9:40pm

@mh007 This is a “new frontend”. It works with the “out-of-the-box” REST APIs provided by Camunda REST.

The license target is ~MIT or similar. Updates on this soon.

StephenOTT · June 29, 2021, 9:45pm

Multiple Updates:

Jobs:

Definitions UI cleanup:

Definition Actions for: History Time to Live, Deletion, and Suspension Actions:

Variable Visibility Updates:

And variable cleanups to Create Deployments, External Tasks, Jobs, User Tasks, Incidents, etc. See the Updated Repo readme for latest screenshots.

Note that the Dialogs will likely be removed in near future and replaced with url based pages: The App will likely follow a “everything has a URL” policy.

Niall · June 30, 2021, 12:15pm

Hi @StephenOTT
What version of the dotnot SDK is required to run the project?

StephenOTT · June 30, 2021, 12:41pm

You will need the 5.x :

github.com

StephenOTT/Cammand/blob/main/src/MainApp/MainApp.csproj#L4


<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">



  <PropertyGroup>

    <TargetFramework>net5.0</TargetFramework>

  </PropertyGroup>



  <ItemGroup>

    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.7" />

    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.7" PrivateAssets="all" />

    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Authentication" Version="5.0.7" />

    <PackageReference Include="Microsoft.Extensions.Http" Version="5.0.0" />

    <PackageReference Include="MudBlazor" Version="5.0.14" />

    <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />

    <PackageReference Include="Microsoft.AspNetCore.WebUtilities" Version="2.2.0" />

StephenOTT · June 30, 2021, 10:17pm

@mrdavoodi64 @mh007 @Niall Docker example has been added:

Use the docker-compose + the cammand.zip in the release.

Instructions can be found in the docker folder’s readme.

Parthasarathi_Muthai · July 2, 2021, 2:46am

Nice Thanks for this wonder full frontend.

timostolz · July 2, 2021, 10:48am

This is awesome. I’d like to use it in my project. Is it possible to expose cammand with a certain contextPath, instead of the root url? (I’d like to install camunda and cammand behind a proxy, and the root url should be reserved for a frontend application, that is connecting to camunda’s REST API.)

StephenOTT · July 4, 2021, 3:02pm

@timostolz if you are hosting it yourself as a ~standalone static site such as the dev demo, you can modify the base

github.com

StephenOTT/Cammand/blob/main/src/MainApp/wwwroot/index.html#L9


<!DOCTYPE html>


<html>


<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>MainApp</title>
    <base href="/">


    <link href="favicon.ico" rel="icon" type="image/x-icon" />


    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />


    <link href="css/app.css" rel="stylesheet" />
    
    <!--For BpmnJs-->
    <link rel="stylesheet" href="_content/BpmnJs/bpmn/css/diagram-js.css">

If you want to keep the gzip and other compressions you can modify the base and then rebuild/publish to folder. Otherwise just delete the compression files for the index.html, and make the change to base and you should be good to go.

StephenOTT · July 5, 2021, 10:18pm

Some incoming enhancements for the BPMN data:

Giving us common data visuals used for analysis such as Heatmaps (counts, durations,etc), configurable overlays for common usage such as completed instance counts, active instance counts, waiting executions, incidents, etc.

StephenOTT · July 6, 2021, 10:06pm

Multiple updates and cleanups + additional Job listings for Timers and Messages.

Overlays were cleaned up:

Also Added initial updates for Element Property navigation:

tmetzke · July 7, 2021, 9:33am

That looks fantastic, @StephenOTT!
Great stuff

Anthony_Lin · July 9, 2021, 2:02am

Some page display incorrectly.
It’s seems like will load “localhost” to access the REST API, how could I change it to my own IP?
I’m not quite sure.
Please help. Thanks!

Lienider · July 22, 2021, 9:10am

Watched it!!

Thanks and look forward to the production release!

StephenOTT · August 2, 2021, 5:17pm

Lots of updates and cleanup has occurred.

There is also a native Properties Inspector for the BPMN View with C# Apis for interacting with the Diagram Elements and Business Objects.

https://github.com/StephenOTT/Cammand#bpmn-element-selection