L’utilisation de « layouts » permet de changer le comportement des tableaux de bord BiBOARD et le positionnement des composants.
Dans l’exemple suivant, vous découvrirez un « layout » permettant de glisser d’une page à l’autre avec un simple geste du doigt (ce « layout » est plus adapté aux terminaux mobiles).
Création du fichier de Layout #
Analyse partir du modèle ou d’un exemple du Framework Javascript :
Création du fichier de description du Layout.
Ce fichier reprend en partie la structure du Framework cible.
Certains nœud ou paramètres (comme BBLocationId) sont spécifiques au Framework BiBOARD Layout :
Distribution du layout #
Distribution du fichier de Layout sur le serveur web BiBOARD.
Le dossier des Layouts se trouve à partir de la racine du serveur web BiBOARD dans le répertoire « resources ».
Vous pouvez créer un nouveau sous-dossier ou utiliser un dossier existant pour votre Layout.
Si votre nouveau Layout est basé sur un Framework nécessitant des fichiers complémentaires, vous pouvez les distribuer dans le répertoire « resources ».
Les layout permettent de disposer ses composants dans des emplacements prédéterminés, ceci afin d’obtenir un tableau de bord responsive par exemple.
Utiliser un layout dans un tableau de bord #
Etape 1 : Choix du layout #
Afin de pouvoir se servir d’un layout, il faut avant tout déterminer quel layout utiliser.
Pour cela : aller dans les propriétés du tableau de bord et dans la rubrique Disposition, sélectionner Framework Javascript.
Enfin, sélectionner le modèle désiré dans la liste des layouts proposée et le sauvegarder.
Etape 2 : Choix du composant à placer #
Une fois le layout déterminé, il faut déterminer l’emplacement de chacun des composants.
Pour cela, il suffit de sélectionner le composant que l’on veut placer et se rendre dans son éditeur web.
Etape 3 : Choix de l’emplacement #
Le TDB est configuré pour afficher les composants avec votre Layout.
Il faut donc aller dans Disposition et sélectionner l’emplacement dans lequel on veut placer le composant parmi les emplacements proposés.
Etape 4 : Sauvegarde et résultat #
Une fois l’emplacement du composant déterminé, ne pas oublier de sauvegarder afin que celui-ci soit bien pris en compte.
Après avoir déterminé l’emplacement de chaque composant, cliquer sur « Ouvrir le portail Web » afin de voir le résultat.
Personnaliser son layout #
Si les layouts proposés ne conviennent pas pour la réalisation de son projet, il y a toujours la possibilité d’éditer son layout.
Emplacement des dossiers de layout #
Détermination de son propre layout #
Une fois le nouveau dossier créé, il faut créer un fichier xml afin de décrire son layout. Voir image ci-dessous.
Certains noeud ou paramètres sont spécifique au Framework BiBOARD Layout : les balises « xml« , « layout« , « report » sont nécessaires pour le bon affichage du layout. Les balises « link » (contenues dans les balises ‘links » propre au Framework BIBOARD) et « script » fonctionnent de la même façon que sur une page HTML : elles appellent d’autres pages ou d’autres fichiers (CSS, Javascript, etc.).
Pour déterminer les différents emplacements dans lesquels on pourra placer les composants, l’utilisation d’une div avec la balise « BBLocationId » est nécessaire.
Tout comme pour une page HTML, il est possible de mettre des classes sur ces div afin de pouvoir les mettre en pages.
Modification du style de son layout #
Si votre nouveau Layout est basé sur un Framework nécessitant des fichiers complémentaires, il est conseillé de les placer dans le dossier de celui-ci avec le fichier xml.
