school_picker.md

School Picker

Usage

• Add the school-picker-params.js file or add schoolPickerParameters to window directly in the html and modify the token

<script src="school-picker-params.js"></script>


window.schoolPickerParameters = {
    token: <token>,
    availableStatus: [
        0, //Open
        // 1, // Proposed to open
        2, // Open, but proposed to close
        // 3, // Closed
    ],
}

• Add the school-picker.js file after the school-picker-params

<script src="school-picker.js"></script>

• Add a div with school-picker as id:

<form
    <div id="school-picker"></div>
    <button type="submit"> Submit </button>
</form>

• To get the different values from the input in an API:

school-picker-name -> school's name
school-picker-la -> school's la
school-picker-urn -> school's urn
school-picker-postcode -> school's postcode
school-picker-full-info -> school's all information

• Style Classes:

school-picker -> school picker component
picker__menu -> suggestions box
menu__item --> suggestion item
item--active -> suggestion hovered
picker__error -> errors

• Custom Colors:

In public/styles.css file, edit these custom properties in order to customize your brand colors. For Internet Explorer fallback, you need to manually set the attributes.

--primary-color
--secondary-color

• About Bootstrap:

The main template of this project uses Bootstrap 4.4.1 for global layout classes.

Functionality

• You can type the URN, Name, LA or Postcode, or any combination of those four items, and the API will return the matching item or items, or the first 10 results if more than 10 items are available.
• To exclude/include schools by the status you can comment/uncomment the different status in the school-picker-params.js (by default it's only included Open and Open, but proposed to close):

    const availableStatus = [
        0, //Open
        // 1, // Proposed to open
        2, // Open, but proposed to close
        // 3, // Closed
    ];

Browser Compatibility

School verify supports up-to-date versions of Google Chrome, Firefox and Internet Explorer.