Sometimes there are operations that are not feasible or hardly feasible on K2. But that we can do via JQuery, only we need to store in a K2 control the result that the JQuery code returns. How to do it?  😕  

Let’s imagine this case: We have a list view containing the list of students of a class, and we want to display the first three students of a list without user interaction after loading the view. As below:

• How to do it without user interaction?  😯 
• Answer: By writing in a K2 control via JQuery.  😉

We will use JQuery and we will do it in two steps:

1. Retrieve the first three rows of the list view
2. Insert the retrieved rows in a K2 control (DataLabel)
3. Trigger the JQuery code snippet

Let’s go !!!  😎

1. Retrieve the first three rows of the list view

First we should add a DataLabel on the view to identify the view (in our case we will call it dl_FirstStudentName). Then from this Data Label we will use this piece of code :

a) Recovery of the 1^st line

[pastacode lang=”java” manual=”%24(‘span%5Bname%3D%22dl_FirstStudentName%22%5D’).closest(‘.grid-toolbars’).siblings(‘.grid-body’).find(‘.grid-body-content%20tr%3Afirst%20td%3Afirst%20span’).text()” message=”Récupération de la 1er ligne” highlight=”” provider=”manual”/]

 

b) Recovery of the 2^nd line

[pastacode lang=”java” manual=”%24(‘span%5Bname%3D%22dl_FirstStudentName%22%5D’).closest(‘.grid-toolbars’).siblings(‘.grid-body’).find(‘.grid-body-content%20tr%3Anth-child(2)%20%20td%3A%20first%20span’).text()” message=”Récupération de la 2ième ligne” highlight=”” provider=”manual”/]

 

c) Recovery of the 3^rd line

[pastacode lang=”java” manual=”%24(‘span%5Bname%3D%22dl_FirstStudentName%22%5D’).closest(‘.grid-toolbars’).siblings(‘.grid-body’).find(‘.grid-body-content%20tr%3Anth-child(3)%20%C2%A0td%3A%20first%20span’).text()” message=”Récupération de la 3ième ligne” highlight=”” provider=”manual”/]

 

2. Insert the retrieved rows in K2 control (DataLabel) :

Here is the JQuery code snippet to insert text into a DataLabel :

[pastacode lang=”java” manual=”%24(%22%5Bname%3D’dl_FirstStudentName’%5D%22).SFCLabel(‘option’%2C%20’text’%2C%20XXXXX)%3B” message=”Insérer du texte dans un Data Label” highlight=”” provider=”manual”/]

The value XXXXX will be replaced by the recovery code of the first three lines which will give us the following code:

[pastacode lang=”markup” manual=”%3Cscript%3E%24(%22%5Bname%3D’dl_FirstStudentName’%5D%22).SFCLabel(‘option’%2C%20’text’%2C%20%0A’1-)%20’%20%2B%20%24(‘span%5Bname%3D%22dl_FirstStudentName%22%5D’).closest(‘.grid-toolbars’).siblings(‘.grid-body’).find(‘.grid-body-content%20tr%3Afirst%20td%3Anth-child(2)%20span’).text()%20%2B%20%22%5Cn%22%20%2B%20%0A’2-)%20’%20%2B%20%24(‘span%5Bname%3D%22dl_FirstStudentName%22%5D’).closest(‘.grid-toolbars’).siblings(‘.grid-body’).find(‘.grid-body-content%20tr%3Anth-child(2)%20td%3Anth-child(2)%20span’).text()%2B%20%22%5Cn%22%20%2B%20%0A’3-)%20’%20%2B%20%3Cscript%3E%24(‘span%5Bname%3D%22dl_FirstStudentName%22%5D’).closest(‘.grid-toolbars’).siblings(‘.grid-body’).find(‘.grid-body-content%20tr%3Anth-child(3)%20td%3Anth-child(2)%20span’).text())%3B%3C%2Fscript%3E%0A” message=”” highlight=”” provider=”manual”/]

Let’s insert on our view a Data Label (named dl_JQuery in our case), then create an expression containing expression below this value:

3. Trigger the JQuery code snippet

Cette phase nous permet lancer l’exécution de notre code, pour ce faire nous utiliserons une règle sur K2 :

First transfer data is used to empty the Data Label dl_JQuery

Second transfer data is used to empty the Data Label dl_JQuery

So we can call our rule when initializing the view:

We obtain this result