Lorsque vous avez trop d’éléments sur une vue de type liste éditable, si vous vous trouvez en bas de la page, il devient problématique de pouvoir ajouter, modifier ou supprimer un élément car les toolbars « Add », « Edit », « Delete » et « Save » ne sont plus visibles. Vous êtes obligé de revenir en haut de la page pour les voir.

Dans cet article nous allons vous montrer comment faire un menu détaché pour pallier à ce problème.

L’objectif :

Nous allons vous montrer comment faire un menu détaché sur une vue liste K2.

Vous allez créer un menu fixe qui apparaîtra lorsque vous allez défiler vers le bas de la page et qui disparaîtra lorsque vous seriez en haut de la page, vous permettant ainsi de faire vos actions (Add, Edit, Delete, Save) sur la vue.

Alors prêt pour l’aventure ? Nous allons vous montrer comment réaliser cela à travers un exemple.

Vous auriez à la fin de cet article le résultat suivant :

Vue liste avec menu détaché.

1. Créer une vue liste

Pour cet exemple nous avons créé une vue liste qui contiendra une liste de noms et prénoms.

Créer un SmartObject de type smartBox.

Puis designer une vue à partir de ce SMO. Ensuite insérer beaucoup d’éléments dans cette vue de sorte à pouvoir scroller la page. Vous auriez ce résultat :

Vue list K2

2. Créer un formulaire

Créer un formulaire et insérer la vue récemment créée dans ce formulaire.

  • Créer 3 datalabels : dl_ScriptHtml, dl_ScriptJS1, dl_ScriptJS2.
  • Puis créer 3 expressions : Exp_ScriptHtml, Exp_ScriptJs1, Exp_ScriptJS2 :
    • Dans la 1ère expression : Exp_ScriptHtml, insérer le script suivant :
      <div id="fixedButtons" style="position:fixed; top: 0; padding: 15px; background: rgb(225, 228, 217); border-radius:10px; border: 1px solid black; display:none; overflow: hidden; left:15%;"><a class="toolbar-button toolbar-button-inline add" ><span class="button-l" /><span class="button-c"><span class="button-icon" /><span class="button-text">Add</span></span><span class="button-r" /></a><a class="toolbar-button toolbar-button-inline edit"><span class="button-l" /><span class="button-c"><span class="button-icon" /><span class="button-text">Edit</span></span><span class="button-r" /></a><a class="toolbar-button toolbar-button-inline delete"><span class="button-l" /><span class="button-c"><span class="button-icon" /><span class="button-text">Delete</span></span><span class="button-r" /></a><a class="toolbar-button toolbar-button-inline save"><span class="button-l" /><span class="button-c"><span class="button-icon" /><span class="button-text">Save</span></span><span class="button-r" /></a><a class="toolbar-button toolbar-button-inline undocheckout"><span class="button-l" /><span class="button-c"><span class="button-icon" /><span class="button-text">Cancel</span></span><span class="button-r" /></a><a class="toolbar-button toolbar-button-inline checkout"><span class="button-l" /><span class="button-c"><span class="button-icon" /><span class="button-text">Export</span></span><span class="button-r" /></a><a class="toolbar-button toolbar-button-inline scrollup"><span class="button-l" /><span class="button-c"><span class="button-text">▲ Scroll Up</span></span><span class="button-r" /></a><a class="toolbar-button toolbar-button-inline scrolldown"><span class="button-l" /><span class="button-c"><span class="button-text">▼ Scroll Down</span></span><span class="button-r" /></a></div>
      Script du menu détaché.

       

    • Dans la 2eme expression : Exp_ScriptJs1, insérer le script suivant
      <script>$("#fixedButtons").appendTo("body");$("#fixedButtons .add").click(function(){$(".row:nth-child(1):visible .toolbar-wrapper a.add")[0].click();});$("#fixedButtons .edit").click(function(){$(".row:nth-child(1):visible .toolbar-wrapper a.edit")[0].click();});$("#fixedButtons .delete").click(function(){$(".row:nth-child(1):visible .toolbar-wrapper a.delete")[0].click();});$("#fixedButtons .save").click(function(){$(".row:nth-child(1):visible .toolbar-wrapper a.save")[0].click();});$("#fixedButtons .undocheckout").click(function(){$(".row:nth-child(1):visible .toolbar-wrapper a.undocheckout")[0].click();});$("#fixedButtons .checkout").click(function(){$(".row:nth-child(1):visible .toolbar-wrapper a.checkout")[0].click();});$("#fixedButtons .scrollup").click(function(){$("html, body").animate({scrollTop: 0 }, 100);});$("#fixedButtons .scrolldown").click(function(){$("html, body").animate({scrollTop: $(document).height() }, 100);});</script>
    • Dans la 3eme expression : Exp_ScriptJs2, insérer le script suivant
      <script>$(window).scroll(function (event) { var scroll = $(window).scrollTop(); var toolbarPosition = 10;if (!$(".row:nth-child(1):visible .toolbar-wrapper .add").is(':visible')) {$("#fixedButtons .add").hide();}if (!$(".row:nth-child(1):visible .toolbar-wrapper .edit").is(':visible')) {$("#fixedButtons .edit").hide();}if (!$(".row:nth-child(1):visible .toolbar-wrapper .delete").is(':visible')) {$("#fixedButtons .delete").hide();}if (!$(".row:nth-child(1):visible .toolbar-wrapper .undocheckout").is(':visible')) {$("#fixedButtons .undocheckout").hide();}if (!$(".row:nth-child(1):visible .toolbar-wrapper .checkout").is(':visible')) {$("#fixedButtons .checkout").hide();}if (scroll > toolbarPosition){$("#fixedButtons").fadeIn();}else {$("#fixedButtons").fadeOut();} });</script>

3.  Configuration des rules

a.  Créer une unbound rule, la nommer ‘_LoadData’. (Cliquer sur ce lien pour savoir comment créer une unbound rule sur K2)

Remarque :  il faut exécuter les 3 scripts, suivant un ordre (avec les Then)

Ainsi dans l’unbound Rule, faire 3 transferts data dans cette ordre :

  • 1e transfert data : transférer l’expression ‘Exp_ScriptHtml’ dans le datalabel dl_ScriptHtml
  • 2e transfert data : transférer l’expression ‘Exp_ScriptJs1’ dans le datalabel dl_ScriptJs1
  • 3e transfert data : transférer l’expression ‘Exp_ScriptJs2’ dans le datalabel dl_ScriptJs2

4. Sauvegarder

Remarque :

  1. Si votre vue ne contient pas le bouton Save, vous pouvez enlever le bouton save du menu detaché comme suite :
    •  Dans le script1 html, supprimer cette partie :

<a class=”toolbar-button toolbar-button-inline save”><span class=”button-l” /><span class=”button-c”><span class=”button-icon” /><span class=”button-text”>Save</span></span><span class=”button-r” /></a>

    • Dans le dernier script supprimer cette partie :

$(“#fixedButtons .save”).click(function(){$(“.row:nth-child(1):visible .toolbar-wrapper a.save”)[0].click();});

2. Si votre vue liste se trouve en 3e position sur la page modifier votre script comme ceci :

“.row:nth-child(1):visible” par “.row:nth-child(2):visible”

 

On en profite pour remercier Sergii, qui est le créateur de cette belle customisation 😍.

Maintenant, à vous de jouer  😉

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.