Skip to main content
Nintex Community Menu Bar
Solved

Issue with Bulk Upload checkbox feature.

  • April 11, 2023
  • 3 replies
  • 126 views
  • Translate

Forum|alt.badge.img+6

 

We want to create a view that pulls details on the staff ID, start and end date. our expectation is that when a manager opens the form, all the staff under the respective manager should be listed with the checkbox view. The Manager should further be able to select some items and in the next page it should show the list of all selected items. We want to add check box feature to a non-editable list view using minimal or no codes. Below are the criteria's to be considered.

  1. The List should allow paging – If the list is large, the list should be displayed in pages, say 10 items each page. The Manager should be able select only the desired items in each page. 
  2. No Unique ID- This List of Staff ID and details does not have any column for Unique ID and we cannot create Unique ID field. 
  3. All the fields should be read only. The list should be displayed in Non- Editable List view.

Best answer by NicS

The above effect can be achieved with the following scripts:

It is worth noting that values can be multi selected as well if the allow multiple selection option is set in the properties of the list view

 

/*

Add an unbound column to the list with the following html in the text property of the data label.

*/

<input type="checkbox" class="custom-box"/>


 

/*

Add the below javascript to a data label via an expression. Execute this script on form Init

*/

const targetNode = document.getElementsByClassName("grid-body-content")[0];

const config = { attributes: true, childList: true, subtree: true };

const callback = function (mutationsList, observer) {

  for (const mutation of mutationsList) {

    if (mutation.type === "attributes") {

      var contentTable = $(".selected");

      $(contentTable)

        .find(".custom-box")

        .each(function (i, val) {

          $(this).prop("checked", true);

        });

    }

  }

};

const observer = new MutationObserver(callback);

observer.observe(targetNode, config);

 

/*

Execute the below script when a button is clicked, this selects the row.

*/

var contentTable = $("span[name='dlblScript']")

  .closest(".grid")

  .find(".grid-content-table")[0];

$(contentTable)

  .find(".custom-box")

  .each(function (i, val) {

    if ($(this).prop("checked")) {

      $(this).closest("tr").addClass("highlighted selected");

    }

  });

 

In the below rule the last script shown is executed in the second transfer data, the first one clears the script data label in case it has previously been set.


You can then use the for selected rows condition to do what you need to with the data:
 

 

View original
Did this topic help you find an answer to your question?

3 replies

Forum|alt.badge.img+7
  • Nintex Employee
  • 40 replies
  • Answer
  • June 19, 2023

The above effect can be achieved with the following scripts:

It is worth noting that values can be multi selected as well if the allow multiple selection option is set in the properties of the list view

 

/*

Add an unbound column to the list with the following html in the text property of the data label.

*/

<input type="checkbox" class="custom-box"/>


 

/*

Add the below javascript to a data label via an expression. Execute this script on form Init

*/

const targetNode = document.getElementsByClassName("grid-body-content")[0];

const config = { attributes: true, childList: true, subtree: true };

const callback = function (mutationsList, observer) {

  for (const mutation of mutationsList) {

    if (mutation.type === "attributes") {

      var contentTable = $(".selected");

      $(contentTable)

        .find(".custom-box")

        .each(function (i, val) {

          $(this).prop("checked", true);

        });

    }

  }

};

const observer = new MutationObserver(callback);

observer.observe(targetNode, config);

 

/*

Execute the below script when a button is clicked, this selects the row.

*/

var contentTable = $("span[name='dlblScript']")

  .closest(".grid")

  .find(".grid-content-table")[0];

$(contentTable)

  .find(".custom-box")

  .each(function (i, val) {

    if ($(this).prop("checked")) {

      $(this).closest("tr").addClass("highlighted selected");

    }

  });

 

In the below rule the last script shown is executed in the second transfer data, the first one clears the script data label in case it has previously been set.


You can then use the for selected rows condition to do what you need to with the data:
 

 

Translate

MillaZ
Nintex Employee
Forum|alt.badge.img+21
  • Nintex Employee
  • 671 replies
  • June 26, 2023

Hi @Amar1 
Did this reply solve your question? 

Translate

Arvind Kumar
Forum|alt.badge.img+1

@NicS , well explained :)

Translate

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie Settings