--- title: Action SQL description: "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. ![](https://wiki.biboard.fr/wp-content/uploads/2024/08/V18__Ecriture-Action-SQL-Exemple_02-1.png) ## Propriétés simples ![](https://wiki.biboard.fr/wp-content/uploads/2024/06/V18__Ecriture-Action-SQL-Bandeau_01.png) ### Nom / Infobulle /…" url: "https://wiki.biboard.fr/wiki/action-sql/" updated: "2025-03-03" category: Guide utilisateur / Studio / Tableaux de bord / Ecriture --- # Action SQL 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. ![](https://wiki.biboard.fr/wp-content/uploads/2024/08/V18__Ecriture-Action-SQL-Exemple_02-1.png) ## Propriétés simples ![](https://wiki.biboard.fr/wp-content/uploads/2024/06/V18__Ecriture-Action-SQL-Bandeau_01.png) ### 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 ``` ![](https://wiki.biboard.fr/wp-content/uploads/2024/03/SQL_Exm1.png) - 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: ![](https://wiki.biboard.fr/wp-content/uploads/2024/03/SQL_Exm2-1024x83.png) - 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.SatisfactionClientSET Ratio = @[Ratio]WHERE ( CodeMois in('@[CodeMois]')) ``` ![](https://wiki.biboard.fr/wp-content/uploads/2024/03/Code_SQL_Mise_Jour.png) @[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: ![](https://wiki.biboard.fr/wp-content/uploads/2024/03/Composant.png) - Créer un lien entre le composant « Tableau » et le composant « Action SQL » comme cela: ![](https://wiki.biboard.fr/wp-content/uploads/2024/03/Composant2.png) - Créer un lien entre le composant « Action SQL » et le composant « Tableau ». ![](https://wiki.biboard.fr/wp-content/uploads/2024/03/Composant3.png) **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: ![](https://wiki.biboard.fr/wp-content/uploads/2024/03/SQL_Vue_Conceptiom.png) ![](https://wiki.biboard.fr/wp-content/uploads/2024/03/SQL_Vue_tableu_de_bord.png) 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); ENDELSEBEGIN 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ètresDECLARE @Param1 integerDECLARE @Param2 integerDECLARE @Param3 integer--Déclaration d'un curseur pour la boucleDECLARE Curseur_Boucle CURSOR FOR--Requête de sélectionSELECT ColonneA1 from TableA where ColonneA2 in ('@[Param2]') order by ColonneA3--Ouverture du curseurOPEN Curseur_Boucle ;FETCH NEXT FROM Curseur_Boucle INTO @Param1;  --Boucle sur toutes les lignes du selectWHILE @@FETCH_STATUS = 0BEGIN --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 curseurCLOSE Curseur_Boucle;--Libération du curseur en mémoireDEALLOCATE 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ées.cpCodeClientetc. ``` #### 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) ![](https://wiki.biboard.fr/wp-content/uploads/2024/03/SqlAction001.png) -   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 : ![](https://wiki.biboard.fr/wp-content/uploads/2024/03/SqlAction002.png) 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é : ``` "" ```  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.