Injecter du JavaScript dans un K2 smartforms

Pour effectuer certaines actions spécifiques qui ne sont pas prévues dans les règles K2, il est possible d’injecter du code JavaScript dans les vues ou formulaires K2. Il y a globalement 2 façons de faire, le choix de l’une ou l’autre dépendra de la complexité (ou de la taille) du JavaScript.

La méthode simple

On ajoute un Data Label sur le formulaire dont le paramètre Visible est à false et Literal est à true et dont Expression contient le code JavaScript en question.

Ajout une Data Label avec le code JS

Le code utilisé dans l’exemple consiste à modifier le titre de la page et afficher un message d’alerte :

<script>
  $(document).ready(function() {
    document.title = 'Hello World'; alert('Hello World');
  });
</script>

Résultat exécution du code JS

La méthode plus avancée

En revanche, souvent il est nécessaire d’effectuer des manipulations plus complexes. Dans ce cas, il est possible d’externaliser le code JavaScript dans un fichier dédié et commun à plusieurs vues/formulaires. Ceci sera plus pratique pour des raisons de maintenabilité, de réutilisation de code et pour l’utilisation de systèmes de contrôle de versions.

Voici le pas-à-pas :

  1. On crée un dossier dans C:\Program Files (x86)\K2 blackpearl\K2 smartforms Runtime\Script (le chemin peut être légèrement différent selon votre installation) qui correspond au nom du projet (ceci afin d’éviter la mélange de code JavaScript entre projets) et on y ajoute un fichier JS.
    Le fichier JS
  2. Dans l’exemple on va résoudre une équation quadratique. Ici tb_A, tb_B et tb_C sont des Text Boxes ; btn_Solve le bouton Solve et dl_Resultat un Data Label avec les résultats des calculs.
    function K2Init(name) {
       switch(name) {
          case "EQ_EquationQuadratique":
          {
             $("[name=btn_Solve]").click(function(){SolveEquation();});
          }
       }
    }
    
    function SolveEquation()
    {
    	a = $("[name=tb_A]").val();
    	b = $("[name=tb_B]").val();
    	c = $("[name=tb_C]").val();
    	d = b*b-4*a*c;
    	if (d == 0)
    	{
    		x = (-1*b)/(2*a);
    		$("[name=dl_Resultat]").html("<h2><b>X = " + x + "</b></h2>");
    	}
    	if (d > 0)
    	{
    		x1 = (-1*b + Math.sqrt(d))/(2*a);
    		x2 = (-1*b - Math.sqrt(d))/(2*a);
    		$("[name=dl_Resultat]").html("<h2><b>X<sub>1</sub> = " + x1 + " ; X<sub>2</sub> = " + x2 + "</b></h2>");
    	}
    	if (d < 0)
    	{
    		a1 = (-1*b)*(2*a);
    		i = (Math.sqrt(-1*d))/(2*a);
    		$("[name=dl_Resultat]").html("<h2><b>X<sub>1</sub> = " + a1 + " + " + i + " * i ; X<sub>2</sub> = " + a1 + " - " + i + " * i</b></h2>");
    	}
    }
    
  3. Comme pour la méthode simple, on ajoute un Data Label mais cette fois-ci on va faire une référence vers notre fichier JS et appeler la méthode d’initialisation de notre script.
    Expression
  4. Sauvegarder le formulaire et l’exécuter. Le résultat est alors le suivant :
    Résultat
    RésultatRésultat

Une homogénéisation d’implémentation entre formulaires permet de centraliser la gestion de JavaScript dans un seul fichier.

N’hésitez pas à utiliser les commentaires si vous avez des questions ou besoin de précisions.

sergii

Consultant Solution chez K2 France, passionné d'automatisation de routine. Blogger de technologies innovantes :)

4 thoughts to “Injecter du JavaScript dans un K2 smartforms”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.