Composite Address Control

Few controls were not ported to the UCI interface during the transition from Classic UI and "Composite Address Control" was one of those few. This control gives the same experience user used to have in Classic Client and introduce few enhancements that were not available in the previous version:

• Showing/hidding of address fields without the code or business rules
• Control is available not only for OOB entities like account/contact/lead but for custom entities as well
• Lookup attributes are supported for "City", "State" and "Country" fields (all other fields support only text attributes)
• Formatting of the "Full Address" form the address fields can be customized using JavaScript
• Order of the "Address" fields in the composite pop-up can be customized using JavaScript

Basic Usage Instructions

1. To use this control you have to download and install the latest version of AB Controls Toolkit on your CDS instance that is available in Releases.
2. Open the form where you want to use the control (as of now, 02/25/2021, Maker Experience doesn't support 3-rd Party Custom Controls so it's required to use Old Customization experience).
3. It's not possible to use "Address 1: Composite" field for OOB Entities so use/create custom field that will be used to store the "Formatted Address".
4. Place the field to the form, select it and click "Change Properties".
5. Chose "Controls" tab, click "Add Control", select the "Composite Address" control from the list of available controls and click "Add":
6. Choose types of "Application Clients" that will use this control, bind fields to required control properties - Street 1, City, Zip/Postal Code and to optional if you have need - Street 2, Street 3, County, State/Province, Country. Address Fields that were not bound will not be shown in the popup window:
7. It is required for the proper work of the control all of the fields bound to be present on the form (it doesn't matter if field is visible or not).
8. When all changes are done and published open the record form and click on the "Address" field. If everything was configured the right way you should see following popup:

Extended Configuration

In order to enable extended configuration of the control create the JavaScript webresource with the function that returns the object of the following type:

{
    Fields: Array<string>,
    FormatAddress: Function,
    LinesNumber: number
}

All attributes of the configurational object are optional. If attribute is not introduced following defaults are used:

• Fields - ["street1", "street2", "street3", "city", "county", "state", "postalcode", "country"]
• FormatAddress - US format is used, i.e.:

street1
street2
street3
city, state postalcode
country

• LinesNumber - 4

Example of the configuration:

function getCompositeAddressConfiguration() {
    return {
        LinesNumber: 7,
        Fields: ["country", "postalcode", "state", "city", "street1", "street2", "street3"],
        FormatAddress: function(address) {
            var lineBreak = "\r\n";

            var fullAddress = [
                formatAddressPart("", address.country),
                formatAddressPart(lineBreak, address.postalcode),
                formatAddressPart(lineBreak, address.state),
                formatAddressPart(lineBreak, address.city),
                formatAddressPart(lineBreak, address.street1),
                formatAddressPart(lineBreak, address.street2),
                formatAddressPart(lineBreak, address.street3)
            ];

            return fullAddress.join("");
        }
    };
}

//This is helper code to format address easier
function formatAddressPart(predesessor, addressPart) {
    if (typeof addressPart === "undefined" || addressPart.trim() === "") {
        return "";
    }

    return predesessor + addressPart;
}

Here is description of every property available on the configuration object:

• LinesNumber - number of lines for the formatted address holder:

• Fields - the order of the fields to be displayed - the order in array from left to right defines the location of the field in the popup from up to bottom:

• FormatAddress - the function that is used to format the resulting address. It accepts "address" object that has following type:

{
    street1: string | null | undefined;
    street2: string | null | undefined;
    street3: string | null | undefined;
    city: string | null | undefined;
    county: string | null | undefined;
    state: string | null | undefined;
    postalcode: string | null | undefined;
    country: string | null | undefined;
}

As a result function has to return the formatted address.

Once the webresource is created in the system and published configure it in the PCF control: