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);
});
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 =>{
});
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.
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.
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.
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 =>{
});
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 =>{
});
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 =>{
});
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.