Créer un portail de données mobile - Quick BI - Centre de documentation Alibaba Cloud

Présentation de la configuration

La création d'un portail de données implique la configuration du portail et celle des menus. Certains paramètres sont partagés entre les versions PC et mobile, tandis que d'autres nécessitent une configuration distincte pour chaque plateforme.

Configuration du portail :
- Les paramètres de base et le framework de navigation nécessitent une configuration distincte.
- La configuration des contrôles standard est partagée avec la version PC.
Paramètres des menus :
- Seul le style d'affichage du menu nécessite une configuration distincte.

Configuration du portail

Points d'entrée

Pour configurer le portail pour mobile, faites glisser le sélecteur d'appareil situé en haut de la page vers l'icône .

En haut de la page, cliquez sur l'icône Portal settings.
Lors de la configuration d'un menu, cliquez sur Portal configuration pour ouvrir la page de configuration du portail.

Paramètres de base

Parameter	Description
Global logo	Définit le logo global pour l'affichage mobile. Sélectionnez parmi les éléments fournis ou téléchargez une image personnalisée. La taille d'image recommandée est comprise entre 60×60 et 180×60 pixels, et la taille du fichier ne doit pas dépasser 100 Ko. Remarque Le paramètre global logo s'applique uniquement lorsque le paramètre navigation framework mode est défini sur tiled layout. Pour styliser le logo global, ajustez les paramètres dans la configuration de la zone de couverture pour la disposition en mosaïque.
Main title and subtitle	Saisissez le titre principal et le sous-titre du portail. Le sous-titre ne peut pas dépasser 1 000 caractères. Remarque Le paramètre subtitle s'applique uniquement lorsque le paramètre navigation framework mode est défini sur tiled layout. Pour styliser le sous-titre, ajustez les paramètres dans la configuration de la zone de couverture pour la disposition en mosaïque.
View mode	Détermine comment les pages s'ouvrent. Choisissez Open in current page ou Open in new window. Open in current page : lorsqu'un menu est sélectionné, le contenu se charge dans la page actuelle. Open in new window : lorsqu'un menu est sélectionné, le contenu se charge dans une nouvelle page. Custom : choisissez également de personnaliser le mode d'affichage pour chaque page de menu. Cliquez sur Configure pour ouvrir la page de configuration des menus. Pour plus d'informations, consultez la section Menu settings.

Framework de navigation

Configurez le theme mode et le navigation framework mode pour le portail.

Theme Mode

Définissez le thème sur light mode ou dark mode.

Light mode
Dark mode

Navigation Framework Mode

Choisissez entre top navigation layout, bottom navigation layout ou tiled layout.

Top navigation layout

Parameter	Option	Description
Top navigation	Navigation bar height	Définit la hauteur de la barre de navigation.
	Navigation bar background	Définit la couleur d'arrière-plan de la barre de navigation. Vous pouvez superposer l'arrière-plan avec une image personnalisée. Les formats pris en charge sont JPG, JPEG, PNG, GIF et SVG. La taille de l'image doit être inférieure ou égale à 1 Mo.
	Menu tab	Définit le style, le format du texte et la largeur des onglets de menu. Tab style : choisissez entre Selected bar, Selected text ou Selected block. Tab text : définit le format du texte des onglets normaux et sélectionnés. Tab width : définit la largeur des onglets. Définissez un ajustement automatique à la largeur de la page ou utilisez une largeur fixe.
Dropdown menu	Navigation menu area background	Définit la couleur d'arrière-plan de la zone du menu de navigation. Vous pouvez superposer l'arrière-plan avec une image personnalisée. Les formats pris en charge sont JPG, JPEG, PNG, GIF et SVG. La taille de l'image doit être inférieure ou égale à 1 Mo.
Dropdown menu	Text display	Définit le style du texte normal et sélectionné dans la zone du menu de navigation. Vous pouvez également personnaliser la hauteur des lignes du menu.

Bottom navigation layout

Parameter	Option	Description
Bottom navigation	Navigation bar height	Définit la hauteur de la barre de navigation.
	Navigation bar background	Définit la couleur d'arrière-plan de la barre de navigation. Vous pouvez superposer l'arrière-plan avec une image personnalisée. Les formats pris en charge sont JPG, JPEG, PNG, GIF et SVG. La taille de l'image doit être inférieure ou égale à 1 Mo.
	Menu tab	Définit le style et le format du texte des onglets de menu. Tab style : définissez sur Text only ou Icon + text. Tab text : définit le style du texte normal et sélectionné.
Dropdown menu	Navigation menu area background	Définit la couleur d'arrière-plan de la zone du menu de navigation. Vous pouvez superposer l'arrière-plan avec une image personnalisée. Les formats pris en charge sont JPG, JPEG, PNG, GIF et SVG. La taille de l'image doit être inférieure ou égale à 1 Mo.
Dropdown menu	Text display	Définit le style du texte normal et sélectionné dans la zone du menu de navigation. Vous pouvez également personnaliser la hauteur des lignes du menu.

Tiled layout

Parameter	Option	Description
Display cover		Spécifie s'il faut afficher la zone de couverture en haut de la page.
Cover area configuration	Cover area height	Définit la hauteur de la zone de couverture.
	Content area bottom margin	Définit la marge inférieure de la zone de contenu.
	Cover area content	Global logo : définit s'il faut afficher le logo global et ajuste sa taille. Main title and subtitle : définit s'il faut afficher le titre principal et le sous-titre et ajuste leurs formats de police. Alignment : définit l'alignement du titre principal et du sous-titre. Les options sont Align left ou Align center.
	Cover area background	Définit la couleur d'arrière-plan de la zone de couverture. Vous pouvez superposer l'arrière-plan avec des éléments fournis par le système ou une image personnalisée. Les formats pris en charge sont JPG, JPEG, PNG, GIF et SVG. La taille de l'image doit être inférieure ou égale à 1 Mo.
Content area configuration	Card area background	Définit la couleur d'arrière-plan de la zone de cartes. Vous pouvez superposer l'arrière-plan avec une image personnalisée. Les formats pris en charge sont JPG, JPEG, PNG, GIF et SVG. La taille de l'image doit être inférieure ou égale à 1 Mo.
	Spacing between cards	Définit l'espacement entre les cartes.
	Card title	Définit le format de police du titre de la carte, y compris la couleur, la taille, la graisse et l'italique.
	Menu name	Définit le format de police du nom du menu dans la zone de carte, y compris la couleur, la taille, la graisse et l'italique.
	Maximum number of items per row	Définit le nombre maximal d'éléments de menu à afficher par ligne.
	Icon display size	Définit la taille d'affichage des icônes dans la barre de menu.
Page background		Définit la couleur d'arrière-plan de la page. Vous pouvez superposer l'arrière-plan avec une image personnalisée. Les formats pris en charge sont JPG, JPEG, PNG, GIF et SVG. La taille de l'image doit être inférieure ou égale à 1 Mo.
Page margin		Définit les marges supérieure, inférieure, gauche et droite de la page. Cliquez sur l'icône à gauche pour verrouiller les marges supérieure et inférieure à la même valeur. Cliquez sur l'icône à droite pour verrouiller les marges gauche et droite à la même valeur.
Enable report navigation display		Contrôle si la navigation des rapports apparaît en haut de la page. Le style de navigation est hérité des paramètres de la disposition de navigation supérieure. Cette option est sélectionnée par défaut dans la disposition en mosaïque. Lorsqu'elle est sélectionnée, les utilisateurs qui consultent un rapport voient un fil d'Ariane en haut de la page, indiquant l'emplacement du rapport dans la hiérarchie des menus et permettant une navigation rapide vers les pages parentes. Dans une disposition en mosaïque, la page d'accueil affiche au maximum deux niveaux de menus de portail. Si la hiérarchie des menus dépasse deux niveaux : Si la navigation des rapports est activée, après avoir cliqué sur un nœud, vous pouvez utiliser la barre de navigation supérieure pour passer au niveau suivant et afficher le contenu associé. Si la navigation des rapports est désactivée, après avoir cliqué sur un nœud, une fenêtre contextuelle apparaît en bas de la page, vous permettant de naviguer vers le niveau suivant.

Contrôles standard

Remarque

Les paramètres des contrôles standard sont partagés avec la version PC.

Parameter

Description

Menu cache

Lorsque cette option est sélectionnée, le basculement entre les menus ouverts ne nécessite pas de rechargement de la page.

Portal alias

Saisissez un paramètre personnalisé à ajouter à l'URL. Par exemple, si vous saisissez 1, l'URL du portail avec cet alias devient : https://daily.yunbi.biz.aliyun.test/product/1.htm

Remarque

Assurez-vous que votre contenu respecte toutes les lois et réglementations applicables. Ne saisissez aucune information illégale, obscène, subversive ou autrement inappropriée.

Paramètres des menus

Remarque

Pour la configuration des menus mobiles, seul le Menu display style nécessite une configuration distincte. Tous les autres paramètres sont partagés avec la configuration PC.

Sur la page d'édition du portail de données, cliquez sur le menu cible pour ouvrir la page Configure menu.

Sur la page Configure menu, configurez les sections Portal menu, System functions et Menu settings.

Configuration du Portal menu

① Ajoutez un menu principal. Cela ajoute un élément de menu de premier niveau.

② Ajoutez un élément de menu de deuxième niveau ou inférieur.

③ Définissez un menu comme page d'accueil. Lorsque le portail de données est ouvert, cette page s'affiche par défaut.

④ Supprimez un menu.
Paramètres des System functions

Ajoutez la fonction Menu search comme indiqué dans l'illustration.
- Logique d'affichage de l'icône More :
  - Lorsque la largeur totale de la navigation de premier niveau dans la barre de navigation supérieure (①) dépasse la largeur de l'écran, l'icône More apparaît automatiquement.
  - Lorsqu'il y a plus de cinq éléments de navigation de premier niveau dans la barre de navigation inférieure (②), l'icône More apparaît automatiquement.
    
    Cliquez sur l'icône More pour ouvrir la liste des menus du portail.
- Réglez Menu search sur Display pour permettre aux utilisateurs de rechercher des noms de menu.
- Configurez la Background fill color, la Icon color, la Border color et les styles de texte pour les états Empty state et Input state de la zone de recherche de menu mobile.

Menu settings

Parameter	Description
Menu name	Personnalise le nom du menu.
Allow collapse	Spécifie si le menu peut être réduit.
Collapse by default	Définit l'état par défaut du menu. Remarque Cette option n'est disponible que si Allow collapse est sélectionné.
Node type	Définit le type de nœud comme nœud de contenu ou nœud vide. Pour utiliser un nœud comme parent, définissez-le comme nœud vide. L'ajout d'un nœud enfant convertit automatiquement le nœud parent en nœud vide. Si le nœud parent contenait auparavant du contenu, ce contenu est effacé.
Content type	Définit le type de contenu sur Workspace resource ou External link. Pour un portail de données mobile, Workspace resource prend uniquement en charge les types suivants : dashboard spreadsheet data entry
View mode	Les options incluent Open in current page et Open in new window. Remarque Cette option ne peut être définie que si le menu n'est pas un nœud vide. Si vous avez déjà configuré un mode d'affichage global dans les paramètres du portail, vous ne pouvez pas personnaliser ce paramètre pour les pages de menu individuelles. Pour personnaliser le mode d'ouverture d'une page de menu individuelle, modifiez le paramètre global en personnaliser le mode d'affichage pour chaque page de menu.
Menu display style	Activez ou masquez l'affichage du menu, sélectionnez Afficher l'icône et configurez la taille de l'icône, l'icône de menu pour les états normal et sélectionné, ainsi que l'espacement entre l'icône et le texte. Vous pouvez personnaliser l'état d'affichage d'un menu sur PC ou mobile. Si vous masquez un menu sur mobile, celui-ci et ses sous-menus ne seront pas affichés. L'affichage du menu PC reste inchangé. Pour configurer l'affichage du menu PC, utilisez les paramètres correspondants lors de la création d'un portail de données PC. Pour l'icône de menu, choisissez d'utiliser un élément ou une image personnalisée. Utiliser un élément Image personnalisée Téléchargez une image locale (①) ou depuis un lien (②).

Cliquez sur Save pour terminer la configuration du menu.

Configuration du thème

Sur la page d'édition du portail de données, cliquez sur l'icône située dans le coin supérieur droit et repérez l'icône de changement de mode en bas pour modifier le thème du portail de données.

Remarque
Le changement de mode de thème s'applique au niveau du compte et non au niveau du module. Par exemple, le passage des feuilles de calcul en mode clair fait également passer les autres modules prenant en charge le changement de thème (tels que les tableaux de bord et la saisie de données) en mode clair.

① Light mode

② Dark mode

③ Follow system

Applique le style système défini dans les paramètres personnalisés.

Consultez la section Personnalisation du thème système.

Remarque
Seuls les administrateurs de l'organisation peuvent définir le style système dans les paramètres personnalisés. Le mode au niveau du module est prioritaire sur le paramètre au niveau de l'organisation.