Elsa Workflows Community, 29 May 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Elsa Workflows Community Meeting 10

Description

Elsa Meeting 10
Topics

- Elsa 3 modularity
- SQL syntax + intellisense

- Demos
○ Elsa 2
§ Custom activity icon
○ Elsa 3
§ Label Management

A

Hey guys welcome, so I added these topics. uh Well, just two brief demos to show a bit of uh progress with elsa, three question that I was asked I think today or yesterday about custom activity, icons where also too. So I thought maybe that's interesting- to take a quick look at so I will start with that. So the scenario is as follows: let's say you have a custom activity, don't forget to share the screen. So, as I was saying, let's imagine we have a custom activity in ls2.

A

I don't know if this excels at one second yeah, that's it so in the there's, a sample project called elsa sample server host and there's a sample activity. We looked at this one last week when we looked at cascading drop downs and now, let's say we want to add a custom activity icon for this activity so from the c-sharp and there's nothing to do.

A

But what you need to do is create a javascript function that represents a lsi designer plugin and then somehow use it to install a custom icon for this activity, type called vehicle activity. So that's the goal. So, let's switch over to the designer project. Now, of course, you as an activity developer, you do not need to work directly in the source code of the designer.

A

You would just use whatever project you're you're hosting the designer in and then there will be a bit of javascript that you need to write, and here I'm just showing what a javascript may look like using vanilla gis and, of course you could also use typescript, but I will show how to do it with vanilla.js, not using this project. This is the elsa 3 designer project. So let me open the lc2 project, so here we are in the index html and just to get our bearings a little bit of what this file is about.

A

That rooted. It just hosts the custom component, and when we have a handle of this component, we can actually install plugins into it, and that is shown at the very bottom of this file. So here what we do we get a handle of the lstudio root element. Then we attach an event handler for for the initializing event, and that happens once and during that event we register a bunch of plugins. One of these plugins is a custom plugin called the vehicle activity plugin. We also looked at this last week.

A

This is code related to the cascading drop downs, but what we are interested in is this part here, where we have some html representing an icon and using the activity item, a service to register a custom icon or a given activity type, so very easy to use and I'll show what that looks like so, let's add a custom activity called vehicle activity and, as you see here, it's using the custom icon and that's it all right.

A

So, let's move on to the lsat3 stuff once of work has gone in there's a new feature called labels and it's very similar to git up labels where you can in on github. You can create labels and then assign them to issues. Similarly, for elsa 3, you will be able to define labels and assign them to workflows, workflow definitions to be specific, and this could be useful to group certain workflows together and then be able to query on those labels.

A

So here we are looking at the workload 3, palsa, 3, workflow designer and there's a new menu item here called labels with a simple ui to be able to add new labels, so, for example, label 1 some description and some color there's no color picker. Yet, but that's uh that will be added at a later point, and this way we can add a bunch of them. So let's add a few more so I used tailwind css.com as my color picker of choice here, there's a preview of the color.

A

This is good and, let's add one more all right. So now we have three labels, and here we have a workflow, and now we can actually assign those those labels very easy, yeah and then the next step this is yet to be implemented, is to then be able to filter by these labels from the workflow definition ui.

A

So right now, there's just a complete list of workflow definitions: we're working on having this paginated with check marks so that you can perform bulk actions like bulk, publish and delete retract, that's kind of thing and, of course, a label picker at the top to allow you to filter by labels.

B

The color that you picked is that the font color and not the background color, you put some other logic to it, to have it a bit lighter.

A

That's a keen observation indeed. So the color you see here is not the exact color that was picked. So what happens? Is I make this color a little bit darker? I think, or I use the same color, I'm not sure I played around with it. So I don't know what I what the final result is. We can take a look and the background. Color is lightened, so it's it use it's using a javascript function to uh perform outlets.

A

Let's take a quick look yeah, so the four color the text color, is the color you specify and then the background color is lightened by an amount of 55 whatever that means using a javascript library called tiny color, and then I generate a inline styles for for this. This element. So what happens? It might be quiet? Then the background will be white as well. So you will see nothing so, let's try it yeah. Maybe we can make it smarter by having rotating color.

A

So if it exceeds the maximum lightness, then it maybe it should rotate too dark so that the background is dark and the forecount is light. Maybe there's some algorithms. We can try yeah.

C

Maybe by contrast or having some border yeah exactly.

A

That's actually what github does they also add a ball border slightly darker than the background, but also slightly lighter than the foreground iphone. So yeah can be tweaked all right and then the list api for the workflow definition resource was updated to allow you to vary by labels. So, as you can see here, I'm using two clearest parameters, both called label. So here I want to filter all workflow definitions by label customer and documents.

A

Now I don't have these labels, so that means I should no results should be returned, but this is a bug I'm still working on, but the end goal is for this to be an end query, if you specify this condition- and none of the word for definitions match that criteria. Obviously you shouldn't see any items, so that's a work to be done, so that's largely implemented, but the way it was implemented. It was not added to the core.

A

As you may know, in lc3 there's takes a more decoupled layered approach, but the label management and the ui etc is still in one of these layers baked in. But what I want to try to do is create a separate module just for label management and the querying thereof as an experiment to further decouple various aspects of this library, so that I will encounter certain aspects that need to be more extensible.

A

So, for example, the front end would need to be opened up to developers so that they can install their own little widgets in this designer. So, for example, this this menu needs to be extensible. These sections here should be extensible so that plugin developers can install their own little functionality.

A

So that's gonna be one of the next things for me and then once that's in place, I intend to actually work on creating custom activities from the designer and, to start with, you should be able to create new composite activities using the designer, so this will be mini workflows using the same flowchart style, visual designer and then ultimately, we will also have a sequence workflow designer.

C

A

Workflow foundation, but also think of modules like emoji, that allows you to create javascript functions or snippets of javascript code that represent activity. So you can use the designer to write new activities on.

B

A

Javascript syntax and then those activities will be available available from the activity picker. Probably in that.

B

A

That's what I'll be working on next and then, finally, I'm hoping to yeah get started with the sequence activity editor. Maybe we discussed this in an.

B

Earlier session,.

A

B

For cotton is there a plan to extend the execution of the activity itself that you can extend on like pipeline for each activity, and the reason I'm asking is that maybe you want to do a transformation prior to the execution for an uncertain variable and also on the output, make some transformations on the object that it's generated? Do you see that as a composite activity.

A

So we did talk about middleware some some other some meetings ago, but that's more like action filters that can help that will execute for in well. In this context, it would execute for every activity, but of course, some middleware pipeline. Could some middleware in a pipeline could be specific to some activity that can perform an action before the activity executing after it executes? But what would be interesting is indeed as custom activity developer, to be able to implement a middleware pipeline for just a specific activity and then maybe extend it to a designer.

A

So you could write javascript, for example, to execute code before a certain activity executes and after so maybe on any activity. Let's say: there's a write line, and would you imagine there's some section in the design where you can implement code that executes before the right line, activity executes and after is that what you would be after from france, yeah.

B

I was thinking about that, as I see in a lot of workflows that we're currently designing that we have to do an additional step just to do a little transformation in the object that we're handling in that workflow just to accommodate the input requirements of that next activity and to make it more reusable. But on the other hand, I can see the logic in having a composite workflow or composite activity there, which basically does that as well.

B

So I was wondering: could there be any benefits in having that middleware on an activity, or is that already implemented when you use the composite activities right, yeah.

A

So when you create a composite activity, then you have that functionality in place, because the composite activity would consist of any any number of activities in any configuration you need, so these will be like mini workflows and then you can add them to the main workflow as single blocks. So then, the low level steps that you mentioned the transformation step, for example, will be encapsulated in the custom activity so that, from the workflow point of view, you don't see these steps. If that's.

B

The case, then, there is no real reason to have an middleware on each activity, because you physically can do that. Yeah.

A

Yeah, it's true.

B

A

I proposed creating a new package, but let's take a look at that pr, because I kind of changed my mind on some part of that so check this out. How cool is this, so this is a uh in the designer syntax, highlighting with intellisense with actual variables from the context pretty.

C

A

Yeah so um here I noticed that you created a new sql handler in the elsa core library and then I suggested well like what we did with javascript and liquid. They live in their own packets, so I suggested, let's move this also to its own packets, but since we already have a sql library, let's take a look at that, so here we have else activity, sql and the syntax highlighting is, I think, primarily used from this. These two activities.

A

Of course I'm not on your pr, but if, if that's the case, then maybe it makes sense for this library to expose this um this sql handler. What do you think yeah.

C

So, first, the reason that I kept it in the core library is because I found that the other handlers for javascript were in the same place. So I thought maybe this is the right place to keep it. But your point is also that you keep it in separate uh project might be more suitable yeah. It could be in in the sql activities, but I think if someone also wants to create their own custom activity that has uh sql syntax, it could be beneficial to have it in a more common place.

A

Yeah, that's true yeah. So here we have a scripting solution, folder with javascript and liquid handler, so for the sake of reusability, as you just suggested that maybe it makes sense to uh add a new scripting one yeah. So that's cool, oh yeah, and I know that jay is working on a generic solution allowing you to implement cascading drop downs in the designer without writing any front-end code, but just declare decorative declaratively define it from your activity code in c-sharp. So that's.

B

A

That's that's going to be pretty cool as well. Yeah, that's pretty much ohio except this! This is a new, smaller feature. The copy buttons to copy these values. We're gonna, make it a little bit better to provide user feedback. So when you click on the button, it changes to a check mark so that you have a visual indicator that it actually did something and we have little tool tips over the activities. I don't know if I showed that last time yeah, so that's all I had so thanks.

A

Everyone for joining and we'll catch up next week.