Intégrer un portlet (graphique ou autre élément) dans une page web
- Mode d’intégration par iFrame
- Mode d’intégration JavaScript embarqué
- Intégration HTML
- Intégration JavaScript
- Paramètres disponibles
- Paramètres communs à tous les éléments (portlets)
- Paramètres spécifiques aux graphiques (flux)
- Paramètres spécifiques au contenu Éléments filtrés
- Paramètres spécifiques au contenu Recherche
- Paramètres spécifiques au contenu Légende
- Paramètres spécifiques au contenu Commentaires
- Paramètres spécifiques au contenu Documents
- Paramètres spécifiques au contenu Sélecteur de mesures
- Paramètres spécifiques au filtre Dimension
- Paramètres spécifiques au filtre Mesure
- Paramètres spécifiques au filtre Variable
- Pages connexes...
Dans cette documentation, nous nous plaçons dans le contexte suivant :
- Nom du serveur : ddsrv
- Port : 8080
- Domaine DigDash : ddenterpriseapi
- Domaine tableau de bord DigDash: digdash_dashboard
Il faudra bien sûr adapter l'intégration à votre contexte.
💡 Vous pouvez aussi utiliser un mécanisme d'authentification server-side pour éviter les paramètres user/pass. Consultez la page Anonymisation des Urls pour plus de détails.
Dans ce cas le paramètre authToken remplace le paramètre pass.
Mode d’intégration par iFrame
Vous pouvez intégrer un graphique (flux) de votre portefeuille d’informations dans une iframe en utilisant l'URL sous la forme suivante :
Vous pouvez facilement obtenir l’URL d’un flux depuis le panneau de gestion des flux dans le Studio. Pour cela, cliquez-droit sur le flux puis sélectionnez Copier l’URL du flux.
Par exemple :
Il est possible de passer des paramètres dans cette URL qui seront lus par l’application pour s'authentifier et adapter le contenu affiché.
Ces paramètres sont ajoutés sous forme de chaîne de requête à la fin de l’URL, après un point d’interrogation ?.
Chaque paramètre est une paire clé=valeur, et les différentes paires sont séparées par un &.
Consultez le paragraphe Paramètres disponibles pour la liste des paramètres.
Par exemple, pour afficher le graphique avec :
- l'identifiant 15455f95
- l'utilisateur user1 et le mot de passe pass1
- la barre de filtre désactivée
nous intégrons le code dans la balise iFrame comme suit :
Paramètres disponibles
Les paramètres disponibles pour les graphiques (flux) sont les suivants :
| Paramètre | Valeur | Description |
|---|---|---|
flowId | flowId | Identifiant du flux à afficher |
| user | user | Utilisateur à authentifier |
| pass | password | Mot de passe pour l’utilisateur non authentifié |
| authToken | token | Token pour l’utilisateur non authentifié |
| hideFilters | true|false | Masque (true) ou affiche (false) la barre de filtres |
| nomVariable | valeurVariable | Spécifie la valeur de la variable nomVariable |
nomDimension Si la dimension contient une hiérarchie ou plus, vous pouvez sélectionner la hiérarchie et le niveau souhaités en ajoutant :
| valeurFiltre aaaa NomHierarchie | Spécifie le membre de la dimension filtré zzzzzzz Spécifie le nom de la hiérarchie |
Mode d’intégration JavaScript embarqué
Ce mode nécessite de charger le fichier Javascript permettant d'afficher un tableau de bord DigDash dans une page web. Pour cela, ajoutez la ligne de code suivante dans la section <head> de votre page web :
Vous pouvez intégrer un tableau de bord DigDash soit en HTML à l’aide de balises dédiées, soit via JavaScript pour une configuration plus dynamique.
Intégration HTML
Une balise personnalisée <dd-portlet/> permet d’intégrer un graphique (flux) ou autre élément intégrable, directement dans le code HTML, sans écrire de JavaScript. Ce mode est pratique pour des pages simples ou dans le cas où le JavaScript n'est pas autorisé.
Graphique (flux)
Pour intégrer un graphique, utilisez le code sous la forme suivante à l'emplacement souhaité sur la page web :
Dans ce mode, les paramètres sont passés directement comme attributs de la balise. Consultez le paragraphe Paramètres disponibles pour la liste complète.
Par exemple, pour afficher un graphique avec :
- l'identifiant 15455f95
- l'en-tête masquée
- les faits marquants désactivés
nous utilisons le code suivant :
Si on y intégre l'authentification :
Autres éléments (filtres, légendes...)
Sur le même principe, il est possible d'intégrer d'autres types d'éléments (portlets) : filtres, légendes, commentaires, sélecteur de mesures, variables, recherche et éléments filtrés.
Pour cela, utilisez la syntaxe globale suivante :
// parameterID pour les autres paramètres en fonction du type
Consultez le paragraphe Paramètres disponibles pour la liste complète.
Par exemple, pour un contenu de type filtre Dimension :
// dim : Nom de la dimension
// datasource : Nom de la source de données
// viztype: Type de visualisation liste horizontale
// showsearch : Affichage de la boîte de recherche
// showborder : Affichage de la bordure
Intégration JavaScript
Graphique (flux)
Pour intégrer un graphique en mode JavaScript :
- Ajoutez une balise <div> avec un identifiant unique à l'emplacement souhaité sur la page web : cette balise servira de conteneur pour afficher le graphique.
Par exemple :
- Ajoutez le script JavaScript pour initialiser et afficher le graphique .
Pour cela, dans une balise <script>, ajoutez le code suivant :
"url":"http://ddsrv:8080/digdash_dashboard",
"user": "user",
"pass": "pass"
});
DigDash.drawPortlet("divId",{
"type": "flow",
"flowId": "flowId"
});
- La méthode DigDash.init() permet d'initialiser le tableau de bord en spécifiant l'URL du serveur DigDash et les paramètres d'authentification.
- La méthode DigDash.drawPortlet() permet d'afficher l'élément (portlet) avec les paramètres spécifiés dans le conteneur défini précédemment. Consultez le paragraphe Paramètres disponibles pour la liste complète.
Par exemple, pour afficher un graphique (divId = columnflow), nous utilisons le script suivant :
function draw() {
// Initialisation de la connexion au serveur DigDash
DigDash.init({
"url": "https://ddsrv:8080/digdash_dashboard/",
"user": "user",
"pass": "pass"
});
// Affichage d'un graphique en colonnes
DigDash.drawPortlet("columnflow", {
"type": "flow",
"flowId": "22a0cc0d",
"showborder": false,
"showheader": false
});
}
</script>
Autres éléments (filtres, légendes...)
Sur le même principe, il est possible d'intégrer d'autres types d'éléments (portlets) : filtres, légendes, commentaires, sélecteur de mesures, variables, recherche et éléments filtrés.
Pour cela, utilisez la syntaxe globale suivante :
type: "typeDuPortlet",
// autres paramètres en fonction du type
});
Consultez le paragraphe Paramètres disponibles pour la liste complète.
Par exemple, pour afficher un graphique (div id = columnflow) et la légende associée (div id = legend), nous utilisons le script suivant :
function draw() {
// Initialisation de la connexion au serveur DigDash
DigDash.init({
"url": "https://ddsrv:8080/digdash_dashboard/",
"user": "user",
"pass": "pass"
});
// Affichage d'un graphique en colonnes
DigDash.drawPortlet("columnflow", {
"type": "flow",
"flowId": "22a0cc0d",
"showborder": false,
"showheader": false
});
// Légende associée au graphique en colonnes
DigDash.drawPortlet("legend", {
"type": "legend",
"flow": "22a0cc0d",
"showborder": false,
"showheader": true,
"layout": "horizontal"
});
}
</script>
Paramètres disponibles
Paramètres communs à tous les éléments (portlets)
Ces paramètres sont disponibles aussi bien pour les graphiques que pour les autres éléments.
| Paramètre | Valeur | Valeur par défaut | Dépendance | Description |
| type | "flow" | Aucune | Paramètre obligatoire | Type de portlet :
|
| subtype | flow_datamodelwrapper.xml | Aucune | Permet de définir un sous-type aux flux | |
| name | Chaîne de caractères | Aucune | Nom de la portlet qui sera affiché dans l'en-tête (header) | |
| color | Valeur hexadécimale | Aucune | Couleur du fond de la portlet | |
| image | Chemin vers l'image | Aucune | Image de fond de la portlet | |
| showborder | Booléen | "true" | Affiche une bordure autour de la portlet | |
| showheader | Booléen | "true" | Affiche un en-tête au-dessus de la portlet | |
| maximize | Booléen | "false" | Permet d'agrandir la portlet dans le Dashboard | |
| cssstyle | Classe css | none | Permet d'appliquer un css à cette portlet | |
| css | Contenu de la classe css | none | cssstyle doit exister | Contenu de la classe css |
| description | Chaîne de caractères | none | Permet d'afficher une aide contextuelle via un icône sur la portlet |
Paramètres spécifiques aux graphiques (flux)
| Paramètre | Valeur | Valeur par défaut | Dépendance | Description |
| highlightdata | Booléen | "true" | Afficher les faits martquants highlights | |
| flowdetail | "auto" ou flowid | "false" | Afficher les détails du flux | |
| displaycommenticon | Booléen | "false" | Afficher un icône lors de la présence de commentaire | |
| displaylegendicon | Booléen | "false" | Afficher un icône qui affiche la légende au clic | |
| layoutlegend | "horizontal" ou "vertical" | "vertical" | displaylegendicon doit être défini à true | Type d'affichage de la légende : horizontal ou vertical |
| displayaxisnamelegend | Booléen | "false" | displaylegendicon doit être défini à true | Afficher le titre de l'axe |
| menu | Booléen | "true" | Afficher le bouton permettant d'ouvrir le menu | |
| exportCSV | Booléen | "true" | menu doit être défini à true | Permettre l'export CSV depuis le menu |
| exportPDF | Booléen | "true" | menu doit être défini à true | Permettre l'export PDF depuis le menu |
| exportPPT | Booléen | "true" | menu doit être défini à true | Permettre l'export PPT depuis le menu |
| exportXLS | Booléen | "true" | menu doit être défini à true | Permettre l'export Excel depuis le menu |
| exportXLSWithoutStyles | Booléen | "true" | menu doit être défini à true | Permettre l'export Excel sans les styles depuis le menu |
| menuinfo | Booléen | "true" | menu doit être défini à true | Permette l'affichage des informations depuis le menu |
Paramètres spécifiques au contenu Éléments filtrés
| Paramètre | Valeur | Valeur par défaut | Description |
| displaydimension | Booléen | "false" | Afficher le nom de la dimension |
| displayhierarchy | Booléen | "false" | Afficher le nom de la hiérarchie |
| displaylevel | Booléen | "false" | Afficher le nom du niveau |
Paramètres spécifiques au contenu Recherche
| Paramètre | Valeur | Valeur par défaut | Dépendance | Description |
| flows | Liste d'identifiants de flux séparés par des virgules | Aucune | Les flux (graphiques) doivent exister sur la page | Permet de n'afficher que les membres des dimensions des flux dont l'identifiant est spécifié |
| label | Texte | Aucune | Permet de changer le libellé "Recherche" |
Paramètres spécifiques au contenu Légende
| Paramètre | Valeur | Valeur par défaut | Dépendance | Description |
| displayaxisname | Booléen | "true" | Afficher le titre de l'axe | |
| layout | "horizontal" ou "vertical" | "vertical" | Type d'affichage de la légende : vertical ou horizontal | |
| flow | flowid | Aucune | Le contexte de la légende sera déterminé par ce flux | |
| hideelement | "true" | Aucune | selectelement ne doit pas être défini | Affiche un icône permettant de masquer l'élément au clic |
| selectelement | "true" | Aucune | hidelement ne doit pas être défini | Affiche un icône permettant de sélectionner l'élément au clic |
| sorttype | 0 or 1 | Aucune | sortreverse doit être défini | 0 = Tri alphabétique, 1 = Tri numérique |
| sortreverse | boolean | Aucune | sorttype doit être défini | Tri de manière croissante ou décroissante |
Paramètres spécifiques au contenu Commentaires
| Paramètre | Valeur | Valeur par défaut | Dépendance | Description |
| datamodels | Liste d'identifiants de modèles de données séparés par des virgules | Aucune | Les modèles de données doivent exister sur la page | N'afficher que les commentaires sur les modèles de données dont l'identifiant est spécifié |
| flows | Liste d'identifiants de flux séparés par des virgules | Aucune | Les flux (graphiques) doivent exister sur la page | N'afficher que les commentaires sur les flux (graphiques) dont l'identifiant est spécifié |
| displaytype | "displaytypelist" ou "displaytypetext" | Aucune | Type d'affichage des commentaires : Liste ou Texte | |
| filtertype | "all" ou "lastdays" ou "lastcomments" | "all" | doit avoir un paramètre "filter" | Option de filtrage des commentaires : Tous, X derniers jours ou X derniers commentaires |
| filter | Numérique | Aucune | filtertype doit être différent de "all" | Paramètrage du filtrage des commentaires : X nombre de jours ou de commentaires |
| displayallcomments | Booléen | "false" | Afficher tous les commentaires |
Paramètres spécifiques au contenu Documents
| Paramètre | Valeur | Valeur par défaut | Dépendance | Description |
| searchbox | Booléen | "true" | Afficher le champ de recherche | |
| server | Identifiant du serveur | Aucune | Paramètre obligatoire | Identifiant ou nom du serveur de documents sur lequel requêter |
Paramètres spécifiques au contenu Sélecteur de mesures
| Paramètre | Valeur | Valeur par défaut | Dépendance | Description |
| flows | Liste d'identifiants de flux séparés par des virgules | Aucune | Paramètre obligatoire | Flux (graphiques) sur lesquels baser le sélecteur de mesures |
| viztype | "list", "combo" or "checkbox" | "list" | Type de visualisation du sélecteur de mesure : Liste, Liste déroulante ou Cases à cocher | |
| vizlayout | "vertical" or "horizontal" | "vertical" | Pas d'effet dans le cas de la liste déorulante (combo) | Type d'affichage : Vertical ou non |
| multiselect | Booléen | "true" | Permettre la sélection multiple |
Paramètres spécifiques au filtre Dimension
| Paramètre | Valeur | Valeur par défaut | Dépendance | Description |
| dim | Nom de la dimension | Aucune | Paramètre obligatoire | Nom de la dimension |
| datasource | Identifant du modèle de données | Aucune | Paramètre obligatoire | Identifant du modèle de données |
| viztype | "SlicerOneByOne" "Slicer" "SlicerHorizontal" "SlicerCombo" "SlicerSlider" "SlicerDatePicker" "SlicerCheckBox" "SlicerComboRange" "SlicerTree" "SlicerMatch" | SlicerCheckBox | Paramètre obligatoire. Types disponibles selon la nature de la dimension | Type de visualisation du filtre :
|
| flows | Liste d'identifiants de flux séparés par des virgules | Les flux (graphiques) doivent exister sur la page | Graphique(s) sur lesquels le filtre sera appliqué | |
| hierarchy | Nom de la hiérarchie | Aucune | La dimension doit être hiérarchique | Filtrer sur la hiérarchie |
| level | Nom du niveau | Aucune | La dimension doit être hiérarchique | Filtrer sur le niveau |
| dimlabel | ${dimension}, ${hierarchy} or ${level}, peuvent être utilisés ensemble séparés par '/' | ${dimension} | La dimension doit être hiérarchique ${hierarchy} ou ${level} | Modifier l'affichage du nom de la dimension |
| authorizereversefilter | Booléen | "false" | Autoriser l'exclusion des membres | |
| multiselect | Booléen | "true" | Activer la sélection multiple lors de la sélection d'un élément | |
| forbidmultiselect | "false" | "muliselect" doit être défini à false | Interdire la sélection multiple | |
| filteronsinglemember | Booléen | "false" | Filtre sur l'élement unique | |
| authorizechangelevel | Booléen | "false" | Sur une dimension hiérarchique | Autoriser le changement de niveau |
| showsearch | Booléen | "true" | Sur une dimension continue | Afficher la boîte de recherche |
| forbidemptyselection | Booléen | Interdire la sélection vide | ||
| hidempty | Booléen | Cacher les valeurs vides | ||
| range | Booléen | "false" | Sur une dimension continue | Permet de filtrer toutes les valeurs contenues dans un intervalle |
| min | min | Aucune | range doit être défini à true | Le minimum de l'intervalle |
| max | max | Aucune | range doit être défini à true | Le maximum de l'intervalle |
| filter | "first" "last" | Aucune | Filtrer sur le premier ou le dernier élément | |
| sorttype | 0 ou 1 | Aucune | sortreverse doit être défini | 0 = Tri alphabétique, 1 = Tri numérique |
| sortreverse | Booléen | Aucune | sorttype doit être défini | Tri de manière croissante ou décroissante |
Paramètres spécifiques au filtre Mesure
| Paramètre | Valeur | Valeur par défaut | Dépendance | Description |
| measurename | Nom de la mesure | Aucune | Paramètre obligatoire | Nom de la mesure à filtrer |
| flows | Liste d'identifiants de flux séparés par des virgules | Aucune | Paramètre obligatoire | Flux (graphiques) impactés par ce filtre |
| hidemeasurename | Booléen | "false" | Cacher le nom de la mesure |
Paramètres spécifiques au filtre Variable
| Paramètre | Valeur | Valeur par défaut | Dépendance | Description |
| varname | Nom de la variable | Aucune | Paramètre obligatoire | Nom de la variable à filtrer |
| viztype | "slider" | "combo", "slider" ou "textfield" selon les paramètres de la variable | horizontallist et verticallist sont disponibles seulement pour les variables avec des valeurs explicites | Type de visualisation de la variable :
|
| hidevarname | boolean | "false" | Cacher le nom de la variable |
Pages connexes...
- Intégrer un tableau de bord dans une page web
- Intégration web de tableaux de bord et d'objets DigDash