Yeeflow is a powerful and versatile form build, Learn how to create your first form.

Yeeflow is a no-code platform for building scalable cloud-based custom applications that can be seamlessly deployed to organizations of all sizes. And it offers a wide variety of configuration and customization options.

This guide will help you get started with building your first custom Application. This guide illustrates building a Travel Request Management with an approval form and related form report, to give you an overview of how you can deconstruct your business processes and build a form that fits the custom needs of your organization.

 

Plan your Business Requirement

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:

mceclip1.png

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.

mceclip2.png

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.

mceclip3.png

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

mceclip4.png

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:

mceclip5.png

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

mceclip6.png

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:

mceclip8.png

 

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.

mceclip10.png

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. 

mceclip22.png

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

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.

mceclip23.png

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. 

mceclip11.png

 

Step 1.3 - Form Preview 

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

mceclip25.png

 

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:

mceclip12.png

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":

mceclip14.png

 

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.

mceclip26.png

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.

mceclip27.png

Step 1.5 -  Preview your form(s) 

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

mceclip28.png

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. 

mceclip15.png

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 Managerinsert and OK.


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

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)

mceclip14.png

Connect with arrow for all actions as required. 

mceclip5.png

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.

mceclip7.png

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

mceclip16.png

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

mceclip17.png

 <Return to Top>

mceclip10.png

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":

mceclip18.png

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":

mceclip19.png

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:

mceclip20.png

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:

mceclip21.png

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.

mceclip33.png

<Return to Top>

User Interface

Users can see the form as below interface. 

mceclip31.png

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

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

mceclip32.png

<Return to Top>

Was this article helpful?
1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.