Actions after a MRVS update

[AdriaM]

Hope this helps,

Sometimes you need to update a form field depending on the row values of a MRVS.

This rows can be updated with the edit button but also a MRVS can be update deleting a row, so we need to do some action before any change is made to the MRVS.

There is no Client Script onChange of a MRVS so we need to do it ourself.

MRVS on the SP

MRVS content can be read on the SP simply doing g_form.getValue('<mrvs_internal_name>').

Also we know that on SP we have the angular approach $scope.$watch that let us monitor any value change on the page.

We will use this on our solution

MRVS on the UI

On the UI the MRVS is the value attribute of a MRVS DOM element.

We also know that we can monitor any attribute change on the DOM via MutationObserver library.

We will also use this in our solution.

MRVS Update solution

With this approach we are ready to define our client script.

On the SP we need get the scope to add a new watch, We do this on the following instruction:

var scope = this.angular.element("#sc_cat_item").scope();

On the UI we need to translate MRVS internal name to DOM element. We do this on the following instruction:

var varname = g_form.resolveNameMap('<mrvs_internal_name>');

Finally here is our Client Script code:

Name: MRVS Update

Type: OnLoad

UI Type: all

Applies on: Catalog Item, Request Items, Catalog Tasks

Isolate script: false

function onLoad() {

    if (window === null) {
        // Write your mobile or service portal compatible code here
        spChange();
    } else {
        // Write your desktop compatible code here
        uiChange();
    }

    function spChange() {

        var scope = this.angular.element("#sc_cat_item").scope();
        scope.$watch(function() {
            return g_form.getValue('<mrvs_internal_name>');
        }, function(value) {

            alert('MRVS UPDATED');
// DO FORM UPDATES HERE
        });
    }

    function uiChange() {
        // DOM element that contains the MRVS
        var varname = g_form.resolveNameMap('<mrvs_internal_name>');
        var element = gel(varname);

        function callback(mutationList, observer) {
            mutationList.forEach(function(mutation) {
                alert('MRVS UPDATED 2');
// DO FORM UPDATES HERE
            });
        }
        var config = {
            "attributes": true,
            "childList": false,
            "subtree": false,
            "characterData": false
        };
        var observer = new MutationObserver(callback);
        observer.observe(element, config);
    }
}