Microsoft 365 Community Community Demos, 24 Mar 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Creating a workflow engine within SharePoint Framework and Azure

Description

In this 11-minute developer-focused demo, Greg Hitchon shows a task-based workflow framework for business and technical work, i.e., create technical report, vacation request, new hire onboarding. Securely accesses protected resources, uses Microsoft stack - Graph, Adaptive Cards (low code forms), React Hooks (code forms), SPFx, Fluent UI, etc. Initiate tasks, get/respond to Adaptive Card form in email, SharePoint, and Teams. Capably delivers the expected validations, approvals, status tracking. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 24, 2022.

Demo Presenter: Greg Hitchon (Corrosion Service Co)

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
•Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

My name is greg hitchon. I am a software developer of an engineering company in canada and we have been working on a workflow engine to do a variety of things, and that includes so.

A

uh Basically, we want to solve technical problems as well as business related problems, um and we need to support human interaction so task for task based work, access to protected resources, so accessing the graph, um creating files deleting files whatever and some key goals we had here- was to have both a hybrid workflow, where we could have low code by by default and then drop into more of a code-based solution where required and then also hybrid forms, so have a ability to have a simple low-code form and then drop into a more complex form where required.

A

So some examples of these problems are creating technical reports. uh Business side like a vacation, request, onboarding process and some existing products to this, be like temporal.io, some bpmn type engine, syntax power automates. So all of these are great solutions and as as is classic in in software development, we were like. You know what we're going to do something different so, um but we didn't rebuild, you know any of these. So how do we do this? uh Basically, our stack here from the ui side. All this is very microsoft centric.

A

So I'm using spfx react for for the the ui, basically building a little website inside of sharepoint fluent ui pmp stuff using react, query and react router for our data and api call management and then react router for our navigation um and form wise.

A

We have the adaptive cards, we're using for our low code solution to forms and then react hook. Form is just a library within react and we're using that for our more complex forms and for workflows we're using xstate, which is shifted over like they created a new company, stately and they're, doing all sorts of good stuff there in the last year or so for our low code and then durable functions for our more complex stuff and then data access we're using asp.net core I'll, oh data api.

A

um So that's basically and then within sharepoint framework. um We've been working on this since the early days of spfx. But lately uh you know, with the improvements in um you know, react test hooks and all this stuff, it's been, it's been um beneficial and found like the the react faster stuff. Is this really helps in our workflow when you have a more complicated uh web part? So, uh since the early days, uh the the whole stack has gotten a lot nicer and we have like the ci cd stuff.

A

So everything is, at this point fairly fairly clean. um So let's do a demo. So what does this look like? So we have a couple of just simple, simple demos here, so this is uh just an app page that we have- um and this is a generic sort of list that has configured for different entities, so these are very similar. There's some changes in the the naming and stuff which is configurable and basically when we create a new app. I just can reuse a lot of this and it's just a very generic thing.

A

So what does this do so to create? So this is example is just for a for a document review request, but really it's just a sample, there's not much in this in this workflow, but this form is is customized, so you know you can have any any inputs you want into uh to this.

A

So we're going to submit this document, so let's say I'm you know a person submitting some document for request or for review. I might have some additional fields here. um This then will populate and what's happening in the background. Here is just some some api calls and then x8 is running. um You know getting some events. Persisting some state and then durable functions is, is also kicking in to create some uh create some records in a database. um So we can look at this and we've created a task.

A

So all this stuff is it's just task based we've created a task has some some properties, and what we also should get here is is an email, so this email is using a 1-4 adaptive cards, and so here we have some some simple, um some simple inputs and we can see there's some some validation here. So what are the nice things about? 1-4 adaptive cards? Is this validation, which is blessed, and you have to worry about? You know sending it back to the server and then adjusting and then sending it back, which was a pain.

A

um So so we get this card with this task that we can fill out directly in the email and then we also have um within sharepoint. uh We can, we can see we render the same the same card, so basically this is just a again sort of a hybrid approach where, if we're working within sharepoint or teams for that matter, we can just fill this in directly. We don't have to recode another form for the different environments, so um we can submit this.

A

We can submit this from from within within sharepoint and there's a bit of a difference with 1-4 in terms of the updating which still haven't figured out cleanly. If you want to return like a refresh card, it refreshes once automatically, and so if there is a lag in between like um when the data is getting updated, uh this this won't get updated right away. So once it does, though, we get this refresh card, and we can see our comments here um and then also here if we refresh from within sharepoint.

A

Obviously we see we see the same same comments and then this workflow is gonna. You know update in status. It's going to be complete whatever so that's kind of an example of of using the low code form approach, um and then this start card. So this is more of a business process that we're actually using. So we can add in uh you know our some some photos and uh a bunch of data and this this again that this is something that you can't do in in adaptive: cars right now, for instance like upload a file.

A

So we can't do this directly in in the email. So we need to drop into like react. um You know hook forms to I mean you could do any framework, but we have to drop into spfx uh to do this, and so here there's there's no tasks within this little workflow.

A

Basically, all we're expecting here is for this. This card to get submitted and then once this workflow completes it'll just send us an email with uh with with that pdf of of that that card.

A

So if we look at the workflow here, uh you can see this is this has completed, um and if we go in and look at it, we can see some of the data that that we've we've submitted and then um get a message here with with like a pdf, and this is happening in in the durable functions world, where we're taking that data generating a pdf in like an async fashion and then once that's completed, we're sending this email.

A

So um obviously, here these are very simple, uh very simple workflows, uh but the when we have a number of them that are also quite complex. Lots of approval stuff- and you have drop downs- approve, reject all this stuff and and yeah. So that is that, um and let's take a quick look at some of the like what some of this code looks like.

A

So, for instance, this code is for that start card submission that we we just did so you can see it's pretty simple, so we've abstracted some of the complexity of the form stuff and just just put it into you know these these text inputs. So basically, we can spin up like a simple form for for grabbing some data, pretty quickly like there's, not a whole lot going on here, um and then this just drops into the that generic sort of framework in terms of the low code stuff.

A

So this is similarly what this looks like in the adaptive cards world. So you can see, there's some air handling and we have just like a json type uh schema. We could also just design this in the designer. So this is something that is a lot easier to design because you have a visual designer and and then you can tweak it a little bit um for any customizations um and then in terms of the workflow. So xdate looks something like this again. It's json and there isn't an editor now live for for x8.

A

So there's a visual editor that you can scaffold out your workflows in and then convert them um into or drop in little snippets into your actual code base, um and so this this invoke is invoking a like an api call, basically which, which then kicks off some some additional uh work, and this is the sort of code side of the workflow. So this is c sharp. This is in durable functions um and you can see here like uh this is just a sample example where you get some data from a task.

A

You wait for some event, get in some some input from an email for instance, and then, if you can, you can do anything. So if you wanted to do some specific thing in code that you didn't want to or couldn't handle in the in the you know, json sort of stuff, then you can do any kind of logic you want here and then take any kind of action. So this is all in c sharp. So you know for creating pdfs or like accessing some data.

A

I mean it's all very, very straightforward and there's a lot of a lot of resources around um around that, so that is, that is pretty much it one. Other thing that um is is of interest. Is this details list, so this is something that took a while to get to it right um and the details listed in fluently eye is, is a pretty it's a pretty beastly thing, there's a lot going on in terms of configurations. So one thing that was was useful early on and I would definitely suggest doing.

A

um Is we created a wrapper and then we created another wrapper on top of this wrapper actually um to to abstract away some of that complexity. So um where you have uh some of these lists, like I mean all of these, are, are are using that that list and you can have some different views and stuff like that and different search and and refreshing and whatnot.

A

So this this list component is was was pretty useful in terms of just uh putting together a ui that that made sense um yeah, and that is uh that's pretty much it so uh that is um and yeah that's. That's all so um stay happy, stay beautiful and thank you for thank you for watching and listening.

B

Thanks greg great stuff, exciting to see that demo, thanks for coming and sharing it with us, really neat use of a lot of different techniques. There so hope folks can check that out.