Big Buttons
How to add big buttons to your application to improve navigation

The JS
Add this constant before the Single Sign On JS code. This will typically be on the first line of the custom JS in your Knack web application unless you are importing any JS libraries or scripts.
You must use backtick temporal literals (not single quotes) for the constant and the URL. You can read about temporal literals in the MDN documentation for more information.
// Setting constant variable to this app URL
const APP_URL = `https://atd.knack.com/${Knack.app.attributes.slug}`;

For the bigButton()
function, put it before the handlers.
/********************************************/
/*************** Big Buttons ****************/
/********************************************/
// Adds big button HTML directly on View id
function bigButton(id, view_id, url, fa_icon, button_label, target_blank = false, is_disabled = false, callback = null) {
const disabledClass = is_disabled ? " big-button-disabled'" : "'";
const newTab = target_blank ? " target='_blank'" : "" ;
const html = `
<a id='${id}'
class='big-button-container${disabledClass}'
href='${url}'${newTab}>
<span><i class='fa fa-${fa_icon}'></i></span>
<span> ${button_label}</span>
</a>
`;
$(`#${view_id}`).append(html);
if (callback) callback();
}
For the handler, incorporate the constant with the JS below if you are redirecting to the same Knack application. This is so that if you have to copy the app for testing, the big button will redirect to the copied app URL.
// create large Service Requests button on the home page
$(document).on('knack-view-render.view_127', function(event, page) {
bigButton('new-service-request', 'view_127', `${APP_URL}#new-service-request/`, 'phone-square', 'Service Requests');
});
The CSS
Big Buttons have shadow to show elevation and provide a 3D effect. They are also display: block
so we can set width without clickable area extending the width of the page. We create a pointer hover and color effect when enabled and an opacity and cursor effect when disabled. These CSS classes only need to placed once on the CSS page and any buttons can use them. They can be called via JS or HTML.
/***************************************/
/************* Big Buttons *************/
/***************************************/
.big-button-container {
padding: 20px 20px;
border-radius: 4px;
box-shadow: 0px 1px 2px 0px gray;
font-size: 2.5em;
max-width: 15em;
display: block;
}
.big-button-container:hover {
background-color: #f7f7f7;
cursor: pointer;
}
.big-button-disabled {
background-color: #f7f7f7;
opacity: 0.6;
pointer-events: none;
}
a.big-button-container {
text-decoration: none;
}
Add these CSS classes if not already present. If we have a disable button it allows us to change the mouse pointer and set the Font Awesome icons throughout the app to the middle of the line vertically.
/****************************************/
/************ Button Effects ************/
/****************************************/
.disabled { cursor: not-allowed; }
/***************************************/
/********* FA Icon Positioning *********/
/***************************************/
.fa { vertical-align: baseline; }
How to Implement Big Button code
Add Custom JS
When placing the JS, the function only needs to be placed once but you will need a new handler for each Rich Text view + Big Button that you have.
// create large Service Requests button on the home page
$(document).on('knack-view-render.view_127', function(event, page) {
bigButton('new-service-request', 'view_127', `${APP_URL}#new-service-request/`, 'phone-square', 'Service Requests');
});
Things to change in JavaScript
Change the Button ID in the first set of parentheses to whatever is appropriate to name your button;
'new-service-request'
Change the View ID to match the corresponding Rich Text view where the big button will live;
'view_127'
Change the URL to the corresponding page that the button will redirect to. Make sure this uses back ticks.
`${APP_URL}#new-service-request/`
Change the Font Awesome icon to match the theme of the button. Knack currently supports FA version 4 icons. You can also read more about FA icons here.
'phone-square'
Change the Button Label of the button to the text that will be visible;
'Service Requests'
Add the
true
argument if you would like the button to open in a new tab;Add the
true
argument after the newTab argument if you would like the button to be disabledtrue
Last updated
Was this helpful?