I'd like to have a next and previous button so a person doesn't need to keep going back between table and details. How could I accomplish this with JavaScript?
bump this
Is this code just added into the javascript in the main Api Settings?
And does it require any modification for each App ?
Thanks
Only been using Knack a few weeks and not a coder.
Tks
Mick
This was very useful - but it should be native!!
Is there any way to get the buttons positioned above the view's fields / below the heading?
1 Like
Hi everyone,
This is amazing! I have a slightly different scenario where instead of viewing more details, the link in my table is to edit a form. This is working well, however the only issues is that I would have to hit the submit button first to save my entries, then hit the next. Is there anyway to combine these two, where hitting submit would automatically save the entry and go to the next one?
Thanks!!
Hey Guys, I had a thought about a possible workaround for the table length issue. Do you think it would be possible to use javascript to change the table length to a custom value of say '500' and then to hide the majority of the records beyond the number the a fixed number: 10, 25 etc.
Good to hear!
Just make sure that it keeps working after you’ve gone back and forth between records and table, and that it reverses back to raw APPURL when nothing in search. I remember having some troubles with it, and I think it might have been an issue with the >=.
Never mind. I was able to get it working by changing line 4 to:
if(window.location.href.indexOf("search") >= -1) {
Thanks again.
Thanks, David. I haven't worked with cookies before but yours seems like a superior solution. I'm having trouble getting the cookie to record the 'searchterm' when a filter is applied. It seems that my code is skipping that portion of code and moving to the else statement. When I inspect the cookie created does not contain that string. Any tips? Can you see what I might be doing wrong? Any help would be appreciated.
LazyLoad.js(['https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js']);
$(document).on("knack-view-render.view_140", 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://dog.knack.com/cat/?view_140_search='+ searchTerm);
}
else {
Cookies.set('searchURL','https://dog.knack.com/cat#dashboard/page/');
}
});
});
Here's what the code for the buttons looks like with the above added in:
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
}
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
}
}
}
}
If you change XX to the view number for your table where you have your search, and APPURL to the url of the app, this stores a cookie of the user's last filter, which you can use instead so the user not only gets redirected to parent, but also to their latest search.
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'));
});
So thankful to you both for sharing. This version will bounce back to the parent table page when it runs out of records. This way the user can just select the first record and continue with their work:
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
//Replace 'https//Parent_Table_URL' with your parent table URL.
$(document).on('knack-view-render.view_yy', function (event, view, data) {
var total_data;
var button_next = document.createElement("button");
button_next.innerHTML = "Next";
var button_prev =document.createElement("button");
button_prev.innerHTML = "Previous";
//Place Buttons somewhere
var body = document.getElementById(view.key);
body.appendChild(button_next)
body.appendChild(button_prev)
button_next.addEventListener("click", function (){
change_record(data, 'Next');
})
button_prev.addEventListener("click", function (){change_record(
data, 'Prev')})
if ( data.id === arry_table[arry_table.length - 1].id ) {
console.log("redirect");
window.location.href = 'https//Parent_Table_URL';
}
})
function change_record(current_record, move_direction){
var x;
for (x = 0; x < arry_table.length; x ++ ) {
if ( (current_record !== void 0 && arry_table[x] !== void 0) && (arry_table[x].id === current_record.id)) {
if (move_direction == 'Next') {
console.log(x);
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
}
}
}
}
Regarding filters: it seems to already work with filters for me. Haven’t tested with pre-set ones, but should work as well.
Just one. The page looks like this: http://drte.ch/54w8
Thanks.
Out of curiosity - all there multiple tables on the same page that will have this feature?
I'm getting close to working out a way to do this without the limitation of the table records, but multiple tables will add another wrinkle to account for.
I'm calling it for the night but I'll probably work on some over the weekend.
Nice work on the buttons and the removing of the buttons if unavailable to move on.
I've been able to find the filters that a User inputs - (view.filters.rules). Still digging for any pre-set filters for the table done thru Builder.
I've changed the buttons to conform with the Knack style and made the Previous/Next buttons disappear when at the beginning or end of the current table list, as a temporary fix.
//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) button_next.addEventListener("click", function (){change_record( data, 'Next')}) button_prev.addEventListener("click", function (){change_record( data, 'Prev')}) for (x =0; x < arry_table.length; x ++ ) { if (arry_table[x].id == data.id) { if (arry_table[x-1] == undefined) { $('#button_prev').hide(); } if (arry_table[x+1] == undefined) { $('#button_next').hide(); } } }})
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 } } }}
Thanks Bennet. I'll post my alterations when complete in case they are of use to anyone here.
Thanks! I'll try it out and let you know how it goes.
Its not pretty yet - Buttons are just standard HTML buttons and go at the end of the view.
Also there is currently not any handling of if you are at the the beginning or end of the list and try to continue - Shouldn't be hard to write in, just hadn't gotten around to it yet.
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_YY’, function (event, view,data) {var button_next = document.createElement("button"); button_next.innerHTML = "Next"; var button_prev =document.createElement("button"); button_prev.innerHTML = "Previous"; //Place Buttons somewhere var body = document.getElementById(view.key); body.appendChild(button_next) body.appendChild(button_prev) button_next.addEventListener("click", function (){change_record( data, 'Next')}) button_prev.addEventListener("click", function (){change_record( data, 'Prev')})})
function change_record(current_record, move_direction){
for (x =0; x < arry_table.length; x ++ ) { if (arry_table[x].id == current_record.id) { 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 } } }}