Elsa Workflows Community, 17 May 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Elsa Workflows Community Meeting 9 ( 2022-05-17 )

Description

Topics

- Demos
○ Elsa 2
§ History management
§ SQL query Activity + looping
§ Read HTTP endpoint input and use it when writing output.
§ Cascading dropdowns
□ Maybe demo about cascading dropdown API improvements next time :)
○ Elsa 3
§ Auto-naming activities + strategy support
§ Custom display name

A

I have a bunch of demos planned. Do you guys have any any topic? You would like to discuss.

B

I'm just curious about the new things that you've done, not something in my mind now.

A

Sure so let me start with history management. Somebody asked about the demo with the sql stuff. So there's this relatively new sql query activity but turns out it's a little bit tricky to actually execute a query and then looping through those records, and there are some caveats there. So we'll we'll talk about that and then, depending on time, if time permits, I was also planning on showing how to read: http endpoint request input and then echoing it back using an hp response.

A

So this was a question asked on one of the youtube videos that was posted on a of one of the previous meetings. So I figured that's an easy thing to just show and then we have it recorded for future reference.

A

There's this one, and today I answered a question on stack overflow about cascading drop downs, which is a tricky thing to do without any proper documentation.

A

So I created an example- and I thought maybe I can briefly go over that, and it may be too much we'll see how far we get see if it's too much we'll just continue next week, but we will see so this is all ls2 and for elsa 3 there's also some some small updates. For example, we created auto naming.

A

So that means, if, as you, drag and drop an activity onto the canvas, it will get, it get a unique name instead of a guit, and the name is easy to to use when you use scripting, of course, and it has now the ability to provide a custom display name on the activity. But this is a partial implementation right now you can, as a user, enter a custom display text, but what I also want for certain activities like the writeline activity to automatically display the text that you want to write to the console, for example.

A

But that comes later, so this was my plan for today's call again, if you have any other topics, you would like to discuss then feel free to. Let me know first off: let's look at the new feature in lc2 called history management. I should have started this before it always takes longer when sharing the screen and recording seems to be getting better okay. So this is started and shows that's what this one is. This is 2.7, okay, all right.

A

So this new feature, it's workflow version and management, so elsa from the start already had versioning support, which means that whenever you edit a workflow definition every time you make a change. The change gets saved automatically into the current draft, and when you hit the publish button here, a new version will be created and then the next time you start making changes to this workflow. A new draft will be created until you hit publish again in that new travel then become the published one.

A

So with this feature, we have the ability to manage and and and look at those uh those versions. So there's a new tab here on the top right called version history. Currently it's empty because we didn't make any changes. So, let's add a change here so now, because I made a change say: api call is made to the back end. That will create a new draft and persisted so we now have a version, one draft and we can keep making changes. It won't create new drafts, that's nothing new.

A

That was always there, but just to show, as you can see, no new drafts are being created, but now.

B

A

Publish this draft is now the published version and that's indicated with the screen check mark, which means that whenever a request is made to execute this workflow, this version will be executed. But when I make a change like I had another activity here, a new draft has created a version 2 draft here, but still this one is published, so this one will be executing.

B

A

If you want, you can now view this version, so, as you can see, I'm now looking at the published version that looks like this, but if I want to work, continue work on the on the draft. I need to select that one again so now I can safely make changes here. I can do another publish make another change. For example, I could add an http endpoint here and so on and so forth.

A

It also allows you to revert so let's say I publish this change here, but I realized that I made so many changes in version. Two and three is actually a broken workflow. I could just say roll back to version two or revert, but what it does. It actually creates a new draft.

A

So even if you wanted to undo what you did on version three, it will not be removed, it will stay there and it will create a copy of version 2 because I clicked revert on version 2, creating a new version, a new draft version 4., it's not automatically published. So it's a safe, safe action to do and then you can make changes. If you change your mind, you can delete this version and you can basically delete any any version.

A

You want now we're back at version 3, which is now the latest and, of course, still published. You can't delete the published one. If you want to delete this one, then you need to either create a new draft and publish that one or go back to another version like this one. That was not supposed to happen. So that's a bug. I need to look into that, but yeah. So this is a new feature. It was merged.

A

I think a couple of days ago last week, I also noticed that the publish button changes so now I'm looking at an older version, and if you want you can refer to this version, so you could click refer to version two. One omission with this change is you you should not be able to make changes, but that's not been blocked.

A

So if you want to use this, just be aware that this is a current omission, you shouldn't be able to edit activities on a historical draft because you're not supposed to change the history, but you can yeah for now, but uh I would not advise it. Oh yeah. This is the new feature and any questions about about this, any any comments or suggestions. I.

B

Think it looks nice as in first version and after we start using it, we can see if we have to improve some things but yeah. I think it's going to be really handy.

A

Great all right, so that's that's this one. Then, let's take a look at the sql query. Did I hear.

C

You yeah, do you hear me yeah? Is that jay? Okay? Yes, my micro uh doesn't work. uh Yes, a small question about history management. Could it be uh useful to um to disable the remove uh when there is a instance of a specific version, because if you launch instance of versioned version 2, sorry of the workflow, when you look at on the history, the version workflow instances and you try to load, this version is: if the version 2 was deleted, you you will have a an issue yeah. What will.

A

Happen actually, if you delete a version I forgot to mention, but it's very important, deleting a version will delete all of the associated workflow instances with so you won't have the issue of workflow instance referencing, a definition that no longer exists, because those workplaces will no longer exist either. But this is, of course, a critical point. It's because.

C

We lose the history, but instance histories.

A

Yeah exactly including the execution, log, etc. So it's a hard delete on all layers for some scenarios. I can imagine you may not want this. What we could also do is maybe do a soft delete where we mark work for definitions, definitions as deleted, so they become invisible in the ui, but they are still in the database so that you can still have this history, but that might be a good improvement to uh to add all right.

A

So, let's take a look at the sql query activity and in fact I have a existing workflow definition here. So hopefully it still works. So, let's take a look at the query: it's going to execute yeah. First off, you specify the database provider. You want to use so in my case I'm going to use sql server. I have a local instance running, I think so, while this loads, the query can be anything that returns records. So what this this uh this activity returns, is a data set.

A

So, let's take a quick look at that, so we're using this query, execute sql query and its output is a data set, and this is a actual ado.net dataset object, which is not serializable, and this is key to understand of this activity and this activity needs to be non-persistent, so that means its default. Workflow source provider is set to transient, which means, as a user, you don't have to do anything.

A

So that's that's good and- and we should keep it this way, because data set is not serializable, we could make it serializable by maybe having a a custom poco representing the data set, but that's not done at this moment, but this is also important for subsequent activities that use the data set. For example, the four eats it references, the activity, sql query, one which is the name of the or the previous activity.

A

Its output is a data set, and the data set has an array of tables, and by default it just it has just one table called table one or what is important here is to set the items property of this for it's to transient, because otherwise the data set will be stored as part of the for each activity data and that will then be persisted as part of the workflow instance document, either not going to be able to be serialized or deserialized.

A

I don't remember, but you know either one of those or maybe both of those, and the same goes for the output, because the for each activity also restores um stores the current value, I think, as as its output. So here its output is the current values are up on each iteration. It sets the output, so the output should also not be serialized.

A

So this is very important when using the sql query activity. Let's take another look at the items expression. So again, it's just accessing the the first table, which contains a number of rows and then so that means each iteration. The current value will be a row object to understand the type of that. Let's take a look at the which has a data table collection, so I believe it's a data row, the type in a data row bunch of columns and you can index access these columns using this indexer. So these are column names.

A

So, in my case doing this query select all from elsa workflow definitions. This could be any table as long as you provide a connection string to some database that has this table so here I'm just using the elsa database itself, but you could use any database of course. So, looking at that table, the table is workflow definitions, so it has a bunch of columns, id definition, id etc, and here I'm just I am selecting all of these columns.

A

So in my writeline activity, I'm currently just writing the id, but it could also be the name display name or any combination, because of course you can use string, concatenation, interpolation, etc. So, let's see if this works, we'll use the test feature, so I will click execute, and here we we now get an error by the way. This could be a new issue um here we go self-referencing loop detected.

A

Oh, I think I remember. I think this is the issue when using the test in combination with this workflow. So if that's true, then this should work instead. So this seems to work yeah. So here, as you can see, it's writing all three workflow definitions that their id- and we should have them here, yeah. So it's a very tricky activity to use. I don't like it at all the fact that it uses the database table object which is not serializable, causing all sorts of issues.

A

This is one of the reasons that for elsa 3, I don't want to be dealing with this serialization. It should be up to the user if they want to serialize something everything else should be in memory. But if you want to persist something, then it should be stored explicitly using a variable. We talked about this a couple of meetings ago, and that would solve this issue where we can still use the data set as we like.

B

A

Worrying about transient and persistent input and output, but yeah for now. This is something to be aware of, and maybe we need to make a decision that we refactor this activity where we use serialize a serializable model representing a data set bottom line used with caution, but this is how you can use it all right. Moving on to this next one, there was a question about how to access the hp request received via the hp, endpoint activity and then use those request values as some input to another activity, for example the hp response activity.

A

So maybe I have one nope, not this one yeah. I don't think I have this one. So, let's create a new workflow, starting with the http endpoint and we'll do demo one. We will post to it. Reading the content, we'll give it a name so that we can easily access it using javascript expressions and we'll keep it simple. We'll just write received body we'll just write some some part of it back, maybe some field of some json model that we will be posting. So the easiest way to do that is to use javascript or liquid.

A

We'll go with liquid for now and let's, let's come up with a um some model that we will post. So this is the url that the elsa service hosted on this is the pre-configured sub path. So when we want to invoke an http endpoint, we can configure elsa to listen for inbound request on a sub path, and this is recommended because otherwise for every request that comes into your server, the elsa hp, endpoint middleware will be involved and it will try to match the inbound path against some workflow. And that takes time.

A

So you will want to skip that and instead put it on a sub path like this and then we said mr1. So let's say we will post this to the endpoint and then we want to write back the body so for that we need access to the hp, endpoint activity called aspn.1 and I don't remember the output, because it's not called output, it's called something else, or maybe it is outputs. Oh okay, so I was wrong.

A

It's called output like this and then of type hp request model which has two properties to access the received body. If the check mark read body was checked, body will be a serialized version and raw body will be the raw string as received and we will be using the body which by default will be, I believe, an expandable object. So that's like a dictionary typed dynamically, so we can access it using dot notation. So if that works, we should be able to access the body field. So that would be this field here.

A

So, let's, let's see if this works all right close but no cigar, we did get a response, but we're getting the type uh not the uh could.

C

Not be a buddy dead, buddy.

A

C

That's exactly right: yeah you earn a cigar with a minus b or uh what's the case. Is it important is the case important.

A

Yeah, it's important because it's it's not gonna do lowercase, so it needs to be, as I think so, I'm not sure, but I believe that's the case when I last tested it a while ago. So this works so what's important is to understand the structure of this model. It has these properties. So when you want to access the inbound request, you only have access to these uh properties that are stored here, which includes route values, coil string as a dictionary, the headers and the body yeah.

A

So that's that in a nutshell and then finally, let's see how we're doing stuff plenty of time. So I want to show cascading drop downs and specifically, how can you uh how you can implement this yourself using a designer plugin, so for that I prepared a little sample. So let me walk you through that sample. It's part of a sample server host application and it's in the form of the custom vehicle activity and the vehicle activity represents some vehicle.

A

It does nothing, but it's just to showcase the drop down implementation, and in this scenario, what I want the user to be able to do is. I want them to be able to specify or select from a list of car brands. So one thing that is demoed here is the options provider and the options provider. Let's let your application or your activity dynamically, provide values to this drop-down list.

A

So here I'm specif specifying the type vehicle activity and that works, because this activity implements the activity, property options, provider interface, which requires this class to implement the get select list async method. So this will be invoked by the runtime and here, of course you can access the database or some backend api to return. A select list object which contains a list of select list items and each select list item has just two fields: a text and a value, and they they map directly to the html, select option object.

A

So that's one part, but the interesting part, of course, is what, if you now want to allow the user to select a model. So given a car brand, there's a set of available models for that brand, and now the user should be able to pick one of those.

A

So for that I imagined a back-end api, so we have a custom endpoint in this application called models and the way it works is you can make an 8-speed request to this endpoint by providing a brand and then it will give you verb brand a set of available models for that car brand. So that's easy, but let's take a look at the front end how you would implement this plugin.

A

So here we are looking at the source code of the of the workflow designer, but you don't need access to the workflow designer you can make this change directly and, uh for example, in your underscore host dot cs html file. If that's what you use to serve your workflow designer or if you're using react or angular doesn't matter here, I'm just doing it in plain html, because this is where I'm hosting my elsa stevia root element and the dashboard. So what I did is create a javascript function that represents my vehicle activity plugin.

A

So it's just a function. It receives an object, called elsa studio, which is a an object that provides access to various services. That may be useful to your plugin, in this case I'm using the eventbus so that I can listen for certain events and an hp, client factory. So I can easily instantiate an asp client using axios, but you're not required to do so. You can just use axios directly or the feds api or whatever you want. I use this because it's more convenient for me.

A

So here we are in a function within the plugin function and this will be called later on we'll get to that in a second, but just to show you what this does it instantiates an http client and then invokes that custom api that I showed just a second ago all right.

A

So once we have a response or we have a set of models, I'm looking for an element called with an id of model, and I know that it's called model because by the convention that the designer uses is to take the name of the property and it will it doesn't use any prefixes or suffixes. It just takes the name as is or the id of the element, and the same goes for model. So that's that's important to understand the reason I'm using this function called await.

A

Element which is declared up here is because, when the activity editor shows up, the activity editor appearing event is published, but at that point activity properties have not been rendered yet so that's inconvenient, but a relatively elegant way to to solve for that without adding more events to the system where individual elements have been loaded because they are implemented as stencil components is to just observe until it's until it's there it's the best I could come up with. uh Maybe it can be replaced, but this works at least, and actually I just realized.

A

I should actually show you this thing in action, because it will be more clear to to link the codes to what's happening. So let me take one step back. Let me create a new workflow and then add this custom vehicle activity that we displayed, and this is how it's supposed to work. So I have a list of brands and, as I make a change, I get a an available set of models for that selected print. So if I change this to this one, I have different options.

A

So this is the end goal, so going back to the plugin basically starts with this event, so whenever the editor appears, that is, that is whenever I click on this activity. That's when that event is invoked, but also when I click edit. So every time this model appears, this event is published. This event is published for every activity that that you open in the editor. So you need to do a little check here, so you need to make sure you're only doing this stuff for your own activity that you're interested in.

A

If not, you can just return, of course, and then here I'm selecting the brand element. So that's the first drop down here, because what we need here is we need to know what's the current brand so that we can go ahead and fetch the models for that selected uh brand. So that's what we do here so here we invoke this update models and if you remember that's this local function here that performs the api call. So we do that immediately, but we also need to handle the change event yeah.

A

So we also need to listen for the change event and every time that happens, we want to again update the models with the selected value: that's pretty much it, but to avoid any memory, leaks or events not being disposed. You want to make sure that when the editor disappears, you want to remove your update models listener. Actually, this is a wrong implementation. I just realized because here I'm using an anonymous function, but this won't do anything. So let me fix that quickly, just to make sure this still works.

A

Let me refresh so let's change this to this one, and then this one and it's persisted the the changes. One thing to take care of, of course, when this editor loads it always performs an api call and then rebuilds this drop down. So you need to actually access the current value of the model. So that's what that's this line so here whenever the editor appears, I want the initial stored value of the brand on the activity and I you can do that using the properties collection.

A

Then you need to look for the property called model in this case, because that's the name of the property and it's stored in a literal. So this only works. If you don't support javascript and liquid as part of your property, because if you do support that, you need to handle that as well. You need to make sure that there's a value in literal, because there may not be a value, and then you need to end that accordingly, so just some some caveat there. So how did I do? Is this clear?

A

Did I go too fast or are.

C

There any any questions about this. uh It's a it's clear. I wrote a similar plugin in angular to to have a cascading drop down, but I use I was most focused on the plugin in the in the ui and I use the activity property option provider to be sure to define the content of the api on this c-sharp code.

C

I have only one only one property that gives me uh two cascading to drop down, and I think it could be a very interesting to have a generic ue ant to allow cascading drop down, and I think for this it could be a useful to extend the option provider to be able to to get some context. Ifc in the method get selected. Sync. The first object context. The first property of the method called context inline. Yes, this one is is, uh it is not filled by the ui. I think that.

A

Is correct, yeah.

C

A

The only value this one is is what you provide here. So if you have a runtime select list provider, I think it's this one. Then you implement get options and then you can provide some context and this this vehicle context is then this uh passed back to you. So this gets serialized sent to the client, and then the client provides this whenever it gets select list. Yes and.

C

I think something that could be useful is to to get some information of the caller property on the ui. So, on my side I would like to know the model property is asking me some data, so with this I can, I wrote a provider that will tour with the good model of vehicle, because I know the vehicle as a brand choose in the first property is, for example, pedro, but I think we have to explain this method that.

A

Makes perfect sense and that would make it so much easier to implement cascading controls like this yeah. That would be good to have. So when you think, when you do this vr, you will also create documentation right well. That would be beautiful. Thank you. So maybe you can, if you have something available, maybe give a demo at some point. If, if you want yeah.

C

For now uh the demo is a reducing or it's very, very uh reduced on a specific sample and I don't have extern already the provider, but if you think it's a good idea, I think I will change my code in this way. Yeah.

A

I think it's a fantastic idea.

C

A

Awesome all right so moving on to elsa three, just well two small demos, so we will make it yeah. So this feature is about auto naming activities before this change. The id would be automatically generated, but using a unique identifier algorithm. So it was basically a good, but that's not very convenient when trying to reference them from javascript expressions, for example. So now the default is to generate an id based on the activity, type name and then suffix with with a sequence number based.

B

A

Number of activities you have on the on the screen, if I add another one, you see right line two and of course this will be write line. Three and recline in this example will be redline one because it's the first of its kind on the canvas that should make that a little bit easier, as you may know, in elsa 2. If you want to reference an activity, you first have to make sure it has a name, because by default it will not have a name, and here that issue is resolved in this way.

A

If you don't like this naming strategy, you can change it as follows. So we can go to the designer.

B

A

Lsf3, so here here also it's hosted in index html when working with the designer source and what you can do is you can import a container from type di, which is a javascript library that allows you to leverage dependency, injection.

B

A

The service locator pattern, so here I'm using a service locator to get a reference to the activity, name formatter, which is a service and that serves as a as a strategy and the strategy is just a function that receives a context, object as an input and expects a string as the output, for example. I think the default is camelcase yeah.

A

This is the default strategy, but you can choose the pascal case strategy or snakecase or kebab or even a custom one, as is shown here so here, I'm just setting a custom function that uses the takes the activity type which we receive from the context via the activity descriptor, so that the activity descriptor provides descriptive information about the activity that's being added, and then the count represents the number of instances of this activity type that was found on the canvas.

A

So you can use it if you want, but you don't have to, and the activity name formatter, not not this one but codes that uses the activity name. Formatter takes care of making sure that it doesn't use a name that already exists on the canvas, so it should make it as easy as possible for you to generate a custom name.

B

A

A custom format: let's try out quickly this this custom logic here so as you can see what it doing, it takes the activity type, which includes the the namespace of the activity. So now three activities not only have a name, but they also have a namespace to avoid name collisions. But if you don't want that, you can use one of the default strategies or you can strip this yourself. If you want there's a convenience convenience method you can use.

A

If you want, it's called the strip activity namespace, it's just a small utility function that that is exported from the library, so you could leverage it here if you want so here we stripped the namespace and our custom strategy is of course applied. That's it for autonaming activities, then. The other thing I wanted to show is the custom display name. So there's a new field here. So let's say this: rightline activity says hello world and would be convenient. I think is that this activity displays what it's writing to the console right now.

A

It says nothing except rightline, but we can use this field now to uh display what is what's being written. So you have full control of this display text, just a small feature to make the workflow better to understand. So, let's take a look at what's next or else actually yeah. So this is a feature I'm work. I just started to work on and uh gurkhan already well, he created the issues and he already did one of the tasks here.

A

So this is about workflow definition tagging, which allows as you as a user, to associate tags with the workflow definition and then also to be able to query workflow definitions by one or more tags. So that's this feature and it consists of a bunch of subtasks all right. So that's it from my ends. Let me know if there's any questions, and otherwise I will see you next week. Yeah. Thank you. Alright, thanks guys thanks a lot a good week, yeah same cheers.