Last modified by Aurelie Bertrand on 2024/12/09 10:45
Show last authors
1 Il est possible de personnaliser un flux ouvert en pop-up depuis un bouton sur le tableau de bord. Par exemple, il peut être choisi de ne pas afficher les commandes d'export dans le menu.
2
3 Il existe 2 manières de procéder :
4
5 * Paramétrer le flux à afficher en pop-up et utiliser la fonction openPortletInWindow
6 * Utiliser la fonction openFlowInWindow en ajoutant des paramètres de customisation
7
8 La seconde solution utilise un objet JSON permet une personnalisation plus avancée.
9
10 = Paramétrer le flux et utiliser la fonction openPortletInWindow =
11
12 1. Dans l'Éditeur de tableaux de bord, ajoutez le flux qui sera à afficher en pop-up depuis un bouton.
13 1. Sélectionnez l'objet contenant le flux et, dans l'onglet **Propriétés **du panneau latéral, décochez les éléments que vous ne souhaitez pas afficher et cochez ceux à ajouter.
14 Dans cet exemple, on désactive la sauvegarde dans les différents types de format.
15 [[image:Ring_properties_FR.png||alt="Options_menu_flux"]]
16
17 1. Dans l'onglet **Affichage**, cochez la case **Cache l'objet **afin que le flux ne soit pas affiché sur le tableau de bord (hormis en pop-up).
18 1. Dans l'onglet **Informations**, récupérez** **la valeur de l'identifiant de l'objet.
19 1. Depuis le menu hamburger en haut à droite de la fenêtre, ouvrez l'**Éditeur Javascript**.
20 [[image:Menu_javascript_editor_FR.png||alt="Menu éditeur javasacript"]]
21 1. Entrez alors la fonction suivante en remplaçant **//Identifiant_objet//** par la valeur de l'identifiant de l'objet et cliquez sur **OK**.
22 {{code language="js"}}function openPopupCustomPortlet() {
23 ddCtrl.openPortletInWindow("Identifiant_objet", "80%", "80%"); }{{/code}}
24
25 Par exemple :
26 [[image:Example1_FR.png]]
27
28 (% start="7" %)
29 1. Ajoutez l'objet **Bouton **qui permettra d'ouvrir le flux en pop-up.
30 1. Dans la section **Actions** de l'onglet **Propriétés** du bouton, cliquez sur **Ajouter une action**.
31 1. Dans la boite **Action**, sélectionnez **Fonction personnalisée, **puis entrez le nom de la fonction //openPopupCustomPortlet() //et cliquez sur **OK**//.//
32 [[image:Example_Action1_FR.png]]
33 1. Vous pouvez alors enregistrer et afficher le tableau de bord pour visualiser le résultat.
34 Dans cet exemple, les commandes d'export ne s'affichent pas dans le menu.
35
36 [[image:Rséultat_sol1.png||alt="Popup sans export"]]
37
38 = Utiliser la fonction openFlowInWindow avec des paramètres de customisation =
39
40 1. Récupérez** **l'identifiant du flux (graphique) à afficher.
41 1. Dans l'Éditeur de tableaux de bord, depuis le menu hamburger en haut à droite de la fenêtre, ouvrez l'**Éditeur Javascript.**
42 1. Entrez alors la fonction suivante en remplaçant **//Identifiant_flux//** par la valeur de l'identifiant du flux et en personnalisant l'objet JSON contenant les paramètres de la portlet entre {}. Dans cet exemple, on désactive la sauvegarde dans les différents types de formats.
43 {{code language="js"}}function openPopup() {
44 ddCtrl.openFlowInWindow("5f9a3882", "50%", "50%", {"exportPDF":"false","exportPPT":"false", "exportXLS":"false", "exportCSV":"false"}); }{{/code}}
45
46 D'autres paramètres sont disponibles : css, cssstyle, color, image, menu  (valeur "true" ou "false"), etc.
47
48 (((
49 On peut ainsi, par exemple, ajouter une couleur de fond.
50
51 {{code language="js"}}
52 function openPopup() {
53 ddCtrl.openFlowInWindow("5f9a3882", "50%", "50%", {"color":"#F4F6F8","exportPDF":"false","exportPPT":"false", "exportXLS":"false", "exportCSV":"false"}); }
54 {{/code}}
55 )))
56
57 (% start="4" %)
58 1. Dans l'Éditeur de tableaux de bord, ajoutez l'objet **Bouton **qui permettra d'ouvrir le flux en pop-up.
59 1. Dans la section **Actions** de l'onglet **Propriétés** du bouton, cliquez sur **Ajouter une action**.
60 1. Dans la boite **Action**, sélectionnez **Fonction personnalisée, **puis entrez le nom de la fonction //openPopup() //et cliquez sur **OK**//.//
61 [[image:Example_Action2_FR.png]]
62 1. Vous pouvez alors enregistrer et afficher le tableau de bord pour visualiser le résultat.
63 Dans cet exemple, les commandes d'export ne s'affichent pas dans le menu et le fond est gris.
64
65 [[image:Rséultat_sol2.png||alt="Rendu"]]