CODE: Login Buttons/App Setup

Code and procedure to add custom single sign-on and non-single sign-on buttons to an app

The COA and non-COA login buttons that replace the default Knack sign-in

If setting up a Knack App for the first time, you will need all the JS & CSS included in this documentation. For simplicity, copy and paste the two code blocks below onto their respective code pages in Knack.

All the JS for 1st time App setup

This is not a comprehensive JS file, just a quick snippet of what is required to get an App up and running.

/********************************************/
/******** COACD Single Sign On Login ********/
/********************************************/
function customizeLoginButton(viewId) {
  // Hide Knack default SSO button, login form, login title, and any other children
  $("#" + viewId)
    .children()
    .hide();

  var url = Knack.url_base + Knack.scene_hash + "auth/COACD";

  // Create a div for Login buttons
  var $coacdButton = $("<div/>", {
    id: "coacd-button-login"
  });
  $coacdButton.appendTo("#" + viewId);

  // Append Big SSO Login button and non-SSO Login button
  bigButton("coacd-big-button", "coacd-button-login", url, "sign-in", "Sign-In")

  $coacdButton.append(
    "<a class='small-button' href='javascript:void(0)'>" +
      "<div class='small-button-container'><span><i class='fa fa-lock'></i></span><span> Non-COA Sign-In</span></div></a>"
  );

  // On non-SSO button click, hide SSO and non-SSO buttons and show Knack Login form
  var $nonCoacdButton = $(".small-button");
  $nonCoacdButton.click(function () {
    $("#" + viewId)
      .children()
      .show();
    $(".small-button-container,.big-button-container").hide();
    $(".kn-sso-container").hide();
  });
}

// Call customizeLoginButton on any view render to customize any login page that renders in app
$(document).on("knack-view-render.any", function (event, page) {
  // Find SSO button and existing custom button
  var $ssoButton = $(".kn-sso-container");
  var $coacdLoginDiv = $("#coacd-button-login");

  // If SSO button exists on page and there isn't already a custom button
  if ($ssoButton.length && !$coacdLoginDiv.length) {
    var $ssoView = $ssoButton.closest("[id^=view_]");
    var viewId = $ssoView.get(0).id;

    customizeLoginButton(viewId);
  }
});

/********************************************/
/*************** 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();
}

All the CSS for 1st time App setup

This is not a comprehensive CSS file, just a quick snippet of what is required to get an App up and running.

/***************************************/
/********* FA Icon Positioning *********/
/***************************************/
/*Centers icon vertically on a line*/
.fa { vertical-align: baseline; }

/***************************************/
/************* 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;
}

/***************************************/
/************ Small Buttons ************/
/***************************************/
.small-button-container {
  padding: 5px 10px;
  margin: 10px;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0px gray;
  font-size: 1em;
  max-width: 15em;
  background-color: #babbbc;
  color: white;
}

.small-button-container:hover {
  background-color: #4c4c4c;
  cursor: pointer;
}

.small-button-disabled {
  background-color: #f7f7f7;
  opacity: 0.6;
}

a.small-button {
  text-decoration: none;
}

JS Overview

This code will replace the default Knack single sign-on button and login form shown below with the buttons shown above. In the above experience, the form shown below will only appear if a user clicks the button titled Non-COA Sign-In.

Default Knack login form with the Single Sign-on button on the right

Include the following 2 sections of JS in your app if they are not already present. They are required.

The JS - SSO Function & Render

The purpose of this code is to find the Knack default single-sign on button and its Knack view ID in the DOM, replace the button with the buttons shown above, and then hide the default Knack login form unless the user clicks the Non-COA Sign-In button.

SSO JS

/********************************************/
/******** COACD Single Sign On Login ********/
/********************************************/
function customizeLoginButton(viewId) {
  // Hide Knack default SSO button, login form, login title, and any other children
  $("#" + viewId)
    .children()
    .hide();

  var url = Knack.url_base + Knack.scene_hash + "auth/COACD";

  // Create a div for Login buttons
  var $coacdButton = $("<div/>", {
    id: "coacd-button-login"
  });
  $coacdButton.appendTo("#" + viewId);

  // Append Big SSO Login button and non-SSO Login button
  bigButton("coacd-big-button", "coacd-button-login", url, "sign-in", "Sign-In")

  $coacdButton.append(
    "<a class='small-button' href='javascript:void(0)'>" +
      "<div class='small-button-container'><span><i class='fa fa-lock'></i></span><span> Non-COA Sign-In</span></div></a>"
  );

  // On non-SSO button click, hide SSO and non-SSO buttons and show Knack Login form
  var $nonCoacdButton = $(".small-button");
  $nonCoacdButton.click(function () {
    $("#" + viewId)
      .children()
      .show();
    $(".small-button-container,.big-button-container").hide();
    $(".kn-sso-container").hide();
  });
}

// Call customizeLoginButton on any view render to customize any login page that renders in app
$(document).on("knack-view-render.any", function (event, page) {
  // Find SSO button and existing custom button
  var $ssoButton = $(".kn-sso-container");
  var $coacdLoginDiv = $("#coacd-button-login");

  // If SSO button exists on page and there isn't already a custom button
  if ($ssoButton.length && !$coacdLoginDiv.length) {
    var $ssoView = $ssoButton.closest("[id^=view_]");
    var viewId = $ssoView.get(0).id;

    customizeLoginButton(viewId);
  }
});

The JS - Big Button Function

Big Buttons

This allows for creation of any big buttons in your app. The 'customizeLoginButton' function above does require this function to render the big button.

Big Button JS

/********************************************/
/*************** Big Buttons ****************/
/********************************************/
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();
}

CSS Overview

Include the following 3 sections of CSS in your app if they are not already present. They are required.

The CSS - FA Icon Positioning

Font Awesome Icons

This styles the FA Icons in your app so that they are positioned appropriately on a text line. By applying 'baseline' to the 'vertical-align' property of a standard font awesome icon, icons will appear centered with button text.

FA Icon Positioning CSS

/***************************************/
/********* FA Icon Positioning *********/
/***************************************/
/*Centers icon vertically on a line*/
.fa { vertical-align: baseline; }
/*Icon rests at the bottom of a line*/
.fa-bot { vertical-align: text-bottom; }
/*Icon touches the top of a line*/
.fa-top { vertical-align: text-top; }

The CSS - Big Buttons

Big Buttons

This styles the bigger Sign-In button. Do not duplicate this code if already in your app. This CSS will also apply to other Big Buttons you may place in your app.

Big Button CSS

/***************************************/
/************* Big Buttons *************/
/***************************************/
.big-button-container {
  padding: 20px 20px;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0px gray;
  font-size: 2.5em;
  max-width: 16em;
  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;
}

The CSS - Small Buttons

This styles the smaller Non-COA Sign-In button. Do not duplicate this code if already in your app. This CSS will also apply to other Small Buttons you may place in your app.

Small Buttons CSS

/***************************************/
/************ Small Buttons ************/
/***************************************/
.small-button-container {
  padding: 5px 10px;
  margin: 10px;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0px gray;
  font-size: 1em;
  max-width: 15em;
  background-color: #babbbc;
  color: white;
}

.small-button-container:hover {
  background-color: #4c4c4c;
  cursor: pointer;
}

.small-button-disabled {
  background-color: #f7f7f7;
  opacity: 0.6;
}

a.small-button {
  text-decoration: none;
}