Skip to main content

Create Mobile Application

1. Overview

1.1. Function Description

With the rise of mobile office trends, Guandata has extended intelligent analysis scenarios to mobile devices, allowing rapid creation of mobile applications through zero-code drag-and-drop. Enterprise members can monitor data anytime, anywhere on mobile devices, grasp first-hand business operational dynamics, and provide powerful support for quick problem identification and timely resolution.

Friendly Reminder: This product module is a value-added module. For trial experience, please contact Guandata business personnel or customer success manager (usually your company's current service communication contact).

1.2. Application Scenarios

  • Zero-code Development, Convenient Self-service

Drag-and-drop operations that don't consume development resources; business analysts can take what they need and create with great convenience; APP-like application navigation with low usage threshold.

  • Smooth and Comfortable Viewing Experience

Easily navigate between various analysis themes, efficiently and conveniently find analysis pages.

  • Mobile Portal

Multiple analysis scenarios, multiple mobile light applications, one entry for management, beautiful and organized, with various styles to choose from.

  • Always Grasp Enterprise Operations

Can be embedded in DingTalk, WeChat Work, and enterprise's existing mobile applications. Through mobile phones, you can view operational data, employee data, product inventory data, etc. anytime, anywhere.

  • Timely Monitor Abnormal Data

By setting alert rules and ranges, when alert values are reached, reminder messages or emails can be pushed to corresponding people, personalized and precise delivery. Even when not on-site, you can timely grasp dynamic situations, track where problems occur, and take countermeasures to resolve crises.

1.3. Prerequisites/Necessary Preparations

Before building mobile light applications, dashboard creation needs to be completed. Click on data analysis to create dashboard pages, providing the foundation for light application construction.

2. Usage Guide

2.1. Create New Mobile Application

  1. A light application can contain multiple pages. For light applications targeting specific analysis scenarios, pages are organically connected rather than simply stacked. Therefore, before creating a light application, these pages need to be structurally organized, such as sorting out the following structure.

image (59).png

  1. After organizing the page structure, users can enter the "Data Application > Mobile > Applications" page, select the target directory in the directory tree, and click "Create New Mobile Application" to create a light application.

image (60).png

You can also quickly add light applications in the target directory tree.

image (61).png

  1. Build the application on the page.

    According to the page structure organized above, this light application has two levels, so in the mobile light application, you can use one bottom navigation + one top navigation to build it. For related configuration of navigation nodes, please see below.

    The current light application structure supports "Directory Tree" and "Outline" viewing modes. In directory tree mode, the relationship between multi-level pages is clearer, while in outline mode, browsing multiple pages at the same level is more convenient. Users can freely choose the appropriate viewing mode according to the actual light application construction situation.

Note:
1. If the page structure is one level, you can use only bottom navigation or only top navigation.
2. It is not recommended to have more than three levels of pages in one application, as too many levels not only make understanding of page content confusing but also affect interactive experience.
  1. After the light application is basically built, click the "Preview" button in the upper right corner of the page to view the built light application effect on the computer.

3.png

  1. After creating and configuring the mobile application, users need to click the "Save" button in the upper right corner of the page to save the current mobile application. Or click "Save and Exit" in the dropdown menu to save the mobile application and exit the editing page directly.

4.png

2.2. Add Nodes and Property Configuration

  1. Click "Add Navigation Node" to create new navigation.

5.png

  1. Hover the mouse over any navigation node (except the top navigation node), click the "Rename" icon to modify the node name.

6.png

  1. Click any navigation node in the canvas, or click the node in the outline directory, and the navigation node property configuration window will pop up on the right side of the page, where you can set the navigation type, style, portal navigation homepage, and other properties of the navigation node. Among them, users can preview the display effect of the navigation node in real-time in the "Preview" area at the bottom of the configuration window.

7.png

  1. Different navigation types will have different property configuration items. The following is an introduction to two navigation types:
Note:
1. To ensure the best display effect, when the first-level navigation selects "Top Tab Style", the second-level navigation style can only be "Top Tab Style".
2. If the second-level navigation needs to switch styles, please select "Bottom Menu Style" for the first-level navigation.
  • Top Style: Can set theme color, tab style, option size. First-level navigation can set whether to display "Portal Homepage" navigation

8.png

  • Bottom Style: First-level navigation can set specific navigation item icons and whether to display "Portal Homepage" navigation

9.png

  1. By enabling the "Portal Homepage Navigation" button, you can add a return to portal homepage path button on the first-level navigation page. Click the button to directly jump from the current page to the mobile portal homepage.

10.png

image.png

Page Nodes

  1. Click "Add Page Node" to fill the second-level page content into each navigation.

13.png

To ensure the best display effect, for navigation styles and levels, the following restrictions are recommended:

  • When the first-level navigation style is top, the second-level navigation style only supports top; when the first-level navigation style is bottom, the second-level navigation style can be both top and bottom.

  • When the second-level navigation style is top, third-level navigation cannot be added; when the second-level navigation style is bottom, third-level navigation can be added.

Note:
The name of the navigation tab defaults to the added page name. If the page name is too long, for better display effect, you can modify and optimize the name on the corresponding node to make it concise and easy to display.
  1. To view the name and storage location of a page node, you can click the node in the canvas, or click the node in the outline directory, and the above information can be viewed in the property window that pops up on the right side of the page. At the same time, clicking the name of the page node in the property window can directly jump to the dashboard page of that node.

14.png

2.3. Synchronized Filters

Synchronized filters can make the filter conditions of related pages change synchronously, allowing users to maintain consistent data viewing dimensions when switching dashboards, sharing data filtering results.

Create Synchronized Filter

  1. Click "Synchronized Filters", and the "Synchronized Filter Configuration" page will pop up on the right side of the page. Click "Create".

15.png

Fill in the filter name, select the filter type, select the pages that need to be synchronized, then check the same type of filters, and click "OK" to save.

image.png

Display in light application after setup:

17.gif

Manage Synchronized Filters

Click the "Modify" and "Delete" buttons in the upper right corner of existing filters to edit or delete the synchronized filter.

18.png

3. Common Issues