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.
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.
Include the following 2 sections of JS in your app if they are not already present. They are required.
The JS - SSO Function & Render
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);
}
});
This allows for creation of any big buttons in your app. The 'customizeLoginButton' function above does require this function to render the big button.
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; }
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.
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.
The purpose of this code is to find the Knack default single-sign on button and its Knack view ID in the , 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.
