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?
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> Previousâ;
button_prev.id = âbutton_prevâ;
var button_next = document.createElement(âaâ);
button_next.className = âkn-buttonâ;
button_next.innerHTML = âNext <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 < 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
}