I was looking for a way to "Go Back" to the previous screen, in this case for a number of drill-down reports. The script inserts a button with go-back function to the current view, as determined by "view.key".
// Add go back button to a set of views
$(document).on("knack-view-render.any", function(event, view) {
var appviews=["view_32","view_43","view_62"];
var key=(view.key!=undefined)?view.key.toLowerCase().trim():"";
var l=appviews.length;
for (var x=0; x<l; x++) {
//Here is a simpler take where you have more control over the button placement.
//Just add this html to a rich text view after clicking on the html editor wherever you want a back button to appear.
/*<button id="back-button" type="button" style="padding: 0 10px; line-height: 22px;" class="kn-button">Back</button>*/
//Then add this to the js console.
$(document).on("knack-scene-render.any", function(event, scene) {
$("#back-button").click(function(){
console.log('button clicked');
window.history.back();});
});
I realise this is an old thread but thought someone might be able to assist.
Justin’s suggestion works perfectly, except that it takes up valuable screen real estate for one button.
I’d really like to insert a “permanent” BACK BUTTON as the first leftmost element on the kn-info-bar, pushing the bread crumb trail to the right of it, for every page. Below is a mock up of what I would like to achieve.
Can anyone suggest how I might achieve that? (bearing in mind the limit of my coding ability is to copy and paste from this forum)
ALTERNATELY - is there way to create a MENU BUTTON that acts as a BACK BUTTON? If so I could insert it as the first button on the menu above, and pretty much achieve the same outcome.
@Callum.Boase you did something similar to this with model popups - any thoughts on the above?
$(document).ready(function() {
// Function to add the Back button
function addBackButton() {
var breadcrumbContainer = $(‘.kn-info-bar .kn-crumbtrail’);
if (breadcrumbContainer.length && $('#back-button').length === 0) {
// Create the Back button element
var backButton = $('<button>')
.attr('id', 'back-button')
.text('Back')
.addClass('kn-button')
.css({
'background-color': '#f5f5f5', // Light gray background
'color': '#000', // Black text
'border': '1px solid #ddd', // Light border
'border-radius': '4px',
'padding': '8px 16px',
'cursor': 'pointer',
'font-size': '14px',
'margin-right': '10px',
'display': 'inline-block',
'visibility': 'visible' // Ensure visibility
})
.on('click', function() {
window.history.back();
});
// Prepend the Back button to the breadcrumb container
breadcrumbContainer.prepend(backButton);
}
}
// Use a MutationObserver to detect when the kn-crumbtrail element is added to the DOM
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length > 0) {
addBackButton(); // Try adding the button when changes are detected
}
});
});
// Observe the document body for changes (to detect when the breadcrumb is rendered)
observer.observe(document.body, { childList: true, subtree: true });
// Also try adding the button after a short delay
setTimeout(function() {
addBackButton(); // Force another attempt after 1 second
}, 1000); // 1-second delay
});
It does however leave a “non-functioning” button once you’ve gone back a page.
Thanks Dean or chatGPT this seems to work well. I removed most of the CSS stuff so it just defaults to the standard kn-button look, and that will do for now, until Norm builds it into KTL …
Now I just need to find a way to make kn-info-bar “sticky” so it doesn’t scroll, to keep that back button visible all the time (which was my intention in the first place).
Edit: Some CSS to do this (ChatGPT helped me out here):
/* Make the kn-info-bar sticky so it doesnt scroll /
.kn-info-bar {
position: fixed;
top: 90px; / Adjust based on the height of your menu above /
width: 100%; / Ensures it spans the width of the screen /
z-index: 5; / Ensures it stays on top of other content /
background-color: rgb(240, 243, 247); / To prevent transparency /
border-bottom: 1px solid rgb(189, 181, 181); / Adds a thin darker border /
}
.kn-scenes {
margin-top: 40px; / Adjust this to move the main bosy up or down in comparison to skicky headers */
}
Problem: window.history.back() isn’t optimal for going backwards because after adding/changing filters in a grid/search/list view, it won’t actually navigate you back one page, but will just undo the last filter change (give it a try and you’ll see).
Solution: use this helper function from my original post
//Function to get previous page hash in a Knack app
function getPreviousPageHash(){
return Knack.hash_scenes.map(i => i.key ? i.slug + '/' + i.key : i.slug).slice(0, -1).join('/')
}
//And in place of window.history.back() navigate backwards like this
const previousPageHash = getPreviousPageHash();
window.location.hash = previousPageHash;
this seems to work well. I removed most of the CSS stuff so it just defaults to the standard kn-button look, and that will do for now, until Norm builds it into KTL …