Utility Functions for Lightning Web Components ReadMe (Managed Package)

Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

isRtl

The isRTL function enables 'right-to-left' scripts.

• Arabic

• Aramaic

• Dhivehi, Maldivian

• Hebrew

• Kurdish (Sorani)

• Persian, Farsi

• Urdu Steps to implement isRtl

1. Set isRTL by adding the dir attribute inside a parent 'div' element.

     <div dir={dir}></div>

2. Assign the value (returned from isRTL function) to the respective property.

     this.dir = isRtl();

createMask

The createMask function enables masking for input fields.

• dd-ddd-ddd

• yyyy-mm-dd

• dd-mm-yyyy

• yyyy/mm/dd

• dd/mm/yyyy

Example custom masks

To add a custom mask, use '#' keyword to represent the digits.

• value = "12345678901234" mask="+7(###)###-##-##" mask-range ="10"

  • output: +7(123)456-78-90

• value = "1234123412341234" mask="#### ####" mask-range ="16"

  • output: 1234 1234 1234 1234

• value = "1234123412341234" mask="$###,###"

  • output: $1234,1234,1234,1234

• value = "123456789" mask="$##.##"

  • output: $1234567.89

• value = "123456789" mask="##.##%"

  • output: $1234567.89%

Implementation

Call createMask function on 'keyup' event of input.

  this.value = creatMask(event)

fetchCustomLabels

The fetchCustomLabels function gets custom labels, and accepts one required parameter and two optional parameters.

1. Pass an array of labels

2. (Optional) Specify a language.

   • The function returns the translations for the labels array based on the language. If language is not passed the function will use the language from the userprofile.

3. (Optional) Specify default values for labels.

   • If there are no translations available for a label, a default value is returned. However, if an array of labels are passed, and any one or more labels do not have translations and no default values are defined, then an error is thrown. The error displays in the console, points to the faulty label, and returns the label key as the translation.

Note The labels array and the default values must be of the same length so that they are mapped correctly. If labels and values are incorrectly mapped, the default values are not considered.

Example fetchCustomLabels function

    fetchCustomLabels(["DeleteLayout", "Preview", "DRMapperFilter"], "en-US", [/** Default  values array **/]).then(
        data => {
        console.log(data);
    });

Example fetchCustomLabels output

The output is an object with a key-value pair. The key is the label and the value is the translation in the provided language.

{
    DRMapperFilter: "Filter"
    DeleteLayout: "Delete Layout?"
    Preview: "Preview"

}

Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

isRtl

The isRTL function enables `right-to-left' scripts.

Supported languages

• Arabic

• Aramaic

• Dhivehi, Maldivian

• Hebrew

• Kurdish (Sorani)

• Persian, Farsi

• Urdu Steps to implement isRtl

Implementation

1. Set isRTL by adding the dir attribute inside a parent `div' element.

  <div dir={dir}></div>

1. Assign the value (returned from isRTL function) to the respective property.

  this.dir == isRtl();

createMask

The createMask function enables masking for input fields.

Available masks

• dd-ddd-ddd

• yyyy-mm-dd

• dd-mm-yyyy

• yyyy/mm/dd

• dd/mm/yyyy

Example custom masks

To add a custom mask, use `#' keyword to represent the digits.

• value == 12345678901234'' mask=+7()--'' mask-range =``10''

  • output: +7(123)456-78-90

• value == 1234123412341234'' mask= # #'' mask-range =``16''

  • output: 1234 1234 1234 1234

• value == 1234123412341234'' mask=$,''

  • output: $1234,1234,1234,1234

• value == 123456789'' mask=$.''

  • output: $1234567.89

• value == 123456789'' mask= .%''

  • output: $1234567.89%

Implementation

Call createMask function on `keyup' event of input.

  this.value == creatMask(event)

fetchCustomLabels

The fetchCustomLabels function gets custom labels, and accepts one required parameter and two optional parameters.

Implementation

Note The labels array and the default values must be of the same length so that they are mapped correctly. If labels and values are incorrectly mapped, the default values are not considered.

1. Pass an array of labels

2. (Optional) Specify a language.

   • The function returns the translations for the labels array based on the language. If language is not passed the function will use the language from the userprofile.

3. (Optional) Specify default values for labels.

   • If there are no translations available for a label, a default value is returned. However, if an array of labels are passed, and any one or more labels do not have translations and no default values are defined, then an error is thrown. The error displays in the console, points to the faulty label, and returns the label key as the translation.

Example fetchCustomLabels function

    fetchCustomLabels(["DeleteLayout", "Preview", "DRMapperFilter"], "en-US", [/** Default  values array **/]).then(
        data => {
        console.log(data);
    });

Example fetchCustomLabels output

The output is an object with a key-value pair. The key is the label and the value is the translation in the provided language.

{
    DRMapperFilter: "Filter"
    DeleteLayout: "Delete Layout?"
    Preview: "Preview"

}