Solved

Dynamically change the position of listview in smartform


Badge +8

Given:

1 smartform / 3 listview / 2 buttons

   Form (button1 and button2)

     listview2

     listview1

     listview3

Scenario:

  User click button1. The order of listview must be

    listview1

    listview2

    listview3

 

 User click button2. The order of listview must 

    listview3

    listview2

    listview1

 

Any ideas to help or done this scenario in k2.

 

Really appreciate:

Dabuskol

 

 

icon

Best answer by dchersels 28 June 2021, 23:16

View original

4 replies

Hello @Dabuskol 


 


This is how I would go about achieving the result you want. Since views can be reused i.e used in multiple forms, I would create two separate forms, and each form will have the order of the Listviews. So for example:


 


Button 1: Add a Rule "Navigate to another form (Form 1)"


Button 2: Add a Rule "Navigate to another from (Form 2)"


 


Form 1 will contain:


 listview1


 listview2


 listview3


(In that order)


 


Form 2 contain: 


 listview3


 listview2


 listview1


(in that order)


 


Therefore you will navigate between forms and it displays the views in the order you want.


 


I hope this helps, and if it does, please mark as complete

If you are OK using a some JavaScript and can't create two separate forms, the following might help:


var listview1 = $('div[name="listview1"]').closest('div[class="row"]');


var listview2 = $('div[name="listview2"]').closest('div[class="row"]');


var listview3 = $('div[name="listview3"]').closest('div[class="row"]');


 


/* Logic to Determine the new order */


if(Button 1)  /* Order is listview1- listview2 - listview3 */


{


    listview1.parent().prepend(listview1);


    listview2.insertAfter(listview1);


    listview3.insertAfter(listview2);


}


else if(Button 2) /* Order is listview3 - listview2 - listview1 */


{


    listview3.parent().prepend(listview3);


    listview2.insertAfter(listview3);


    listview1.insertAfter(listview2);


}


else /* Order is listview2 - listview1 - listview3 */


{


    listview2.parent().prepend(listview2);


    listview1.insertAfter(listview2);


    listview3.insertAfter(listview2);


}


 


Disclaimer: I didn't fully test this code, I just tested the commands in the browser console, so you may need to tweak some of it and of course evaluate the conditions to determine the button clicked.

Badge +8

Thanks! This is my initial solution but I need a more dynamic as listviews might increase in the future as requirements progress.

Badge +8
Thanks! It is working.

Reply