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');
});

Previous JS - Before August 2025

Big Buttons are nested in an <a> tag now instead of a <div> tag so that the clickable area of buttons does not expand the width of the Knack page and stays within the button area. The variable newTab has been added if you would like a big button to open its url in a new tab. To do this you would pass the true argument to the individual button. Additionally, the variable disabledClass has been added if you would like to set a big button to be disabled. To do this you would pass the true argument to the individual button. This code also lives in the common folder in the atd-knack GitHub repository.

/********************************************/
/*************** Big Buttons ****************/
/********************************************/
// Create Big Button nested in a block
function bigButton(id, view_id, url, fa_icon, button_label, target_blank = false, is_disabled = false, callback = null) {
  var disabledClass = is_disabled ? " big-button-disabled'" : "'";
  var newTab = target_blank ? " target='_blank'" : "" ;
    $( "<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>" ).appendTo("#" + view_id);
  if (callback) callback();
}

A handler for each big button.

// create large TDS Link button on the Customer Portal Home page
$(document).on("knack-view-render.view_1432", function(event, page) {
  bigButton("tds-link", "view_1432", "https://www.austintexas.gov/department/transportation-development-services", "bank", "TDS Division Home");
});

To open a big button in a new tab, pass the true argument in the handler like this

// create large TDS Link button on the Customer Portal Home page
$(document).on("knack-view-render.view_1432", function(event, page) {
  bigButton("tds-link", "view_1432", "https://www.austintexas.gov/department/transportation-development-services", "bank", "TDS Division Home", true);
});

To disable a big button, pass the true argument in the handler after the newTab argument

// create large TDS Link button on the Customer Portal Home page
$(document).on("knack-view-render.view_1432", function(event, page) {
  bigButton("tds-link", "view_1432", "https://www.austintexas.gov/department/transportation-development-services", "bank", "TDS Division Home", false, true);
});

To do both, open in a new tab and disable the button, pass the true argument for both

// create large TDS Link button on the Customer Portal Home page
$(document).on("knack-view-render.view_1432", function(event, page) {
  bigButton("tds-link", "view_1432", "https://www.austintexas.gov/department/transportation-development-services", "bank", "TDS Division Home", true, true);
});

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

Create a Rich Text view

Go pages and create a rich text view on the page. This is where the big button will be created.

Find View ID of the rich text view

Open the Rich Text view to identify its View ID and update the view name to include it for easy reference

Add Custom CSS

Make sure the CSS styling is in place. Update the CSS styling to meet your needs, sometimes buttons may need a larger width to accommodate your button text. Additionally, if you already have the disabled and fa CSS classes, be sure not to duplicate them.

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 disabled
```
true
```

PreviousCODE: Knack Functionality NextSave Knack Record ID

Last updated 20 days ago

Was this helpful?