Build your first application with Yeeflow

Before you start building your application, it is critical:

1. Identify the business requirements which you'd like to perform
2. Outline the data/fields that form is based on, as well as interacting of data
3. Outline how the tasks and roles involved, as well as report monitors.

Travel Request as a sample

Imagine that you have been tasked with managing the <Travel Request Form>.

You've decided to build a form that performs online submission and approval the travel request.

This form is applicable to the following participants:

• The Applicants, who apply travel request form
• The Manager, who approves the request
• The Monitor, who is in charge of monitoring this form

This form is meant to the following flow:

1. Applicants apply for travel request
2. Manager has a review and approves/rejects the request
3. If step 2 is rejected, the applicant can update and submit again if any 

<Return to Top>

 

Step 1: Create new application

Firstly, log in with your Yeeflow account. On the home page, click the "New Application" icon from under one workspace. Then select "Start from scratch" from the pop-up menu:

In the pop-up window, Input the application name and description. Let's name this application as "My First App", then click "OK" to create this application.

After the application is created, you will be automatically redirected inside to the new application.

 

Step 1: Create your first approval form

Click the "+Add component" from the top navigation bar, or the center of this blank application.

 In the pop-up window, select "Approval form" from the components list. 

Set the name of the new form as "Travel Request Form" and the Id as "TravReq", then click "OK" button to create a new approval form:

After the approval form is created, you will see a pop-up window to ask if you want to open the designer. 

Click "OK" to open the form/workflow designer. You are now ready to design your form and workflow with designer.

 

Step 2: Start to build the submission form

When you open the designer of the approval form, you firstly see a blank form:

 

And the form does not have any components (untitled header, form, workflow, or report) in it yet.

 

P1. Build form(s)

You can define a header name(e.g. Travel Request Form) for this workflow form.

Before your starting

Drag and drop the controls from the Form Controls (on the left palette) as field(s) to the form. Its Control/Field Properties will appear on the right. 

Learn how to control and validate your field to meet conditional logic. 

Each comes set with:

>> Basic

• Label: or said Displayed Field name, It's a text input that lets the users know what information they are to enter in that field.
• Field ID: Auto-generated and unique. You can Edit it with an recognizable name.
• Field Name: Auto-generated. You can Edit it with an recognizable name

>> Appearance

• Display Title: It's meant to display the Label name. Defaulted status is ON. You can set is as OFF if required.
• Dynamic Display Rules: You can set it to show/read-only/editable/color as required, but each control has its limited rules. 

>> Validation

• Readonly: Defaulted status is OFF. You can set is as ON as required.
• Required: Defaulted status is OFF. You can set is as ON that is mandatory to fill out.
• Custom Validation: You can set it and the error message is displayed when the condition is met. Then the form cannot submit with error message.

Step 1.1 - Set Form Fields

Drag and drop control(s) to your form as following. 

Learn how to choose the appropriate control to your form.

Field Name	Field Type	Field Properties
Applicant	User	Auto populated
Submission Date	Date	Auto populated
Department	Organization	Auto populated
Manager	User	Auto populated
Business Purpose	Drop-down	Mandatory to select (e.g. Workshop)
Depart Date	Datepicker	Mandatory
Return Date	Datepicker	Mandatory
Destination(s)	Textarea	Mandatory
Itineraries	List	Optional and add item(s) to fill: (e.g. Date; Daily Agenda)
Additional Comments	Textarea	Optional

Yeeflow has a quick control of Applicant Info from Workflow Controls (near the left-bottom) that includes defaulted fields.

In Control Properties, Click Appearance → Settings and custom the displayed fields: Applicant; Submission Date; Department; (Line) Manager.

Drag and drop Grid from Layout & Other Controls to design your form in a nice look.
 

Step 1.2 - Manage Workflow History for each monitoring

Scroll down and you will see "Workflow History" at the bottom of the page. Click it and you can manage it to display or not display in the form. 

 

Step 1.3 - Form Preview 

Upon above implementation, Click Preview near the top-left and have a quick check. 

 

Step 1.4 - Copy it to new page(s) for task form(s)

Base to the requirement, as there will be couple approval steps of the workflow process, we will need to create separate task forms. The task forms will be associated with the Assignment Task action in the workflow designer. 

To create a task form, go to the top-left and click the "Travel Request Form", from the dropdown menu list, click "+ Add task from" which is under the "Task Form" section:

In the pop-up window, select "Copy from a existing form", and from the "Select Form" dropdown list, select the Submission Form "Travel Request Form" which is the one we just designed. Set the Form Title as "Travel Approval":

 

Click OK and you will be taken to task form that is copied from the submission form.

 

Now we are in 'Travel Approval' , its Page Properties will appear on the right. You need go to Validation and click Read Only for the full page. Click the single variable if it should be set as editable.

Scroll down and you will see the "Task Action Panel" , and which is above the 'Workflow History'.

Click it and manage the displaying and validation executing.

Step 1.5 -  Preview your form(s) 

Upon a simple implementation, let's have a quick preview of this task page.

And now, you complete the approval forms. Click Next (near top-right) or Workflow (at top-center), you will be taken to the Workflow Designer. 

 <Return to Top>

P2. Create Workflow 

Drag and drop the action from left palette to the designer. Its Action Properties will appear on the right when clicking the settings under the action.

Learn how to choose the workflow actions if you want to meet more requirements. 

Step 2.1 - Action Setting

There are 4 steps to finish an assignment settings:

1. You can define the Label with an recognizable name(e.g. Manager Approval);
2. Set the Task Assignee who will take approval action:
   

   Regarding this example, we set the applicant line manager as the assignee.

   Click to set the assignee, and select 'Expression' and click the Editor Menu. 

   Then select from the route of Instance Context → Applicant → Line Manager,  insert and OK.

   
   
3. Select Task Form from drop-down list.
   
4. Manage Task Type for this assignment. there will be a defaulted task type(as below) and you can define it per your requirement.
    

You may add more workflow actions for variety of requirements. 

 

Step 2.2 - Flow Design

Each workflow MUST have a Start Action(already in and can not delete) and at least an End Action; 

And End with Rejection Action is a Must if any assignment has a rejection button (under task type)

Connect with arrow for all actions as required. 

Click the arrow and you will see the settings icon;

Yeeflow has some quick conditions as Approval or Rejected or Complete. You can define it with multiple and customized conditions.

By now, you complete the workflow designer as seen below.

Click Publish (near top-right). On the pop-up window, click the "PUBLISH" button to make your approval form available:

 <Return to Top>

You can click the "Click to access the form" link above to access the published form and test the functions.

<Return to Top>

Create a form report

Back to the application, and click the "+Add component" from the top navigation bar. From the pop-up window, select "From Report":

And you will be taken to the page of report creating. Select the "Travel Request Form" from the first dropdown list. And input the report name, like "Travel Request Report":

Click Next button to select the related fields you need to be included in the report. And set the filter conditions if you need just include part of the records:

The next page will allow you to set the access permission of this report, and if allow users to view the detail form info and/or export data to excel file:

After you configured and published.  You will be taken to Report page. 

The submission record will be reflected in 3-5 minutes in the report.

<Return to Top>

User Interface

Users can see the form as below interface. 

After submitted, you will see a pop-up window as below.

Click '+Application Form' will take you to a new submission form.

<Return to Top>