3B Knowledge

Onboarding Plugins

Revision as of 06:50, 22 October 2022 by Admin (talk | contribs) (Final)


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.

Retrieved from ‘https://3bknowhow.com/index.php?title=Onboarding_Plugins&oldid=140’