Elsa Workflows - Orchard Core Demo

community that's right so Elsa is it's pirated through from Orchard course workflows module and uh and it's true it has its roots from that particular month you need to take every piece of Fortune and make it this a great product I'm sure we have other things to to extract like content management like forms like authentication but that's already done there's open ID connect there's open edict oh dear they made some product based on also with open ID collects you can manage your users and your applications your endpoints and everything and you have an authorized server using Ultra custom recipe and everything we've done that yeah like identity server which is in an orchard recipe and this is using open edict or I don't know if that's the correct pronoun yeah and giving head remembrance Michael work on that different photo theory is in Greece and yeah so yeah well it makes sense I I at the very beginning I did consider you know maybe it should be just a an improved version of wordful core but the it was born from a requirement of a project where they they didn't want to base it on Orchard uh core for whatever reason um but but they did want to have workflows um ultimately there wasn't any budget to to recreate workflow so they went with Windows workflow Foundation but uh but I could let it go I I really wanted to to extract it and make it reusable for you know the next project that would come along and then I would have uh a solution for this for for whatever new clients uh would come with this requirement but um uh yeah so so that's what when I started to to start extracting the code for abortion core um which was a lot of fun to do and it's it that that was else I wanted was it was it looked a lot like uh workflow uh the workflows module in Orchard it was using Jay's plump um same same workflow Runner same apis the only the well the main difference was that in Orchard of course you have drivers for for this place but in um and elsa1 uh it was it was implemented using stencil which is a uh component a web component generator so yeah oh it's a front-end thing yeah exactly so if you want to so so my goal was to create a reusable designer so that you can re-host in your own dashboard application and um and and stencil.js it's it allows you to it it has also template binding so it's like react so you have j6 so so then it's easy to create dynamically uh well Dynamic HTML if you will yeah without having to use Knockouts or you know even before that jQuery it's pretty cool but um but what I found was that it's it's quite hard for for non-front-end developers to extend the designer with custom controls and things like that so of course A lot can be done with documentation but um what's really missing is a proper um design system or even just a a UI framework like react which has a big ecosystem of custom or controls that you can use and that would make it easy to extend but but it works it's just not finished yet unfortunately as a matter of fact I'm jumping ahead a little bit but this also ties into the potential of backboarding LSAT designer into or Elsa into Orchard core I did do some experiments with a with a custom Orchard core module and I'll show you in a second what it currently looks like and there's it it doesn't fit well without doing some significant more work in order to to be able to fit it into it so I'm actually uh wondering if this is the right approach or if there might be a better one it feels like a separate product inside or free so yeah that is binding such that yeah you go into exactly you don't don't stay in your trip like SQL Server Like already so it's a different service and you go there to configure the thing that's just helpers to communicate exactly so so that will be will be an approach and and then you can choose whether you you uh manage a external service which is possible but uh the Elsa library it is uh build up in in separate layers so there's a core a library that could be reused in in Orchard in order to have deep integration with events like you know content items being published or deleted or users logging in so that you can you can have this deep integration within the same process but it's it's really about the designer what what is the best approach there and uh I'm more and more leaning towards just doing a a dedicated implementation for Orchard core but using a modern UI framework like react could be stencil too but then you you you don't have the the the you don't have the component libraries in order to do nice uis like uh um uh collapsible panels for example you would have to do a lot of a lot of those things you would have to do yourself even with LSAT 3 there's a lot of these things that I had to do myself actually I should I should show you um anymore no no no no no I know that's uh that I didn't do I found a a replacement for JS Plum which was uh dagger D3 for elsa2 um but the only thing it does it it performs an automatic layout using the dagger algorithm uh which works for for simple sequential diagrams but if you as soon as you start working with flowcharts with looping back then it's it's not so great so for also three I'm using X6 which is a looks like this actually I'll open this thing here your head you should never use something down I am considering replacing it with uh your uh thank you uh I'm not I hope it's much more than this morning just considering because it's much better but whatever sorry go go yeah no worries yeah yeah that's a good it's a it's a great tension so let's get into that later because I discovered your library later after I already did a lot of work with antler and and also I I'm using antler while when I use it uh last year or so to create a custom DSL for Elsa so that you can Implement workflows in codes like as if you're writing JavaScript so for example A4 eats construct in in using this DSL would map to something like uh like like this so here you have a four each so this is an activity right but then it would map to this thing so it would have syntax mapping to an actual workflow so you can write long running processes you see uh JavaScript like syntax but anyway that's that's a separate thing but uh this designer here it's it's X6 and it's it's beautiful because it has all of the uh it has enough granularity that you can configure a lot but it's not too granular where you do have to do a lot of work to create a uh a designer or a graph editor and that was a little bit of problem with x uh with the three libraries it's a graphics library but it's it was too granular for for what I was looking for but this is actually good it has uh panning and of course zoom in and zoom out selection and copy paste all of those things so that's uh that that was very helpful so no I didn't do it myself this is just a uh a good library and then I would recommend using it also for um for the orchard course workflow uh enhancements it could even you could even use the same engine but then use this library and and it's also um because then you if you use stencil or react or doesn't matter then it's more of a spa so you don't have to have separate pages everything is in the same screen which which makes State Management much easier right because now you have everything on the same page in memory and uh here for this design I chose to do a property panel so that you can do quick editing of activity uh settings like this and here there's the workflow properties like the name variables so it it's quite uh it has advanced a lot since Elsa won where you would have activity input and output but here you also have variables more akin to Windows workflow Foundation where you can configure the type and these these map to net types and you can configure the the available types that you want to expose in your in your workflow server but so let me just walk you briefly through this simple uh hello world because it shows a couple of interesting aspects of course the activity here which is very similar to Orson core but there in the in that version you have it on the right hand side and you can just drag and drop stuff onto it Elsa 2 by the way doesn't have this Dragon drop which is uh which makes me sad um settings are here I'm not too happy with the bottom panel because it's a little bit small in terms of work uh space but um yeah yeah so let me just walk you through this uh example so here I have an HTTP endpoint which turns your workflow into an API endpoint just like you can do an orchard you configure a path you can mark it as you know requiring authorization which is very similar as if you were creating a custom controller and annotating it with the authorized attribute so then it becomes protected and you can optionally provide a policy name that then gets evaluated so Fred no it's an it allows Anonymous requests and here you can capture the output so imagine you are sending a Json request to this endpoint so here I prepared one so this represents a post request that I'm about to send to this workflow with a Json body right then you can capture this this body into a variable that you this that you declare here so on the workflow level you can declare a bunch of variables here I created one of type object which um um which will be which will translate to an expanded object under the covers so so it's it's going to be a dynamic object and because here I capture the output into this variable I can use it in this one here so here I have to write HP response activity which writes directly back to the HP response so very similar to when you have an original core with check this out so I'll just show the intellisense so I can say return get payloads so all of these variables here appear also as in the intellisense engine and this by the way is using jint which is a pretty cool Library I highly recommend it and message of course because this is typed object you don't have any intellisense on the on this type here but if you wanted to you could totally create a class in.net registered with the engine so this could be the customer for example and and then it uses reflection and it generates type definition a type definition file that gets downloaded by this Monaco editor and then you would also have proper intellisense on your dotnet type here this is pretty cool but for now we'll keep it simple like this and then um if you publish this one and of course you've already seen it working here but let's run it again so now we executed this workflow so a lot of aspects you probably recognize right we have a workflow definition and you have workflow instances to inspect the execution of a workflow instance this UI is not finished by the way it's pretty recent but it shows you a journal of the activities that executed um yeah and as I mentioned the a big difference the maybe the biggest difference is the where you create custom activities in Elsa and also you just create a class and it's input properties so in the in the case of HP endpoint it has a Path property for example but then you don't have to create a driver to um to create a UI for the for the input you just annotate it with some attribute by default it infers the um the UI based on the data type of the property but you can then customize it using attributes so for example so here for example the input type is uh is of type object um and this defaults to well I actually I don't know what is default so but apparently the just the text area I guess BC but if it's a string then it defaults to a single line that was my point but this one is content so I don't know I I don't know how how it could be so smart that it knows to display the uh other default the default is just a single line as well so that's the default and then here you can switch between syntaxes which is you know directly taken from uh from Orchard um so yeah so this is version three this is completely different from version two which I can show you just uh for a couple of seconds maybe this one it's using uh also call there is 2fa yeah maybe so this is 2.8 well it's actually latest version but this dashboard is out of date but here this is also more of a dashboard experience so in Elsa uh three this one it's not really a dashboard it's just really a big designer and a toolbar that's optional just to get you started quickly so you can quickly do publish and Export import and browse work definitions but it's not really intended to be extendable um because I wanted to do a separate uh integration or actually a separate dashboard project and also integration with Frameworks like Orchard ABP and maybe others but I'm still trying to find a good unit if you will that that can be shared and I talked about stencil but um it doesn't have a design library or component Library like the react ecosystem so now I'm I'm gonna experiment with ionic which allows you to create cross-platform applications using the material design system with proper implementations and potential Integrations with angular and View and react so so in the end this is key it's it's one of the goals for the designers that it's reusable in your own project regardless of the UI framework that you're using and that could be also potentially interesting to then embed in in Orchard because uh well let's get into Orchard right after I show you this example here so here's an example of a workflow and this is so again this is work lsat2 and and as I mentioned it uses stagger D3 and it uses an automatic layout so so you don't you cannot position these activities it's on the one hand is Advantage advantageous because you can't easily make a mess but um it can't get pretty uh pretty big and these activities are very large and you can do multi-select and then copy paste because then it's it's just going to end up at the root here so there's a lot of quirks with this design at first sight it looks nice but once you start to work with it uh you'll you'll run into those limitations but um talking about Orchard here so here I created a an initial module and I wanted to the first thing I want you to do is is to be able to declare the service I don't have access what did somebody somebody change the 2fa for me all right and we're back so as I was saying um one of the things that I thought would be nice is to be able to use Orchard even if just as a client to an external Elsa server so here you can add remote workflow service by just providing the roots URL and then depending on the settings here and depending on the feature that you enabled so there's there's also there's remote workflows that allows you to define those your remote urls and then there's this feature here so that your orchard tenants itself becomes a workflow server and this is the orchard process as a as a workflow server here and this should then also provide activities that relate to content management and other aspects of the system and these allow you to edit the well the workflows from the from the remote server so for example here this is connected to the same one that that this one is connected to and to be clear this is a spa so it's completely decoupled from the from the backend server so here we have the same um a couple of things you'll notice is the UI is a bit off and that's because of the bootstrap or whatever CSS is bleeding into this component it's not using the Dom Shadow which is uh which would be a great Improvement to do because then it's completely isolated but it's also very tricky to get right because um of other components like Monica editor if it it by default as far as I know it requires it depends on the light though so you would have to do some hacks for this component to to also access the the shadow Dom um so that's that's a potential issue um and other than that as you can see I just embedded the entire thing including the toolbar which may not be desirable maybe you just want this without a toolbar and have a more natural UI that that more naturally fits within award shirt um so so for that reason I'm I'm exploring um or that's part of the reasons I'm exploring different options to provide a very usable if if that's even possible uh components or maybe I'll buy the bulletin to a tailor-made designer for Orchard and a tailor-made designer for other Frameworks Maybe but um so so that's I think that's the biggest challenge are other things like um well or else uh three uses fast endpoints library to expose the rest API and it seems to work well I I didn't see any issues uh when when I'm when I installed the the fast end points into Orchards uh pipeline but I don't know how it will behave with multi-tenancy so that's something to to try out first but worst case it's easy to just create a custom a set of controllers in the orchard core module and and then make the the controller logic reusable through mediator handlers for example so that's that's going to be solved another advantage of doing a tailor-made designer would be to being able to reuse the Monaco editor that already comes with Orchard and that's running into conflicting versions or different configurations um and I I think it's might work although as I can see here there's some JavaScript error preventing me to switch tabs could also be due to a recent change sometimes I break things but yeah there's there's a there's some caveats to uh or some challenges to fit it in but once that's figured out um the back end side of things should be very easy but of course you have to um consider what to do with the existing workflow module because that is that's native to Orchard and taking on an external dependency on some other Library could be advantages because it's it's a it's it's used by a lot more people than um who are not using Orchard so it's it's it's it's a big group using workflow specifically which means ideally that that it's uh well maintained and and because it's used so much there's also issues that are bound to be found early on um but it's also a bit of a risk potentially that you take on a different because it's such a core component right of a forge it so it's uh it's it's it's something to consider I think a better strategy at least short term would be to add it as an external module like I'm trying here but as I as you see there's a couple of components that would have to be uh remade I think yeah but then the question is how do you integrate this external module with events like coming from contents which might be easy because that's also quite a core module so it would be okay probably for the workflow for Elsa workflow module to take on a dependency on orchard.contents but what about some of the other features like let's see what we have media might be okay but the the important point is that this module would potentially take on a lot of Orchard dependencies in order to provide activities that you know represent events happening from various modules or tasks that you want to invoke um but maybe that's not a big issue it's just something to be aware of and that might be a good first uh phase to go through and then as it gets used and maybe down the road it could replace Orchard course workflow with with a a big caveat there of course you if you have existing workflows those would have to be migrated manually but that's that's that's really that's that's not here not not going to be an issue anytime soon I I don't think he has to be able to speak Chinese to use exits nope I thought so initially too but um fortunately the browser helps a lot but it is indeed it is a Chinese Library so and that was a very challenging before I figured out that the browser actually could translate it for some reason I I couldn't get it to translate but then at some point it just started to work fortunately because there's there's somebody who started actually to to create a translation using Google Translate but as you can see it's able to translate it quite well so it is a little bit of a challenge to go through the documentation sometimes but use most of the time it's it's okay and check out the galleries pretty cool like this one yeah this one flowchart so it's uh it's a quite uh flexible Library and that's these cool animations this will be cool to so so what I want to do for elsa3 is is be able to allow the use to press the play button to actually execute the workflow and then using these animations to to make it really come come alive that would be huge right yeah and then also being able to inspect the state at real time maybe even pause it uh using a breakpoint the workflow Foundation has it and then you can inspect the its current state on the on some panel for example or even simulate it so you can kind of project what it will do but without committing so for example if the activity would have a side effect like evoking API that you can not bad I just want to see the outcome you know what will it do we'll create a bunch of items will it not I think it's you know yeah be so so being able to provide outcome or outputs without having the side effects of whatever it's doing in turn I mean it's the same thing when you when you just mention how you're going to step through it right to see if there's error are you kind of simulating it right you're just saying what hap what will happen if this happens but you're not really like if if the task was to update uh existing item in the database you're not really updating it you're just saying hey it worked or it failed right so it's kind of the same thing like how else would you simulate it right now to know if it's going to pass or not right yeah just to pause it and then we not to simulate it but just to pose and say wait and then go on and to the next one and stop after the next one and that's it let's say do it for fake like we don't have the solution of fake activity fake execute in the world so or random like just to test your workflows maybe but that's yeah you need to change the work for engine to support that one yeah exactly yeah yeah so the idea is indeed to actually execute the workflow maybe providing some fake input because some workflows may have external dependencies in terms of input um you would have to provide those inputs also if you wanted to support executing acting this individually um like retool seems to are you guys familiar with retool so that so they have this little play button here so you can actually execute an individual activity uh but that potentially requires you to also provide at least some default inputs or some test inputs but uh that kind of tooling I want to First do in in this new project this is the called the Elsa Studio it's a blazer project um so it's a dashboard dashboarding thing which makes it more convenient and more extensible for users to add their own modules but also um take advantage of of the the component libraries out there that are built for Blazer like this is this is based on um much place here which is just a component Library built for Blazer which is pretty cool it implements the um material design system and here they have the whole host of components and that makes it super easy to do things like uh here if I go to here for example there's this these splitter panels so I I implement the splitter panels in Elsa for using stencil like here but it's it's very crude and it's not reusable and it's it took me a bit of work and it and I can't reuse it so that's one example of why using a component libraries is mighty productive I was able to to do all of these in maybe three days it's not completely functional by the way it's I'm still working on that but this is another X6 implementation but in Blazer and this works uh pretty cool here I'm building in building uh an option to switch between environments so similar to what I showed here in Orchards where you can switch between environments here it's gonna you're gonna be able to do it here and then also deploy to uh one of these environments if you want to so you could work on something in on your local and then publish it to production if you uh if you're brave it's funny how this is the opposite for your own but you you get to the same point like environments instead of tenants or deployed publish instead of our deployment remote deployments store where restore unsafe stuff recipe then oh let me exactly these components no it but you start from scratch and you implement the things in option we have all the things and you implement the workflow velocity in opposite yeah yeah we need authentication and oh I need users to be able to access the workflows and oh I need a whole speaker some people can just start a workflow some other can change your definition and then yeah yeah and for that reason for a very long time I I was I was thinking I I also I would just want to use Orchard because it has all of these things that you have to say it's so true now yeah but the big difference being is this is using Blazer so this is completely spa and decoupled from the back end but that's that's the only thing I can say about it what's what's different but uh in terms of functionality you're absolutely right it's going to have user management role management um it's going to be modular so there's going to be a little ecosystem of functionality that people can use just like Orchards and it does it does make one wonder what's the point of doing it from scratch versus using Orchard core it's like the you can put on something you want to go to 100 of the future but it's easy to go to 99 but the last percent you're like I can't do the last percent with this solution so as it is from scratch it's just for this one extra percent whatever percentage it is but you hit the wall at some point for your trading like I can't do that it's not supported and I need to be able to change that how do I do that and you're like no we can't so okay so I will have to leave my own solution even if it means we implementing everything for motor because I can't do the next the last one person with Orchard and I need it that's that station yeah yeah I think you're right all the Frameworks are the same it's it's beautiful until you reach the deleted the framework and you're like I need a different framework or I need to do my own for my own needs because I didn't think about it when I started that's the same for everything that's why everyone is bringing their own CMS everyone is building their own orange or whatever and then their own work for you and so on because they are all different oh I need like something that is not supported by going on yeah that's very true for Elsa and and and for Elsa it was mostly because it needed to be not dependent on on the orchard core framework it needed to be able to fit into any application framework and so so actually Elsa has also implemented as a module in ABP framework which is uh conceptually I think similar to watching core is also it's a modular asp.net core application framework and they uh they they took Elsa and use it as a as their workflow engine so yeah this is uh yeah oh we all over time thank you yeah no worries awesome good luck that a nice to see you again likewise it's uh it's great to see you guys

Channel: Lombiq

Views: 5,644

Keywords: Podcast (Website Category), Orchard Core, Orchard CMS, Orchard Project, Orchard, Orchard Core Demo, Elsa, Workflows

Id: yO8Fr6vebSU

Length: 36min 46sec (2206 seconds)

Published: Thu Jun 01 2023