Onboarding Plugins

Intro

3B offers a number of plugins that can be embedded on custom Visualforce Pages or even external pages to Salesforce.

Plugins

“remoteUtils”

Enables communication with Salesforce. If the global variable b3o.GlobalRemoutingRouter is available (when the plugin is embedded in a VFP with the apex controller set to “b3o.GlobalRemoutingRouter”), then we will use secure AJAX to communicate with Salesforce. Alternatively, if the b3o.GlobalRemoutingRouter global variable is not available, we will fall back to REST API for communication with Salesforce.

REST API communication is unauthenticated and requires that the plugin is set up with a “publicSiteURL” pointing to a guest user enabled site/community*(link to article)

We do not recommend overriding or extending this plugin.

To include the plugin on a Visualforce Page, use this script:

<apex:includeScript value="{!URLFOR($Resource.b3o__JobRemoteUtils, 'api/js/remote.js')}"/>

To initiate the plugin, run this script:

remoteUtils.init({
    publicSiteURL: '{!$Setup.b3o__Onboarding_Default_Settings__c.b3o__Site_URL__c}'
}).then(value => {
    console.log('Loaded [Remote Utils]', value);
}).catch(error => {
    console.error('Error Initializing [Remote Utils]', error);
});

Properties

Property	Type	Description	Default	Required
publicSiteURL	string	This is the Site/Community base endpoint.		true

“modal”

This is a simple modal plugin. It is a dependency for other plugins to display pages/content in a modal interface.

To include the plugin on a Visualforce Page, use this script:

<apex:includeScript value="{!URLFOR($Resource.b3o__ModalHandler, 'api/js/remote.js')}" />
<link href="{!URLFOR($Resource.b3o__ModalHandler, 'api/css/default.css')}" rel="stylesheet" />

To initiate the plugin, run this script:

modal.init({
    rootEl: 'modal-wrapper',
    reloadComponentsOnClose: false
}).then(value => {
    console.log('Loaded [MODALHANDLER]', value);
}).catch(error => {
    console.error('Error Loading Component [MODALHANDLER]', error);
}).finally(fin =>{

});

Properties

Property	Type	Description	Default	Required
rootEl	string	This is the ID of the root element where the modal will be rendered into		true
reloadComponentsOnClose	boolean	Whether or not the component will request all other sibling components to re-render when the modal is closed	true	false

“jobVetting”

This is the plugin that runs assessments *(link to article).

To include the plugin on a Visualforce Page, use this script:

<!-- Web Components -->
<apex:includeScript value="{!URLFOR($Resource.b3o__AppVettingResources, 'api/components/inputText.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.b3o__AppVettingResources, 'api/components/inputSelect.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.b3o__AppVettingResources, 'api/components/inputCheckboxes.js')}"/>
<!-- Resource Scripts Loading -->
<apex:includeScript value="{!URLFOR($Resource.b3o__AppVettingResources, 'api/js/remote.js')}" />
<link href="{!URLFOR($Resource.b3o__AppVettingResources, 'api/css/default.css')}" rel="stylesheet" />

To initiate the plugin, run this script:

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
//Question Set ID and Contact Id are required
const userId = urlParams.get('uId');
const questionSetId = urlParams.get('qsId');

//Job Id and Job Board Id are not required - if passed, we will create a new 3B Applicaiton
const jobId = urlParams.get('jobId');
const boardId = urlParams.get('bId');

//If Document Id is passed, we will create a new Document Submission for that document
const documentId = urlParams.get('docId');
const applicationId = urlParams.get('applicationId');
let jobBoardId = urlParams.get('jb');

jobVetting.init({
    rootEl: 'job-app-vetting',
    jobBoardId: jobBoardId,
    userId: userId,
    jobPostId: jobId,
    jobBoardId: boardId,
    questionSetId: questionSetId,
    documentId: documentId,
    applicationId: applicationId,
}).then(value => {
    console.log('Loaded [JOBVETTING]', value);
}).catch(error => {
    console.error('Error Loading Component [JOBVETTING]', error);
}).finally(fin =>{
    window.addEventListener('b3oVettingComplete', onCompleteVetting, false); 
});

This plugin is dependent on the remoteUtils plugin.

Properties

Property	Type	Description	Default	Required
rootEl	string	This is the ID of the root element where the modal will be rendered into		true
jobPostId	string	This is the 3B Job's record id. Used to auto-generate 3B Application if passed.		false
jobBoardId	string	This is the Job Board's record id. Used together with jobPostId, when a 3B Application is created, we will assign the Job Board's ID in the field on the 3B Application		false
userId	string	This is the Contact Id (logged in user)		true
questionSetId	string	This is the Question Set's record id.		true
documentId	string	This is the Document's record id. If passed, we will create a new document submission*(Link to article) upon successful submission of the record		false
applicationId	string	This is the 3B Application's record id. If passed, we will relate the Candidate Scorecard*(Link to article) to the provided 3B Application id		false
LBL_DefaultOptionLabel	string	For drop-downs, what would be the text displayed in the non-selected drop downs	-- Select --	false
MSG_FieldRequired	string	Error message displayed when a field is required, but no value is provided	This is required	false
MSG_FieldTooLong	string	Error message displayed if the input field violates the maximum length settings	Input is too long	false
submitBTN	string	The label of the submit button	Submit	false

“jobBoardActions”

This is the plugin that renders the login/log out and options menu for non-community user authentication mode. Elect a registration form or even other menu options to be displayed. Feel free to override the HTML implementation to make the drop down fit better your branding.

To include the plugin on a Visualforce Page, use this script:

<apex:includeScript value="{!URLFOR($Resource.b3o__JobBoardMenuResources, 'api/js/remote.js')}" />
<link href="{!URLFOR($Resource.b3o__JobBoardMenuResources, 'api/css/default.css')}" rel="stylesheet" />

To initiate the plugin, run this script:

const urlParams = new URLSearchParams(queryString);
const jobBoardId = urlParams.get('jb');

jobBoardActions.init({
    rootEl: 'job-board-actions',
    publicSiteURL: '{!$Setup.b3o__Onboarding_Default_Settings__c.b3o__Site_URL__c}',
    jobBoardId: jobBoardId,
    logOutRedirectURL: '{!$Setup.b3o__Onboarding_Default_Settings__c.b3o__Site_URL__c}',
    hideInCommunity: true,
}).then(value => {
    console.log('Loaded [JOBBOARDACTIONS]', value);
}).catch(error => {
    console.error('Error Loading Component [JOBBOARDACTIONS]', error);
}).finally(fin =>{
    
});

This plugin is dependent on the remoteUtils plugin.

Properties

Property	Type	Description	Default	Required
rootEl	string	This is the ID of the root element where the modal will be rendered into		true
publicSiteURL	string	This is the Site/Community base endpoint.		true
jobBoardId	string	This is the Job Board's record id. This is used in order to identify which Menu Buttons to retreive and render.		true
logOutRedirectURL	string	This is the page/URL the user will be re-directed upon successful log out		true
hideInCommunity	boolean	Whether or not to render the component in a community context	true	false
BTN_Login	string	The label of the login button	Login	false
BTN_Logout	string	The label of the logout button	Logout	false

“selfB”

This is the plugin that runs the self bookings*(link to article).

To include the plugin on a Visualforce Page, use this script:

<apex:includeScript value="{!URLFOR($Resource.b3o__SelfBooking, 'api/js/app.js')}" />
<link href="{!URLFOR($Resource.b3o__SelfBooking, 'api/css/styles.css')}" rel="stylesheet" />

To initiate the plugin, run this script:

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const userId = urlParams.get('id');
//Optional param to pass back to parent component
const documentId = urlParams.get('document');

const userLocale =
  navigator.languages && navigator.languages.length
    ? navigator.languages[0]
    : navigator.language;
    
document.addEventListener("DOMContentLoaded", function(){
    selfB.init({                
        rootEl: 'self-booking',
        publicSiteURL: '{!$Setup.b3o__Onboarding_Default_Settings__c.b3o__Site_URL__c}',
        source:'Default Self-Booking Page',
        MSG_NoPendingInvites: 'You have no pending invitations currently. Please try again later',
        userId: userId,
        localeCode: userLocale,
    }).then(value => {
        console.log('Loaded [SELFBOOKING]', value);
    }).catch(error => {
        console.error('Error Loading Component [SELFBOOKING]', error);
    }).finally(fin =>{
        window.addEventListener('b3oBookingComplete', onCompleteBooking, false); 
    });

    //This event is required in order to auto-close the modal once the assessment 
    //is completed, provided that the assessment is completed in MyDocuments.page
    function onCompleteBooking(event){
        console.log('Caught Self-Booking Complete - firing back', event.detail);
    
        window.parent.postMessage(
            {
                event_id: '3bonboarding_selfBook',
                data: {
                    contactId: event.detail.contactId,
                    documentId: documentId
                }
            }, 
            "*" 
        ); 
    }
});

This plugin is dependent on the remoteUtils plugin.

Properties

Property	Type	Description	Default	Required
rootEl	string	This is the ID of the root element where the modal will be rendered into		true
publicSiteURL	string	This is the Site/Community base endpoint.		true
source	string	Any unique identifier to help with reporting. This will be stamped on a field on the Session Invitation record		false
userId	string	This is the Contact Id (logged in user)		true
sendCompleteEvent	boolean	This will cause an event to be emitted with the event_id "b3oBookingComplete" once the booking is successfull. Used with MyDocuments.page to re-render the documents page.		false
localeCode	string	User's locale preference for display of dates/times. Determines whether we use dd/mm/yyyy or mm/dd/yyyy format. Can be hard-coded or auto identified.	Dynamically retreived by user's browser settings. Fall back to en-GB	false
LBL_InvitationsHeader	string	Header	Invitations	false
LBL_SessionDetails	string	Header	Session Details	false
LBL_SessionOrganizer	string	Field label	Organiser	false
LBL_SessionLocation	string	Field label	Location	false
LBL_ConfirmBtn	string	Confirm button label	Confirm	false
LBL_SelectDateHeader	string	Header	Select Date	false
LBL_SelectTimeHeader	string	Header	Select Time	false
LBL_BookedHeader	string	Header after session booked	Booked!	false
MSG_NoPendingInvites	string	Message displayed if the contact has no pending invites	No pending invites. Please try again later.	false
MSG_GeneralError	string	General error message (APEX/Javascript)	There was an unexpected error. Please try again later.	false
MSG_NoDatesAvailable	string	Message displayed when there are no available scheduled dates to book	No dates available.	false

"jobBoard"

This is the plugin that renders Jobs in a job board format

To include the plugin on a Visualforce Page, use this script:

<apex:includeScript value="{!URLFOR($Resource.b3o__JobBoardResources, 'api/js/remote.js')}" />
<link href="{!URLFOR($Resource.b3o__JobBoardResources, 'api/css/default.css')}" rel="stylesheet" />

To initiate the plugin, run this script:

jobBoard.init({
    rootEl: 'jobs-feed',
    publicSiteURL: '{!$Setup.b3o__Onboarding_Default_Settings__c.b3o__Site_URL__c}',
    jobBoardId: jobBoardId,
    googleAPIKey: '{!$Setup.b3o__Onboarding_Default_Settings__c.b3o__Google_API_Key__c}',
    placesAPIOptions: {
        fields: ['geometry'],
    },
    localeCode: 'en-GB',
}).then(value => {
    console.log('Loaded [JOBBOARD]', value);
}).catch(error => {
    console.error('Error Loading Component [JOBBOARD]', error);
}).finally(fin =>{
});

Properties

Property	Type	Description	Default	Required
rootEl	string	This is the ID of the root element where the modal will be rendered into		true
jobBoardId	string	This is the Job Board's record id. Used together with jobPostId, when a 3B Application is created, we will assign the Job Board's ID in the field on the 3B Application		false
BTN_Search	string	Button label	Search	false
BTN_ViewJob	string	Button label	View Job	false
LBL_JobAvailableUntil	string	Field label	Available Until	false
LBL_JobType	string	Drop down default state label	-- Select Category --	false
LBL_EmpType	string	Drop down default state label	-- Select Job Type --	false
LBL_Location	string	Drop down default state label	-- Select Location --	false
LBL_Keywords	string	Field label	Search by keywords	false
LBL_Places	string	Field label	Search by location	false
LBL_Places_Radius	string	Drop down default state label	-- Radius --	false
MSG_NoJobsFound	string	Message when no jobs found after search / load	No jobs found	false
googleAPIKey	string	API key for google maps		false
placesAPIOptions	object	new google.maps.places.Autocomplete(searchInput, settings.placesAPIOptions);		false
radiusSearchUnits	string		mi	false
radiusSearchOptions	object		{label:'Within 5 miles', value:5, selected:true}, {label:'Within 10 miles', value:10}, {label:'Within 20 miles', value:20}, {label:'Within 30 miles', value:30}, {label:'Within 100 miles', value:100}, {label:'Nationwide', value:1000}	false
dateFormat	object	A javascript object of the date formatting rule, used as the options parameter in a ''.toLocaleDateString()	{ year: 'numeric', month: 'numeric', day: 'numeric' }	false
localeCode	string	User's locale preference for display of dates/times. Determines whether we use dd/mm/yyyy or mm/dd/yyyy format. Can be hard-coded or auto identified.	Dynamically retreived by user's browser settings. Fall back to en-GB	false

This plugin is dependent on the remoteUtils, modal and jobBoardActions plugins.

“jobPost”

This is the plugin that renders Job Posts in an embedded format

To include the plugin on a Visualforce Page, use this script:

<apex:includeScript value="{!URLFOR($Resource.b3o__JobPostResources, 'api/js/remote.js')}"/>
<link href="{!URLFOR($Resource.b3o__JobPostResources, 'api/css/default.css')}" rel="stylesheet"/>

To initiate the plugin, run this script:

jobPost.init({
    rootEl: 'job-post',
    jobPostId: jobId,
    localeCode: 'en-GB'
}).then(value => {
    console.log('Loaded [JOBPOST]', value);
}).catch(error => {
    console.error('Error Loading Component [JOBPOST]', error);
}).finally(fin =>{
});

Properties

Property	Type	Description	Default	Required
rootEl	string	This is the ID of the root element where the modal will be rendered into		true
jobPostId	string	This is the 3B Job's record id.		true
LBL_PostNotFound	string	Header when we couldn't find a valid 3B Job by the jobPostId	Error 404	false
LBL_PostNotFoundDesc	string	Description when we couldn't find a valid 3B Job by the jobPostId	Post not found	false
LBL_JobLocation	string	Field label	Location	false
LBL_JobJobType	string	Field label	Job Type	false
LBL_JobEmploymentType	string	Field label	Employment Type	false
LBL_JobPay	string	Field label	Pay	false
LBL_JobReference	string	Field label	Job Reference	false
LBL_JobAvailableUntil	string	Field label	Available Until	false
LBL_AlreadyApplied	string	Message displayed when someone has already applied and they are viewing this job post	You have already applied for this job	false
BTN_NavigateJobDocuments	string	Button label	Application Documents	false
myDocumentsPage	string	This is the end point to the page responsible for managing documents and assignments.	b3o__JobDocuments?id={0}&dpId={1}&applicationId={2}	false
dateFormat	object	A javascript object of the date formatting rule, used as the options parameter in a ''.toLocaleDateString()	{ year: 'numeric', month: 'numeric', day: 'numeric' }	false
localeCode	string	User's locale preference for display of dates/times. Determines whether we use dd/mm/yyyy or mm/dd/yyyy format. Can be hard-coded or auto identified.	Dynamically retreived by user's browser settings. Fall back to en-GB	false

This plugin is dependent on the remoteUtils, modal, jobBoardActions and jobApp plugins.

“jobApp”

This is the plugin that enables the job application workflow

To include the plugin on a Visualforce Page, use this script:

<apex:includeScript value="{!URLFOR($Resource.b3o__JobAppResources, 'api/js/remote.js')}"/> 
<link href="{!URLFOR($Resource.b3o__JobAppResources, 'api/css/default.css')}" rel="stylesheet"/>

To initiate the plugin, run this script:

jobApp.init({
    rootEl: 'job-app',
    publicSiteURL: '{!$Setup.b3o__Onboarding_Default_Settings__c.b3o__Site_URL__c}',
    jobPostId: jobId
}).then(value => {
    console.log('Loaded [JOBAPP]', value);
}).catch(error => {
    console.error('Error Loading Component [JOBAPP]', error);
}).finally(fin =>{
});

Properties

Property	Type	Description	Default	Required
rootEl	string	This is the ID of the root element where the modal will be rendered into		true
publicSiteURL	string	This is the Site/Community base endpoint.		true
jobPostId	string	This is the 3B Job's record id.		true
jobApplicationPage	string	Question Set/Assessment page URL	b3o__JobApplication	false
myDocumentsPage	string	This is the end point to the page responsible for managing documents and assignments.	/b3o__JobDocuments?id={0}&dpId={1}&applicationId={2}	false

Authentication Context

3B components are designed to be running in internal user context, community user context or un-authenticated guest user context. When running our components in the later context, you are responsible for implementing a reliable and secure authentication and communication mechanism. We provide a component “jobBoardActions” that manages authentication using 3B Forms, however we view this as dangerous and prone to brute force attacks. Always implement full-blown community licenses where possible for external candidate communication.