Prefilling Product Search Filters

We want to prefill filters for Product Search like Job Title, Job Function, Location and Industry, how can we do that?

Prefilling Job Title

Prefilling this would require mapping VONQ values with values of yours. To find a VONQ job title, the end user needs to enter a search term then select a value. The options are not readily available and they are lazily loaded after user finishes typing the search term. The below code snippets simulate that behavior programmatically.

Prefilling Job Title with options VONQ provides

// all the data below is just example data and should not be used when doing the mapping
// you need to manually do the mapping on your end, in your preferred way
// there are more fitting Data Structures and performance optimized ways
// the code below is just an example of doing it one way
const vonqJobTitleMapping = {
    someUselessKey1: {
        // 101 refers to your "id" of the job title for "Software Developer"
        // 155 refers to your "id" of the job title for Software Analyst"
        from: [101, 155],
        // 15 refers to VONQs "id" of the job title for "Software Engineer"
        to: [15]
    },
    someUselessKey2: {
        // 899 refers to your "id" of the job title for "Plane Housekeeping"
        from: [899],
        // 3878 refers to VONQs "id" of job title for "Aircraft Cleaner"
        to: [3878]
    },
    someUselessKey3: {
        // 566 refers to your "id" of the job title for "Residential Cleaner"
        from: [566],
        // 3905 refers to VONQs "id" of job title for "Domestic Cleaner"
        // 130 refers to VONQs "id" of job title for "Cleaner"
        to: [3905, 130]
    }
}

const targetJobTitleOfOurs = {
    label: "Software Developer",
    id: 101
}
// If you want to search for "Software Developer" then the best term would be
// "software" or more generally "soft"
const searchTerm = "Software"
const {results: jobTitlesOfVONQ} = await window.hapi.product.service.getJobTitles.run(searchTerm)

const getMatchingVONQJobTitle = (vonqJobTitles, targetJobTitle) => {
    let matchingVONQJobTitle = undefined
    Object
        .values(vonqJobTitleMapping)
        .filter(mapping => mapping.from.includes(targetJobTitle.id))
        .find((mapping) => {
            matchingVONQJobTitle = vonqJobTitles.find(vonqJobTitle => mapping.to.includes(vonqJobTitle.id))
            // early exit by returning true when matching is found so the loop does not run unnecessarily
            return  matchingVONQJobTitle !== undefined
        })


    return matchingVONQJobTitle
}

const matchingVONQJobTitle = getMatchingVONQJobTitle(jobTitlesOfVONQ, targetJobTitleOfOurs)

if (matchingVONQJobTitle) {
    // set the options for the dropdown otherwise dropdown will not show the selected option
    window.hapi.product.state.jobTitles = jobTitlesOfVONQ
    // set the selected job title with the matching one
    window.hapi.product.state.jobTitlesIdsSelected = [matchingVONQJobTitle.id]

    // set the matching job function with this job title
    if (matchingVONQJobTitle.job_function?.id) {
        window.hapi.product.state.jobFunctionsIdsSelected = [matchingVONQJobTitle.job_function?.id]
    }
}

Prefilling Job Title with arbitrary values of yours

Please refer to Setting Arbitrary Job Title for Search for how to prefill job title with arbitrary value.

Prefilling Job Function

// all the data below is just example data and should not be used when doing the mapping
// you need to manually do the mapping on your end, in your preferred way
// there are more fitting Data Structures and performance optimized ways
// the code below is just an example of doing it one way
const vonqJobFunctionMapping = {
    someUselessKey1: {
        // 341 refers to your "id" of the job function for "Chemical Research"
        from: [341],
        // 37 refers to VONQs "id" of job function for "Chemistry"
        to: [37]
    },
    someUselessKey2: {
        // 732 refers to your "id" of the job function for "Biological Research"
        from: [732],
        // 53 refers to VONQs "id" of job function for "Biosciences"
        to: [53]
    }
}

const targetJobFunctionOfOurs = {
    label: "Chemical Research",
    id: 341
}

const jobFunctionsTreeOfVONQ = await window.hapi.product.service.getJobFunctions.run()
// job functions are in nested tree structure thus we need to flatten them to find the option
const flattenedJobFunctions = window.hapiUtils.getFlattenedTree(
    jobFunctionsTreeOfVONQ,
    "children",
    "name",
    "id",
)

const getMatchingVONQJobFunction = (vonqJobFunctions, targetJobFunction) => {
    let matchingVONQJobFunction = undefined
    Object
        .values(vonqJobFunctionMapping)
        .filter(mapping => mapping.from.includes(targetJobFunction.id))
        .find((mapping) => {
            matchingVONQJobFunction = vonqJobFunctions.find(vonqJobFunction => mapping.to.includes(vonqJobFunction.value))
            // early exit by returning true when matching is found so the loop does not run unnecessarily
            return  matchingVONQJobFunction !== undefined
        })


    return matchingVONQJobFunction
}

const matchingVONQJobFunction = getMatchingVONQJobFunction(flattenedJobFunctions, targetJobFunctionOfOurs)

if (matchingVONQJobFunction) {
    // set the selected job function with the matching one
    window.hapi.product.state.jobFunctionsIdsSelected = [matchingVONQJobFunction.value]
}

Prefilling Location

Please keep in mind that there are thousands of locations and it would be hard to map each one so you can utilize some full text search based algorithms to help you find the best matching location rather than the example shown below.

// all the data below is just example data and should not be used when doing the mapping
// you need to manually do the mapping on your end, in your preferred way
// there are more fitting Data Structures and performance optimized ways
// the code below is just an example of doing it one way
const vonqJobLocationMapping = {
    someUselessKey1: {
        // 101 refers to your "id" of the job location for "Germany"
        from: [101],
        // 2375 refers to VONQs "id" of the job location for "Germany"
        to: [2375]
    },
    someUselessKey2: {
        // 155 refers to your "id" of the job location for Germany - Berlin"
        from: [155],
        // 2375 refers to VONQs "id" of the job location for "Germany"
        to: [2367]
    },
    someUselessKey3: {
        // 899 refers to your "id" of the job location for "German Valley, IL, US"
        from: [899],
        // 50907 refers to VONQs "id" of job location for "German Valley, Illinois, United States"
        to: [50907]
    }
}

const targetJobLocationOfOurs = {
    label: "Germany - Berlin",
    id: 155
}
// If you want to search for "Germany - Berlin" then the best term would be
// "Berlin" or more generally "Germany"
const searchTerm = "Berlin"
const jobLocationsOfVONQ = await window.hapi.product.service.getLocations.run(searchTerm)

const getMatchingVONQJobLocation = (vonqJobLocations, targetJobLocation) => {
    let matchingVONQJobLocation = undefined
    Object
        .values(vonqJobLocationMapping)
        .filter(mapping => mapping.from.includes(targetJobLocation.id))
        .find((mapping) => {
            matchingVONQJobLocation = vonqJobLocations.find(vonqJobLocation => mapping.to.includes(vonqJobLocation.id))
            // early exit by returning true when matching is found so the loop does not run unnecessarily
            return  matchingVONQJobLocation !== undefined
        })


    return matchingVONQJobLocation
}

const matchingVONQJobLocation = getMatchingVONQJobLocation(jobLocationsOfVONQ, targetJobLocationOfOurs)

if (matchingVONQJobLocation) {
    // set the options for the dropdown otherwise dropdown will not show the selected option
    window.hapi.product.state.jobRegions = jobLocationsOfVONQ
    // set the selected job location with the matching one
    window.hapi.product.state.jobRegionsIdsSelected = [matchingVONQJobLocation.id]
}

Prefilling Industry

// all the data below is just example data and should not be used when doing the mapping
// you need to manually do the mapping on your end, in your preferred way
// there are more fitting Data Structures and performance optimized ways
// the code below is just an example of doing it one way
const vonqIndustryMapping = {
    someUselessKey1: {
        // 341 refers to your "id" of the industry for "Teaching"
        from: [341],
        // 24 refers to VONQs "id" of the industry for "Education"
        to: [24]
    },
}

const targetIndustryOfOurs = {
    label: "Teaching",
    id: 341
}

const jobIndustriesOfVONQ = await window.hapi.product.service.getIndustries.run()

const getMatchingVONQIndustry = (vonqIndustries, targetIndustry) => {
    let matchingVONQIndustry = undefined
    Object
        .values(vonqIndustryMapping)
        .filter(mapping => mapping.from.includes(targetIndustry.id))
        .find((mapping) => {
            matchingVONQIndustry = vonqIndustries.find(vonqIndustry => mapping.to.includes(vonqIndustry.id))
            // early exit by returning true when matching is found so the loop does not run unnecessarily
            return  matchingVONQIndustry !== undefined
        })


    return matchingVONQIndustry
}

const matchingVONQIndustry = getMatchingVONQIndustry(jobIndustriesOfVONQ, targetIndustryOfOurs)

if (matchingVONQIndustry) {
    // set the selected job function with the matching one
    window.hapi.product.state.jobIndustriesIdsSelected = [matchingVONQIndustry.id]
}

Prefilling Product Search Filters

We want to prefill filters for Product Search like Job Title, Job Function, Location and Industry, how can we do that?​

Prefilling Job Title​

Prefilling Job Title with options VONQ provides​

Prefilling Job Title with arbitrary values of yours​

Prefilling Job Function​

Prefilling Location​

Prefilling Industry​