Retain a K2 List View Page Number Using jQuery

K2 doesn’t provide out-of-the-box functionality to retain the list view page number after a list is refreshed. Whenever a user edits and saves a record on any given page, the user will then be navigated back to first page of the list view.  We can overcome this frustrating issue by using a combination of jQuery and view rules.

This article will take you through a step-by-step solution on how to retain the list view page number after a list refresh with the help of jQuery.

K2 Automated Testing Software

BenchQA allows full test automation of K2, including fully automated K2 SmartForms and K2 Workflow testing. It promotes test driven development for K2 and ensures continued quality assurance for K2 solutions. Easily apply changes to test cases to accommodate changes to K2 apps and ensure all apps are regression tested to avoid defects and assure continuous quality.

DOWNLOAD NOW

BenchQA Logo

 

Free K2 Five Upgrade Review

 

Step 1

Start by editing the SmartForm – select the view and give an appropriate name to the list view using the Properties:

Step 2

Add four data labels to the list view:

Note – It is best practice to use the same name for the data labels as have been used in the scripts.  However, if you wish to change the data label names, you will need to ensure that you also update the data label names in the scripts. Each of the data labels should have a unique name, this is to enable you to have multiple list views on the form and to provide functionality to view ‘all lists’.

Step 3

Edit the list view – On MyBlog.CityStates.VWI – (When ToolBar Button Edit is Clicked) subview, when Save Button is Clicked rule and add below actions to it.

A. Disable then close as subview or subform action

B. Add transfer data action and set DataLabelScript = Empty

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

    • DataLabelIsNavigate = True
    • DataLabelCurrentPageNumber = current page of the list view

D. Add execute view method action and call List refresh view method as shown:

<script>var currentPageNumber = $(‘[name=CityStateCensusView]’).children(“.grid-footer”).find(“.grid-paging-control”).children(“.input-control.text-input.small”).find(“.input-control-wrapper”).children(‘input:eq(0)’).attr(‘value’);var currentPageNumberClicked = “Controllers/Controller/Controls/Control[@Name=’DataLabelCurrentPageNumber’]”;var currentPageNumberClickedController = window.$sn(window.viewControllerDefinition, currentPageNumberClicked);var currentPageNumberClickedController_Id = currentPageNumberClickedController.getAttribute(“ID”);currentControl = window.$sn(viewControllerDefinition, “Controllers/Controller/Controls/Control[@ID='” + currentPageNumberClickedController_Id + “‘][Properties/Property/Name/text()=’GetValue’]”);var controlInfoObj = new window.PopulateObject(null, currentPageNumber, currentPageNumberClickedController_Id);window.executeControlFunction(currentControl, “SetValue”, controlInfoObj);var IsNavigateClicked = “Controllers/Controller/Controls/Control[@Name=’DataLabelIsNavigate’]”;var IsNavigateClickedController = window.$sn(window.viewControllerDefinition, IsNavigateClicked);var IsNavigateClickedController_Id = IsNavigateClickedController.getAttribute(“ID”);currentControl = window.$sn(viewControllerDefinition, “Controllers/Controller/Controls/Control[@ID='” + IsNavigateClickedController_Id + “‘][Properties/Property/Name/text()=’GetValue’]”);var controlInfoObj = new window.PopulateObject(null, “True”, IsNavigateClickedController_Id);window.executeControlFunction(currentControl, “SetValue”, controlInfoObj);</script><script>var currentPageNumber = $(‘[name=AdminCountriesView]’).children(“.grid-footer”).find(“.grid-paging-control”).children(“.input-control.text-input.small”).find(“.input-control-wrapper”).children(‘input:eq(0)’).attr(‘value’);var currentPageNumberClicked = “Controllers/Controller/Controls/Control[@Name=’DataLabelCurrentPageNumber’]”;var currentPageNumberClickedController = window.$sn(window.viewControllerDefinition, currentPageNumberClicked);var currentPageNumberClickedController_Id = currentPageNumberClickedController.getAttribute(“ID”);currentControl = window.$sn(viewControllerDefinition, “Controllers/Controller/Controls/Control[@ID='” + currentPageNumberClickedController_Id + “‘][Properties/Property/Name/text()=’GetValue’]”);var controlInfoObj = new window.PopulateObject(null, currentPageNumber, currentPageNumberClickedController_Id);window.executeControlFunction(currentControl, “SetValue”, controlInfoObj);var IsNavigateClicked = “Controllers/Controller/Controls/Control[@Name=’DataLabelIsNavigate’]”;var IsNavigateClickedController = window.$sn(window.viewControllerDefinition, IsNavigateClicked);var IsNavigateClickedController_Id = IsNavigateClickedController.getAttribute(“ID”);currentControl = window.$sn(viewControllerDefinition, “Controllers/Controller/Controls/Control[@ID='” + IsNavigateClickedController_Id + “‘][Properties/Property/Name/text()=’GetValue’]”);var controlInfoObj = new window.PopulateObject(null, “True”, IsNavigateClickedController_Id);window.executeControlFunction(currentControl, “SetValue”, controlInfoObj);</script>

Step 4

Add a rule When the View executes List refresh and add below mentioned actions. This rule will check value of DataLabelIsNavigate and executes jQuery script to navigate to current page number where user is editing the record:

A.      Add advanced condition as shown:

B.  Add transfer data action and set DataLabelScript = Empty

C.  Add transfer data action and set below jQuery code to DataLabelScript. This script will set DataLabelIsNavigate = False, get the value of DataLabelCurrentPageNumber which we have set in previous step and navigate control to that page.

<script>var IsNavigateClicked = “Controllers/Controller/Controls/Control[@Name=’DataLabelIsNavigate’]”;var IsNavigateClickedController = window.$sn(window.viewControllerDefinition, IsNavigateClicked);var IsNavigateClickedController_Id = IsNavigateClickedController.getAttribute(“ID”);currentControl = window.$sn(viewControllerDefinition, “Controllers/Controller/Controls/Control[@ID='” + IsNavigateClickedController_Id + “‘][Properties/Property/Name/text()=’GetValue’]”);var controlInfoObj = new window.PopulateObject(null, “False”, IsNavigateClickedController_Id);window.executeControlFunction(currentControl, “SetValue”, controlInfoObj);var currentPageNumber = $(‘[name=CityStateCensusView]’).children(“.grid-toolbars”).find(“span[name=’DataLabelCurrentPageNumber’]”).html();$(‘[name=CityStateCensusView]’).children(“.grid-footer”).find(“.grid-paging-control”).children(“.input-control.text-input.small”).find(“.input-control-wrapper”).children(‘input:eq(0)’).val(currentPageNumber);$(‘[name=CityStateCensusView]’).children(“.grid-footer”).find(“.grid-paging-control”).children(“.input-control.text-input.small”).find(“.input-control-wrapper”).children(‘input:eq(0)’).focus();var IsDLCloseSubViewClicked = “Controllers/Controller/Controls/Control[@Name=’DataLabelCloseSubView’]”;var IsDLCloseSubViewClickedController = window.$sn(window.viewControllerDefinition, IsDLCloseSubViewClicked);var IsDLCloseSubViewClickedController_Id = IsDLCloseSubViewClickedController.getAttribute(“ID”);currentControl = window.$sn(viewControllerDefinition, “Controllers/Controller/Controls/Control[@ID='” + IsDLCloseSubViewClickedController_Id + “‘][Properties/Property/Name/text()=’GetValue’]”);var controlInfoObj = new window.PopulateObject(null, “True”, IsDLCloseSubViewClickedController_Id);window.executeControlFunction(currentControl, “SetValue”, controlInfoObj);</script>

D.  Add transfer data action and set DataLabelScript = Empty

E.  Add transfer data action and set below jQuery code to DataLabelScript. This script will remove the focus of the page number textbox on the list view.

<script>$(‘[name=CityStateCensusView]’).children(“.grid-footer”).find(“.grid-paging-control”).children(“.input-control.text-input.small”).find(“.input-control-wrapper”).children(‘input:eq(0)’).blur();</script>

Step 5

Add a rule When DataLabelCloseSubView is Changed and add below mentioned actions. This rule will close the subview and set DataLabelCloseSubView = False

Step 6

After following all the above steps, it is now time to view/test the changes.

Browse the application/SmartForm.

In this example, we are editing a record on the third page. After saving the record, K2 will navigate the flow back to the third page of the list view instead of first page after list refresh.

Need further technical advice or support?

Contact Us

You may also like

Please complete the below form and a member of the Velocity IT team will call you back.



INSTANT ESTIMATE