Job Board Component: Difference between revisions

Revision as of 04:19, 25 April 2025

Intro

The JobBoard is a versatile web component designed for job listings. This component can fetch and display job posts from a given endpoint and also allows for search functionality based on a variety of criteria.

3B Portals Compatibility

This component is fully compatible with 3B Portals. Simply drag and drop it in a portal page.

Set Up

From version 3.4+, a Job object must have a Job Boards multi-select field. We will only render jobs that match the Job Boards field value on the job. Furthermore, the options in the new multi-select field must match the Names of the Job Board (b3o__Job_Board__c) records in the system. So, if you set the Job Boards field with the options "Default", "Site 1" and "Site 2", you must also have three Job Board records named "Default", "Site 1" and "Site 2".

When creating a Job Board record in the system, please set the following fields:

Name - this is the name of the job board and must match one of the options defined on the Job Boards multi-select field on the job object
Job Post Link (b3o__Job_Post_Link__c) - this is a template link telling the Job Board component where to re-direct the user when they click on a Job Post. A valid value is https://.../JobPost?id={0}. The {0} param will be merged with either the Job Id or the Job Reference

Implementation

Portals

Drag and drop the Job Board component on any page. Use the component settings to modify the component.

Visualforce Pages

You can embed the component component in a Visualforce Page using the following syntax:

Job Board:

<apex:page showHeader="false" sidebar="false" standardStylesheets="false" controller="GlobalRemotingRouter"
docType="HTML-5.0" applyHtmlTag="false" applyBodyTag="false"
>
<html>
    <head>
        <title>Jobs</title>
        <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
        <script>
            window.performanceStart = new Date();
            window['globals'] = {
                sessionId: 'NULL_SESSION_ID',
                siteUrl: '{!$Site.baseUrl}',
                orgUrl: '{!orgUrl}',
                onboardingUrl: "{!JSENCODE($Setup.b3o__Onboarding_Default_Settings__c.b3o__Site_URL__c)}",
                userTimezone: '{!userTimezone}',
                clientTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            }
            if(!window["globals"]?.onboardingUrl){
                alert('Please set b3o__Onboarding_Default_Settings__c.b3o__Site_URL__c');
            }
        </script>
        
        <script src="/soap/ajax/60.0/connection.js" type="text/javascript"></script>
        <script src="{!URLFOR($Resource.b3o__JobBoardResources, 'index.js')}" defer="true" type="module"></script>

        <style>
            html {
                font-family: sans-serif;
                -ms-text-size-adjust: 100%;
                -webkit-text-size-adjust: 100%;
            }
            

            div.container {
                margin-left: auto;
                margin-right: auto;
            }            
        </style>
    </head>
    <body>
        <div class="container">
            <job-board 
                theme-type="{!IF(ISBLANK($CurrentPage.parameters.themeType), 'emerald', JSENCODE($CurrentPage.parameters.themeType))}"
                hide-theme-switch="{!IF(ISBLANK($CurrentPage.parameters.hideThemeSwitch), 'true', JSENCODE($CurrentPage.parameters.hideThemeSwitch))}"
                hide-current-user="{!IF(ISBLANK($CurrentPage.parameters.hideCurrentUser), 'false', JSENCODE($CurrentPage.parameters.hideCurrentUser))}"
                job-board-name="{!IF(ISBLANK($CurrentPage.parameters.jobBoardName), JSENCODE($Setup.b3o__Onboarding_Default_Settings__c.b3o__Default_Job_Board__c), JSENCODE($CurrentPage.parameters.jobBoardName))}"
                places-api-key="{!JSENCODE($Setup.b3o__Onboarding_Default_Settings__c.b3o__Google_API_Key__c)}"
                app-documents-link="/b3o__MyDocuments"
                app-documents-params="?id={0}&dpId={1}&applicationId={2}"
                job-relationship-field="b3o__Job__c"
                candidate-relationship-field="b3o__Candidate__c"
                job-ref-path="b3o__Job_ID__c"
                job-app-schema="b3o__Application__c:b3o__Job__c:b3o__Candidate__c"
                job-object-name="b3o__Job__c"
                job-title-path="b3o__Job_Advert_Title__c"
                job-short-path="b3o__Job_Post_Short_Description__c"
                job-body-path="b3o__Job_Post_Body__c"
                job-foot-path="b3o__Job_Post_Footer__c"
                job-featured-path="b3o__Featured_Job__c"
                job-posted-path="b3o__Date_Posted__c"
                job-board-path="b3o__Job_Boards__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-expiry-path="b3o__Available_Until__c"
                job-app-form-path="b3o__Application_Form__c"
                job-reg-form-path="b3o__Registration_Form__c"
                job-doc-pack-path="b3o__Document_Pack__c"
                job-app-btn-label-path="b3o__Apply_Button_Text__c"
                site-field-path ="b3o__Site__c"
                job-type-field-path = "b3o__Job_Type__c"
                site-coordinates-path = "b3o__Site__r.b3o__Coordinates__c"
                label-no-jobs="No jobs found"
                keyword-search-placeholder="Search by keyword"
                address-placeholder="Search by address"
                type-placeholder="Type"
                category-placeholder="Category"
                location-placeholder="Location"
                search-button-label="Search"
                view-documents-label="View Documents"
                already-applied-label="Already Applied"
                view-job-btn-label="View Job"
            >
            </job-board>    
        </div>
        <style>

            /* 
                When custom theme is selected, you can override
                properties like so:
                * {
                    --color-primary: red;
                } 
                */
        </style>
    </body>
</html>
</apex:page>

Job Post:

<apex:page showHeader="false" sidebar="false" standardStylesheets="false" controller="b3o.GlobalRemotingRouter"
docType="HTML-5.0" applyHtmlTag="false" applyBodyTag="false"
>
<html>
    <head>
        <title>Job</title>
        <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
        <script>
            window.performanceStart = new Date();
            window["globals"] = {
                sessionId: "{!GETSESSIONID()}",
                siteUrl: "{!$Site.baseUrl}",
                orgUrl: "{!orgUrl}",
                onboardingUrl: "{!JSENCODE($Setup.b3o__Onboarding_Default_Settings__c.b3o__Site_URL__c)}",
                userTimezone: '{!userTimezone}',
                clientTimezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            }
            if(!window["globals"]?.onboardingUrl){
                alert('Please set b3o__Onboarding_Default_Settings__c.b3o__Site_URL__c');
            }
        </script>

        <script src="/soap/ajax/60.0/connection.js" type="text/javascript"></script>
        <script src="{!URLFOR($Resource.b3p__StandardComponents, "index.js")}" defer="true" type="module"></script>
        <script src="{!URLFOR($Resource.b3o__JobBoardResources, "index.js")}" defer="true" type="module"></script>

        <style>
            html {
                font-family: sans-serif;
                -ms-text-size-adjust: 100%;
                -webkit-text-size-adjust: 100%;
            }
           
            div.container {
                margin-left: auto;
                margin-right: auto;
            }            
        </style>
    </head>
    <body>
        <div class="container">
            <job-post 
                type="post"
                theme-type="{!IF(ISBLANK($CurrentPage.parameters.themeType), 'emerald', JSENCODE($CurrentPage.parameters.themeType))}"
                hide-theme-switch="{!IF(ISBLANK($CurrentPage.parameters.hideThemeSwitch), 'true', JSENCODE($CurrentPage.parameters.hideThemeSwitch))}"
                hide-current-user="{!IF(ISBLANK($CurrentPage.parameters.hideCurrentUser), 'false', JSENCODE($CurrentPage.parameters.hideCurrentUser))}"
                app-documents-link="{!IF(ISBLANK($CurrentPage.parameters.appDocumentsLink), '/b3o__MyDocuments', JSENCODE($CurrentPage.parameters.appDocumentsLink))}"
                job-id="{!JSENCODE($CurrentPage.parameters.id)}" 
                job-board-name="{!JSENCODE($Setup.b3o__Onboarding_Default_Settings__c.b3o__Default_Job_Board__c)}"
                user-id="{!JSENCODE($CurrentPage.parameters.userId)}" 
                app-documents-params="?id={0}&dpId={1}&applicationId={2}"
                job-relationship-field="b3o__Job__c"
                candidate-relationship-field="b3o__Candidate__c"
                job-ref-path="b3o__Job_ID__c"
                job-app-schema="b3o__Application__c:b3o__Job__c:b3o__Candidate__c"
                job-object-name="b3o__Job__c"
                job-title-path="b3o__Job_Advert_Title__c"
                job-short-path="b3o__Job_Post_Short_Description__c"
                job-body-path="b3o__Job_Post_Body__c"
                job-foot-path="b3o__Job_Post_Footer__c"
                job-featured-path="b3o__Featured_Job__c"
                job-posted-path="b3o__Date_Posted__c"
                job-board-path="b3o__Job_Boards__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-expiry-path="b3o__Available_Until__c"
                job-app-form-path="b3o__Application_Form__c"
                job-app-btn-label-path="b3o__Apply_Button_Text__c"
                job-doc-pack-path="b3o__Document_Pack__c"
                job-reg-form-path="b3o__Registration_Form__c"
                label-no-job="Job not found"
                label-invalid-job-id="Invalid job identifier"
                register-btn-label="Register & Apply"
            ></job-post>
        </div>
    </body>
</html>
</apex:page>

External Websites

Similar to how the component(s) are embedded in visualforce pages, you can embed Job Boards and Job Posts on wordpress, joomla and other external systems by simply providing relative path to the static resources.

Attributes Description

User and Job Board Settings

user-id: User's unique ID. Not required. Usually the contact's Id. If not provided, the user can register/login via the login form or login component.
job-board-name: The name of the job board (Job Board -> Name). Must match the Name field of the Job Board record created in Salesforce.

Customization and Overrides

places-api-key: Key for Google Places API, if using.
app-documents-link : Usually set to '/b3o__MyDocuments' - this is the page the user will be directed to if the Job has a Post-Application Document Pack. This is usually where the MyDocuments page (user-documents component) is hosted.
app-documents-params:this is the parameters mapping for the app-documents-link link. The parameter dpId will be the document pack Id, applicationId will be the new application's id and id will be the id of the contact
theme-type: name of theme to apply by default
hide-theme-switch: hides the theme switched from the user

Search Parameters

search-radius-opts: Options for the search radius dropdown.

The Job-App-Contact Schema

The attribute job-app-schema accepts a string that is a semi-column sperated string where the first string is the API name of the Application object, second string is the API name of the field on the Application that links the application to a Job and the third string is the API name of the field on the Application that links the application to a Contact.

URL Parameters

The JobBoard component can pre-populate filters using URL parameters. For example, to filter by employment type, location, job type, and keyword, the URL might look like:

.../JobBoard?employmentType=Contract&location=London&jobType=Vaccinator&keyword=blah

Labels

The Job Board and Job Post components are fully labelized, so they can be used in different locales.

Searching

Note that the Search by keyword field only searches the “job-title-path" field (usually, b3o__Job_Advert_Title__c)