Job Post Plugin

Intro

The Job Post Plugin is a Javascript plugin that renders a Job Post on a page and allows candidates to apply to that job post. By default, the 3B delivered Job and Application objects are used, however this guide will detail how to link the plugin to an ATS Job and Application objects. This plugin is available from version 3.4+ of the 3B Onboarding package.

Basic Implementation

The JobPost Visualforce page delivered by 3B Onboarding serves as a template for how to fork a custom Visualforce/Website page. The product delivered Job Post Visualforce page depends on the inclusion of the following imports:

<!-- Utilities -->
<script src="{!URLFOR($Resource.b3o__GeneralUtils, 'index.js')}" defer="true" type="module"></script>
        
<!-- Component -->
<script src="{!URLFOR($Resource.b3o__JobPostResources, 'index.js')}" defer="true" type="module"></script>

After the imports, you would need to create a custom element on the page <job-post>. This is the element that renders the actual job post.

<job-post 
    job-id="{!$CurrentPage.parameters.id}" 
    public-site="{!$Site.baseUrl}"
></job-post>

Place the <job-post> element in the body of the page. Finally, you would need to include an initializer script like so:

<script>
    const globals = {
        sessionId: '{!GETSESSIONID()}',
        siteUrl: '{!$Site.baseUrl}',
        useREST: false,
        router: b3o.GlobalRemotingRouter
    }
</script>

Note that when forking the JobPost page to a custom Visualforce page, you would need to assign a controller to the new Visualforce page controller="b3o.GlobalRemotingRouter"

Advanced Implementation

To import the Job Post component on a Wordpress (or any other hosted site), you would need to change the basic implementation to be compliant with non-salesforce systems. Here's an example of how to initialize the Job Post plugin externally:

<!-- In the header of the page -->
<script src="https://your-domain.my.salesforce-sites.com/onboarding/resource/b3o__GeneralUtils/index.js" defer="true" type="module"></script>
<script src="https://your-domain.my.salesforce-sites.com/onboarding/resource/b3o__JobPostResources/index.js" defer="true" type="module"></script>

<!-- In the body of the page -->
<job-post 
    job-id="..." 
    public-site="https://your-domain.my.salesforce-sites.com/onboarding"
></job-post>

<!-- In the footer of the page -->
<script>
    const globals = {
        siteUrl: 'https://your-domain.my.salesforce-sites.com/onboarding',
        useREST: true,
        router: b3o.GlobalRemotingRouter
    }
</script>

Note that we assume here that the Public Guest Site url is "https://your-domain.my.salesforce-sites.com/onboarding". You would also need to implement a custom mechanism to write to the job-id attribute (for e.g. getting URL params).

Linking to an ATS Object Schema

The component <job-post> is by default linked to the 3B delivered Job and Application objects. Below, you can find a list of default properties set to the <job-post> component:

jobTitlePath = 'b3o__Job_Advert_Title__c';
jobBodyPath = 'b3o__Job_Post_Body__c';
jobFootPath = 'b3o__Job_Post_Footer__c';

siteNamePath = 'b3o__Site__r.b3o__Public_Name__c';
jobTypePath = 'b3o__Job_Type__r.Name';
empTypePath = 'b3o__Employment_Type__c';
payInfoPath = 'b3o__Pay_Information__c';
jobRefPath = 'b3o__Job_ID__c';
jobExpiryPath = 'b3o__Available_Until__c';

jobRegFormPath = 'b3o__Registration_Form__c';
jobAppFormPath = 'b3o__Application_Form__c';
jobQuickAppFormPath = 'b3o__Quick_Apply_Form__c';

jobAppBtnLabelPath = 'b3o__Apply_Button_Text__c'
jobDocPackPath = 'b3o__Document_Pack__c';
jobQuestSetPath = 'b3o__Question_Set__c';

To link to a Salesforce based ATS object schema, you would need to override the default properties to be requested by the server by adding them as attributes to the <job-post> component and converting the camelCaseAttribute to hyphen-case-attribute like so:

<!-- Import Scripts -->
...

<job-post 
    job-id="..." 
    public-site="..."
    job-object-name="b3o__Job__c"
    job-app-schema="b3o__Application__c:b3o__Job__c:b3o__Candidate__c"
    job-yitle-path = 'b3o__Job_Advert_Title__c'
    job-body-path = 'b3o__Job_Post_Body__c'
    job-foot-path = 'b3o__Job_Post_Footer__c'
    site-name-path = 'b3o__Site__r.b3o__Public_Name__c'
    job-type-path = 'b3o__Job_Type__r.Name'
    emp-type-path = 'b3o__Employment_Type__c'
    pay-info-path = 'b3o__Pay_Information__c'
    job-ref-path = 'b3o__Job_ID__c'
    job-expiry-path = 'b3o__Available_Until__c'
    job-reg-form-path = 'b3o__Registration_Form__c'
    job-app-form-path = 'b3o__Application_Form__c'
    job-quick-app-form-path = 'b3o__Quick_Apply_Form__c'
    job-app-btn-label-path = 'b3o__Apply_Button_Text__c'
    job-doc-pack-path = 'b3o__Document_Pack__c'
    job-quest-set-path = 'b3o__Question_Set__c'
></job-post>

<!-- Import Initializer -->
...

Replace the 3B fields with their ATS equivelent fields.

Note that the jobAppSchema requires that you specify the Application Object Name:Job Reference Field:Contact Reference Field. These will allow the system to figure out if the logged in user has already applied for the job or not and render the UI accordingly.

Labelization

In addition to the field mapping for Salesforce ATSs, the component is fully labelized to support overriding default text rendering and add the ability to localize the component for different languages.

The following properties are made available for SIs to override:

postNotFound = 'Error 404';
postNotFoundDetails = 'Post not found.';
labelJobLocation = 'Location';
labelJobType = 'Job Type';
labelJobEmpType = 'Employment Type';
labelJobPay = 'Pay';
labelJobRef = 'REF';
labelJobExpiry = 'Expires';
labelAlreadyApplied = 'You already applied for this job.';
labelGoToDocuments = 'Application Documents';

Styling

The provided plugin is delivered with basic styling, however it implements an open architecture that allows implementers to add CSS overrides. Adding CSS overrides is beyond the scope of this article.