Skip to main content

 

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.

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
  .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:
 

 

Hi @Amar1 
Did this reply solve your question? 

@NicS , well explained :)

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings