Dragonce Tutorial Simple Leave Application System Level 1 

 

Code Free Soft Limited 1 Aug, 2016 

 

   

 

 

 

Learning Points 

● How to make a new App ● How to create a Form and connect it to work�ow ● How to drag and drop simple widgets and con�gure their settings ● How to set up web header ● How to convert App to mobile version with one click ● How to set up Run Time User Role 

Covered Areas 

● Widgets: Form, Container, Input Box, Selection Box, Dropdown Menu, Date & Time,                       User & Group, Label, Form Table 

● Work�ow states, edges and stakeholders ● Web Header ● Mobile Pages ● Run Time User Role 

Scenario 

Your manager wants to make sta�’s leave applications and approvals more convenient. You are                           assigned to create a Dragonce App which allows employees to apply leave easily and your                             manager to approve/reject leave applications eጠ�ciently. A mobile version of the App is needed                           to allow them to do these actions on Dragonce Mobile App as well. 

Expected Use of the System 

Let’s look at how the 2 groups of end users are expected to use the system. 

(1) End User : Employees 

(Picture 1) Employees use the App to �ll out leave application forms, including information of                             leave type, date and remarks, etc. (Picture 2) After submitting the form records, they can follow                               the status of their applications in the table on ‘Leave Application Records’.  

 

1 

 

 

   

Picture 1  Picture 2 

(2) End User : Managers 

(Picture 1) Managers keep track of submitted applications by all employees on ‘Leave                         Application Records’. (Picture 2) They can approve or reject the applications on individual form                           records.  

 

 

 

Picture 1  Picture 2 

 

2 

 

 

User Group and User Role Preparation 

You should have assigned the required Environment Role to yourself and set up a                           ‘Management Team’ user group under your subscriber. After doing so, you are allowed to                           perform the App management activities in this tutorial and choose the user group within your                             App.  

5-Step Approach 

Remember to always follow the sequence of the 5 steps to build a Dragonce App:  

 

We take this approach in every tutorial in order to let you develop a smooth and regular                                 practise to build Dragonce Apps. But this is just a recommended practise. you are free to                               develop your own set of steps. 

 

   

3 

 

 

Step 1 Design Pages  1.1 Create an App ‘Simple Leave Application System’ 

1. After logging in, on top of Launch Board, mouse over App Management button and go                             to the Developing Environment . 

 

2. On the App List , click and create an App called ‘Simple Leave Application                           System ’ . Click ‘Submit’ .  

 

 

4 

 

 

3. Click next to the App ‘Simple Leave Application System ’. Change its                       

status to ‘ Active ’. You will see the status changed into . 

 

 

4. Click the App name ‘Simple Leave Application System ’ .  

5. On the Page List , click to create the following pages one by one. ○ ‘ Leave Application Form Page ’ ○ ‘ Leave Application Records Page ’ 

  

Pages make up the interface of an App. When using an App, end users switch                             between di�erent pages to view information and interact with the App.  

   

5 

 

 

1.2 ‘ Leave Application Form ’ Page 

This is a Form for employees to submit leave application to managers. Below is the �nished                               design of this Form in the Page Builder.  

 

1. Click the ‘ Leave Application Form Page ’ on the Page List to open the Page Builder. 2. From the side menu, drag and drop 1 Form on to the page.  

6 

 

 

 

3. According to the table below, drag and drop the widgets on to the Form .   

Move widget by dragging the move handle at the top left corner of the widget. Resize                               it by dragging the resize handle on the bottom right corner. 

4. Click the widget to view the Quick Settings Panel.  5. Type the widget name in the red �eld and press Enter on your keyboard. (Alternative                             

way to do it: Widget Property Settings > General > Basic > Name )  

You can directly change simple settings (such as widget name) of a widget on Quick                             Settings Panel, or click the buttons (such as Widget Property Settings) on the Quick                           Settings Panel to con�gure more complicated settings. 

6. Click to open Widget Property Settings and make con�gurations accordingly. 

 

No.  Widget  Name  Widget Property Settings 

1  Form  Application Form   

2  Label  Form Title  General: ● Label and Header Display > Font Style 

> ‘ Title’ 

 Value: 

● Default Value > ‘Leave Application Form’ 

7 

 

 

  

The default value is used to control what to be displayed for the label during Run Time. It is di�erent from widget name, which is for distinguishing purpose only.  

 

3  Container  Details   

4  User & Group  Sta缀縀 Name  General:  ● Con�gurations > Initial User: Check 

‘Initialize as Current User’ 

 Visibility: 

● Default Value > Check ‘Looks Read-Only’ 

 

5  Dropdown Menu  Leave Type  Value: ● Options Source Type > ‘ Use 

Customized Options’ : (add 2 items) ○ ‘Sick Leave’ ○ ‘Annual Leave’ 

 

6  Date & Time  Date   

8 

 

 

7  Selection Box  Leave Period  General:  ● Con�gurations > Options Per Row > ‘ 3’ 

 Value: 

● Options Source Type > ‘ Use Customized Options’ : (add 3 items) 

○ ‘AM’ ○ ‘PM’ ○ ‘Whole Day’ 

 

8  Input Box  Remarks  General:  ● Con�gurations > Textbox > ‘ Multiple 

Line’ 

 

7. Click to save the page design. 

8. Click to go back to the Page List. 

   

9 

 

 

1.3 ‘ Leave Application Records ’ Page 

This is a page for viewing submitted leave applications. Employees will be able to view their                               own records. Managers will be able to view all records. Below is the �nished design of this                                 page in the Page Builder.  

 

1. Click the ‘ Leave Application Records Page ’ on the Page List to open the Page                           Builder. 

2. From the side menu, drag and drop 1 Label and 1 Form Table on to the page.  

10 

 

 

 

3. Click the widget to view the Quick Settings Panel. Con�gure their names and Widget                           

Property Settings accordingly.  

 

No.  Widget  Name  Widget Property Settings 

1  Label  Records Page Title  General: ● Label and Header Display > 

Font Style > ‘ Title’ 

Value: ● Default Value > ‘Leave 

Application Records’ 

2  Form Table  Form Table   

 

11 

 

 

1.3.1 Table Con�gurations 

1. Click the Form Table and then click Data Source Settings . 

 

2. In the 1st step ‘Data Source’, select ‘ Leave Application Form Page - Leave                         Application Form ’ and click ‘ Continue ’. 

 

3. In the 2nd step ‘Record Filters’, click ‘ Continue ’. 4. In the 3rd step ‘Column Settings’, check the box next to ‘Show’ to select all columns. 

12 

 

 

  

The items checked in this page will be displayed as the table columns during Run                             Time.  

5. Click ‘ Continue ’. 6. In the 4th step ‘Statistical Value’, click ‘Finish ’. 

7. Click to save the page design. 

8. Click to go back to the Page List. 

 

   

13 

 

 

Step 2 Connect to Work�ows 

2.1 Create a Work�ow 

1. Click the ‘ Leave Application Form Page ’ on the Page List to open the Page Builder. 2. Click on the ‘Form’ widget and click ’ Connect to a Work㬀ow ’. 

 

3. Click , and then click ‘ Create ’. 

 

4. Click the work�ow name on the top of the ‘Form' widget, and then click ‘ OK ’.                             (Alternative way to open work�ow: App Management > Developing Environment >                     side menu > Work㬀ows ) 

14 

 

 

  

Page design is automatically saved every time a work�ow is connected /                       disconnected to a Form in the page. 

   

15 

 

 

2.2 ‘ Work紀稀ow of Leave Application Form Page ’ 

1. In the Work�ow Builder, from the side menu, drag and drop 1 state and 2 end states .  

 

2. Build the work㬀ow as follows: 

 

After dragging the work�ow elements to the desired locations, follow the steps below to create and move edges: 

1. Mouse over a state and drag a line from the right by clicking and holding the . 2. Drag the arrow towards the target state. 3. The head of the arrow has to move inside the target state for connection. 4. Leave your click to complete the connection. 

16 

 

 

 You can relocate the head and tail by dragging them onto any side of the states/conditions. 

1. Click and hold the head or tail of the edge. 2. Move to the other side of the state/condition (or other state/condition). 3. Leave your click to complete the movement of the edge. 

 

3. Click the element to view the Quick Settings Panel.  4. Change the work�ow element name on the Panel and press Enter on your keyboard.                           

(Alternative way to do it: Work㬀ow Edge Property Settings / Work㬀ow State                       Property Settings > Name ) 

17 

 

 

 

No.  Name 

S1  Pending for Approval 

S2  Approved 

S3  Rejected 

E1  Submit 

E2  Approve 

E3  Reject 

5. Click the edge ‘Submit’ .  

6. On the Quick Settings Panel, click Work㬀ow Edge Property Settings .  

7. At Stakeholders > Default Next Stakeholder, click . Choose the user group                       

' Management Team' by clicking next to the group name. The will be �lled.                             Then, click ‘Apply’ . 

  

18 

 

 

When the Management Team is assigned as the default next stakeholder, members                       of the Management Team are given the responsibility and permission to perform                       action on submitted leave applications, i.e. to approve / reject them.  

 

8. Click to save the Work�ow design. 

9. Click to go back to Work�ow List. 

   

19 

 

 

Step 3 Set Permissions 

We would like managers and normal sta� to use the same page ‘Leave Application Records                             Page’ for viewing applications. Employees will be able to view their own records only, while                             managers will be able to view all records. 

We will make use of Run Time User Role to grant them di�erent levels of permission. 

3.1 Run Time User Role 

1. At App Management > Developing Environment , on the side menu, click ‘Run Time                         User Roles’ . 

 

2. Mouse over the row of ‘ Manager’ and click Run Time User Role Settings . 3. Con�gure the permission of reading and saving data as follows: 

20 

 

 

 

4. Mouse over the row of ‘ Sta缀縀’ and click Run Time User Role Settings . 5. Con�gure the permission of reading and saving data as follows: 

  

Under these settings, managers have the permission to view, edit and perform action                         on any leave application forms. Normal sta� have the permission to view and edit                           their own leave application forms only. 

6. Mouse over the row of ‘ Manager’ and click to assign this Run Time User Role to                                 selected users. 

7. Choose the user group ‘ Management Team’ and click ‘ Apply ’. 

21 

 

 

 

8. Mouse over the row of ‘ Sta缀縀’ and click to assign this Run Time User Role to                                 selected users. 

9. Choose all employees that will use this App and then click ‘ Apply ’. 

  

22 

 

 

● If a user does not belong to any of the Run Time User Role, he or she will not                                     be able to �nd the App icon of this App on launch board and access this App. 

● If a user belongs to both Run Time User Roles, he/she will be granted the                             higher level of permission, i.e. the rights of the ‘Manager’ role.  

● App Owner (who created the App) has default Run Time User Roles as                         ‘Manager’ and ‘Sta�’. 

   

23 

 

 

Step 4 Add Mobile Version 

We can now move on to creating the mobile version of each of the pages. After the App is                                     deployed to the Production Environment (see Step 5 in this tutorial), managers and sta� can                             open and use this App on Dragonce Mobile App. 

4.1 Mobile Version of ‘ Leave Application Form Page ’ 

1. At App Management > Developing Environment , on the side menu, click ‘ Pages’ . 2. Click ‘ Leave Application Form Page ’ . 

3. In the Page Builder, click the button. On the ‘Con�rmation’                     message that pops up, click ‘Save’ . 

4. You should now be redirected to the Mobile Page Builder. It shows the layout of the                               Page in the mobile view.  

  

24 

 

 

● In this picture, on the left, it is the mobile version of the leave application form                               (the ‘Form’ widget). On the right, it is the mobile version of the Leave                           Application Form Page (the page). 

● Mobile pages are saved once automatically when they are �rst created. 

5. Drag the widgets up and down to reorder them.  

6. Click the ‘label’ widget ‘Leave Application Form Title’ on the mobile page of the Form. 

Turn to . 

 

By turning to , the ‘label’ widget becomes invisible on the mobile page. 

7. Click to save the mobile page design. 

8. Click to go back to the Page List. 

   

25 

 

 

4.2 Mobile Version of ‘ Leave Application Records Page ’ 

1. On the Page List , click ‘ Leave Application Records Page ’ . 

2. In the Page Builder, click the button. On the ‘Con�rmation’                     message that pops up, click ‘Save’ . 

3. You should now be redirected to the Mobile Page Builder. It shows the layout of the                               Page in the mobile view.  

 

 

In this picture, on the left, it is the mobile version of the ‘Form Table’ widget. On the right, it is                                         the mobile version of the Leave Application Records Page (the page). 

26 

 

 

4.2.1 Con�gure Table Layout  

1. Click on the mobile version of the Form Table on the left. 

2. The Quick Settings Panel pops up. Click Table Layout . 3. At ‘Layout Settings’, choose the 3rd layout style . 4. Select ‘ Sta˻ Name ’ as Header . 5. Select ‘ Date ’ as Description 1 . 6. Select ‘ Leave Type ’ as Description 2 . 

 

7. Click ‘ Submit ’. 

8. Click to save the mobile page design. 

9. Click to go back to the Page List. 

 

   

27 

 

 

Step 5 Go Live with Mobile App 

5.1 Set Up Web Header 

You have to set up a web header for the App, otherwise the App cannot be run by users. The                                       web header allows users to navigate through di�erent pages. 

1. At App Management > Developing Environment , on the side menu, click Web                       Header Settings . 

 

5.1.1 Choose Header Layout 

1. Click to choose the layout style. 2. Select the following layout style. 

28 

 

 

 3. Click ‘ Submit’ . 4. Click the area ‘Header Title’ and enter ‘Simple Leave Applications System’ . 

 

5.1.2 Set Up Homepage 

1. Mouse over and click . 

2. In Homepage Settings , click next to ‘Default Homepage’ and select ‘ Leave                     Application Records Page’ from the list. 

3. Click ‘ Submit ’ .  

In this App, you only have to insert the ‘Leave Application Records Page’ into the web                               header. The Form Table is bound with the leave application form. Therefore, users can open                             the leave application form from the Form Table and add form records directly into the Form                               Table. 

4. Click to save the Web Header Settings . 

   

29 

 

 

5.2 Set Up Mobile App Page List 

After you have created the mobile version of the pages, they have to be inserted into Mobile                                 App Page List. When users open the App on Dragonce Mobile App, they see this Mobile App                                 Page List. 

5.2.1 Leave Application Form Mobile Page 

1. At App Management > Developing Environment , on the side menu, click Mobile                       Page List . 

 

2. Click to insert a mobile page. 

3. Click next to ‘Choose Page’ and select ‘ Leave Application Form                     (Leave Application Form Page) ’ from the list. 

 

30 

 

 

Be careful to choose the mobile page of the ‘Form’ widget (represented by the icon), not                                 the mobile version of the page that contains the leave application form (represented by the                             

icon).  

4. Change the Display Name to ‘ Leave Application Form’ . 5. Check all the checkboxes under ‘ RUN PAGE’ . Then, click ‘Submit’ . 

 

Even if a Run Time User Role has access to the web version of the pages, you have to check                                       the box for that role here to grant them the permission to view and open the mobile pages on                                     Dragonce Mobile App. 

 

5.2.2 Leave Application Records Table Mobile Page 

1. Click to insert another mobile page. 

31 

 

 

2. Click next to ‘Choose Page’ and select ‘ Form Table (Leave                     Application Records Page) ’ from the list. 

3. Change the Display Name to ‘ Leave Application Records Table’ . 4. Check all the checkboxes under ‘ RUN PAGE’ . Then, click ‘Submit’ . 

 

5. Click to save the Mobile App Page List. 

   

32 

 

 

5.3 Publish to Production Environment 

The App is now ready for deployment and use. You can package and publish it to the                                 Production Environment. The app will be accessible through both PC and mobile. 

5.3.1 Create Package 

1. On the top left corner of the Dragonce web portal, click to go back to App List. 

 2. On the App List , mouse over the App ‘Simple Leave Application System’ and click                           

to create package. 3. In the 1 st step ‘Create Package’, enter ‘Simple Leave Application System’ as the                         

Package Name .  4. Click ‘ Continue ’ . 

 

33 

 

 

 5. In the 2 nd step ‘Deliver Package’, select ‘ Deliver Package to Production’ .  6. Click ‘ Finish ’ . 

 

5.3.1 Install a package 1. Mouse over App Management button and go to the Developing Environment . 

  

2. On the side menu, click ‘ Packages’ . 

 

34 

 

 

 3. On the row ‘Simple Leave Application System’ , click ‘ Install ’ . 

  

4. Click ‘ OK ’ . 

 5. In the 1 st step 'Package Information’, click ‘ Continue ’ .  

 

35 

 

 

6. In 2 nd step ‘Create Backup’, select ‘ No Backup (not recommended) ’ , then click                       ‘ Continue ’ . 

 

When installing new Apps for the �rst time, no backup is needed.  

 

 7. In the 3 rd to 7 th step, click ‘ Continue ’ .  8. In the 8 th step ‘Installation Summary’, click ‘ Finish ’ . 

 

36 

 

 

9. You will see that the package status has been changed to ‘Processing’ . 

 10. In 15 minutes , you will see the App ‘ Simple Leave Application System’ on the App                             

List in the Production Environment.  

All installation will be �nished within 15 minutes which depends on the con�gurations and complexity of the App. 

 

11. Click the App status to change it from to .  

Users can only view and enter active Apps on Launch Board. 

 

12.Click on the top menu bar. 13.Click your App icon and run your App! 

 

 

37