Vlocity, salesforce amend the existing Omniscript Controls

How to customize the behavior of any control in omniscript in vlocity?

Scenario:- Override the behavior of Telephone to show data from SFDC even though it’s not valid and add the corresponding styling.

Prerequisite:- Need access to vlocity omniscript (OS) templates, we need vlcTel.txt code base, so we can override the existing omniscript telephone control behavior

Before > SFDC has phone value as 8 digits say, OS won’t show its value on the UI by default as ng-pattern won’t be valid thus it’s not pre-populated with 8 digits phone.

After > A workaround, in our case we still need to show the phone, as 8 digits but indicate an error to users on the UI, so that they can correct this value here instead of going to Salesforce

Step1:- Fetch the vlcText and create new vlocity template

<div class='slds-col--padded slds-size--1-of-1'>

    <ng-form name='loopform'
             class='slds-form-element vlc-flex vlc-slds-tel'
             ng-repeat='control in child.eleArray'>

        <div vlc-slds-include="vlcLabelController.html"></div>

        <div class="slds-form-element__control">

            <div class="vlc-control-wrapper" help="{{::control.propSetMap.help}}">

                <input id='{{::control.name}}'
                       type='text'
                       ng-disabled='control.ro'
                       ng-required='control.req'
                       name="loopname"
                       ng-model='control.response'
                       ng-blur='aggregate(this, control.index, control.indexInParent, true, -1)'
                       ng-model-options="{ updateOn: 'default focusout blur', debounce: { 'default': control.propSetMap.debounceValue, 'focusout': 0, 'blur': 0 } }"
                       class='slds-input form-control'
                       vlc-slds-val-checker="telControl"
                       ui-mask='{{::control.propSetMap.mask}}'
                       ng-minlength='{{::control.propSetMap.minLength}}'
                       ng-maxlength='{{::control.propSetMap.maxLength}}'
                       vlc-slds-ng-pattern='{{::control.propSetMap.pattern}}'
                       vlc-slds-attr="placeholder" />


                <label for="{{::control.name}}" class='slds-form-element__label'>{{::control.propSetMap.label}}
                    <span class='vlc-asterix icon-v-asterix'
                          ng-if='control.req'>
                    </span>
                </label>

                <!-- tooltip template -->
                <a vlc-slds-tool-tip="test" ng-show="{{control.propSetMap.help}}"> i </a>


            </div>

            <div ng-include="::errHTMLId"></div>

        </div>

    </ng-form>

</div>

Step2:- Override the existing behavior of control in OS by referring to the newly created template in “HTML Template Mapping”

• OS > Designer >Script Configuration > HTML Template Mapping

Step3:- Customize the vlcText to add your own custom logic, like we added the custom logic in controller, which overrides the existing OS behavior

HTML

<div class='slds-col--padded slds-size--1-of-1 telus-thx-override-textfield' ng-controller="textFieldController">
    <ng-form name='loopform'
             class='slds-form-element vlc-flex vlc-slds-tel'
             ng-repeat='control in child.eleArray'>

        <div vlc-slds-include="vlcLabelController.html"></div>

        <div class="slds-form-element__control">

            <div class="vlc-control-wrapper" help="{{::control.propSetMap.help}}" >

                <input id='{{::control.name}}'
                       type='text'
                       ng-disabled='control.ro'
                       ng-required
                       name="loopname"
                       ng-model='control.response'
                       ng-blur='aggregate(this, control.index, control.indexInParent, true, -1)'
                       ng-model-options="{ updateOn: 'default focusout blur', debounce: { 'default': control.propSetMap.debounceValue, 'focusout': 0, 'blur': 0 } }"
                       class='slds-input form-control'
                       vlc-slds-val-checker="telControl"
                       ng-minlength='{{::control.propSetMap.minLength}}'
                       ng-maxlength='{{::control.propSetMap.maxLength}}'
                       ng-class= 'getClass(control)'
                       vlc-slds-attr="placeholder"/>


                <label for="{{::control.name}}" class='slds-form-element__label'>{{::control.propSetMap.label}}
                    <span class='vlc-asterix icon-v-asterix'
                          ng-if='control.req'>
                    </span>
                </label>

                <!-- tooltip template -->
                <a vlc-slds-tool-tip="test" ng-show="{{control.propSetMap.help}}"> i </a>


            </div>

            <div ng-include="::errHTMLId"></div>

        </div>

    </ng-form>

</div>

JS (Controller)

vlocity.cardframework.registerModule.controller('textFieldController', ['$scope', function($scope) {

 $scope.getClass = control => {
     const value = control.response
        //regex match for phone and fax
        if( (value && value.match(/\d/g) && value.match(/\d/g).length === 10) 
            || 
            ( control.name === 'Fax' && isFaxValueExists(value)) //fax is not required
         )
        {
            return 'isValid'
        }

      return 'notValid'
    }

const isFaxValueExists = value => value === '' || value === null  

}]);