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 }]);