Skip to main content

Mobile Layout

Overview

More users are viewing and analyzing data on mobile devices. To support this, Guandata BI allows the same board to be viewed on both desktop and mobile. Because mobile screens are smaller and interaction patterns are different, the platform also provides mobile-specific layout and interaction optimization.

Usage Guide

Switch Layout

After configuring cards in the desktop layout, users can click the layout switch in the upper-left corner of the Dashboard page to switch to the mobile layout. Once the mobile layout is adjusted and published, the page can be accessed on both desktop and mobile devices.

Page Management

Size Adaptation

Guandata BI provides preset options for common mobile device models and resolutions. After one is selected, the current board automatically adapts its layout and element sizes for that device.

If the required device model is not listed, click Custom at the bottom of the dropdown and set your own aspect ratio.

Page Components on the current board also support mobile adaptation. For example, filter groups can automatically adjust the number of visible options and their arrangement according to screen width.

In addition to preset device adaptation, width adaptation is also available. This allows users to define a custom mobile screen width and preview the board in real time at that width. For details, see Page Style below.

Set Page Size

Users can adjust the page size in the editor according to their design habits. This setting does not change the actual display size on mobile devices.

Page Style

The mobile board supports flexible page-style settings, allowing users to customize the visual appearance and component layout for different usage habits.

Although the mobile and desktop page-style settings are broadly similar, mobile boards do not support waterfall layout or adaptive configuration. They also do not support compact layout or always-visible table scrollbars, which helps preserve a better viewing experience on smaller screens.

For more details on page-style settings, see Page Style (Theme).

Note
  1. After width adaptation is enabled, table column widths and layout divider positions can no longer be adjusted manually.
  2. Width adaptation helps reduce inconsistent display effects across different phone models by allowing a custom page width.
  3. When using component materials, it is recommended to set the width-adaptation base width to 375; otherwise, some materials may appear distorted.

Restore Layout

Restore Layout clears all current layout adjustments and restores the original cards on the page to their default mobile-layout state, including the order and style they had when they first entered the mobile layout.

For details about the Card Pool, see Dashboard General Operations.

Clear Canvas

Click Clear at the top of the page to move all cards into Spare Cards.

Card Management

After cards have been created, users often need to manage them further. Good card management helps optimize content, improve visual presentation, and increase the overall usability of the board.

For detailed instructions on mobile card management, see Card Management.

Basic Components

After cards are created, users can use basic components to organize them into clearer structures. This helps group related cards together and communicate information more effectively.

For detailed instructions on mobile basic components, see Page Components.

Component Materials

Beautifying a Dashboard often requires experience, design sense, and reusable materials. To make this easier, Guandata provides multiple component templates in the marketplace. These templates improve page aesthetics and also speed up Dashboard construction. If users have their own high-quality materials, admins can publish them as internal templates for mobile-layout editing.

For more details, see Component Template.

Preview

Preview plays an important role in designing and optimizing mobile pages. It lets users inspect layout and content in advance and make adjustments before publishing. Guandata BI supports three preview methods: direct preview, QR-code preview, and link preview.

Direct Preview

Guandata BI supports direct mobile preview. Click the preview icon to open the preview window.

In addition to direct preview, users can preview the page by scanning a QR code or opening a preview link.

Click the QR code / link icon to display a QR code and preview link below the icon. Then use DingTalk, WeChat, or Alipay to scan the code, or open the link directly to preview the mobile board.