Elsa Workflows Community, 2 Jul 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Elsa Workflows Community Meeting 38

Description

During this call, we:

- Briefly discussed the addition of the MongoDB persistence provider

- Looked at the Elsa Studio Blazor progress and discussed various related topics.

A

A

So last week, unfortunately, I couldn't make it happen. So let's change this from 22 to I, guess 29 yeah all right- and this is what I wanted to show last week. So now I have a little bit more to show that cell Studio updates. uh We have mongodb provider support. Let's take a quick look at the uh the commit history. So mostly my pushes have been about the.net API client, which is used by the Blazer Studio application.

A

Since that's also a.net application, it makes sense that it uses the net client library for the rest, API backend, so that's mostly these things and gurkan has been fixing some issues of the the roadmap for rc2, which looks like this. So he's been pushing quite a few of these items. I think this one is fixed. We just need to close this one and I think this one is fixed as well, but it will close these so we'll once these sure it's fixed and then these are to do and this one.

A

So, basically, as soon as these items are processed well, we we should be able to do an rc2 release to nougat and then we'll wait for any feedback, any any major issues. And if there's no major issues, then um yeah, then we could consider releasing 3.0, so maybe end of July, maybe sometime in August and with luck we could also release the the Blazer implementation. If it's. If it goes well because then, if once that's on par in terms of functionality with the stencil implementation, then why not yeah so mongodb?

A

Let me just show you quickly: did you have any any Topics by the way that you wanted to discuss.

B

A

The floor is all mine, a new module called Elsa mongodb and it basically implements all of the abstractions of, for example. The word for definition store concerns, I work for definition store. It worked, for instance, store Etc. We look at mongodb, so here we have a Elsa database, or else uh yeah I also database with a bunch of collections that were created so that just just works. Oh this one is empty.

A

This is a stale view, but uh it's it's nothing too exciting to show off it's just. You know it's just another implementation.

A

If you want to see how how it works or how to install it, there is a example. Project called mongodb persistence and all you should have to do is just reference else among other B, the packets or the project. If you use the source code and then for the various features that you are using in your application, you just use well, this is required use mongodb. This will install some core services that are necessary, including the connection string and then for each module.

A

You can, if you want to use mongodb, you just do use mongodb for management, runtime.

A

For the default runtime, which internally uses a data, data persistence, if you want it to use Monet B, that's possible as well execution, lock records identity, so so yeah, so that that is cool, that we have that all right, let's switch to progress on uh Elsa Studio, which is basically the only thing I I'm working on right now, I'm I'm working as much on this thing as as much as much as I can, because it will offer a lot more functionality compared to the stencil implementation and actually I want to move um to a state where we can look at allow users to re-host the the Blazer components in their own application, whether that's HTML or react or View or angular- that that will be will be good to have a single uh code base that we can continue to evolve, while also allowing artists to reuse it and right now, of course.

A

As you know, we have stencil that you've been creating with wrappers for for angular and react, um but it it having to maintain two versions of designers just gonna. uh It's it's not ideal, yeah!

A

So right. So um let me just to show you so mainly what I've been working on is the designer itself so that it that it becomes functional and I think the last time I showed it was.

A

uh It was able to show activities also from the Picker, but some work has been done in terms of well icon support So before it was just hard go to the pencil icon. Now it's it's controlled by the activity itself. Okay, some variations in color, so I think Muhammad came with the idea to maybe use a color code for within a given group or category. So now it's category has its own color, which is configurable. If, if users don't like certain colors or want to use different colors, they can configure it easily.

A

Okay, the way that works there is a contract called activity display settings provider and if you implement this one, so this is also- and this is what is so cool about uh using Blazer.

A

If you want to customize or add functionality to this to the studio, or in this case you want to create a custom activity and provide custom, icons and colors and whatever we offer all you would have to do is Implement some some interface registered with your di system and that's it so no messing around with stencil and JavaScript just easy, peasy interface implementations.

A

So the there's currently just one default implementation that that configures, you know the the ones that are provided out of the box so for the. If it's it uses some default activity, call colors and in this branching name it's just the name of the category which has the value of some color. So I just show some random colors, but you can easily change this and because to make it even easier.

A

So, instead of having to suppress this default implementation or or provide your own implementation that has higher priority than this, one I think this uh this hasn't had. It doesn't have a priority yet, but that will be added so that you can actually overwrite existing colors if you wanted to. But you could also choose to just change the static values, uh so it's very very easy to change if you want to customize it. So that's that's been worked on, uh search, doesn't work yet.

A

Another thing that has been worked on is the property editors. So last time you weren't able to to do anything here. It was just displaying a hard-coded form, but now it actually works.

A

So you can look at the various inputs, while this one doesn't have any inputs. This one has its own input blow switch as it's has a custom UI, which is another great benefit of using Blazer. If you are creating custom activities or you want to create a custom input editor for existing activities.

A

um Now, it's it's really easy because of the Blazer component model. I'll show you how this one works. So let's say you wanted to create a custom activity with some custom. Ui like this. What you would do is Implement, uh not this one, but the you need to implement the UI hint Handler so just to refresh well, maybe not your memory, but who whomever is watching?

A

If you look at any given activity, let's say, but let's look at the flow switch activity, so here I have the flow switch activity and it has an input called cases. So these are the the possible cases you can configure. So these are complex objects. So that's why we need a bit of a com, complex UI and the way to do it, because this is your activity, that is, it doesn't have any association with you why it's just back-end code, except for this little touch point.

A

If you will so it's UI hint called flow switch editor. So this is. This could be a custom value that you that conjure up and the way to connect it in the front end is by implementing a UI hint Handler.

A

So if we go to the uh to switch back to the laser project, there should be a project called UI hint handlers and you could create you could do this in your own application or create your own class library that doesn't matter because the way it works is you implement this contract, so IUI hint Handler, which exists in Elsa Studio core. So this is like a shared library that you reference. Then you can Implement IUI into Handler and you just implement the three members.

A

Yes, just three members so get supports UI hint returns or it contains logic to return true if your Handler supports a given UI hint. So in this case we have the switch editor Handler. So it's supporting these two UI hints and if, if your Handler returns true, then at some point the display input, editor method will be called and it expects you to return a random fragment, which is a Blazer object.

A

So it's it's used by Blazer to to actually render something and to keep it simple, because creating complicated components using C, sharp syntax like this, that's a little bit to uh could be rather complicated. But of course the easiest thing to do is just to Simply open a separate component, so I created a component called cases using Razer syntax. So here we have cases. So that's this component here, and this can be a very how, however complicated you want it to be.

A

You just implement it like this and because it's Blazer, it's quite easy to implement fancy components like that and.

B

Of course, I'm using much.

A

B

And why uh why do you need another um in the in the under when you open the component? Why do you need a the attribute, the add attribute line, 18.

A

Okay, so when you implement a UI hints components, you will receive contextual information about the input being edited, so this is not required, but if you don't pass in any contextual information, then your component will be unable to update the selected activity, for example. So here we select the flow switch, so it it would. It's probably useful to have a to know which activity we are editing, because it's it's not decoupled in in that sense. So it's not like that. There's! No!

A

It's not that the studio framework will take all of this input and then copy it as input into your component yeah. It just directly allows you to reference the activity being edited.

A

So if we take a look at the editor context,.

B

It's a this is a parameter. Yes right. Yes, okay, oh.

A

Yeah yeah exactly so, if we look at the cases components you just expose it like this, so you could also rename this. This could be whatever you want. If you don't want to put it in like this, you don't have to and yeah, but indeed these These are parameters on the components. Okay and the display inputs context edits just to give you a glimpse, so it it.

A

As I mentioned, it provides access to the activity being edited it's descriptor, which could be useful for accessing metadata about the activity like what is the its category, its inputs, outputs, Etc uh yeah, so um so in this case, we're looking at the flow switch, which has a has this UI hint Handler, and this works as well.

A

So this is also what I've been working on: uh implementing the various UI hint handlers, I'm, not sure if I managed to implement them all I, uh probably there's one or two that aren't implemented yet, but the majority of them have been implemented and here I'm using the mud, Blazer table and it's inline editing feature. So it works a little bit different from the stencil implementation which, where I I created it from scratch here I'm using mud, Blazer components.

A

So uh what's made it very easy to to do so, you can choose the the Syntax for a given expression, so these are the conditions for a given case that should match in order for this outcome to um to to be returned.

A

So this could be something like this and then you click the check box and then it's there.

A

This would this uh that didn't look good for some reason when I demo, something that's when I discover issues I, don't know why and now it's here so I don't know what I did, but I did so. I will just do some more tests uh yeah. So that's the the flow switch and its input. There's, of course, the drop downs.

A

um One thing I wanted to show also is the HTTP endpoint.

A

Or the requests- oh there you go so here I forgot to implement the HTTP status codes, UI that will have to be implemented as well. Yes,.

B

The warning is really good.

A

Yes, yeah I agree. It's um it's helpful. Instead of the thing blowing up in your face or suddenly becoming ugly. At least this is it's. It's a friendly reminder. Oh okay, we will miss something.

A

Let's see authorize policy.

B

And can we customize the UI of the shape.

B

On the designer.

A

You mean these things. Yes, yes, I haven't done a an example yet, but it should be quite easy to do because if we look at the current implementation, it works like this. So if we go to the workflow designer, so this project is what glues uh Blazer stuff with um with the X6 JavaScript graph, editing Library, which works like this. So here we have the client lip and some source, and basically, of course it uses JS interrupt so I have an interrupt folder here with design api's interrupt and and just some c-sharp functionality.

A

That then goes into you know the JS object reference, the the water module so to speak and then calling it to these things. But what uh what is being rendered here? These things are actual Blazer components, wrapped inside of a custom element. So so this is all X6 X6 renders this custom element which render supplies the components. Thank you and this Blazer component lives here.

A

So there's an activity wrapper and and as I mentioned right now, I don't have any examples where I replace it but I'm going to make a small update so that you can customize what is rendered and I'm not yet sure. If I will keep the activity wrapper and then have this wrapper component, um maybe call out to some some custom handlers similar to the UI hint Handler.

A

But maybe you know a activity designer Handler, so to speak, that you then get to implement and if you met, say certain activity type for example, or maybe based on some other conditions based on the activity descriptor that you're receiving in your Handler. You can just provide your own components, so you can imagine that instead of rendering this, we will just render.

A

This so this will be an object from the from the code behind, so you would say custom component so and this would be a field, as I mentioned, from the code behind as a result from invoking these handlers that matches. So it's very easy to make it extensible like this and if there's no handlers, then it will just render the default layout. So it's going to be so easy to customize. This.

B

Do you plan to uh display the description on this.

A

um I hadn't thought about it, but do you think we should.

B

I I, don't know I'm just uh thinking about this, because uh uh I think uh we have to describe uh a number a lot of activity and then maybe it could be a useful to uh to have a button that display all description or collapse description, and this allows you to to uh follow all your flow with the description and no uh every uh everything the developer want to yeah.

A

Like documentation of yourself, yeah, yeah yeah, that's not a bad idea. So, similarly, similar to here in the comments section, there will be the display name yeah, where we could also add a description. So you can add a more length feed text if you want and maybe an option to display it on the on the flowcharts sure.

B

Like here, if we have, if we have any place to to describe uh activity, workflow Etc, it could be easier than to um to create some uh other tools that extract and create automatic documentation. Very.

A

Nice yeah yeah I like that I like that a lot um do you think in just going back to the description of an activity?

A

Do you think it should automatically display the description somewhere or should we maybe have like a little Post-its like an activity that you can drag and drop and then enter it or should it be associated with the activity, and then the designers should figure out where to display it.

B

I think the designer should display it uh just uh maybe under the flow switch, uh yeah and and be able to to to to to to the girl uh display uh and hide uh on. Maybe all the activity to be able to have a big picture of our workflow and uh the different description.

A

Yeah, maybe exactly maybe there could be a toggle here so.

B

A

Is an autosave toggle um which, by the way, is implemented as well. So if you don't enable this, then nothing no changes will be saved until you press the save button.

A

um But if you talk later on, then it will just save always and initially I I. Whenever it saves the changes automatically, it would show a little progress bar, but it became very annoying for me, so I removed it, but it would be good to have some other visual UI hints that so that you can feel comfortable that it actually successfully saved your changes. Maybe there should be some little bulb like a little green circle, which means it's up.

A

It's not dirty anymore, but when you make a change it becomes orange, which means dirty and then it switches to Green once it's saved, for example, I'm still thinking that or.

B

The icon on the on the floppy on the floppy icon, you can add a little.

A

B

Yeah, that was a position rather I, just export back in the notification icon. Yes, and maybe.

A

A spinner when it's saving yeah so notice, it's very, very quick, but if you notice, if I click, there will be a briefly, there will be a little progress bar. You see when I click so.

B

Like a badge in the mid browser.

B

Icon, for example, and uh we can have a green tick when it's uh it's okay, on the on the the floppy and uh where, when it's not already signed, maybe another color.

A

I, like that, so like this security issues here my screen here, it shows a little uh well just a little lock icon, but this could be a green tick if, under on this, on this on the floppy disk icon.

B

A

Yeah, that's a good idea: yeah I will Implement something like that. So there's a little visual bug when I Collapse the bottom panel. It's it's completely hidden, but it doesn't always happen so I don't know when it does so when it does happen, you need to uh oh that's a buggy workflow that I was currently working on. Let me restart the server yeah I speak this.

A

This workflow one yeah I, was experimenting with you know, creating a new workflow, so uh one of the complaints I often hear is, is that when you're creating the workflow, it doesn't generate a proper default name. So if you don't create uh specify names and all of your workflows will call, it will be called workflow one or something like that, plus and and I think this was the case in Elsa, one where the name would be empty always so every every workflow would be called default, workflow or something like that or unnamed.

A

So here I'm thinking, maybe it's better to just whenever you create a workflow. You are prompted to give a name and it will automatically generate a unique name. So it it it's. It knows that this is a unique name. It has built-in validation. I'll show you that as well. So let's say we try to do workflow one.

A

We try to create it, it will not work, so it uses fluent validation uh and it makes an API call to validate name, but when I do create this workflow it crashes because of a bug that I introduced, hey.

B

The name, the name is not a key, it just uh have to be unique, but it's not a key. It's.

A

Not a key, so if you don't uh use a unique name, then it's not going to cause any issues uh either, not yet anyways, maybe in the future release. Maybe we'll have some functionality where you want to uniquely identify workflows and then maybe could be problematic if you have workflows with the same name, but if, even if not the name is considered part of the identity of a fi workflow, so you should be able to uniquely identify workflows. So even by name but technically it's it's not not a problem.

A

If you have the same name for multiple workflows: okay, yeah, these things I have yet to implement the delete buttons vaccination that works automatically thanks to my blazer. So this is the only one that currently works.

A

I also want to do things like Chrome expression, editors, maybe there's a laser component out there that allows you to do it at the very least, we'll have a Time, picker and a date a calendar picker right. So that's going to be better than having to type in some some date manually, yeah, oh and, of course, I shouldn't forget to show The Monaco editor, so.

B

That's implemented.

A

As well so it has liquids default, just means you know the default UI and if you want to switch, then you and that that just works as well.

B

A

Well, maybe not so great, it just lost my information. What happened there.

B

And you, you use the bladder money.

A

Yeah exactly yeah, okay,.

A

uh This is a new new bug, I'll look into that, so um so that's Monaco!

A

um So once well, once I fix this issue and once I've implemented creation of new workflows, then the next step will be um implementing embedded activities. So what I mean by that is, let's say we have the effectivity. Oh, this is a okay, so this is not a flow. If the flows sorry flow decision both displayed true false, but this one will shoot this play then and else not as these flow ports, but as embedded uh sockets like what we have in the stencil designer. Let me open it for a second.

A

So while that loads, if you remember there will be little well, then and else will be displayed as nested elements in this in this component right and it has to do also with this breadcrumbs.

A

So you should be able to add activities to the to the embedded ports, that's what they are called and that is useful for the if activity, but also for I, think email has an error outcome or another outcome, but an error activity that or uh error property of type activity that you can configure to execute some logic when setting email fails, for example, and so we have many of these, so we also have um prancing.

A

Looping so, for example, the for each has a body embedded Port. So so those things is that's next to my list to uh to implement and of course, still the well somewhat low. Hang fruit like workflow properties. Variables is a little bit more uh work and maybe settings input output that we already have in uh in stencil. So we also need that in Blazer and once those items have been done, then I think for the most part. It's uh it's it's very on par in terms of functionality with stencil implementation.

A

So then it could actually be used by users, and then we can move forward by focusing on seeing how we can make it reusable reusable, and once we figure that one out, then we can continue with things like secrets, web hooks, user management role, management and then any more materials can can enter the ecosystem yeah.

A

So this is what I was talking about these little sockets. If you click on this one- and you see the breadcrumbs and you can configure it so.

B

Actually, I think that's all I think yeah in the same thing. When, for example, imagine you have a you want to send a two email and you have the same error body or the the three main. How can you um use the same body error and not redefine a the same thing for the two activities.

A

hmm So with this one you wouldn't well, it would still be possible if you wanted, if you would, for example, implement it in a separate workflow and then you could call that workflow and this workflow could be use resource and as an activity as a composite activity. So that would be one way, but it wouldn't be ideal. I think so, maybe for those cases what you really want, it's not this setup here but send email like like here. So maybe this should be a done or an okay outcome or done and an error.

A

And then then you could have two of those send emails and they would both um go to the same.

B

A

Yeah, that's a good good, uh good observation that you, uh maybe we maybe I, should revise this and make it a flow. I was coming out and embed it or maybe we should have a flow email and normal email, similarly to well similar to having a flow decision which is functionally the same as this.

A

If but the key difference, of course being that this one has embedded stuff, which is nice when you do have isolated functionality, that's that you don't want to reuse, um but there's also flow decision which has a different style, ultimately I think what we want. So this is more of a Hybrid flowcharted fuel right, so it's a hybrid between flowchart and sequential diagrams, so in in Windows, Work Foundation, four there's a strict separation between six sequential diagrams and flow charts and state machines it may be that will also will evolve also into that strict separation.

A

While maintaining this, this hybrids approach for for, if you want to um but yeah it's uh roommates to be seen. One requirement for that to work, of course, is that we have different designers and I did start working on enabling this. So, uh for example, let's say we, let's say we have a workflow that is doesn't start with a flowchart, but with a sequence activity. So let's say we um we can't use the designer for that.

A

So we'll use the API to create a new word for the efficient, with a sequence activity as its roots, so yeah. So, for example, this one this this. Well, it's not not a sequence, but it's uses it's even maybe an even better example, so also to show the flexibility of the engine. So here I'm gonna create a new word for definition, called hello worlds and it's root. Instead of it being a flow chart, it's going to be a very simple right line, so great, send L click Send.

A

So now we should be able to see it here, uh yeah, it doesn't refresh when you just click this thing here so I think: okay, okay, so here there's the hello world. Oh I broke that as well.

A

Unfortunately, so what you should have seen is a um the designer, but just with that activity and you wouldn't be able to move it around and it's like more of a fallback designer, but because now we have the system in place where, where you have similar to the UI hint handlers and the activity display handlers, there's now a diagram designer provider that you can Implement, which can provide the designer component for a given activity type and if there's no such designer, then there's this fallback diagram. Editor, that's now failing to load for flowchart.

A

Obviously it's using the flowchart designer, and so this way we can also Implement a sequence, diagram, editor and a state machine diagram, editor and a bpmn diagram editor. So it's very, very pluggable in this way: okay, yeah and once we have those different designers, then possibly what we'll have is people's start to use the flowchart edit it just for flow activities and each flow activity itself could of course, embed a sequence diagram and a state machine diagram, Etc, and maybe people prefer the mixed mode that we have right now, because it is very, very flexible.

A

But my only issue with it is is that you now have flow variants and sequential variants for basically for for potentially many of them. First, for example, sent email will have two versions, so that's uh that's.

A

The only downside, I think I did I did experiment with a way to maybe um change the the look of a given activity without having to have two versions, so basically by having a decent email, having an error property of type activity, for example, but then, depending on your designer settings, it would either display as an outcome like this or uh as an embedded port.

A

But I I forgot the details, but it became too complicated to um at some point. I was writing logic to to follow the the paths basically and then trying to wrap it in a flow chart, because if you have a single child like, for example, uh yeah, let's, let's remove this one, let's say: there's just this. If so in this case, what I wanted then is is to store the effectivity directly in the error property of the send email.

A

But as soon as you start to add more then, basically, this entire stuff would have to be stored in the error activity, but that logic to determine what belongs to this thing and then having to artificially wrap it in a flow chart or maybe potentially, a sequence. If it's more of a sequential flow like uh like this, this is more of a sequential, so I I gave up on this idea. It was too complicated.

A

Yeah, so so now it's just uh the the Simplicity in our lives in it's either having this these flow ports or embedded ports, and that's it and at the end of the day you can configure the system any way you want, and um a good Improvement would be to have the option to configure a diagram editor like, for example.

A

This is the the flowchart design, the floater diagram designers, what it's called to have it to configure it with the activities that it allows you to add and to be able to pick from the left hand side. So maybe you as an application uh or a workflow application implementer you could you decide to only show flow activities for flowchart diagram, editors and sequential activities for uh sequence, editors, for example, and then this way you have basically potentially the same system as you have in Windows workflow Foundation.

B

uh Have you already create a CI to uh publish review nugget no.

A

No not yet no do you do you want to um have these nougats.

B

uh Yes to to start integrate the different parts on my UI and and maybe uh see what is missing or how we have to uh to create a different package. We, uh when it's some separation or some amount of some package to to be able to give something uh quickly, usable developer.

A

Makes sense, I'll um I'll set up a preview feed for the studio packages, and then you can start playing around with those yeah and.

B

uh And maybe I can also uh playing on the different wrapper for the.

A

Yeah, that would be so cool, yeah, yeah and, and we I think we spoke about this last time. We we want to be able to reuse individual components, so this one should be optional. This one might should be optional. We should be able to to use the Lego block approach, including the settings right, so maybe you also want to just take this thing and programming it manually, so there should be an API exposed so that you can assign it well.

A

Actually, that's already the case you can assign this thing, I work for definition and it will display the workflow.

B

That's good that uh there is a a lot of URL UI Improvement. It's a really really good, really good, very good work. Thank.

A

You yeah anything forward, yeah and, as I mentioned I summarized the uh the work remaining to be done before it could potentially replace the this stuff here, cool all right, then, in that case, thank you for attending and I'll uh bro see you next week, yeah sure. Thank you all right. Thank you all right, bye-bye.