Dashboards
Les dashboards sont des onglets de portail développé sur le même modèle que les applications mobiles et s'appuyant sur la vignette dashboard.
Un dashboard comprend :
- Un paquet de service comprenant les méthodes appelées par le dashboard
- Un sous répertoire du site contenant les éléments du contenu html (home page, javascript, feuille de style...)
Un dashboard peut être utilisé dans le cadre du portail ou bien de façon autonome.
Un plugin jquery est fourni pour facilité le développement des dashboards, il prend en charge la gestion de la connexion de l'utilisateur lorsque le dashboard est utilisé en dehors du Portail.
home.html
La page home du dashboard contient le rendu et le code javascript nécessaire à l'exécution du dashboard.
Typiquement cette page doit être structurée ainsi :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="../lib-1.0.0/css/dashboard.css" /> <link rel="stylesheet" type="text/css" href="../lib-1.0.0/jq/jquery-ui.css" /> <script src="../lib-1.0.0/jq/jquery.js"></script> <script src="../lib-1.0.0/js/jd1000.js"></script> <script src="../lib-1.0.0/jq/jquery-ui.js"></script> <script type="text/javascript" src="//www.google.com/jsapi"></script> <script type="text/javascript" src="//www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script> <style> ... style spécifique au dashboard </style> </head> <body class="ui_viewport"> <div id='content' class="ui_content"> ... contenu du dashboard ... en général un tableau servant de container </div> <script> function clearDashboard() { // Réinitialise le dashboard lorsque le contexte change ... } function render(data) { // Appelé par le plugin après connexion. // data est un objet contenant les données retournées par la requête principale // // Réinitialise clearDashboard(); // Construit les widget d'interface a partir des données ... } (function(win) { // Initialise le plugin // $.l1000.homeProc = "/get_Balance_Agee_Clients"; $.l1000.title = "Balance agée clients par établisement"; $.l1000.renderProc = render; $.l1000.initialize(); // Load google visualizations // google.load("visualization", "1", {"packages":['controls','corechart','table']}); google.setOnLoadCallback($.l1000.renderInit); })(window); </script> </body> </html>
Interaction avec le plugin
Le plugin jd1000.js prend en charge la gestion de la session et la connexion de l'utilisateur.
L'interaction avec le plugin se fait ainsi :
- La page html appelle l'initialisation du plugin.
- La page html charge le code de visualisation de Google, lorsque ce code est chargé la méthode renderInit du plugin est appelée.
- Si l'utilisateur n'est pas connecté renderInit exécute le dialogue de connexion
- Lorsque l'utilisateur est connecté renderInit appelle la méthode principale du dahsboard puis la méthode render() du dahsboard.
Les paramètres d'initialisation du plugin sont les suivants :
| Paramètre | Usage |
|---|---|
| title | Titre du dashboard |
| homeProc | Méthode principale du dashboard |
| renderProc | Procédure javascript de rendu du dashboard |
Le plugin gère automatiquement un entête de page et pied de page, n'incluez pas ces éléments dans le code html de votre page.
Source de données
Un dashboard peut être utilisé à l'intérieur d'un portail ou bien en autonome.
Suivant le cas le paramètre data passé à la méthode render() peut être différent:
- Si le dahsboard est utilisé dans le portail l'objet data contient la source de données configurée dans le paramétrage de l'onglet de portail.
- Si le portail est utilisé de manière autonome l'objet data contient la racine retournée par la méthode principale du dashboard.
Vous devez tester cette différence, par exemple avec du code comme suivant :
var _data;
if (data.datasetName) {_data = data.datasetName; } else { _data = data.resultSetName; }
Voir aussi:
