Save User Workflow in ASP.NET C# by showing workflow charts in javascript HTML

Hi guys, i just wanted to know how can i make a workflow like in sharepoint (not necessarily like that but the logic behind that).

In my example, let say i have a process on my website which is to tell if my request will going to be approve or not. Let say, the user requested an approval

but it will go through to 5 steps (depend on how many steps i create) before his/her request to be approved. In each steps there is yes or no (disapprove or approve). Now, how can i make diagram of it in javascript, html and css to visualize the user where his/her request going on. Then save those workflow and steps in database. So i can update the status of his/her request.

Thanks, Happy Coding!

Asked by:- Aileereal

: 3638 At:- 1/25/2018 1:15:23 PM

ASP.NET ANGULAR 4 C#

add comment to question

1 Answers

Answered by:- vikas_jk

You can use external javascript plugin to show the decision diagram using javascript and can save the state in database, as we call ajax on button click.

Check this plugin which has both types of diagram, interactive(means it will show next step based on user input) and static diagram, here is the link

https://www.jqueryscript.net/demo/Simple-SVG-Flow-Chart-Plugin-with-jQuery-flowSVG/

If you know javascript/jQuery you can easily configure it, it allows you to create a decision making diagram like this

flowSVG.shapes(
        [
            {
			label: 'knowPolicy', //name of step
			type: 'decision',
			text: [               //text to show
				'Do you know the ',
                'Open Access policy',
                'of the journal?'
			],
			yes: 'hasOAPolicy', // call another label based on 'yes'
			no: 'checkPolicy'   //call different label based on 'no'
		}
        ]

Second plugin https://www.jqueryscript.net/demo/Minimalist-Animated-jQuery-Decision-Tree-Plugin-Tree-js/

The above one is quite simple decision-making plugin, which outputs different results based on user, yes/no.

Third plugin https://www.jqueryscript.net/chart-graph/Accessible-jQuery-Decision-Tree-Flowchart-Plugin-decisionTree.html

There are probably more on the internet, you can simply create your own javascript decision-making script or use the above plugins(based on your requirement and knowledge) or any other and if needed, you can save state of user decisions in database by calling ajax in each step or save it on client side only, once done, save it in the database using Ajax call.

You can also append new data/step dynamically by getting data from database, on user input, call ajax , get data from database using C# MVC controller, pass it to front end and append in new request.

At:- 1/25/2018 1:59:49 PM Updated at:- 1/25/2018 2:07:51 PM

Thank you for your response, i'll check these articles. :) 0

By : Aileereal - at :- 1/26/2018 1:05:38 PM