Créer un popup avec du contenu HTML (tableau, retour à la ligne ,…) dans un composant BiBOARD.
Ce code est fourni à titre d’exemple et son utilisation ne saurait engager BiBOARD.
BiBOARD ne fournit pas de support sur cette réalisation.
Ce script est très rapide pour afficher une faible quantité d’information.
Cet exemple est lié à la base démonstration, table satisfaction client.
Modifications dans le Hub #
Vous pouvez créer un champ calculé pour préparer le contenu de votre popup ligne par ligne :
Exemple 1 : avec la balise span et retour à la ligne: #
"<div class='BBPopup' onclick='BBFunctionPopup(event,\"BBPopup" & trim(Field("CodeMois")) & "\")'>" &
Field("NomMois") &
"<span class='BBPopuptext' id='BBPopup" & trim(Field("CodeMois")) & "'>" &
"<b>" & Field("NomMois") & "</b><br/><br/>" &
"Nombre : " & Field("Nombre") & "</br>" &
"Ratio : " & Field("Ratio") & "</br>" &
"Code : " & Field("CodeMois") & "</br>" &
"</span>
</div>"
Exemple 2 : avec un tableau: #
"<div class='BBPopup' onclick='BBFunctionPopup(event,\"BBPopupTable" & trim(Field("CodeMois")) & "\")'>" &
Field("NomMois") &
"<Table class='BBPopuptext' id='BBPopupTable" & trim(Field("CodeMois")) & "'>" &
"<tr><td colspan=2>" & Field("NomMois") & "</td></tr>" &
"<tr><td>Nombre</td><td>" & Field("Nombre") & "</td></tr>" &
"<tr><td>Ratio</td><td>" & Field("Ratio") & "</td></tr>" &
"<tr><td>Code</td><td>" & Field("CodeMois") & "</td></tr>" &
"</table>
</div>"
Modifications dans le Tableau de bord #
Sur le studio, dans l’onglet propriétés du tableau de bord, coller ce script dans l’entête :
<script src="/resources/script/BBPopup/BBPopup.js" type="text/javascript"></script> <link href="/resources/script/BBPopup/BBPopup.css" rel="stylesheet" type="text/css" media="all">
A partir de la version 17.2.19 :
<script src="/resources/script/BBPopup/BBPopup.js" type="text/javascript"></script> <link href="/resources/script/BBPopup/BBPopup.css" rel="stylesheet" type="text/css" media="all">
Fichier script BBPopup.js #
Le script suivant permet d’afficher le popup passée en paramètre.
Il masque aussi toute les popups visibles dans la page.
Note : à partir de la version 17.2.19, ce fichier est installé avec BiBOARDA sauvegarder dans : RACINE_DU_SERVEUR_WEB_BIBOARD/resources/script/BBPopup/BBPopup.js
function BBFunctionPopup(event,IdPopup)
{
var popups = document.getElementsByClassName('BBPopuptext');
for (i = 0; i < popups.length; i++)
{
if (popups[i].getAttribute('id') != IdPopup)
{
popups[i].classList.remove('show');
}
}
var popup = document.getElementById(IdPopup);
popup.classList.toggle('show');
popup.style.top = (event.clientY - popup.clientHeight - 10) + 'px';
popup.style.left = (event.clientX- popup.clientWidth/2) + 'px';
}
Fichier CSS BBPopup.css #
Note : à partir de la version 17.2.19, ce fichier est installé avec BiBOARD
A sauvegarder dans : RACINE_DU_SERVEUR_WEB_BIBOARD/resources/script/BBPopup/BBPopup.css :
/* Popup container */
.BBPopup {
position: inherit;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.BBPopup .BBPopuptext {
visibility: hidden;
color: #fff;
background-color: rgba(230, 230, 230,1);
text-align: center;
border-radius: 6px;
padding: 5px 25px 5px 25px;
position: fixed;
left: 0px;
margin-left: 0px;
}
.BBPopup .BBPopuptext:hover {
background-color: rgba(200, 200, 200,1);
}
/* Popup arrow */
.BBPopup .BBPopuptext::after {
content: "";
position: absolute;
top: 100%;
left: 10px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.BBPopup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
Exemple #
Comment utiliser la popup Javascript dans un tableau #
Pour la création d’une popup Javascript dans un tableau, nous utiliserons la requête suivante enregistrée sous le nom : Wiki-PP-Popup Javascript-01.
Nous procéderons à la création de la requête suivante avec ses données :
USE [Datawarehouse]
GO
/ Object: Table [dbo].[Wiki-PP-Popup_Java] Script Date: 05/06/2025 11:33:41 / DROP TABLE IF EXISTS [dbo].[Wiki-PP-Popup_Java] GO / Object: Table [dbo].[Wiki-PP-Popup_Java] Script Date: 05/06/2025 11:33:41 /
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Wiki-PP-Popup_Java](
[NomMois] nvarchar NULL,
[Nombre] [int] NULL,
[Ratio] [int] NULL,
[CodeMois] nvarchar NULL
) ON [PRIMARY]
GO
INSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Janvier', 10, 2, N'01')
GO
INSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Février', 15, 3, N'02')
GO
INSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Mars', 25, 2, N'03')
GO
INSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Avril', 45, 4, N'04')
GO
INSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Mai', 33, 5, N'05')
GO
INSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Juin', 22, 6, N'06')
GO
INSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Juillet', 75, 2, N'07')
GO
INSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Août', 66, 3, N'08')
GO
INSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Septembre', 55, 3, N'09')
GO
INSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Octobre', 44, 7, N'10')
GO
INSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Novembre', 33, 4, N'11')
GO
INSERT [dbo].[Wiki-PP-Popup_Java] ([NomMois], [Nombre], [Ratio], [CodeMois]) VALUES (N'Décembre', 66, 1, N'12')
GO
