Javascript Application Form API: Hard Criteria Autocompletes

Hard Criteria Autocompletes module is an addition to the javascript application form that allows candidates to add a number of hard criteria from a predefined list. Optionally each type of hard criteria can be given a set of levels, the candidate can then set his level for the given hard criterium.

The 1st part of this document is meant for Salesforce consultants.
The 2nd part of this document is designed for people familiar with Javascript programming.

This module is available  in version 9+ of the resource manager.

Contents

1. Configuring Hard criterium Autocompletes in resource manager
2. Customisation through javascript and CSS

1.Configuring Hard criterium Autocompletes in resource manager

Every connexys Form can be related to by one or more (Hard criterium) Autocompletes records. When configuring, add a related list to Autocompletes to the form.
For each Autocomplete on the form a separate autocomplete field will be shown on the form.
To set the hard criteria that can be found using the autocomplete field add 1 or more Hard criterium usage records to the Autocomplete, each referring to a single Hard criterium type.

Levels can be added by selecting a Hard criterium level set for your Hard criterium type.
The way a selected hard criterium is shown on the form depends on the representation type of the Hard criterium type (single or multiple) and whether the Hard criterium type has a level set or not.

Objects related to the autocomplete configuration:
Form : cxsrec__Form__c
Hard criterium Autocompletes : cxsrec__cxsHard_Criterium_Type_Autocomplete__c
Hard criterium usage : cxsrec__cxsHard_Criterium_Type_Usage__c
Hard criterium type : cxsrec__cxsHard_Criterium_Type__c
Hard criterium level set : cxsrec__cxsHard_criterium_level_set__c
Hard criterium level : cxsHard_criterium_level__c

Hard criterium Autocomplete Fields:
- Name : The name shown above the autocomplete field on the javascript form (unless a LabelName is defined)
- LabelName : This may contain the exact name of a label, and will be used instead of the Name field with the main advantage that labels are multi-language.
- Sort order : In case of multiple autocompletes on a form, the lowest number will be shown first.

 If you want to show Hard criteria Autocompletes on your form, the Related list “Hard criteria on form” on your Form should be empty. Instead, the Hard criteria that you want to show on your form should be added to the related list “Hard criterium Autocompletes”. If you would add Hard criteria to both related lists, the Hard criteria would be shown twice on your form. 

You can use both, but make sure no hard criteria configured in the autocomplete show up in the conventional part of the form.

2.Customisation through javascript and CSS

HTML
When a form has autocomplete criteria defined it will load the data and initialise the Hard Criteria Autocompletes module after the rest of the form has rendered. The module will be placed in <div class="cxsAutoCompleteCriteria". This container will initially only contain a spinner, and is part of a section with class "cxsAutocompletecriteriaSection".

CSS
The CSS for this module in contained within the standard javascript API stylesheet (https://YourSalesforceDomain/resource/cxsrec__cxsFormStyle). All styles for this module start with ".cxsAutoCompleteCriteria".
This standard stylesheet currently uses display:flex in the cxsAutoCompleteCriteriaLevel class, to space the radiobuttons of the levels. It will use a fallback for browsers that lack support for "@supports (display: flex)", in which case the levels are shown vertically instead of horizontally.
Which of course can be overridden with your own stylesheet).

Javascript
We allow you to add your own javascript functions to some events that can happen on the form. It works with callback parameters. These parameters refer to a custom javascript function on your page. These functions can be used to perform changes to the HTML of the page, giving you more control over what is happening on the page.

The hard criteria autocomplete knows the following events:

<script>
    cxsForm.init({
        target:"#cxsFormHolder",
        server:"https://MyCompany.force.com/",
        onBeforeCriteriaInit: MyCriteriaBeforeInit
    });
</script>

<script>
    cxsForm.init({
        target:"#cxsFormHolder",
        server:"https://MyCompany.force.com/",
        onAfterCriteriaInit: MyCriteriaAfterInit
    });
</script>

<script>
    cxsForm.init({
        target:"#cxsFormHolder",
        server:"https://MyCompany.force.com/",
        onBeforeCriteriaSearch: MyCriteriaSearch
    });
</script>

<script>
    cxsForm.init({
        target:"#cxsFormHolder",
        server:"https://MyCompany.force.com/",
        onAfterCriteriaUpdate: MyCriteriaAfterUpdate
    });
</script>