Elsa Workflows Community, 13 May 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Elsa Community Meeting 34

Description

- Default activity inputs

- Plugin API updates

- Dashboard

- Documentation updates

A

A

So, let's see what we got for today so last week, I wasn't here so I need to dig a little bit into my memory right default activity inputs. We can talk about that plug-in. Api updates, I, don't remember, but maybe I'll remember when we look at the codes and more recently I've been working on the new dashboards, so that's gonna be fun to talk about. So let's start with the default activity inputs. Let me just show you what what it looks like and then it becomes a little bit more clear all right.

A

So this is the old Studio. This is the new studio. So I I changed my screen resolution, so everything is out of whack, so let me see if I can figure out where where's what so this is a oh. This is the solution. Explorer code editor.

A

This is the server all right. So let me see if I can start this all right, so let me create a new workflow definition. So I might have lowered. My screen resolution resolution a little bit too much because this I think is the bottom panel and it extends all the way to the top, so I I, don't think I can decrease it in size because it's overlapping the screen storage solution. So let me see if I can change it.

A

Okay, it's a little bit blurry now, but I hope the recording capture this okay, all right, so uh an enhancement that was made is default values. So the API already allows you to configure your activity properties with default values, but it wasn't actually honored in the designer and that's been fixed. So, let's see if I can find an example.

A

Oh this is really sad that it's so blurry, but at least it's readable, readable right all right, okay, great so here, for example, we have the send HP request, which is configured which has a method property and now it's configured to use the get value by default. So if we use this one in the designer, then we should see the method being set to get by default.

A

So, of course, in this case it would have already been set to get because it's the first item, so maybe that's not the greatest example to show that it works. Let's see if I have another one or maybe I'll, just change this to delete for now.

A

Oops I already have a server running on this board, so let me close one of them so either I didn't do a good job and I didn't test it properly or maybe the builds is using a cast binary. So let me just make sure and just rebuild this one and to be clear: it's entirely possible. It's the the first reason: it wouldn't be the first time.

A

B

They're still in the holiday mode, maybe yeah.

A

Yeah I'm very relaxed, alright, so and then let's also rebuild the main project just for good measure. Oh okay, so it was briefly put to delete and then it shifted to get so maybe there's a bug with this drop down list component?

A

uh Okay! So now it's shifted to delete. Somehow that's so interesting! Let me try again Let me refresh well something's funky, going on here. So I'll take a another look at this after the after the call, but then principle it's it's uh it should it should work after I fix this little issue. So that's some work. That's been done, plug-in API updates. So maybe we can take a look at that.

A

If we go to the stencil project- oh yeah, I think I, remember so it has to do with plugins and let's see if we can find something from index.html right. So when you create plugins for the designer using stencil, ideally or using JavaScript in this case, which supports the class keyword, you just create a class, implement the initialize method, and then you can use the various services that are exported by the designer modules, such as the container, which is uh same as the service container in or similar in concept to the the Nets service collection.

A

You get Studio service and a few more services that help you to interact with the designer and the in the components within that, and also services are accessible to you, for example. Here is a simple example that changes the the naming strategy for creating activity names.

A

So here's set to Pascal case strategy, but there's a few others and here I demonstrate how to install this custom plugin using the initializing event of the shell component, which is this component here so by listening to this event, I get access to the plugin registry from where you can then add and even replace components.

A

So our plugins, each plugin, has a name and if you wanted to replace uh a plug-in, for example, the default login component presents a login screen, but maybe you don't want to use the default identities module of Elsa but replace it with your own identity provider or maybe of 0 or whatever else, in which case you will have created your own plugin and then here you can replace it with with your custom plugin so that it's not going to display the home login screen anymore, but instead perform the actions that that are necessary for authenticating, with Alpha zero in this example, so some work has been done there, but since we are on the topic of of this UI one and and specifically the topic of plugins for this UI, it's as you as you know, it's you need to create either stencil components or use JavaScript.

A

If you come from a net core or net background, it's not very pleasant or convenient, and not to mention that this component model is is not as elegant, I. Think.

A

Of course, this is highly subjective, but I think the Blazer component model is much more elegant and easy to extend with custom nuget packages, so I always wanted to recreate the the front end using Blazer is in the form of an extensible modular dashboard application framework, and that's what I've started to do a couple days ago as an experiment and that's what I would like to show next, but it's very Bare Bones, still it's really experimental.

A

But what I'm leading towards to is using this project called mods Blazer, which is a so it's a terrific laser component library that implements material design in a very easy to use, set of components that you can. You know, construct your UI with.

A

So this is their home page I, think even their homepage is created using their own library and here's a bit of a preview of what you could do with these components and it's perfect for what I want to do with the dashboard application, because it's going to be a dashboard application with an extensible menu and, of course, uh Mains Mains content area, which would present a designer for one thing, but also a separate list of workflow definitions. Workflow instances.

A

And of course, if you create your own modules, maybe maybe you're, creating an admin area for managing customers that you want to connect to workflows. You could install your own modules.

B

A

And then use the dashboard for for managing that stuff. If you want to other than custom modules, I want to provide some other general purpose modules like maybe managing or having analytics that you can install, but it should be optional, and maybe maybe there will be a web hooks module where you want to configure web Hooks and then there's a lot of other things that you can think of including user management role, management and, of course, maybe maybe even email templates that you want to manage from the dashboard.

A

So those could all those are all ideas for add-on modules. That would then be manageable through the UI and the nice thing is, this would all be implemented using C, sharp and using Blazer here, I'm experimenting with an initial setup, so this is this consists of a left menu here. This menu is extensible, so each module can contribute to this menu by implementing some interface. So, for example, here we have a counter and the way that looks so.

A

This is the alpha dashboard solution and it consists of a few main folders I'll, just explain briefly the the current structure. It all starts at the root, which is the host application. So there's you can choose to either use Blazer server or Blaze webassembly. Both targets, work, work well um and, of course, with.net8 coming out later this year. There should be the option to use this. This hybrid mode, I, don't know what they call it or mix mode where you can mix and match components that are rendered on the server, but also on the clients.

A

You know they maybe their the initial rendering happens server side and then it bootstraps on the client-side work. Comes live using webassembly, so that's going to be pretty cool, but that's where it starts so either server or webassembly for now, and they both reference. The shell and the shell is basically it's an empty shell.

A

That is it's like the shared UI Library, so it just contains the appraiser which contains the router, for you know, for navigation, and that's uh that's the main idea and then the modules you reference directly from your main application and one such module is the counter module. Just as a you know, proof of concept to see if we can have separate razor-class libraries, because that's what this is: it's just the Razer class Library, which exposes Pages components and uh and of course, a menu and the menu here.

A

It just implements I menu provider where you return a list of menu items which is just a dto, and then you can control the icon, the the path to the page that you want to display. When the user clicks on the menu item Etc, it even supports sub menus, as you can see here, so there's Sub menu item one and two: let's translate to these two items here so yeah so in in mud Blazer. It has a lot of components, and this is some just scratching the service here.

A

But of course it has very important the light mode and the dark modes and and in terms of policing, the the UI that's gonna be done later. But now it's it's more of a technical proof of concept. The most the most work is going to be re-implementing the designer service itself, in a way that it's reusable so right now it's implemented in stencil here.

A

So this this area in the center, that's built using substantial, which uses the X6 library, but it was done in a way right now, where it's it's it's supposed to be reusable, but I took a few shortcuts, where that causes it to be tightly coupled with other aspects of this, the surroundings and and other Notions that that can be done differently in a more decoupled fashion so that it could be truly reusable.

A

So if you, if you want to create a custom dashboard, for example, with your own menu and you wanted to go to a workflow definition, editor right now, it wouldn't work because there's too many other dependencies and and of course I can go in and and decouple those things and untangle. All of that.

A

But since I want to move to a Blazer implementation anyway, that becomes reusable I'm, probably gonna jump ahead and do that right away and- and once that's done, then the components will be reusable as a proper web component to reuse in your own library. But then it's it's nicely isolated and has a proper API service to interact with it. But it's a little bit of a dilemma that I'm dealing with also with the upcoming release candidate dates. That's been set to to be the end of this month, but um yeah. So it's it's experimental. I!

A

Don't expect this to to be done not this month for sure next month is more reasonable, but we will see how how fast it goes.

C

And the the idea is to um to to get the same interface contract with the API and the server and only be able to switch from the uh the stencil dashboard to the um yeah.

A

Exactly so, the server side remains untouched. So it's it's the same, worthless server with the same rest, API endpoints, but there will be two clients, so you can choose to use this UI, which consumes the same rest, API or the Blazer dashboard, which has navigation and separate screens, but they all talk to the same API. So it's still a separate project. So.

C

So we we will continue to maintain two uh to that.

A

I think, ultimately, uh this dashboard will deprecate this one, because this is not really a dashboard. It's just a little designer.

C

Here, with different panels,.

A

Yeah exactly and of course, there's this toolbar here, but it's it, which contains some menu buttons, but it's deliberately not designed to be a dashboard, because I wanted to do that properly in in Blazer.

A

So this is here right now, for you know getting started quickly, yeah, but but my thinking is to uh for to to deprecate this once we have a an extensible dashboard that is on par in terms of features with what we have right now in stencil and once we have that, then I wouldn't invest in this thing like for, for instance, having user and role management, I wouldn't create those plugins here, okay,.

C

So and the idea is to to to be able to uh take only uh necessary module for a external uh developer to incorporate the designer or the work, for instance, or anything else in our specific application.

A

Exactly yeah, indeed, because that's still an important requirement that you can take these components and use it in your own dashboard application, which also means that the designer itself that that's going going to be embedded here, so this area will not take any dependencies on multiplayer or anything like that. That's just gonna have its own CSS, that is scoped and themeable. You should still be able to overwrite The Styling if you wanted to in certain areas yeah at the same time, I am wondering what to do, for example, with these panels here.

A

So these panels here and this panel would be nice to use matte Blazer um so that, but it becomes, they still should become reusable components, and you can then take them into your own dashboard application, but because it's using mud Blazer, which supports themes, uh probably you can still customize it. Although I'm at this point not sure how it interacts with the theme manager, which is like a global Singleton component, that's used and all of the components feed from that. So I'm not entirely sure in that. In that respect, yeah.

C

But maybe it could we could have some hook or some endpoint to to customize the theme for each component and understand it. The designer patch will always be um X6 or it's. It will also be uh another thing and uh in that net.

A

Yeah so I I know there's a.net library, but it seems to be well not maintained, as of reasons that I could see, but but and also I'm, not too sure about its uh feature set. So I think it's maintained by one person. It's it's been a while, since I've seen a a recent commit and and I'm not sure if it contains all of the the features that I want for the designer.

A

So so my plan is to for now to re-implement a continue using X6, which has now it's not version, three I, think or version two, which is a newer major version than what's being used right now here. So this uses one point something, but they have two point x. So yeah LS3 currently uses this one, but I want to use the this version here and then using JS interrupt to interrupt to uh to communicate with the component and that's what I'm I just started experimenting with.

A

So what you see here is X6, okay, yeah, but I always struggle with with you know, UI.

C

A

You see the scroll bars here, it's just just.

C

Always the same for me, it's.

A

A pain it is a pain always, but here it's it's more or less figured out, but in in a not so elegant fashion, I think with the panels I mean it's from a user's perspective. It looks great, but if you know what it what it what it takes to implement, you know the how everything needs to be orchestrated together with, for example, the center area needs to know about the width of this panel.

A

So whenever you collapse the panel, which you know, the width now becomes zero, but that also then updates the the width of the center area so that it jumps to the right. It's uh it worked great, but I, don't like the implementation. It's not very generic I would say it's very tailor made with SCI I I hate, so I'm, hoping that with X6 and and some front-end uh designer that that I'm gonna look for to uh to do it in a proper way.

C

Okay and and uh for the CSS ER, you will use a tag wind or not. No,.

A

So for CSS for the dashboard area, so the surrounding area I'll be using mud Blazer, so mud Blazer implements material design and it also brings CSS classes that yeah that you know, implement this material design and that's very convenient because it allows you to do things like this, where, when you can switch themes uh between dark mode and light mode and and they have a very elegant, theming API, so I'll just show you for a brief. Second okay.

A

So let's see all right. So here we have the main layout. So it has a menu theme provider, and here they just have a property, is dark mode that you can set to true or false, so very easy to to change. And then the theme itself is set to an object called current theme, which comes from my own theme service.

A

So here I have a a class library that modules would reference so that they can consume services like the theme service, which allows um allows application developers to to modify the current theme or even replace the current theme with their own theme and and the theme is just an object, called Mud theme and I will show you what it looks like so I have a an implementation of I-team service which creates a default theme and, and here I I'm, just constructing my own theme, which of if you create a new mod theme object.

A

It will have certain defaults but and then I'm just changing some of some aspects of the default theme here. But it's a new object, so it's not affecting the any anything default I'm just using this object here and if you want, you can just instantiate your own mod theme. Instance. If you uh object and then assign it to this property here, and it will fire this event in any tool, just update everything here and it's uh it's very nice.

A

So they have a palette with colors for things like the app bar the drawer background, and that's that's the beauty of having a design system like material design. There's these no no uh well objects or concepts or right, and then you can just change the colors and there's, of course, there's. There are more aspects that you can do: Shadows typography other stuff that you can change.

A

So so it's great, because now we automatically have a way for applications to completely change the the UI well, to the extent that it supports you will still have to deal with this left menu because that's encoded in the see it in their Blazer components.

A

Of course, with things like the logo and the title we could expose as an snack as a API server, so that the application implementer can change it if they want- and that's the nice thing about Blazer, it's just so much easier to expose these aspects for customization and even replacement versus with stencil and JavaScript in general. It's of course possible it's just not as as convenient to me at least.

A

So. Let me let me show you awesome as well. Just four seconds so, as you can see, it looks exactly the same, which is pretty cool, so you can just run it in um in in a web assembly.

A

So yeah so um there's a few things as I mentioned, that I'm I'm figuring out once that's figured out. I should be able to move pretty fast and basically replicate this stuff here, but in in Blazer, and then it's also a reusable component and also considering maybe to update the UI a little bit of the activities themselves. So based on what I've seen here,.

A

So maybe you know more subtle coloring here, have you guys ever see heard of retool.

A

So I I've never used it, but somebody pointed me to it and it it looks really good so and then what they are doing here is that its activity on their workflow also contains the uh the settings for the for the workflow.

A

Look at this. Can you guys hear this? No.

B

This is the opposite of low code, environment.

A

There's a lot of coding for sure, and um so so it's it looks like it's. It's Target it targets developers uh because your normal users aren't going to write this, but I I I do I think it might be an interesting idea to to consider having activity input directly on the activities and, of course, being able to collapse. The View.

A

If, if you want to have a bit of space and one other thing, I wonder if this engine also supports long running workflows where you know maybe it gets suspended and then wait for user input so that you can resume the workflow I haven't really delved into it. So I don't know.

C

But it's one uh one more feature is the ability to test uh each Activity one after another.

A

Yeah exactly like they have these play buttons right and then it executes the activity. In this case it returns all of the the queries which is really nice and I. Also like that, you can add new activities just by dragging uh you know, out of this, this circle and then releasing the mouse, and it's prompts you to select the the next activity type or they call it workflow blocks.

A

That's uh that's really good. So maybe we can get some inspiration from uh from this tool.

B

Yeah the AI looks nice and the way that you can preview the results. It's it's interesting, yeah.

A

Yeah absolutely I I really like this, uh so I'm gonna I'm gonna explore this some more.

B

A

That looks really great all right, so I think that's my update for now. um I, don't know if you guys have any any anything else to share or topics to to discuss.

C

No specific topic on myself, I.

B

Just want to work.

C

Tdb3 and open open Telemetry, but just read some some elements, but I don't have a degree into it. Already nice.

A

Yeah, that's and you want to implement open Telemetry for LSAT 2 or for else at three.

C

Well, right, that's.

A

Going to be very helpful for uh for troubleshooting.

B

Yeah I just have one small observation or a feedback that we encountered today with elsa2, so we had our own custom activity provider and so far it was working great without any issue, but we did some updates in the system and it was throwing an exception, and what you have noticed is because that one single provider was throwing an exception. It affected all the activities, so the the API endpoint that lists down all the activities stopped working anymore. Basically, the exception propagated all the way up, so it wasn't captured.

B

So in that scenario, maybe it's a matter of just exception, handling not to let one bad actor affect the rest of the system is to be able to capture these exceptions by the system and not let it ruin the rest of the document. Yeah.

A

It makes sense so when the activity manage the service or the activity, activity, type service or whatever manager classes, invoking these providers, it's you, it should do it. Wouldn't you should do so in a tri-cat so that if one provider fails, it doesn't break everything else. Yeah that makes sense and then.

B

B

Stopped working, so it was a little bit of a you know.

A

B

Yeah I can imagine.

A

B

Some some bit of hardening on robustness may be required for, especially when you are, depending on a third party or an external provider, the things that could go wrong at any time and the rest of the system should not be affected by them.

A

Yeah for sure yeah absolutely was this elsa2 or else a three.

B

It doesn't answer too, and probably it is something that we can fix, but also for us at three also. We need to consider that yeah.

A

Exactly and that's why we have you test these things out then, and let us know what uh what the where, where it needs to be improved.

B

A

Nice did I mention the updates in the on the documentation. I've done also a lot of work on the documentation here, so I think last time, I showed some of the guides. I don't know if I I think I actually explained uh walked through the external app integration which shows off the Run task activities and how to integrate it via web hooks with external applications. In this example, modeling, a simplified process called employee onboarding. So if you have a new employee, you want to onboard it in your company. You want to create an email account.

A

So that's this step and then once that's done everything all the other tasks will execute as well, but these tasks are executed by the external application. That's the point here so basically using Elsa as a orchestrator or a conductor, it's a different term. Also loading workflows from Json, that's added, so it talks about the I just so here it shows how to do it. Just Bare Bones using you, know, loading Json from a file and then deserializing it into a workflow and then executing it. Nice.

B

A

Then here it talks about the worth definition provider and there's a new one called fluent store. It's worth a definition provider which leverages fluent storage, which is a a library that that basically abstracts file access, and it has different providers like, of course file system, but also FTP, Azure, blob, storage and and that sort of thing and here I show how to configure it. And then you can just store Json files in in your workflows, folder, and it will automatically be available to to the system just like in LSAT 2., LSAT 2.

A

It uses not fluent storage, but I've got the name, I, think storage.net, but that project is uh has been archives, and this is this is the well I consider this one, the replacement and a nice contribution from a customer, one of their developers created a section on invoking workflows, programmatically, but also from the designer here's some information, also about using the rest, API and using C sharp codes or concepts. There's some more information here about workflow activity, input, outputs, and this is of the activity Library.

A

It's it's a more of a skeleton at this moment, but I I did start writing about the HP activities and I'm still trying to figure out a good way to present it. So this is an experiment where I start with a table of the activities within a given category and then going into the details, but I'm also thinking that maybe it's a little bit too too much information all at once. So maybe I'll I'll remove this table, and just you know- because we also have this on this page section here.

A

So maybe it's it's not necessary to have a table.

B

Can it be automatically generated from the class definition you.

A

Mean the table or the on this page.

B

A

Input and outputs.

B

This is the activity listed. I thought this is the input and output. Oh.

A

No, so no input output here this is this is more of a general description of what of this concept in Elsa input and output, and then it goes and and shows an example of what the input looks like and then and how to to do outputs. But this is the activity Library. So this this describes the individual activities and and how you can well the properties, what they mean and and an example custom activity section, which of course, is important.

A

If you want to extend it also with your own activities, then you need to understand how that works, and this is an initial version. It it's still it. There should also be another page that explains how to create uh blocking activities and triggers and I think if that's there, of course, there's still a host of other things. You want this document like how to use the identity, module or replace it with your own authentication mechanism, but uh that has to come a little bit later and and JavaScript expressions and liquid has been added.

A

So it's a it's a small start, all right yeah. So that's what I have for now. I will continue working on the dashboard, uh mostly wrapping the designer into you, know, expose or implemented by X6 and then wrapping it in a Blazer component. So that's reusable, and hopefully it's not going to be too much work because once that's done, then I think we can pretty quickly migrate over to the new dashboard and and deprecate this one quick.

C

Question, do you do you uh Commit This, on a specific Branch.

A

The dashboards you mean uh so it's a it's is it is its own repository. Let's find it here, not this one, but it's LSAT dashboard. So this is the repo okay and it and I'm pushing directly to the main brand. So it doesn't have any any feature branches. Yet.

C

So I think I will start to to look at this as a cool.

A

Yeah, that would be great all right, then um I, thank you for joining and I will catch you next week. Thank you. Bye-Bye take care, bye, bye, foreign.