Wiki source code of Tableaux de bord mobile

Last modified by Aurelie Bertrand on 2025/02/07 10:08
Show last authors
1 {{ddtoc/}}
2
3 ----
4
5 (% class="box warningmessage" %)
6 (((
7 ❗The old mobile interface has been deactivated. If the user tries to access it with the link in the form [[http:~~/~~/localhost:8080/ddenterpriseapi/mobile>>http://localhost:8080/ddenterpriseapi/mobile]]an error message is displayed.
8 [[image:1711459291262-942.png]]
9 )))
10
11 = Introduction =
12
13 Digdash allows you to create dashboards adapted to mobile devices.
14
15 The term "mobile" is used here as shorthand for small screens. This could be a mobile phone or a small tablet.
16
17 To display a dashboard on a mobile device, you have 2 options:
18
19 * **Create both Desktop (large screen) and Mobile (small screen) dashboard pages** by selecting Scaling as the display mode.
20 In this case, you will have the same content whether in Desktop or Mobile view.
21 The dashboard will be usable on mobile but not optimised for this type of screen.
22 See the page [[Configure scaling>>doc:Digdash.user_guide.dashboard.dashboard_editor_guide.create_dashboard.Scaling_layout.WebHome]] page for more details on this display mode.\\
23 * **Create dedicated dashboard pages for each type of display **: Desktop pages and Mobile pages.
24 In this case, you can optimise the pages for display on mobile devices. Often, the needs of mobile users are not the same as those of desktop users. The page can therefore be slimmed down, presenting only the key indicators, for example. Vertical display will also be preferred.
25 However, the pages will need to be maintained for each type of screen.
26
27 = Mobile dashboard configuration =
28
29 == Displaying pages in "Mobile" mode ==
30
31 To enable a page to be displayed on a mobile device:
32
33 1. Select the page and go to the properties panel.
34 1. In the **Display** section, check that the **Mobile screen **box is ticked.
35 1. If you wish to use the page ONLY for Mobile display, uncheck the "Desktop" **screen type** box. The page will not be displayed on the Desktop screen.
36
37 (% class="box infomessage" %)
38 (((
39 The 2 boxes are ticked when a new page is created.
40 )))
41
42 == Mobile" mode activation threshold ==
43
44 Display in "Mobile" mode depends on the " **Mobile" mode activation threshold **defined in the global properties of the dashboard. If the height or** width **in pixels of the user's screen is less than this threshold, the dashboard will switch to "Mobile" mode. For example, if the screen is 456x950 pixels and the activation threshold is 768 pixels, "Mobile" mode will be activated.
45 The activation threshold is set to 768 pixels by default. You can change this value in the [[global properties of the dashboard>>url:https://doc.digdash.com/xwiki/wiki/dev/view/Digdash/user_guide/dashboard/dashboard_editor_guide/edit_dashboard/edit_dahsboard_global_properties/#Proprietes_globales_TDB]].
46
47 In "Mobile" mode, the dashboard display will be adapted. See the paragraph below for more details.
48
49 = Displaying a dashboard in "Mobile" mode =
50
51 In the case of a "Mobile" screen, the following changes are automatically applied for optimum display:
52
53 * The default navigation menu mode is **Vertical,** regardless of the mode defined in the [[global properties>>doc:Digdash.user_guide.dashboard.dashboard_editor_guide.edit_dashboard.edit_dahsboard_global_properties.WebHome||anchor="Proprietes_globales_TDB"]].
54 * The banner is simplified:
55 ** an icon replaces the user name and the corresponding menu is simplified
56 ** the logo is centred
57 ** the icon on the left disappears and is replaced by a button giving access to the vertical navigation menu.
58 * The breadcrumb trail is displayed automatically, allowing you to navigate through the sub-pages.
59 * When scrolling down, the banner is hidden for better visibility.\\
60
61 [[image:Dashboard_mobile.png]]
62
63 **Case of an integrated dashboard**
64
65 Adding the //hideBanner=true// parameter to the URL hides the banner and navigation menu.
66 A small tab is added on the left to display the navigation menu.
67 [[image:Languette_mobile.png]]
68
69 Alternatively, you can add a [[button>>https://doc.digdash.com/xwiki/wiki/dev/view/Digdash/user_guide/dashboard/dashboard_editor_guide/create_dashboard/Ajouter%20des%20%C3%A9l%C3%A9ments%20additionnels/#HBouton]] button to call up the navigation menu via the **Unfold or Retract vertical navigation menu** action or the **expandCollapseNavigationMenu()** custom function.
70
71 = Navigation in the dashboard =
72
73 Navigation in the dashboard is conventionally done by scrolling around the screen.
74
75 You can navigate through the data in a graph by tapping on the graph. You can then **Interact with the data** (for example, navigate through a hierarchy) and **Access options** at the top right of the object.
76
77 (% class="box infomessage" %)
78 (((
79 💡 A short press on a graph enables you to perform an interaction, while a long press displays the tooltip.
80 )))
81
82 |(% rowspan="3" style="width:301px" %)[[image:1711466654760-506.png]]|(% style="vertical-align:middle; width:95px" %)Activate zone selection\\|(% style="vertical-align:middle; width:430px" %)(((
83 Enables you to select values by drawing a rectangle.
84
85 * **Intersection mode **: All elements in the rectangle will be selected.
86 * **Strict mode**: Only elements entirely within the rectangle will be selected.
87 )))
88 |(% style="vertical-align:middle; width:95px" %)Chart menu|(% style="vertical-align:middle; width:430px" %)(((
89 Provides access to the options defined for the object (save, print, add comments, etc.).
90 See the page [[Graphic properties>>doc:Digdash.user_guide.dashboard.dashboard_editor_guide.edit_dashboard.edit_object_parameters.WebHome||anchor="Prop_graph"]] page for more details.
91 )))
92 |(% style="vertical-align:middle; width:95px" %)Display
93 full screen|(% style="vertical-align:middle; width:430px" %)Press the icon to display the chart in full-screen mode.
94
95 To return to dashboard navigation, click on the cross at the top left of the object.
96
97 = Best practice =
98
99 Here you'll find best practice for creating mobile dashboards and making navigation easier.
100
101 == Creating the dashboard ==
102
103 If you choose to create pages dedicated to "Mobile" screens (different pages for each type of screen), it is advisable to use page templates. You will then have a template for Desktop screens and a template for Mobile screens, which will simplify the creation of new pages.
104 See the paragraph [[Page templates>>doc:Digdash.user_guide.dashboard.dashboard_editor_guide.create_dashboard.WebHome||anchor="Modeles_page"]] for more details.
105
106 == Navigating the dashboard ==
107
108 We recommend displaying Filter, Caption and Filtered Items objects in the form of a {{glossaryReference glossaryId="Glossary" entryId="Rétractable"}}Retractable{{/glossaryReference}} panel (preferably on the left or right). To do this
109
110 1. In the **Display** tab of the object settings panel, check the **{{glossaryReference glossaryId="Glossary" entryId="Rétractable"}}Retractable{{/glossaryReference}}** option.
111 1. Set the **Position **and retain the following default settings:
112 1*. **Default display**: {{glossaryReference glossaryId="Glossary" entryId="Rétractable"}}Retractable{{/glossaryReference}}
113 1*. **Action type**: Show on click
114 1*. **Display type**: Overlay
115
116 [[image:Filtre_mobile_option.png]][[image:Filtre_mobile2.png]]
117
118
119
120 You can also add an icon at the top right of the graph to display the legend. To do this, in the **Properties** tab of the object settings panel, tick the **Show an icon for displaying the legend** option.
121 [[image:Icone_légende.png]] [[image:Bouton_légende.png]]
122
123 = Customisation =
124
125 You can customise the mobile display in your custom theme, for example by colouring the banner.
126 Use the** #dashboard_mobile** CSS selector** to** differentiate the dashboard in "Mobile" view mode from other modes.
127
128 Review the page [[CSS styles>>doc:Digdash.customization.customization_DDE.customization_css.WebHome]] page for more details.