5-Step Approach

5-Step Approach

The 5-step process provides a structured framework for building an App from scratch using the DragOnce platform. This methodology ensures an efficient and intuitive approach to mastering the app development workflow, enabling you to create robust apps with ease.

Step 0 Preparation

Before beginning app development, confirm access to the appropriate development environment. Navigate to the App Management menu by clicking the button at the top navigation bar and selecting the desired environment from the dropdown menu.

You should be able to see the corresponding environment(s). If the required environment is not visible, contact your system administrator to request app design permissions.

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

Step 1 Design Pages

1.1 Create a New App

To start, navigate to ‘App Management’ > ‘Developing Environment’ > ‘App List’ and select the ‘+’ icon to create a new App.

 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, select the ‘+’ icon to add new pages.

 1.3 Drag and Drop Widgets

Click into a page to design and consider the information and actions end users will require. You can drag and drop widgets from the left panel to the design area, arranging them logically to create an intuitive user interface.

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

Access the Quick Settings Panel by selecting the widget to configure the widget name, position, size, layouts, visibility, value, calculation, data source, filters, 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

Once you have designed the pages, define the workflow of how end users interact with form records within the 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

Map out all possible routes, intermediate states and end states that 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.