Customize checkboxes in Nintex K2

In the Nintex K2 development environment, user interface elements such as checkboxes play a crucial role. They enable users to make quick and precise selections. However, customizing these checkboxes can significantly enhance the user experience. This guide explores how you can customize checkboxes in Nintex K2 to meet your specific needs.

Why customize checkboxes in K2?

The standard checkboxes in K2 already allow users to select or deselect options. However, there are scenarios where these elements need to be adapted. This may offer better functionality or a more attractive design. For example, for a dynamic to-do list or tasks requiring rapid validation, customized checkboxes can be more effective and visually pleasing.

The challenges of standard checkboxes

The use of standard checkboxes in a K2 View List can sometimes be limited. Indeed, users might expect more intuitive interactions and more modern visuals. For example, when creating a to-do list, the default checkboxes may not meet aesthetic or functional expectations. This creates a need for a customized solution.

The solution: Custom checkboxes with JavaScript

To overcome these challenges, we can opt for JavaScript-based custom controls. By injecting this script into a View List, we can transform the appearance and behavior of the checkboxes. Here are the general steps to achieve this customization:

1. Creating the JavaScript script : First, develop a JavaScript script that modifies the appearance and behavior of the checkboxes according to your specifications.
2. Inject the script into K2: Next, integrate this script into K2’s View List to replace the standard checkboxes with custom ones.
3. Test and Validate: Finally, ensure that the implementations work correctly and deliver an enhanced user experience.

Case study: Implementing a To-Do List with checkboxes

Let’s take a concrete example. Suppose we need to create an interactive to-do list in K2. As a result, the injected JavaScript script could include CSS styles to modernize the checkboxes. It could also add features such as transition animation when a task is checked.

Step by step :

Creating your project structure

First of all, you need to create your project in your preferred tree structure. What we’re interested in is the View List, which will be used for quick validation. Once the view has been created and connected to its SmartObject, you can move on to the next step.

Add a column to your View List containing the two Checkboxes we’ll need. Make sure their litteral properties are checked. The expression below will be created next.

—–Img

Here are the controls we’ll need on our View List.

Note: the Dl_HightLightSelected and Dl_HightLightAll controls must be litteral.

—–Img

• Dl_noScript: This control contains the JS script that will be retrieved by PRC from the noScript column.
• Dl_selectAllScript: This control contains the JS script that will be retrieved by PRC from the selectAllScript column.
• Dl_tagCheckBoxAll: This control contains the JS script to be retrieved by PRC from the tagCheckBoxAll column.
• Dl_taghightLightScript: This control contains the JS script to be retrieved by PRC from the hightLightScript column.
• Dl_tagCheckBoxListAll: This control contains the JS script to be retrieved by PRC from the tagCheckBoxListAll column.
• Refresh: This control contains the script that will allow K2 to highlight selected rows via checkboxes.
• Dl_HightLightSelected: This control will contain the script that allows K2 to highlight selected rows via checkboxes.
• Dl_HightLightAll: This control will contain the script that allows K2 to highlight the selected/deselected lines via the checkbox that allows you to check/uncheck everything.
• Button: This is a K2 control (Button) that will be called when the multiple selection is clicked.

Create these different expressions in your View in relation to the checklist we created earlier.

—-Img

Your HTML/Javascript scripts

Here’s a list of scripts you’ll need to customize the integration and use of checkboxes in Nintex K2.

• HTML code for the checkbox that will appear in the task list.

<input type="checkbox" class="custom_chbx" name="replace_with_your_own_wordchbx_list"/>

• HTML code for the checkbox that selects/deselects all checkboxes in a list

<input type="checkbox" class="custom_chbx" name="replace_with_your_own_wordchbx_all"/>

• A script that deletes the content of a script that has already been executed on a page (No Script)

<script></script>

• A script that applies K2’s native selection style to all lines where checkboxes are ticked.

<script>
      let selected = 0;
      $(
        `input[type="checkbox"][name="replace_with_your_own_wordchbx_list"]`
      ).each(function (index, item) {
        if ($(this)[0].checked) {
          $(this).closest("tr").addClass("highlighted selected");
        } else {
          $(this).closest("tr").removeClass("highlighted selected");
          selected++;
        }
      });
      if (selected == 0) {
        $(
          `input[type="checkbox"][name="replace_with_your_own_wordchbx_all"]`
        ).prop("checked", true);
      } else {
        $(
          `input[type="checkbox"][name="replace_with_your_own_wordchbx_all"]`
        ).prop("checked", false);
      }
      selected = 0;
</script>

• Un script qui permet de configurer la fonctionnalitée SelectAll/UnSelectAll

<script>
      $(
        `input[type="checkbox"][name="replace_with_your_own_wordchbx_all"]`
      ).change(function () {
        if (this.checked) {
          $(
            `input[type="checkbox"][name="replace_with_your_own_wordchbx_list"]`
          ).prop(`checked`, true);
        } else {
          $(
            `input[type="checkbox"][name="replace_with_your_own_wordchbx_list"]`
          ).prop(`checked`, false);
        }
        $(`[name="Dl_chbxAll_changed"]`).click();
      });
</script>

SQL scripting

Yes, we’re going to use SQL to dynamize the generation of our checkboxes, so we can be sure that in the DOM, each group of checkboxes is unique. So here’s the code for our stored procedure, which will generate the various HTML/JS scripts we’ve just seen. Don’t forget to create a SmartObject on this stored procedure; )

CREATE PROCEDURE [dbo].[INT_CheckBoxComponent]
	-- Add the parameters for the stored procedure here
	@PRC_Names nvarchar(100) = NULL
AS
BEGIN
	DECLARE @tagCheckBoxAll nvarchar(max), 
			@tagCheckBoxListAll nvarchar(max), 
			@hightLightScript nvarchar(max), 
			@selectAllScript nvarchar(max),
            @noScript nvarchar(max)

	SET NOCOUNT ON;
	
    SET @tagCheckBoxAll = '<input type="checkbox" class="custom_chbx" name="'+@PRC_Names+'chbx_all"/>';
    SET @tagCheckBoxListAll = '<input type="checkbox" class="custom_chbx" name="'+@PRC_Names+'chbx_list"/>'
    SET @noScript = '<script></script>'
    SET @selectAllScript = '<script> $(`input[type="checkbox"][name="'+@PRC_Names+'chbx_all"]`).change(function() { if (this.checked) { $(`input[type="checkbox"][name="'+@PRC_Names+'chbx_list"]`).prop(`checked`, true); } else { $(`input[type="checkbox"][name="'+@PRC_Names+'chbx_list"]`).prop(`checked`, false); } $(`[name="Dl_chbxAll_changed"]`).click(); }) </script>'
    SET @hightLightScript = '<script> let selected = 0; $(`input[type="checkbox"][name="'+@PRC_Names+'chbx_list"]`).each(function ( index, item ) { if ($(this)[0].checked) { $(this).closest("tr").addClass("highlighted selected"); } else { $(this).closest("tr").removeClass("highlighted selected"); selected++; } }); if (selected == 0) { $(`input[type="checkbox"][name="'+@PRC_Names+'chbx_all"]`).prop("checked", true); } else { $(`input[type="checkbox"][name="'+@PRC_Names+'chbx_all"]`).prop("checked", false); } selected = 0; </script>'

	SELECT @tagCheckBoxAll AS tagCheckBoxAll,
        @tagCheckBoxListAll AS tagCheckBoxListAll,
        @noScript AS noScript,
        @hightLightScript AS hightLightScript,
        @selectAllScript AS selectAllScript
END

Integration

Once you’ve done all these script snippets, it’s time to put it all together to finalize this project. Follow the steps below. In your View List you should have at least the same structure, after which you’re free to add your own conditions. The next step is to set up the various rules.

—-Imgs

Checkbox extension

This customization is not limited to to-do lists. In fact, it can be extended to other types of forms and interfaces where multiple selections are required. For example, for surveys, questionnaires or any other application requiring fluid and efficient user interaction.

Conclusion

Customizing checkboxes in Nintex K2 may seem a challenge at first. However, with the right tools and a little JavaScript, it’s possible to transform these elements into integral and aesthetic parts of your user interface. So, by following the steps outlined in this guide, you can deliver a better user experience while meeting the specific needs of your K2 applications.