Using States in Smartforms to manage approval Views at different stages of workflow

Let’s see how we can use Smartform’s states to show different views at different approval stages of a workflow using a sample process as shown below

Process Flowchart

1.Flowchart

Now above flowchart has 3 approval activities Manager Review, Final Review & User Acceptance. In general approach, we need 3 forms for above activities and 1 for submitting the request so total 4 forms. Now using these states, we just need one form to handle all these. Let’s see how we can do.

Step 1: Creating Views and Forms

We need one view to submit the request & one for approval activities. Design 2 views as below

View 1: SubmitView

1.SubmitView

View 2: ApprovalView

2.ApprovalView

Now create one smartform and add these views in that. Note that ApprovalView needs to be dragged twice which we are going to use one for ManagerApproval & one for FinalApproval. Please see below screenshot.

Here in form I have took 3 tables which has 3 buttons in each of them. These tables will be shown according to approval activity.

3.Form

Step 2: Creating a Smartobject

Create a smartobject to store the data of the all form fields. Here I have created a smartbox smartobject as below

4.SmartObject

Step 3: Create Workflow

In designer, create a new workflow give it a name, in forms section select the form that we have created above, and select Use an existing state and select Base State

6.WorkflowSetting1

Create a data field RequestID

7.WorkflowSetting2

Now in configure start rule of workflow, form rules will be automatically populated. if it doesn’t show up here, we need to write the submit rule in form and come back here to configure this step.

Here I have already written those rules in submit button click rule of form.

Now finish.

8.WorkflowSetting3

Creating Manager Approval Task

  • Now drag a new User Task on to canvas.
  • Give Manager Approval as name.
  • Add Approve & Reject as actions & Check 2 checkboxes that are shown there and Click
  • It will show outcome settings just leave the options as it is and click Next.
  • In Participants section drag the Manager to the task group.
  • In UserForm Section select Create a new State option give ManagerApproval as name & click Action Settings button select I will configure the action later option and click Finish and click
  • In next form let the default options as it is and click Finish.

Check the screen shot below

9.ManagerApproval.jpg

Now similarly configure the other 2 approval activities Final Approval & User Acceptance. Both activities should have the same form that we selected above and in every case we need select create a new state option and give FinalApproval & UserAcceptance as state names

And in all reject cases send a mail using email event and also in accept case too.

Below is the workflow screen shot after changes.

5.Workflow.jpg

Step 4: Configure Smartform rules

Now when you open the smartform and navigate to rules section you should see 4 states, (Base State), ManagerApproval, FinalApproval, UserAcceptance. See screenshot below

10.RulesStates.jpg

State are similar to views in SQL, they are used to show the data according to the user or approval activity.

Here in this case (Base State) is considered as a form to Submit Request.  In this state, we will hide the other 2 views and show buttons that are used to submit the request . Rest all controls are made hidden. This will be considered as the default state of this form. It will look as below screen once the rules are configured

11.BaseState.jpg

Please note that all the base state rules will be automatically derived into other states.

  • Now let’s configure the next State ManagerApproval.

Click on state ManagerApproval and see the rules that are in base state are already appearing here. Here I’ve created an unbound rule LoadManagerApproval in which I have wrote the rules for hiding the controls of submit state, make the second view visible and make the controls in first view as non-editable.

12.ManagerApproval

Now in form initializing rule you should see a rule which got automatically added from workflow.

Here in open Manager Approval Worklist item rule configure options get the RequestID from output mappings of the workflow Datafields. Use this RequestID to load the data from smartobject and populate in first view.

13.FormInitializing.jpg

Same way we need to configure the other states by showing and hiding controls/views based on the approval activities. Once all the rules are configured the forms should look as below

SubmitRequestView (BaseState)

Once the request is submitted. 14.submitState

Manager Approval (ManagerApproval State)

Once the request is submitted approval task will be assigned to his manager and below is the screen shot of the how this view would look like. Now Manager reviews and provides his feedback and approves the request.

15.ManagerApprovalState.jpgFinal Approval (FinalApproval State)

Below is the screenshot of how the approval form will look like. Final Approver will review the ratings and provide his feedback and sets the final rating and approves the request.

16.FinalApprovalState.jpg

 

Now the requestor gets the task to review his rating and accept it.

User Acceptance (UserAcceptance State)

User gets the task to review his rating and he can either accept or adjust/Resign 😊

17.UserAcceptanceState.jpg

Once he accepts, the workflow will end and task will be completed.

That’s it!! This is how we can use smart form states to show a single form to show different views at different approval activity levels.

Advertisements

Author: Vijay

I'm a K2 Certified Developer, helping teams to automate, design, develop & maintain business process applications connecting across multiple platforms with multiple technologies.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s