Instant Estimate +44(0)1908738254

Team up with our RPA strategy and tech specialists for maximum automation impact

Find out more
Harness the power of UiPath in your business.

Save money and spend more time on priority work.

Book consultation

Let's choose, design and deploy a process automation solution for your business.

Find out more

Let's analyse your business to discover opportunities for innovation and automation.

Find out more

Begin your business transformation journey

Book consultation

Automate where it matters most. Scale to solve challenges in every area

Find out more

Equip people with user-friendly solutions that save time and make work easier

Find out more

Which business problem
can we solve first?

Book consultation
28 February 2020

Highlight Edited Record on K2 List View

K2 does not provide out of box functionality to highlight an edited record on list view. Whenever you edit a record and save it K2 does not highlight the record you edited after a list refresh. We can overcome this issue by using combination of jQuery and view rules.

This article will cover the steps on how to highlight the edited row after list refresh with the help of jQuery.

Highlight Edited Row On K2 List View using jQuery - Step 1

Step 01

  • Edit the SmartForm, select the view and give appropriate name to the list view using Properties pane as shown below:Highlight Edite Row On K2 List View using jQuery - Step 1.1

Step 02

  • Add three data labels to the list view as shown below:

Note – Please use the same names for the data labels as they have been used in scripts. Otherwise make sure you are also updating the data label names in the scripts as well. The data label should have unique names in case you have multiple list views on the form and you want to implement this functionality for all the list views.

No Data Label Name Literal Visible
1 DataLabelScript True False
2 DataLabelIsHighlightRow False False
3 DataLabelEditedRowNumber False False

Step 03

  • Edit the list view
  • Edit the When ToolBar Button Editis Clicked rule and add below actions to it
  1. Add transfer data action and set DataLabelScript = Empty
  2. Add transfer data action and set below jQuery code to DataLabelScript. This script will set the below values to the data labels on the list viewsHighlight Edited Row On K2 List View using jQuery - Step 3

Highlight Edited Row On K2 List View using jQuery - Step 3.1

DataLabelIsHighlightRow = True

DataLabelEditedRowNumber = edited row number of the list view

<script>var EditedRowNumber = 0;var Rows = $(‘[name=”CityStateCensusView”]’).find(‘.grid-content-table.zebra-stripes’).children(“tbody”).children(“tr”);for (i = 0; i < Rows.length ; i++){ if($(Rows[i]).hasClass(‘highlighted selected’) || $(Rows[i]).hasClass(‘selected’)) { EditedRowNumber = i; }}var IsHighlightRowClicked = “Controllers/Controller/Controls/Control[@Name=’DataLabelIsHighlightRow’]”;var IsHighlightRowClickedController = window.$sn(window.viewControllerDefinition, IsHighlightRowClicked);var IsHighlightRowClickedController_Id = IsHighlightRowClickedController.getAttribute(“ID”);currentControl = window.$sn(viewControllerDefinition, “Controllers/Controller/Controls/Control[@ID='” + IsHighlightRowClickedController_Id + “‘][Properties/Property/Name/text()=’GetValue’]”);var controlInfoObj = new window.PopulateObject(null, “True”, IsHighlightRowClickedController_Id);window.executeControlFunction(currentControl, “SetValue”, controlInfoObj);var EditedRowNumberClicked = “Controllers/Controller/Controls/Control[@Name=’DataLabelEditedRowNumber’]”;var EditedRowNumberClickedController = window.$sn(window.viewControllerDefinition, EditedRowNumberClicked);var EditedRowNumberClickedController_Id = EditedRowNumberClickedController.getAttribute(“ID”);currentControl = window.$sn(viewControllerDefinition, “Controllers/Controller/Controls/Control[@ID='” + EditedRowNumberClickedController_Id + “‘][Properties/Property/Name/text()=’GetValue’]”);var controlInfoObj = new window.PopulateObject(null, EditedRowNumber, EditedRowNumberClickedController_Id);window.executeControlFunction(currentControl, “SetValue”, controlInfoObj);</script>

Step 04

  • Add a rule When the View executes List refresh and add below mentioned actions. This rule will check value of DataLabelIsHighlightRow and executes jQuery script to highlight the edited the record by the user.Highlight Edited Row On K2 List View using jQuery - Step 4
  1. Add advanced condition as shown below.Highlight Edited Row On K2 List View using jQuery - Step 4.1
  2. Add transfer data action and set DataLabelScript = Empty
  3. Add transfer data action and set below jQuery code to DataLabelScript. This script will set DataLabelIsHighlightRow = False, get the value of DataLabelEditedRowNumber and highlights the specific record.

<script>$(document).ready(function () { setTimeout(function () { HighlightEditedRow(); }, 800); function HighlightEditedRow() { var EditedRowNumber = $(‘[name=CityStateCensusView]’).children(“.grid-toolbars”).find(“span[name=’DataLabelEditedRowNumber’]”).html(); var Rows = $(‘[name=”CityStateCensusView”]’).find(‘.grid-content-table.zebra-stripes’).children(“tbody”).children(“tr”); for (i = 0; i < Rows.length ; i++) { if(i == EditedRowNumber) { $(Rows[i]).addClass(‘highlighted selected’); } } var IsHighlightRowClicked = “Controllers/Controller/Controls/Control[@Name=’DataLabelIsHighlightRow’]”; var IsHighlightRowClickedController = window.$sn(window.viewControllerDefinition, IsHighlightRowClicked); var IsHighlightRowClickedController_Id = IsHighlightRowClickedController.getAttribute(“ID”); currentControl = window.$sn(viewControllerDefinition, “Controllers/Controller/Controls/Control[@ID='” + IsHighlightRowClickedController_Id + “‘][Properties/Property/Name/text()=’GetValue’]”); var controlInfoObj = new window.PopulateObject(null, “False”, IsHighlightRowClickedController_Id); window.executeControlFunction(currentControl, “SetValue”, controlInfoObj); } });</script>

Step 05

  • Edit the list view
  • Edit the On CityStates.VWI – (When ToolBar Button Edit is Clicked)subview, when Save Button is Clicked rule and add below actions to itHighlight Edited Row On K2 List View using jQuery - Step 5

Highlight Edited Row On K2 List View using jQuery - Step 5.1

  • Add execute view method action and call List refresh view method as shown above

Step 06

  • After following all the above-mentioned steps, it is now time to view/test the changes.
  • Browse the application/SmartForm.
  • In this example, we are editing fourth record on the first page. After saving the record, K2 will highlight the fourth record after list refresh.Highlight Edited Row On K2 List View using jQuery - Step 6

Things to note:

  • This functionality will only work on the first page of the list view and not for the other pages.
  • You also need to implement the Retain a K2 List View Page Number Using jQuery functionality if you want to highlight the row on any page of the list view.

If you need further technical advice or support on K2 or other low-code development platforms, get in-touch with one of our experts today.