Tuesday, January 5, 2021

Set Optionset value transition validation

There are scenarios we want the option set field value has to transition in an order, for instance, if Low, Medium and High are the available labels of an option set field, and we want to restrict transitions so that from low, can transition only to medium, and from high only to medium. We would need some client side scripting for best UI experience to achieve this. 
We do have this OOB for Status reason, but not for option set fields.

We will need to have functions onLoad, onChange (OnRatingLevelChange) of the option set field and onSave , as named in the script.
On Load, we save the value in a variable which will be used for accessing the Pre - Change value.

Below is an example where in the valid transitions are stored in an object - ratingMapping for        Low<->Medium->High transition and accordingly the changes to the option set field are validated. 

// if HS namespace is not defiende create it.
if (typeof (myNamespace) == "undefined") { myNamespace = {}; }
myNamespace.optionValidation =
{   
    previousRatingLevel: null,
    OnLoad: function (executionContext) {
        var formContext = executionContext.getFormContext();
        this.SetOnLoadRatingLevel(formContext);
    },
    OnSave: function (executionContext) {
        var formContext = executionContext.getFormContext();
        if (this.ValidateRatingLevel(formContext)) {
            this.SetOnLoadRatingLevel(formContext);
        }
    },
    SetOnLoadRatingLevel: function (formContext) {
        previousRatingLevel = formContext.getAttribute("abc_ratinglevel").getValue();
    },
    OnRatingLevelChange: function (executionContext) {
        var formContext = executionContext.getFormContext();
        this.ValidateRatingLevel(formContext);
    },
    ValidateRatingLevel: function (formContext) {
        if (!!previousRatingLevel) {
            var validated = false;
            var lowStatus = 717710000;
            var mediumStatus = 717710001;
            var highStatus = 717710002;
            var ratingMapping = { 717710002: [highStatus, mediumStatus], 717710000: [lowStatus, mediumStatus], 717710001: [mediumStatus, lowStatus, highStatus] };
            var ratingLevelAttribute = formContext.getAttribute("abc_ratinglevel");
            var ratingLevelControl = formContext.getControl("abc_ratinglevel");
            var currentRatingLevel = ratingLevelAttribute.getValue();
            var ratingLevelErrorMessage = 'Please make Valid transition Low-> Medium, Medium -> Low / High, High -> Medium';
            var invalidRatingLevelTransitionMessageId = 'invalidRatingLevelTransitionMessageId';
            var timeout = 5000;
            if (!!ratingMapping[previousRatingLevel] && ratingMapping[previousRatingLevel].indexOf(currentRatingLevel) > -1) {
                validated = true;
                ratingLevelControl.clearNotification(invalidRatingLevelTransitionMessageId);
            }
            else {
                ratingLevelControl.setNotification(ratingLevelErrorMessage, invalidRatingLevelTransitionMessageId);
                setTimeout(function () {
                    ratingLevelControl.clearNotification(invalidRatingLevelTransitionMessageId);
                }, timeout);
                ratingLevelAttribute.setValue(previousRatingLevel);
                validated = false;
            }
            return validated;
        }
    }
}

No comments:

Post a Comment