Jazzhr-custom-widget NPM

JazzHR Custom Widget

A customizable job widget with clean markup and minimal styles.

Installation

If you use npm or yarn, you can include this repo as a dependency:

# the npm way
npm i --save jazzhr-custom-widget
# the yarn way
yarn add jazzhr-custom-widget

If you don't use npm or yarn, or you just want to get started, download the bundle file and add it to your project:

# download the latest bundle
wget https://raw.githubusercontent.com/mitchellnemitz/jazzhr-custom-widget/master/dist/jazzhr-custom-widget.min.js

jsDelivr is a free CDN for public Github projects (like this one) that you can use instead of downloading:

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/mitchellnemitz/jazzhr-custom-widget@latest/dist/jazzhr-custom-widget.min.js"></script>

Usage

Getting started is just three steps:

Include the library bundle in your project (see "Installation" above)
Load the library in the browser
Initialize the widget

A very simple page layout may look something like this, assuming you've already completed step one:

<!doctype html>
<html>
<head>
    <!-- 2. Load the library bundle -->
    <script type="text/javascript" src="path/to/jazzhr-custom-widget.min.js"></script>
</head>
<body>
    <div id="jazzhr-custom-widget"></div>

    <!-- 3. Initialize the library bundle -->
    <script type="text/javascript">
    jazzhrCustomWidget.initialize(
        // A selector for the element where you want the widget to be created
        "#jazzhr-custom-widget",

        // Your feed URL is found in JazzHR under Settings > Career Page > XML Job Feed
        "https://app.jazz.co/feeds/export/jobs/subdomain",

        // Optional. Filters are applied to the job list before rendering, allowing you to reduce the list of jobs
        // displayed in the widget to those that match a particular set of values. The keys are properties on a job
        // object, and values may be either a string (which default to the "exactly" operator) or an object with a
        // value and operator property. Available operators are: exactly, contains, startswith, endswith.
        {
            title: {
                operator: "startswith",
                value: "Software Engineer"
            },
            description: {
                operator: "contains",
                value: "Angular"
            },
            department: {
                operator: "exactly",
                value: "Engineering"
            }
            city: {
                operator: "endswith",
                value: "burgh"
            },
            state: "PA",
            postal: "15233",
            country: "United States",
            internalCode: "ABC"
        },

        // Optional. A javascript function that will be invoked with the structured feed data. The default template is
        // written in mustache, but any function that accepts feed data and returns an HTML string is valid.
        function render(feedData) {
            var template = mustache.compile(
                `{{#jobs}}
                    <div>
                        <h3>{{title}}</h3>
                        <div>{{description}}</div>
                        <p><a href="{{applyUrl}}">Apply</a></p>
                    </div>
                {{/jobs}}`
            );

            return template.render(feedData);
        }
    );
    </script>
</body>
</html>

Structure of the data passed to the template function on render:

{
    "customer": {
        "name": "string"
    },
    "jobs": [
        {
            "id": "string",
            "status": "string",
            "title": "string",
            "applyUrl": "string",
            "description": "string",
            "department": "string",
            "city": "string",
            "state": "string",
            "postal": "string",
            "country": "string",
            "location": "string",
            "internalCode": "string",
            "jobBoardCode": "string",
            "locationClass": "string",
            "departmentClass": "string"
        }
    ]
}

The Mustache Manual is a comprehensive resource for getting started creating your own templates.

Development

Getting started is only a few commands:

git clone git@github.com:mitchellnemitz/jazzhr-custom-widget.git
cd jazzhr-custom-widget
yarn # or npm install
yarn run watch # or npm run watch

Open demo.html to see the default template in action.

Typescript source is contained in src and contributors should follow the "be consistent" code style guide, meaning there is no formal style enforcement but you're expected to mimic the existing style choices and keep the linter happy.

The default template is src/template.html and contains the main markup of the widget and some default styles. src/widget-factory.ts contains the class who's singleton instance is exposed via the UMD pattern. src/widget.ts is the meat of the functionality, with the proxy, fetching, parsing, filtering, and rendering all being done inside. src/widget-helper.ts is responsible for the wiring around the default behavior of toggling job description and apply link visiblity and is exposed as helper on the factory.

Webpack is used to compile and uglify the code into a bundle, which is exposed globally as jazzhrCustomWidget.

jazzhr widget

promise whatwg-fetch xml-js

@infinitebrahmanuniverse/nolb-jaz

5 years ago

5 years ago

5 years ago

5 years ago