Include native "Next" navigation on Individual Detail Views

1. Native Knack "Next" Button included as option for individual detail views. Clicking the "next" button will load the next item in the table (if the detail is part of a table)

This would be a really huge feature for any Sales team considering to use knack as a prospecting CRM. Having the ability to load the next lead with one click, instead of having to go back to the table, then load the next lead, saves a bunch of time when you're sifting through hundreds of leads per day.

I'm currently using knack to build a custom CRM for my sales team and this is the biggest bottleneck I'm looking at right now.

Alternatively, is there an easy way to perform this with existing functionality?


Hi all,

Although this is not a native solution, this custom code works fine for me -  thanks to David Roizenman for the code. See the attached screenshot form the CRM section within my app.

LazyLoad.js(['https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js']);
$(document).on("knack-view-render.view_XX", function(event, view, data) {
  $( document ).ready(function() {
  if(window.location.href.indexOf("search") > -1) {
    var url = window.location.href;
    var searchTerm = url.substring(url.indexOf("search=")+7);
    Cookies.set('searchURL','http://APPURL/?view_XX_search='+ searchTerm); 
  }
    else {
      Cookies.set('searchURL','APPURL');
    }
  });
});
// In case you want the 'back to table' button to return to the previous search
$(document).on('knack-scene-render.scene_XX', function(event, scene) {
  $('.kn-view.kn-back-link a.ang-link').attr('href',Cookies.get('searchURL'));
});

//Next/prev buttons
var arry_table =

//view_XX is the view that consists of the table, you need to add a link to view more details for the table
$(document).on(‘knack-view-render.view_XX’, function(event, view, data) {
arry_table = data
})

//view_YY is the view that is the ‘view more detail’ from the table
$(document).on(‘knack-view-render.view_XX’, function (event, view,data) {
var button_prev = document.createElement(“a”);
button_prev.className = ‘kn-button’;
button_prev.innerHTML = ‘<i class=“fa fa-chevron-circle-left”></i>&nbsp;&nbsp;Previous’;
button_prev.id = ‘button_prev’;
var button_next = document.createElement(“a”);
button_next.className = ‘kn-button’;
button_next.innerHTML = ‘Next&nbsp;&nbsp;<i class=“fa fa-chevron-circle-right”></i>’;
button_next.id = ‘button_next’;

//Place Buttons somewhere
var body = document.getElementById(view.key);
body.appendChild(button_prev)
body.appendChild(button_next)
     

for (x =0; x &lt; arry_table.length; x ++ ) {
    if (arry_table[x].id == data.id) {
      if (arry_table[x-1] == undefined) {
        $('#button_prev').attr('href',Cookies.get('searchURL'));
      }
      else {
        button_prev.addEventListener("click", function (){
          change_record(data, 'Prev')
        });
      }
      if (arry_table[x+1] == undefined) {
        $('#button_next').attr('href',Cookies.get('searchURL'));
      }
      else {
        button_next.addEventListener("click", function (){
          change_record(data, 'Next')
        });
      }
    }
}

});

function change_record(current_record, move_direction){
for (x =0; x < arry_table.length; x ++ ) {
if (arry_table.id == current_record.id) {
console.log(arry_table[x-1]);
if (move_direction == ‘Next’) {
current_url = window.location.href
new_url= current_url.replace(current_record.id, arry_table[x+1].id)
window.location.href = new_url
}

        else if (move_direction == 'Prev') {
            current_url = window.location.href
            new_url= current_url.replace(current_record.id, arry_table[x-1].id)
            window.location.href = new_url
        }
    }
}

}

We also need this feature.   -   it would be a big time saver when updating information. 

I would also like this!

I would also like to see this - Thanks!

 

Does anyone know a work around for this?

This would REALLY help us out

This would really help us out - the perfect situation would be as described by Omar: 

1. Start from a Table of records which you need to go through. 

2. Click on the top record to go to the details page of that record. 

3. Within that records details page, have a next/previous button which will allow you to skip to the next record down in the table. 

Can anyone help me with a "load the next item in the list" button?

Or-- can we push to get th prev/next buttons built natively? 

Also in need of this feature, are there any known workarounds?

This would be a very useful Live App feature for UX. tks! :muscle::muscle::muscle:

1 Like