5-Step Approach

5-Step Approach

It involves 5 main steps to build an App from scratch on DragOnce. Following this approach will be the quickest and easiest way for you to get familiar with the general flow of building an App. 

Step 0 Preparation

Before starting to create the app, you will need to have access to the development environment. Each user can access the environments they are allowed to enter by mousing over the APP MANAGEMENT button in the top row of the window, and clicking on the dropdown menu that appears below the button. 

You should be able to see the corresponding environment(s). If not, please contact your administrator to grant you the App design rights.

You can now switch to Developing Environment and start creating a new app.

Step 1 Design Pages

1.1 Create a New App

When first creating an App, go to ‘App Management’ > ‘Developing Environment’ > ‘App List’ and click ‘+’.

 1.2 Add New Pages

After creating the App, you can start designing the look of your App. Think about how many pages are needed to be displayed during operation of the App. After clicking into the App,  on the Page List, click ‘+’ to add new pages.

 1.3 Drag and Drop Widgets

Click into a page you want to design. Think about what information you want your end users to access, and what action you want them to perform when they use your App. You can drag and drop widgets from the left to the design area. Arrange them neatly on your page.

Remember to save your design frequently by pressing the ‘Save’ button. You can view the Run Time preview of your page by pressing ‘Preview’. 

1.4 Configure Widget / Page Settings

Click on widgets to configure their settings on the Quick Settings Panel. Settings include widget name, position, size, layouts, visibility, value, calculation, data source, filters and conditions etc. You can also configure settings that apply to the whole page, such as page data source and custom script.

Step 2 Connect Workflows

2.1 Connect Form to Workflow

After designing all the pages, think about the flow of how end users interact with form records in this App. Workflows are the flow of form records from state to state, from users to users. Every time a user submits a record using this form, the form record flows through the workflow. 

You can create workflow on the form widget in the Page Builder or on the Workflow List.

2.2 Drag and Drop Workflow Elements

Think about all the routes, intermediate states and end states the form may pass through. Drag and drop them into the design area. 

2.3 Assign Stakeholders

Different workflow states may involve different stakeholders. You have to decide who is in charge of performing action to the form record after each edge. Assign the stakeholder of a state by clicking the edge that points towards it. Click Workflow Edge Property Settings and adjust the ‘Next Stakeholder Mapping’ setting.

2.4 Configure Edge/State Settings

Make configurations on the Quick Settings Panel by clicking on the workflow elements. 

For edges, you can set up validation settings (which ensure the form record meets certain requirements) and system messages (to be sent when the action button is clicked) etc.

For states, you can set up inner form relationships, scheduled actions, scheduled messages and action button visibility etc.

2.5 Make Workflow-Related Changes to Widget Configurations 

Now that you have created the workflow, you may want to edit the pages to change settings that involve workflow states. For example, you may want to include workflow states as filters or conditions. 

Step 3 Set Permissions

 3.1 Assign Run Time User Role

You need to assign a Run Time User Role to all the end users who will be using your App. Different Run Time User Roles can have different levels of rights to read and save data. These settings only apply to a single App. 

3.2 Widget Permissions

At Page Builder, set permission for different Run Time User Roles to view/edit widget if needed. Do so at Widget Quick Settings Panel > Permission Settings.

3.3 Stakeholder Permissions

At Workflow Builder, you can change the stakeholder permissions at each state. Think about which kind of stakeholder should be able to edit/view/delete form records at each state. Change the permission settings at Workflow State Quick Settings Panel > Property Settings > Permission Settings.

Step 4 Convert to Mobile Version with One Click

 4.1 Convert to Mobile Version

Converting a DragOnce App to mobile version is extremely easy. Simply convert the pages to the mobile version with a click in the Page Builder. Click ‘Mobile View’ for the first time to create mobile pages. Make simple configurations and click ‘Save’ to save the mobile design.

Step 5 Go Live on Web and Mobile

 5.1 Set Up Web Header

After finishing your App’s design, you need to decide how your App will look and which page it will land at when end users open it. You can select a header layout by clicking ‘Layout’ at Web Header Settings. Choose a page as the default homepage for different Run Time User Roles by clicking ‘Settings’ next to ‘Home’. 

5.2 Set Up Mobile App Page List

End users will land at the Mobile App Page List after clicking into an App on the DragOnce Mobile App. Now that you have converted the pages to the mobile version in the Page Builder, insert them into the Mobile App Page List. Click Add Page Button on the Mobile  Page List to insert.

5.3 Package the App

Your App is still in the Developing Environment. To launch it for end users, you have to package your finished App to the Production Environment. Click ‘Package’ on your App on ‘App List’. Name the package and choose which environment it should be delivered to.

5.4 Install the App

You will find your package at ‘Packages’ in the environment that you chose. Click ‘Install’ on your package and wait for 5 to 15 minutes. Then, you will find your App appearing on the App List of that environment. If you have installed it in the Production Environment, change the App status from ‘Suspended’ to ‘Active’. You will see it successfully launched on the ‘Launch Board’ ready for use.