postcodex-lib v1.0.2

README

This README would normally document whatever steps are necessary to get your application up and running.

What is this repository for?

• JS Lib project to help integrate postcodex api
• Version 1.0.1

How do I get set up?

Lib integration

• add the postcodex-lib package

npm i postcodex-lib

• include the lib into the app

// app.js
import 'postcodex-lib';

• create the form (no need to use the form element)

        <div>
            Postcode:<br/>
            <input type="text" name="postcode" id="postcode"/>&nbsp;&nbsp;&nbsp;
            <button type="button" onclick="pcx.postcodeLookup.handle()">Find Address</button><br/>
            <div name="postcode_list_display" id="postcode_list_display">&nbsp;</div><br/>
            Company:<br/>
            <input type="text" name="companyname" id="companyname"/><br/>
            Address:<br/>
            <input type="text" name="address1" id="address1"/><br/>
            <input type="text" name="address2" id="address2"/><br/>
            <input type="text" name="address3" id="address3"/><br/>
            Town:<br/>
            <input type="text" name="town" id="town"/><br/>
        </div>

• configure the JS with embedded onclick

        var pcx = new PostcodexApi({  
            token: "8UE7DHBU7ZD2X3D5QW5",
            postcodeLookupOptions: {  
                pcx_output             : "postcode_list_display",  
                pcx_input              : "postcode",  
                pcx_organisationname   : "companyname",  
                pcx_addressline1           : "address1",  
                pcx_addressline2           : "address2",  
                pcx_addressline3           : "address3",  
                pcx_posttown           : "town",  
                selector_type          : "id"
            }  
        });

• configure the JS without embedded onclick

        var pcx = new PostcodexApi({
            token: "8UE7DHBU7ZD2X3D5QW5"
        })
        pcx.postcodeLookup("wire", {
            button: "#pc_lookup"
        })

        var pcx = new PostcodexApi({
            token: "8UE7DHBU7ZD2X3D5QW5"
        })
        pcx.postcodeLookup.wire({
            button: "#pc_lookup"
        })

        var lookupBtn = document.querySelector("#pc_lookup");
        var pcx = new PostcodexApi({
            token: "8UE7DHBU7ZD2X3D5QW5"
        });
        lookupBtn.onclick  = function () {
            pcx.postcodeLookup.handle({
                pcx_output  : "postcode_list_display",  
                pcx_input   : "postcode"
            });
        }

        var pcx = new PostcodexApi({
            token: "8UE7DHBU7ZD2X3D5QW5"
        });
        var lookupBtn = document.querySelector("#pc_lookup");
        lookupBtn.onclick = function () {
            pcx.postcodeLookup.perform({
                pcx_input  : "postcode"
            }, 
            function (r) {
                console.log(r);
            });
        }

• Options to instantiate the PostcodexApi class

  token

    * Allows to set the token (mandatory - no default value)
    

  postcodeLookupOptions

    * Allows to set the class options

• Postcode Lookup Options

  lookup_url

  • Allows to override the default lookup url

    selector_type

  • Allow to set the DOM elements selection method id or name (default: id)
    When starting the element selector with # it forces the selection by id

    pcx_output

  • Allows to identify the DOM element where to append the addresses list (selector) or messages

    pcx_input

  • Allows to identify the postcode input to perform the search

    pcx_postcode

  • Element to fill in with selected address field

    pcx_posttown

  • Element to fill in with selected address field

    pcx_dependentlocality

  • Element to fill in with selected address field

    pcx_doubledependentlocality

  • Element to fill in with selected address field

    pcx_thoroughfare

  • Element to fill in with selected address field

    pcx_dependentthoroughfare

  • Element to fill in with selected address field

    pcx_buildingnumber

  • Element to fill in with selected address field

    pcx_buildingname

  • Element to fill in with selected address field

    pcx_subbuildingname

  • Element to fill in with selected address field

    pcx_pobox

  • Element to fill in with selected address field

    pcx_departmentname

  • Element to fill in with selected address field

    pcx_organisationname

  • Element to fill in with selected address field

    pcx_udprn

  • Element to fill in with selected address field

    pcx_postcodetype

  • Element to fill in with selected address field

    pcx_suorganisationidentifier

  • Element to fill in with selected address field

    pcx_deliverypointsuffix

  • Element to fill in with selected address field

    pcx_addressline1

  • Element to fill in with selected address field

    pcx_addressline2

  • Element to fill in with selected address field

    pcx_addressline3

  • Element to fill in with selected address field

    pcx_addressline4

  • Element to fill in with selected address field

    pcx_addressdescription

  • Element to fill in with selected address field

    button

  • Selector to wire the onclick action (only used on the wire method - mandatory)

• Callback parameter

  The callback function will be executed with the api response.

  The API response respects the following sample:

    [
        {
            "postcode": "NE664HA",
            "postTown": "ALNWICK",
            "dependentLocality": "Powburn",
            "doubleDependentLocality": "",
            "thoroughfare": "Crawley Dene",
            "dependentThoroughfare": "",
            "buildingNumber": "31",
            "buildingName": "",
            "subBuildingName": "",
            "poBox": "",
            "departmentName": "",
            "OrganisationName": "",
            "udprn": "50631590",
            "postcodeType": "S",
            "suOrganisationIdentifier": "",
            "deliveryPointSuffix": "1A",
            "addressLine1": "31 Crawley Dene",
            "addressLine2": "Powburn",
            "addressLine3": "ALNWICK",
            "addressLine4": "",
            "addressDescription": "31 Crawley Dene, Powburn, ALNWICK"
        }
    ]

Who do I talk to?

• Repo owner or admin
• Other community or team contact