Plan your Form

Before you start building your form, 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 forms or applications
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>

Build the form

Go to your Yeeflow account's Home or Yeeflow Tab in Teams Client.

1. Click New, near the top-right corner of the page. If there are no published forms in your account, click CREATE FLOW near the center of the page.
2. Select Create From Scratch, the first one.
3. Set the form name as 'Travel Request Form', the Identifier as 'TRF', click CREATE. then Click OK, You will be taken to the Design page of your workflow form.

You're now building an form. However, the form does not have any components (untitled header, form, workflow, or report) in it. You will need to start by creating a form.

Each submission through a form is called a record.

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, there must be a approval form for Manager. 

Click Copy and copy it to a new page, that names 'Travel Approval'.

Click OK and you will be taken to task form that is a duplicated 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 Next (near top-right) or 'Settings' (in top-center), you will be taken to the Settings page. 

 <Return to Top>

P3. Define your Form Settings 

You need define your form settings as a recognition, as well as the necessary scene descriptions.

Then click Publish on top-right.  

Learn how to fix your form or workflow if some error occurs.

Upon a successful check, you will be taken to a pop-up window. Edit the Process ID. 

Click 'PUBLISH' to confirm and your form is published now. 

<Return to Top>

Add Reports

Based on the successful publish.  'Click to access the form' and you will be taken to the submission form.

Click the dropdown (near the form name: Travel Request Form ), you will see the navigation menu.  

 Click +Add Report, and you will be taken to the page of report creating.

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

All permission 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>