Notes: In this tutorial, Domain indicates the domain that you are working in.

What you will build

In this tutorial, you will learn;

  • How to build a relatively complex process flow,
  • How to route a screen to another account,
  • How to deal with conditional scenarios via booleans,
  • How to notify user via email.

The Scenario

The scenario we are going to exercise is as follows:

  • The app consists of two pages. On the first page, you take an action, then request confirmation from another user.
  • The other user receives the confirmation request.
  • If they confirm, it means the operation is completed successfully; the workflow ends.
  • If they reject, you have an email notification about it, then workflow ends.
  • For simplicity, we are going to assign the same user as request sender and the receiver.
  • The scenario can be visualized with the workflow below:

Create your app

  1. Click Create New App on right top of the page.
  2. Click Blank New App card listed under Create New App section.
  3. Fill in the fields inside New App dialog box:
  • Enter Request Sender inside New App Name
  • (Optional) Enter a description inside App Description.
  • Click Start!.

Draw application flow

Step 1: Request

  1. On the menu bar on top of the page, click Add Workflow.
  2. At the center of the page in Flow Design Canvas, double click User Action
  3. On Step Properties panel, open User Action Settings panel by clicking and rename the step to Request. Click Submit.
  4. Inside Step Variables, click Request_routing
  5. On the Expression Editor, set expression
Request_routing = SubmittingKuickaIdentityId
  1. Click    to save the expression.

Step 2: Approval

  1. On the left-most side of the page, you can see the Flow Design Toolbox. Drag and drop   (User Action) to Flow Design Canvas.
  2. On Flow Design Canvas, double click User Action
  3. On Step Properties panel, open User Action Settings panel by clicking   and rename the step to Approval. Click Submit.
  4. Inside Step Variables, click Approval_routing
  5. On the Expression Editor, set expression
  Approval_routing = SubmittingKuickaIdentityId
  1. Click    to save the expression.

Step 3: Approved

  1. On the left-most side of the page, you can see the Flow Design Toolbox. Drag and drop rhombus (Decision) to Flow Design Canvas.
  2. On Flow Design Canvas, double click Decision
  3. On Step Properties panel, open Decision Settings panel by clicking    and rename the step to Approved. Click Submit.

Step 4: Rejection Report

  1. On the left-most side of the page, you can see the Flow Design Toolbox. Drag and drop  (Email Notification) to Flow Design Canvas.
  2. On Flow Design Canvas, double click Email Notification
  3. On Step Properties panel, open Email Notification Settings panel by clicking    and rename the step to Rejection Report. Click Submit.
  4. In Step Variables, click Rejection_Report_emailRecipients. Set expression:
Rejection_Report_emailRecipients = GETEMAILOFIDENTITY(SubmittingKuickaIdentityId)
  1. In Step Variables, click Rejection_Report_emailBody. Set expression:
Rejection_Report_emailBody = “Sorry to tell but I have to reject your approval.”

(Please write expression on keyboard instead of copy-pasting. Copy-paste action may cause parsing issues.)

  1. In Step Variables, click Rejection_Report_emailTopic. Set expression:
Rejection_Report_emailTopic = “Request Result”

Sort the flow steps

  1. Separate the outgoing link of Request, and then bind it as incoming link to
  2. Click out-port of Approval, draw a link to in-port of Approved.
  3. Bind false-port (the red-colored one) of Approved to the in-port of Rejection Report.
  4. Finally, bind true port (the green-colored one) of Approved to the End

 

You drew your application workflow. Let’s make it real!

Create the screens

Screen 1: Request

  1. On Workflow Designer, on Flow Design Canvas, double click Request.
  2. On Step Properties panel, in Bound section, you will see “or create a new screen for this step” field. Write Request inside this area and click Create. The screen designer opens.
  • Drop entities and set expressions

 

  1. On the right side of the page, you will see Screen Design Toolbox. Click Basic Entities. Drag and drop String into Screen Design Canvas.
  2. In the dialog box opened;
  • Select Input as Action,
  • Select TextInput as Renderer,
  • Click Submit.
  1. Click on String inside canvas. Display Item Properties panel opens on the right.
  2. On Display Item Properties panel, open String panel by clicking   and rename the step to My Request. Click Save.

 

According to the scenario, the request which is entered on the first screen must be displayed on the second screen. This requires My_Request to be reachable on both screens. In other words, My_Request will also be needed on a screen other than the screen it is created in. Entities that are used in multiple screens are called App Variable. Hence, we need to make My_Request an app variable. To do this:

  1. On Entity Properties panel, in Entity Variables list, click    near My_Request_out.

 

As you may notice My_Request_out  now appears in App Variables list. The sign  near My_Request_out also indicates that it is an app variable.

  • Add buttons to the screen

 

  1. Click on Widget Toolbox in Screen Design Toolbox on the left of the page. Drag and drop Button to the canvas.
  2. Click Button inside the canvas.
  3. On Display Item Properties Panel, open Button Settings panel by clicking   and rename your Button to Send. Click Save.
  4. Select Send_Click from Events sub panel of Display Item Properties Panel.
  5. Check My_Request_out option in Variables To Commit.
  6. Check This Event Closes Screen and This Event Finished Workflow Step options in Actions.
  7. Click Bind Event.

Screen 2: Request Approval

  1. On Workflow Designer, on Flow Design Canvas, double click Approval.
  2. On Step Properties panel, in Bound section, you will see “or create a new screen for this step” field. Write Request Approval inside this area and click Create. The screen designer opens.
  • Drop entities and set expressions

 

  1. On the right side of the page, you will see Screen Design Toolbox. Click Basic Entities. Drag and drop String into Screen Design Canvas.
  2. In the dialog box opened;
  • Select Display as Action,
  • Select Field:Value as Renderer,
  • Click Submit.
    1. Click on String inside canvas. Display Item Properties panel opens on the left.
    2. On Display Item Properties panel, open String panel by clicking and rename the step to Request Received. Click Save.
    3. Click on Request_Received in Entity Variables. Set expression to:
Request_Received = My_Request_out
  1. Click    to save the expression.

 

This screen will have two buttons: one to approve the request, the other to reject it. As you shall remember, according to our scenario; if user rejects, a rejection email will be sent to the requester. We will need to remember user’s decision: whether s/he have approved or not. We will pass this information to the next step within a boolean variable. Let’s create our boolean variable first:

  • Create a boolean variable

 

  1. In Toolbox, in Basic Entities, drag and drop Boolean to the canvas.
  2. In the dialog box opened;
  • Select Display as Action,
  • Select Checkbox Display as Renderer
  • Click
  1. Click on Boolean inside canvas. Display Item Properties panel opens on the left.
  2. On Display Item Properties panel, open Boolean panel by clicking and rename the step to IsApproved. Click Save.
  3. In Entity Variables list, click on On Expression Editor, set expression
IsApproved_in = false
  1. Click    to save the expression.
  1. In Entity Variables list, click IsApproved_visible. On Expression Editor, set expression
IsApproved_visible = false
  1. Click   to save the expression.
  1. In Entity Variables list, click   on near IsApproved_in to promote it to be an app variable

 

  • Add buttons to the screen

 

    • Add “Approve” Button

 

    1. Click on Widget Toolbox in Screen Design Toolbox on the left of the page. Drag and drop Button to the canvas.
    2. Click Button inside the canvas.
    3. On Display Item Properties Panel, open Button Settings panel by clicking   and rename your Button to Approve. Click Save.
    4. From Events sub panel, click Approve_Click on Display Item Properties Panel.
    5. Select IsApproved_in from Variables To Commit.
    6. Check This Event Closes Screen and This Event Finished Workflow Step options in Actions.
    7. Click Bind Event.
    8. Click Event Properties.
    9. Select IsApproved_in in Screen Variables, and set the expression:
    IsApproved_in = true
    1. Click   to save the expression.
    • Add “Reject” Button

 

    1. Click on Widget Toolbox in Screen Design Toolbox on the left of the page. Drag and drop Button to the canvas.
    2. Click Button inside the canvas.
    3. On Entity Properties Panel, open Button Settings panel by clicking   and rename your Button to Reject. Click Save.
    4. From Events sub panel, click Reject_Click on Entity Properties Panel.
    5. Select IsApproved_in from Variables To Commit.
    6. Check This Event Closes Screen and This Event Finished Workflow Step options in Actions.
    7. Click Bind Event.
    8. Click Event Properties.
    9. Select IsApproved_in in Screen Variables, and set the expression:
    IsApproved_in = false
    1. Click   to save the expression.

Use the Boolean in Decision Step

  1. Click Workflow Designer.
  2. Click Approved on Flow Design Canvas.
  3. On Step Properties panel, click Approved_decision in Step Variables. And Set expression:
Approved_decision = IsApproved_in
  1. Click   to save the expression.

Your application design is complete! It’s time to generate the app.

Generate the application

  1. Click Menu > Publish in the top-right corner.

 

Your application is ready to deploy!

Deploy the application

  1. Log in to Management.
  2. Switch to your domain Domain via menu at the top right of the page.
  3. On Apps, find Request Sender app and click QA Approve.
  4. Click Deploy.
  5. Then click Release (Activate).
  6. On Type Systems, click Refresh Type System Data.
  7. On the first line listed in Type Systems, click on Publish.

 

Your app is now in use. You can run it from Kuika environment right away!

Run the application

  1. Log in to Shell.
  2. On top-left corner, click   .
  3. Click Select Domain.
  4. Click Domain.
  5. Click Default Menu.
  6. On Apps, click Request Sender.

 

Your app is running!

Screen 1 : Request

  1. Fill in My Request as you like.
  2. To send your request, click Send.

 

You sent a request. The second screen will open automatically on your app, since it was routed to you as well.

Pending Actions: Approval

  1. On top-left corner, click  .
  2. Click Home.
  3. Click Folder on top right of the Home page, which will direct you to Pending Actions page.
  4. Click Approval action to proceed

 

Screen 2 : Approval

You can see the request on the screen. Since “rejecting” scenario is more interesting, let’s click Reject. (If you click Approve, you will quit app.)

Check your email address that you are using as contact info in Kuika. You will see the email that reports rejection.

Congratulations! You have created and run an app with a process flow that uses email notification!