Dans un précédent article, nous vous avons montré comment intégrer des checkboxes personnalisées pour répondre à vos besoins d’extension sur une vue liste. Cette méthode, bien que correcte et fonctionnelle, présente un défi majeur : la procédure d’intégration est longue et exigeante, tant sur le plan technique que fonctionnel.
Au regard des besoins exprimés par nos clients, nous avons opté pour une nouvelle version plus souple et facile à intégrer. Dans cet article, nous verrons ensemble comment configurer des checkboxes dans une vue Nintex via un plugin jQuery.
La documentation se déroulera en deux parties : tout d’abord une documentation technique, puis une documentation d’intégration dans une vue Nintex Automation.
📘 Documentation technique du code des checkboxes
1. Introduction aux checkboxes dynamiques dans Nintex K2
Ce script a pour objectif d’enrichir une vue Nintex K2 contenant une grille (.grid-content-table) en y ajoutant une colonne dédiée à des cases à cocher (checkboxes) pour chaque ligne du corps, ainsi qu’un checkbox d’en-tête permettant la sélection ou la désélection globale de toutes les lignes visibles.Le code est encapsulé sous forme de plugin jQuery afin d’être réutilisable et paramétrable sur différentes vues.
2. Créer un plugin jQuery pour les checkboxes dans Nintex K2
/**
* Compte toutes les cases à cocher présentes dans la vue (hors entête)
* @param {jQuery|string} tableSelector - Sélecteur ou élément jQuery de la table cible
* @returns {number} - Nombre total de cases à cocher dans le corps
*/
function countAllCheckboxes(tableSelector) {
const $table = $(tableSelector);
return $table.find(".grid-content-table tbody input[name=body_checkbox]").length;
}
/**
* Compte toutes les cases à cocher sélectionnées dans la vue (hors entête)
* @param {jQuery|string} tableSelector - Sélecteur ou élément jQuery de la table cible
* @returns {number} - Nombre de cases cochées dans le corps
*/
function countCheckedCheckboxes(tableSelector) {
const $table = $(tableSelector);
return $table.find(".grid-content-table tbody input[name=body_checkbox]:checked").length;
}
(function ($) {
$.fn.addCheckBox = function (options) {
const settings = $.extend({
refresh: 0,
view_name: ""
}, options);
const $table = $(this);
const $colgroups = $table.find("colgroup");
const $headerRow = $table.find(".grid-column-header-table tbody tr");
const $bodyRows = $table.find(".grid-content-table tbody tr");
/** Ajout initial des colonnes et du "select all" **/
if (!settings.refresh) {
// Ajout d'une colonne <col> pour la checkbox
$colgroups.append(
$('<col>', {
'data-options': '{"name":"chk_col","sortable":false,"width":"4%","align":"right","datatype":"number"}',
'class': 'sortable',
'style': 'width:4%'
})
);
// Ajout du checkbox "Tout sélectionner"
const $selectAll = $('<input>', { type: 'checkbox', id: 'selectAllCheck' });
$headerRow.append($('<th>').append($selectAll));
// Gestion du clic sur "Tout sélectionner"
$selectAll.on("click", function () {
const allChecked = this.checked;
const $rows = $table.find(".grid-content-table tbody tr");
$rows.each(function () {
const $cb = $(this).find("input[name=body_checkbox]");
$cb.prop("checked", allChecked);
$(this).toggleClass("selected", allChecked);
});
});
}
/** Ajout des checkboxes de corps **/
$bodyRows.each(function () {
const $row = $(this);
if (!$row.find('input[name=body_checkbox]').length) {
const $checkbox = $('<input>', { type: 'checkbox', name: 'body_checkbox' });
$row.append($('<td>', {
'data-option': '{"value":"<input type=checkbox>","counter":"0","fieldPropertyType":"text"}'
}).append($checkbox));
// Sélection individuelle
$checkbox.on("click", function (e) {
e.stopPropagation();
$row.toggleClass("selected", this.checked);
if ( countAllCheckboxes("[name='${settings.view_name}']") == countCheckedCheckboxes("[name='${settings.view_name}']") ) {
$table.find("#selectAllCheck").prop("checked", true)
} else {
$table.find("#selectAllCheck").prop("checked", false)
}
});
}
});
/** Si c’est un rafraîchissement, re-sélectionne si "select all" est coché **/
if (settings.refresh) {
const $selectAll = $table.find("#selectAllCheck");
if ($selectAll.prop("checked")) {
$bodyRows.each(function () {
const $cb = $(this).find("input[name=body_checkbox]");
$cb.prop("checked", true);
$(this).addClass("selected");
});
}
}
/** MutationObserver : détecte l’ajout de nouvelles lignes **/
const $tbody = $table.find(".grid-content-table tbody");
const observer = new MutationObserver(function (mutations) {
mutations.forEach(({ type, addedNodes }) => {
if (type === "childList") {
$(addedNodes).each(function () {
if (this.nodeType === 1 && this.tagName === "TR") {
$("[name='${settings.view_name}']").addCheckBox({ refresh: 1 });
}
});
}
});
});
try {
observer.observe($tbody[0], { childList: true });
} catch (e) {
}
};
})(jQuery);
Le code est composé de trois parties principales :
🔹 Fonctions utilitaires globales
- countAllCheckboxes(tableSelector) → Retourne le nombre total de cases à cocher présentes dans le corps du tableau.
- countCheckedCheckboxes(tableSelector) → Retourne le nombre total de cases actuellement cochées.
Ces fonctions servent à synchroniser l’état du bouton “Tout sélectionner”.
🔹 Définition du plugin jQuery addCheckBox
Ce plugin peut être appelé sur n’importe quel élément jQuery (en général une vue ou table K2) pour y injecter les checkboxes.
3. Détails internes
🧱 Étapes d’exécution
Étape 1 : Ajout initial (si refresh = 0)
Ajout de l’espace de la colonne des cases. Ajout d’une checkbox dans l’en-tête pour la sélection/déselection globale des lignes.
Étape 2 : Insertion des checkboxes de corps
Pour chaque ligne de la liste, si aucune case à cocher n’est encore présente, une nouvelle case à cocher est insérer avec l’action à réaliser au click.
Étape 3 : Rafraîchissement de la vue (refresh = 1)
Si la vue est rechargée et que le Select All est toujours coché, le script recoche toutes les lignes présentes après le rafraîchissement.
Étape 4 : MutationObserver
Un MutationObserver est attaché au tableau (tbody) pour détecter toute insertion de nouvelles lignes. Lorsqu’une nouvelle ligne est ajoutée, le plugin est rappelé avec l’option { refresh: 1 } afin de réappliquer la logique sans dupliquer les éléments d’en-tête.
4. Points techniques notables
-
Encapsulation complète dans un plugin jQuery pour éviter les conflits globaux.
-
Réutilisable : fonctionne sur plusieurs vues indépendantes grâce au paramètre view_name.
-
Robuste : inclut une gestion des exceptions avec try/catch sur le MutationObserver.
-
Optimisé UX : ajout de la classe .selected pour indiquer visuellement les lignes cochées.
⚙️ Intégration dans une vue Nintex K2
1. Prérequis
-
Avoir accès à la vue K2 (SmartForm) cible.
-
Disposer des droits d’administration pour ajouter du code JavaScript comme style profile.
2. Étapes d’intégration
/**
* Compte toutes les cases à cocher présentes dans la vue (hors entête)
* @param {jQuery|string} tableSelector - Sélecteur ou élément jQuery de la table cible
* @returns {number} - Nombre total de cases à cocher dans le corps
*/
function countAllCheckboxes(tableSelector) {
const $table = $(tableSelector);
return $table.find(".grid-content-table tbody input[name=body_checkbox]").length;
}
/**
* Compte toutes les cases à cocher sélectionnées dans la vue (hors entête)
* @param {jQuery|string} tableSelector - Sélecteur ou élément jQuery de la table cible
* @returns {number} - Nombre de cases cochées dans le corps
*/
function countCheckedCheckboxes(tableSelector) {
const $table = $(tableSelector);
return $table.find(".grid-content-table tbody input[name=body_checkbox]:checked").length;
}
(function ($) {
$.fn.addCheckBox = function (options) {
const settings = $.extend({
refresh: 0,
view_name: ""
}, options);
const $table = $(this);
const $colgroups = $table.find("colgroup");
const $headerRow = $table.find(".grid-column-header-table tbody tr");
const $bodyRows = $table.find(".grid-content-table tbody tr");
/** Ajout initial des colonnes et du "select all" **/
if (!settings.refresh) {
// Ajout d'une colonne <col> pour la checkbox
$colgroups.append(
$('<col>', {
'data-options': '{"name":"chk_col","sortable":false,"width":"4%","align":"right","datatype":"number"}',
'class': 'sortable',
'style': 'width:4%'
})
);
// Ajout du checkbox "Tout sélectionner"
const $selectAll = $('<input>', { type: 'checkbox', id: 'selectAllCheck' });
$headerRow.append($('<th>').append($selectAll));
// Gestion du clic sur "Tout sélectionner"
$selectAll.on("click", function () {
const allChecked = this.checked;
const $rows = $table.find(".grid-content-table tbody tr");
$rows.each(function () {
const $cb = $(this).find("input[name=body_checkbox]");
$cb.prop("checked", allChecked);
$(this).toggleClass("selected", allChecked);
});
});
}
/** Ajout des checkboxes de corps **/
$bodyRows.each(function () {
const $row = $(this);
if (!$row.find('input[name=body_checkbox]').length) {
const $checkbox = $('<input>', { type: 'checkbox', name: 'body_checkbox' });
$row.append($('<td>', {
'data-option': '{"value":"<input type=checkbox>","counter":"0","fieldPropertyType":"text"}'
}).append($checkbox));
// Sélection individuelle
$checkbox.on("click", function (e) {
e.stopPropagation();
$row.toggleClass("selected", this.checked);
if ( countAllCheckboxes("[name='${settings.view_name}']") == countCheckedCheckboxes("[name='${settings.view_name}']") ) {
$table.find("#selectAllCheck").prop("checked", true)
} else {
$table.find("#selectAllCheck").prop("checked", false)
}
});
}
});
/** Si c’est un rafraîchissement, re-sélectionne si "select all" est coché **/
if (settings.refresh) {
const $selectAll = $table.find("#selectAllCheck");
if ($selectAll.prop("checked")) {
$bodyRows.each(function () {
const $cb = $(this).find("input[name=body_checkbox]");
$cb.prop("checked", true);
$(this).addClass("selected");
});
}
}
/** MutationObserver : détecte l’ajout de nouvelles lignes **/
const $tbody = $table.find(".grid-content-table tbody");
const observer = new MutationObserver(function (mutations) {
mutations.forEach(({ type, addedNodes }) => {
if (type === "childList") {
$(addedNodes).each(function () {
if (this.nodeType === 1 && this.tagName === "TR") {
$("[name='${settings.view_name}']").addCheckBox({ refresh: 1 });
}
});
}
});
});
try {
observer.observe($tbody[0], { childList: true });
} catch (e) {
}
};
})(jQuery);
Étape 1 : Ajouter le script dans un style profile
Copie le contenu du code ci-dessus dans un fichier JavaScript hébergé sur ton serveur. Puis crée un style profile dessus.
Étape 2 : Configurer la vue cible
Dans Nintex, chaque vue a un nom logique. Nous allons nous servir de ce nom pour initier l’appel à notre plugin.
1- Créer un dataLabel (dl_CheckboxScript) qui va servir à exécuter le script qui appel le plugin. rassurez-vous de cocher la propriété litteral de ce data label
2- L’attribut Name de notre vue est celui que l’on va utilisé pour faire l’appel à notre plugin
Ajouter la configuration suivante dans l’événement When the View executes Initialize :
- Premier transfer data, qui met une valeur nulle dans votre data label (dl_CheckboxScript)
- Deuxième transfer data, qui met le script suivant dans votre data label (dl_CheckboxScript)
<script>$("[name='OrdresService.List']").addCheckBox({ refresh: 0 })</script>
Étape 4 : Gérer le rafraîchissement de la vue
Si K2 recharge ta vue (par exemple après un filtre ou un “List Refresh”), tu peux relancer le plugin via l’événement : When the View executes List Refresh :
- Premier transfer data, qui met une valeur nulle dans votre data label (dl_CheckboxScript)
- Deuxième transfer data, qui met le script suivant dans votre data label (dl_CheckboxScript)
<script>$("[name='OrdresService.List']").addCheckBox({ refresh: 1 })</script>
3. Configurer des checkboxes dans une vue liste nintex – Cas pratique en 3min
-
Une colonne supplémentaire contenant des cases à cocher apparaît à droite de la grille.
-
Le checkbox d’en-tête permet de tout sélectionner/désélectionner.
-
Le statut du Select All s’ajuste automatiquement selon les lignes cochées.
-
Lors d’un rafraîchissement de la vue, le système maintient les sélections.
