Mobile Layout
1. Overview
More and more users are increasingly using mobile devices for data tracking and analysis. To meet mobile data viewing scenarios, Guandata BI provides the ability to view the same dashboard on multiple terminals (PC, mobile); considering the limited content display area of mobile screens and users' unique operation habits on mobile devices, we support optimizing interface component layouts and interaction forms, allowing users to more conveniently perform data viewing, filtering, and analysis operations on mobile devices.
2. Usage Guide
2.1. Switch Layout
After users configure related cards on the desktop, they can click the layout button in the upper left of the dashboard page to switch from desktop to mobile, adjust to mobile layout and publish, allowing users to access on both PC and mobile.
2.2. Page Management
Size Adaptation
Guandata BI provides quick options for common mobile device models and corresponding resolutions. After clicking, the current data dashboard can automatically adapt to different mobile devices, automatically adjusting the layout and element size of the data dashboard. Whether it's phones, tablets, or other mobile devices, users can get clear, readable data display.
If no device model is available, you can click "Custom" at the bottom of the dropdown to customize the aspect ratio.
Moreover, various page components in the current data dashboard also support mobile adaptive. For example, filter groups can automatically adjust the number and layout of options according to screen width when used on mobile, ensuring users can conveniently filter data.
In addition to system preset mobile device model adaptation, width adaptive function is also provided, allowing users to customize mobile screen width values and view the display effect of data dashboards at this size in real time to meet personalized needs in different scenarios. For details of this part, please refer to [Page Style](2-Mobile Layout.md#page-style) below.
Set Page Size
Users can set the layout page size according to their habits. This setting does not affect the interface size on mobile.
Page Style
Mobile dashboard design supports flexible page style settings. You can easily adjust the appearance of data dashboards and the layout of various components according to users' usage habits to achieve personalized customization.
Although the page style settings for mobile and PC are generally the same, considering the screen size and interaction characteristics of mobile devices, mobile dashboards do not support waterfall layout and adaptive configuration to ensure the best visual effects on screens of different sizes and resolutions. In addition, mobile dashboards also do not support compact layout and always-show scrollbars for tables to optimize the browsing experience on mobile devices.
For more configuration instructions on page styles, please refer to [Page Style (Theme)](../1-Dashboard Creation/4-Dashboard Design/2-Aesthetics Design/0-Page Style (Theme).md).
Note:
1. After enabling width adaptive, adjusting table column width and layout component dividers is not supported;
2. To solve the problem of inconsistent dashboard viewing effects on different phone models, Guandata BI provides width adaptive function, supporting users to customize page width.
3. When using component materials, it is recommended to set the base width of width adaptive to 375, otherwise the material effects may have varying degrees of distortion.
Quick Query
Consistent with PC data viewing habits, mobile also supports quick query configuration items. To facilitate mobile data filtering, users can save frequently used query conditions to "Quick Query" for quick viewing. At the same time, quick queries on mobile and desktop maintain data synchronization.
- Enable Quick Query
In the mobile layout of the dashboard, enable "Quick Query" above, and you can see the "Quick Query" that was just enabled in the mobile sidebar.
- Configure Quick Query
Before configuring mobile quick queries, you need to click the preview button to enter preview mode.
Set filter values, click the "Quick Query" button, select "Add Query" in the popup menu bar. Configure information, click "Save" after completion, and you can create the current page's filter values as a new quick query.
- Modify Quick Query
Select a quick query, click the filter above the page, modify the filter value, click OK, and the page will refresh according to the filter condition. Then click "Quick Query" and select "Save Query" to set the just modified filter value as the quick filter item in the current quick query.
If you want to modify the quick query name, whether it's default and public, and delete quick queries, you can click the "..." button to the right of the corresponding quick query.
Reset Layout
Reset layout clears all set layouts and restores all original cards in the page to their default state, that is, resets all cards in the card pool to the initial order, style, etc. when entering the mobile layout page.
For card pool related content, please refer to [Dashboard Common Operations](0-Dashboard Common Operations.md#37-card-pool).
Clear Canvas
Click "Clear Canvas" above the page, and all cards in the page will be moved to "Hidden Cards".
2.3. Card Management
After creating various cards, users usually need to perform a series of management operations on cards in the dashboard. Through reasonable card management, users can flexibly adjust and optimize card content according to business goals and changing needs, optimize the visualization effect of dashboards, and improve data display quality and dashboard usage efficiency.
For detailed instructions on mobile card management, please refer to [Card Management](../1-Dashboard Creation/3-Card Management.md).
2.4. Basic Components
After creating various cards, to make the card arrangement and layout more organized, users can use the basic component function provided by Guandata BI to categorize cards according to a certain hierarchical structure, and then add each category of cards to different basic components, which can more efficiently convey data information.
For detailed instructions on mobile basic components, please refer to [Page Components](../1-Dashboard Creation/4-Dashboard Design/1-Page Components.md#basic-components).
2.5. Component Materials
In the process of building dashboards, beautifying dashboard pages requires a lot of experience, skills, and materials. For this reason, Guandata Data has launched multiple sets of "Component Templates" on the application market to achieve componentized use, improving page aesthetics while enhancing dashboard building efficiency. In addition, if users have their own excellent materials and templates, administrators can set them as self-built templates for everyone to use in dashboard mobile layout editing.
For more detailed operation instructions, you can check [Component Template](../1-Dashboard Creation/4-Dashboard Design/2-Aesthetics Design/1-Component Template.md) specifically.
2.6. Preview
Preview operations play a key role in the process of mobile page design and optimization. Through preview operations, users can preview the layout and content display of mobile pages in advance, and then make necessary adjustments and optimizations. Guandata BI supports three preview methods: direct preview, QR code preview, and link preview.
Direct Preview
Guandata BI supports mobile preview function. Click the "Preview" button to pop up the preview window.
QR Code/Link Preview
In addition to direct preview, users can also preview through scanning QR codes and directly accessing links.
Click the "QR Code/Link Preview" button, and a QR code icon and corresponding link will appear below the button. Open "Scan" in DingTalk, WeChat, or Alipay, or directly access the link below to preview the mobile dashboard.
