search

person-chalkboardCODE: 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
circle-info

hashtag
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.

chevron-rightAll the JS for 1st time App setuphashtag

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();
}
chevron-rightAll the CSS for 1st time App setuphashtag

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

hashtag
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.

hashtag
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 DOMarrow-up-right, 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.

chevron-rightSSO JShashtag

hashtag
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.

chevron-rightBig Button JShashtag

hashtag
CSS Overview

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

hashtag
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.

chevron-right FA Icon Positioning CSShashtag

hashtag
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.

chevron-rightBig Button CSShashtag

hashtag
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.

chevron-rightSmall Buttons CSShashtag
PreviousHow to Add Commits to existing PRNextApp Specific Custom Code

Last updated

Was this helpful?