---
schema_version: "1"
id: d0be5c335a50e64f8736765950d6617a4cd629eefaa89c3305f8109eafdee80e
title: Utility Functions for Lightning Web Components ReadMe (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_utility_functions_for_lightning_web_components_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_utility_functions_for_lightning_web_components_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: fad499ed2fe6b92bdf0dd0e5289438756ba1b029204f4cb16ef9ab5b6f7323c5
description: For the managed package runtime, this page contains a Utility Functions for Lightning web components ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# Utility Functions for Lightning Web Components ReadMe (Managed Package)

For the managed package runtime, this page contains a Utility Functions for Lightning web components ReadMe for each Vlocity release.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

## 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"

}
```