Le composant « action SQL » permet d’exécuter un script de création, de suppression ou de mise à jour d’une base de données relationnelle. Il se présente sous la forme d’un bouton.

Propriétés simples #

Nom / Infobulle / Visibilité / Rafraîchissement auto #
Pour plus d'informations voir Propriétés simples
Texte #
Libellé présent sur le bouton.
Exemple #
Sur la base de données SQL Server Demonstration livrée avec BiBOARD, créer une requête avec le code SQL suivant pour intégrer un bouton Action SQL :
Select
demonstration.dbo.SatisfactionClient.CodeMois,
demonstration.dbo.SatisfactionClient.Ratio
From
demonstration.dbo.SatisfactionClient

- Poser la datasource ainsi construite dans un tableau de bord avec le composant Tableau.
- Dans le bandeau de ce tableau, sélectionner les valeurs comme ci-dessous:

- Poser dans ce tableau de bord une zone de saisie (sans source de données).
- Poser une action SQL en sélectionnant le hub précédemment créé (Satisfaction client par mois).
- Double-cliquer sur le composant « action SQL » et choisir Mise-à-jour, et coller cette requête SQL :
UPDATE demonstration.dbo.SatisfactionClient
SET
Ratio = @[Ratio]
WHERE (
CodeMois in('@[CodeMois]')
)

@[Ratio] et @[CodeMois] sont des paramètres.
Remarque : les paramètres de type « chaîne de caractères » et « date » doivent être entourés de guillemets simples (comme @[CodeMois]).
- Créer un lien entre le composant « Zone de saisie » et le composant « Action SQL » comme cela:

- Créer un lien entre le composant « Tableau » et le composant « Action SQL » comme cela:

- Créer un lien entre le composant « Action SQL » et le composant « Tableau ».

Remarque : pour cette dernière étape, le champ à sélectionner n’a pas d’importance (ici CodeMois). En effet ce lien sert seulement à rafraîchir le tableau pour visualiser la donnée après mise à jour.
- En ajoutant un libellé (sans source de données), le tableau de bord devrait ressembler à cela:


Ceci n’est qu’un exemple, les possibilités avec le composant action SQL sont nombreuses aux vues de sa souplesse.
Action SQL avancée #
Le code SQL #
Les paramètres #
Un paramètre est créé sous cette forme : @[Nom_Du_Paramètre].
Les paramètres de type chaîne de caractère et date doivent être entourés de simples quotes :
'@[MaChaine]'
'@[MaDate]'
Les paramètres multiples (liste de valeurs, de date , de codes,..) doivent être entourés d’une étoile pour être traités comme un seul champ.
Exemple :
Si la paramètre contient les valeurs ‘Chaine1’ et ‘Chaine2’ alors :
'@[MesChaines]' contiendra 'Chaine1','Chaine2'
'*@[MesChaines]*' contiendra '*Chaine1,Chaine2*'
Test si un paramètre est passé #
Exemple d’une variable de type chaîne de caractère #
IF('@[NomMois]' is null OR '@[NomMois]'='#NULL')
BEGIN
RAISERROR('Veuillez sélectionnez le mois !',16,1);
END
ELSE
BEGIN
RAISERROR('@[NomMois]',16,1);
END
Exemple d’une variable de type numérique #
IF('@[CodeMois]' is null OR '@[CodeMois]'= -987) BEGIN RAISERROR('Veuillez sélectionnez le mois !',16,1); END ELSE BEGIN RAISERROR('@[CodeMois]',16,1); END
Les variables #
Déclaration d’une variable SQL :
DECLARE @Selection varchar(MAX); Affection d’une variable avec un paramètre BiBOARD :
set @Selection = '@[issueid]';
Tester la valeur d’une variable #
IF (ISNUMERIC('@[issueid]') <> 1) BEGIN RAISERROR('Veuillez sélectionner une entrée GEMINI !', 16, 1); set @Error='1'; END
Les boucles #
Pour boucler sur une liste de résultat, on utilise un curseur et l’instruction FETCH.
Exemple simple :
--Déclaration des paramètres
DECLARE @Param1 integer
DECLARE @Param2 integer
DECLARE @Param3 integer
--Déclaration d'un curseur pour la boucle
DECLARE Curseur_Boucle CURSOR FOR
--Requête de sélection
SELECT ColonneA1 from TableA where ColonneA2 in ('@[Param2]') order by ColonneA3
--Ouverture du curseur
OPEN Curseur_Boucle ;
FETCH NEXT FROM Curseur_Boucle INTO @Param1;
--Boucle sur toutes les lignes du select
WHILE @@FETCH_STATUS = 0
BEGIN
--Insertion d'éléments dans une autre table
insert TableB (ColonneB1,ColonneB2) values (@Param1,@Param3);
--Passage à l'élément suivant
FETCH NEXT FROM Curseur_Boucle INTO @Param1;
END;
--Fermeture du curseur
CLOSE Curseur_Boucle;
--Libération du curseur en mémoire
DEALLOCATE Curseur_Boucle;
Le code JavaScript #
JavaScript de départ #
Remarque :
Pour abandonner l’action SQL en cours dans le code javascript, vous devez utiliser la fonction return() ;
JavaScript de fin #
Passage de valeurs au javaScript de fin :
RAISERROR(‘@[Param]’, 16, 1)
Côté Javascript : vous pouvez récupérer la valeur de @Param avec :
s.cpERROR
s.cpRESULT | ‘OK’ ou ‘KO’ si erreur SQL |
s.cpRECORDS | Nombre d’enregistrements modifiés par la requête |
s.cpQUERY | Requête SQL exécutée |
s.cpERROR | Message d’erreur levé par l’exécution de la requête |
s.cpnomduparam (Attention : en minuscule seulement) | valeur du paramètre |
Exploitation des paramètres #
Tous les paramètres passés au bouton SQL sont utilisables dans le Javascript de fin :
Syntaxe :
s.cpNOMduParamètre
Exemple :
s.cpParamAnnée
s.cpCodeClient
etc.
Accès aux composants BiBOARD en JavaScript : l’objet ParamFactory #
Vous pouvez accéder à un composant BiBOARD dans la page à partir de son nom.
paramFactory.Get('NomDuComposant') retourne COMP_1245 paramFactory.Get('NomDuComposant_id') retourne 1245 paramFactory.Get('NomDuComposant_panel') retourne AJAXPANEL_1245
Exemple d’utilisation en javascript (bouton SQL)
MaDate1 est le nom d’un composant de type datepickerCommandes est un tableau simple
alert(eval(paramFactory.Get('MaDate1') + '.GetValue();')); eval(paramFactory.Get('Commandes_panel') + '.PerformCallback();');
Exemples #
Exemple d’utilisation de boucle #
DECLARE @Selection varchar(MAX); set @Selection = '*@[issueid]*'; IF (@Selection = '*null*' or @Selection = '*-987*' BEGIN RAISERROR('Veuillez sélectionner au moins une entrée GEMINI', 16, 1) END ELSE BEGIN -- Boucle 1 : sur les entrée gemini sélectionnées DECLARE @IssueID integer DECLARE issue_cursor CURSOR FOR select issueid from issues WHERE issueid In (@[issueid]) order by issueid OPEN issue_cursor; FETCH NEXT FROM issue_cursor INTO @IssueID; WHILE @@FETCH_STATUS = 0 BEGIN -- *Supprimer les assignations existantes pour cette entrée GEMINI delete from issueresource where issueid=@IssueID; -- Boucle 2 : sur les développeurs passés en param DECLARE @DevID integer DECLARE Curseur_Boucle CURSOR FOR SELECT userid from users where username in ('@[DevelopeursName]') order by userid OPEN Curseur_Boucle; FETCH NEXT FROM Curseur_Boucle INTO @DevID; WHILE @@FETCH_STATUS = 0 BEGIN --Insertion des paires gemini IssueId et developeurs userid dans la table issueresource insert issueresource (issueid,userid) values (@IssueID ,@DevID); FETCH NEXT FROM Curseur_Boucle INTO @DevID; END; CLOSE Curseur_Boucle; DEALLOCATE Curseur_Boucle; --Basculer le status de l'entrée GEMINI en 2 : Assigné update Issues set issstatus = 2 where issueid=@IssueID; FETCH NEXT FROM issue_cursor INTO @IssueID; END; CLOSE issue_cursor; DEALLOCATE issue_cursor; END
Appeler un webservice en JavaScript #
//fonction de détection du navigateur client function getBrowser() { var nVer = navigator.appVersion; var nAgt = navigator.userAgent; var browserName = navigator.appName; var fullVersion = +parseFloat(navigator.appVersion); var majorVersion = parseInt(navigator.appVersion,10); var nameOffset,verOffset,ix; // In Opera, the true version is after "Opera" or after "Version" if ((verOffset=nAgt.indexOf("Opera"))!=-1) { browserName = "Opera"; fullVersion = nAgt.substring(verOffset+6); if ((verOffset=nAgt.indexOf("Version"))!=-1) fullVersion = nAgt.substring(verOffset+8); } // In MSIE, the true version is after "MSIE" in userAgent else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) { browserName = "Microsoft Internet Explorer"; fullVersion = nAgt.substring(verOffset+5); } // In Chrome, the true version is after "Chrome" else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) { browserName = "Chrome"; fullVersion = nAgt.substring(verOffset+7); } // In Safari, the true version is after "Safari" or after "Version" else if ((verOffset=nAgt.indexOf("Safari"))!=-1) { browserName = "Safari"; fullVersion = nAgt.substring(verOffset+7); if ((verOffset=nAgt.indexOf("Version"))!=-1) fullVersion = nAgt.substring(verOffset+8); } // In Firefox, the true version is after "Firefox" else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) { browserName = "Firefox"; fullVersion = nAgt.substring(verOffset+8); } // In most other browsers, "name/version" is at the end of userAgent else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < (verOffset=nAgt.lastIndexOf('/')) ) { browserName = nAgt.substring(nameOffset,verOffset); fullVersion = nAgt.substring(verOffset+1); if (browserName.toLowerCase()==browserName.toUpperCase()) { browserName = navigator.appName; } } // trim the fullVersion string at semicolon/space if present if ((ix=fullVersion.indexOf(";"))!=-1) fullVersion=fullVersion.substring(0,ix); if ((ix=fullVersion.indexOf(" "))!=-1) fullVersion=fullVersion.substring(0,ix); majorVersion = parseInt(+fullVersion,10); if (isNaN(majorVersion)) { fullVersion = +parseFloat(navigator.appVersion); majorVersion = parseInt(navigator.appVersion,10); } return { name: browserName, version: majorVersion }; } //Fonction de création de l'objet JavaScript permettant d'appeler le Web Service function getxmlHTTP(){ var xmlHTTP = null; if(window.XMLHttpRequest) // Firefox et autres xmlHTTP = new XMLHttpRequest(); else if(window.ActiveXObject) { // Internet Explorer try { xmlHTTP = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP"); } } else { // XMLHttpRequest non supporté par le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xmlHTTP = false; } return xmlHTTP; } //Les instructions suivantes sont exécutées au click sur le bouton SQL var xmlHTTP = getxmlHTTP(); //Création de l'objet requête WS var varURL="/resources/BiBOARDServices.asmx/ExecuteCalc"; //Paramétrage de l'adresse du WS var varParams="Formule=" + encodeURIComponent(s.cpFormule); //Paramétrage de la méthode et paramètres du WS //Déclaration de la fonction d'écoute des évènements de l'objet requête xmlHTTP.onreadystatechange = function() { if(xmlHTTP.readyState == 4 && xmlHTTP.status == 200) { xmlDoc=xmlHTTP.responseXML; var browser = getBrowser(); alert(browser.name + ' ' + browser.version); var value = xmlDoc.firstChild.textContent; if (value == null) value = xmlDoc.lastChild.nodeTypedValue; alert(value); } } //Appel du WS en mode GET (attention paramètre limité à 512 octets ! Utiliser le mode POST si besoin) xmlHTTP.open("GET", varURL + '?' + varParams, true); //Exécution de la requête xmlHTTP.send(null);
Bouton d’impression #
Exemple de création d’un bouton d’impression d’un tableau simple
Dans la page où se trouve le tableau à imprimer, on ajoute un bouton SQL :
- SQL
Cette partie est exécutée côté serveur. Cela permet d’exploiter les possibilités du langage TRANSACT SQL. On peut ainsi faire toutes les opérations nécessaires (concaténation de chaine, requête sur des tables…).
Dans cet exemple, on constitue les paramètres d’appel au TDB d’impression :
On peut y ajouter la liste des éléments sélectionnés, des filtres et autres paramètres si besoin.
Enfin, on utilise la commande SQL RAISEERROR pour passer ces paramètres côté client (Javascript de fin)

- JavaScript de fin
Dans ce script, on va ouvrir une nouvelle fenêtre en popup avec l’adresse du TDB d’impression et piloter l’aperçu avant impression :

Dans le détail :
Ouverture de la fenêtre popup.
Lancement d’un timer pour permettre à la page de se charger complètement.
Exécution du script d’impression.
Remarque : s.cpERROR permet de récupérer la chaine construite dans le SQL (côté serveur)
Zone de saisie multi ligne et HTML #
Procédure pour ajouter un composant de saisie multiligne avec assistant HTML (mise en gras, tableaux, images, …) dans un tableau de bord.
* Zone de saisie HTML Le but est d’utiliser la page de saisie du composant HTML pour studio (page studio/ HTMLEditor.aspx).
Créer un Hub nommé CompEditHTML contenant un champ calculé de type Code HTML et nommé CodeHTML pour générer l’Iframe nommé EditorHTML.
Formule de ce champ calculé :
"<iframe name='EditorHTML' src='/studio/HTMLEditor.aspx' style='width: 800px; height: 800px;'></iframe>"
Poser dans votre TDB un composant libellé lié au hub CompEditHTML. Nommez ce composant LibCodeHTML.
- Bouton d’action SQL
Editer le code Javascript de départ :
var codeHTML = window.frames['EditorHTML'].ASPxHTMLEditor.GetHtml(); eval(paramFactory.Get('LibCodeHTML') + '.cpValue = codeHTML;'); paramFactory.Set(paramFactory.Get('LibCodeHTML_id'),codeHTML);
Ce code permet de récupérer le code HTML généré par l’assistant dans l’Iframe. Et le copier dans la valeur du composant HTML. On utilise le nom du composant avec la méthode paramFactory.Get(‘LibcodeHTML_id’) pour éviter les problèmes de changement d’ID lors d’un import/export.
Editer le code SQL pour insérer votre code HTML dans une table.
Une table « TableHTML » a été créé avec deux colonnes CodeHTML varchar(MAX) et Titre varchar(50)Exemple :
INSERT INTO Demonstration.dbo.TableHTML ( CodeHTML,Titre ) VALUES ( '@[CodeHTML]','@[Titre]')
Ici, nous avons créé deux paramètres pour un titre et le code HTML.
- Lier les composants vers le composant action SQL :
Un composant de type « Saisie libre » au paramètre titre.
Le composant libellé LibCodeHTML au paramètre CodeHTML.