When you have too many items on a list view, if you are at the bottom of the page, it becomes problematic to be able to add, modify or delete an item because the toolbars “Add”, “Edit”, “Delete” and “Save” are no longer visible. You are required to scroll to the top of the page to see them.

In this article we will show you how to make a detached menu to solve this problem.

The objective:

We will show you how to make a detached menu on a K2 list view.

You will create a fixed menu that will appear when you scroll down the page and disappear when you are at the top of the page, allowing you to do your actions (Add, Edit, Delete, Save) on the view.

So ready for the adventure? We will show you how to do this through an example.

At the end of this article, you would have the following result:

1. Create a list view

For this example we have created a list view that will contain a list of first and last names.

Create a SmartObject of the smartBox type.

Then design a view from this SMO. Then insert many elements in this view so that you can scroll the page. You would have this result:

2. Create a form

• Create a form and insert the recently created view into this form.
• Then create 3 datalabels : dl_ScriptHtml, dl_ScriptJS1, dl_ScriptJS2.
• Then create 3 expressions: Exp_ScriptHtml, Exp_ScriptJs1, Exp_ScriptJS2 :
  • In the first expression  : Exp_ScriptHtml, insert the following script:

    <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é.
  • In the 2nd expression: Exp_ScriptJs1, insert the following script

    <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>
  • In the 3rd expression: Exp_ScriptJs2, insert the following script

    <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 of rules

a.  Create an unbound rule: name the “_LoadData” (click on this link to learn how to create an unbound rule on K2).

Note: you must execute the 3 scripts, in an order (with the Then)

So in the unbound Rule, do 3 data transfers in this order:

• 1st data transfer: transfer the expression’Exp_ScriptHtml’ in the datalabel dl_ScriptHtml
• 2nd data transfer: transfer the expression’Exp_ScriptJs1′ in the datalabel dl_ScriptJs1
• 3rd data transfer: transfer the expression’Exp_ScriptJs2′ in the datalabel dl_ScriptJs2

4. Save

Note :

1. If your view does not contain the Save button, you can remove the Save button from the remote menu as follows:
   • In script1 html, delete this part:

<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>

• • In the last script delete this part:

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

2. If your list view is in 3rd position on the page edit your script like this:

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

 

Big thanks to Sergii, which is the creator of this great feature !