View Categories

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.

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.

Retour en haut