Magento 2.1 how to trigger UI Component onUpdate() on load

Question

Trying to implement field dependency in magento 2.1. It works fine when change the value of field manually but it doesnt work on page loading using the value of field. Following is the code i used

listing_edit_form.xml

<fieldset name="property_features_details">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="collapsible" xsi:type="boolean">true</item>
                <item name="label" xsi:type="string" translate="true">Property Features</item>
                <item name="sortOrder" xsi:type="number">15</item>
            </item>
        </argument>
        <field name="is_propertyview_allowed">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Property View Allowed</item>
                    <item name="component" xsi:type="string">DLBA_Properties/js/form/element/propertyviewalloweddate</item>
                    <item name="dataType" xsi:type="string">number</item>
                    <item name="formElement" xsi:type="string">checkbox</item>
                    <item name="source" xsi:type="string">is_propertyview_allowed</item>
                    <item name="dataScope" xsi:type="string">is_propertyview_allowed</item>
                    <item name="prefer" xsi:type="string">toggle</item>
                    <!-- <item name="disabled" xsi:type="boolean">true</item> -->
                    <item name="valueMap" xsi:type="array">
                        <item name="true" xsi:type="string">1</item>
                        <item name="false" xsi:type="string">0</item>
                    </item>
                    <!-- <item name="sortOrder" xsi:type="number">12</item> -->
                </item>
            </argument>
        </field>
        <field name="view_allowed_till">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="label" xsi:type="string" translate="true">Viewing Allowed Till</item>
                    <item name="formElement" xsi:type="string">date</item>
                    <item name="source" xsi:type="string">view_allowed_till</item>
                    <item name="dataScope" xsi:type="string">view_allowed_till</item>
                    <item name="outputDateFormat" xsi:type="string">dd-MM-y</item>
                    <item name="inputDateFormat" xsi:type="string">y-MM-dd</item>
                    <item name="visibleValue" xsi:type="string">1</item>
                    <item name="visible" xsi:type="boolean">false</item>
                </item>
            </argument>
        </field>
        <field name="area">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Area</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">area</item>
                    <item name="dataScope" xsi:type="string">area</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="bedrooms">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">number</item>
                    <item name="label" xsi:type="string" translate="true">No of Bedrooms</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">bedrooms</item>
                    <item name="dataScope" xsi:type="string">bedrooms</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="bathrooms">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">number</item>
                    <item name="label" xsi:type="string" translate="true">No of Bathrooms</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">bathrooms</item>
                    <item name="dataScope" xsi:type="string">bathrooms</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
    </fieldset>

propertyviewalloweddate.js

define([
    'jquery',
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/single-checkbox-toggle-notice',
    'Magento_Ui/js/modal/modal'
], function ($,_, uiRegistry, checkbox, modal) {
    'use strict';

    return checkbox.extend({
        initialize: function () {
            this._super();
            console.log(uiRegistry.get('index = is_propertyview_allowed').value());
            return this;
        },
        onUpdate: function (value) {
            this.checkIfAllowed(value);
            return this._super();
        },
        checkIfAllowed:function(value){
            console.log('Selected Value: ' + value);
            console.log(uiRegistry.get('index = is_propertyview_allowed').value());
            var allowed_date_field = uiRegistry.get('index = view_allowed_till');
            if (allowed_date_field.visibleValue == value) {
                allowed_date_field.show();
            } else {
                allowed_date_field.hide();
            }
            return this;
        }
    });

});

Following is the error. When i try to call uiRegistry in initialize function it throws following error

Cannot read property 'value' of undefined

It is the line console.log(uiRegistry.get('index = is_propertyview_allowed').value()); inside initialize function.

But it works fine inside onUpdate function. Any help is appreciated

Thanks in advance

Answer 1

I Solved it myself for now. Not saying this is the best solution. But this workaround works fine to set the value while page is loading. But i am still trying to find out the exact method to implement it. Solved it using following code

var allowedViewDateTimer;
define([
    'jquery',
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/single-checkbox-toggle-notice',
    'Magento_Ui/js/modal/modal'
], function ($,_, uiRegistry, checkbox, modal) {
    'use strict';

    return checkbox.extend({
        initialize: function () {
            this._super();
            //console.log(uiRegistry.get('index = is_propertyview_allowed').value());
            this.onUpdate(this.value());
            return this;
        },
        onUpdate: function (value) {
            this.checkIfAllowed(value);
            return this._super();
        },
        checkIfAllowed:function(value){
            //console.log('Selected Value: ' + value);
            //console.log(uiRegistry.get('index = is_propertyview_allowed').value());
            try{
                var allowed_date_field = uiRegistry.get('index = view_allowed_till');
                if (allowed_date_field.visibleValue == value) {
                    allowed_date_field.show();
                } else {
                    allowed_date_field.hide();
                }
            }
            catch(errObj){
                allowedViewDateTimer = window.setTimeout(function(){
                    setDependencyFields(value);
                },500);
            }
            return this;
        }
    });

    function setDependencyFields(value){
        try{
            var allowed_date_field = uiRegistry.get('index = view_allowed_till');
            if(allowed_date_field.visibleValue!=undefined){
                if (allowed_date_field.visibleValue == value) {
                    allowed_date_field.show();
                } else {
                    allowed_date_field.hide();
                }
                window.clearTimeout(allowedViewDateTimer);
            }
        }
        catch(errObj){
            console.log(errObj.message);
        }
        return true;
    }

});

Answer 2

On page fully loaded using ui_component I'm using resolver for manipulate fields once everything loaded.

define([
    'jquery',
    'rjsResolver'
], function ($, resolver) {
    'use strict';

    return function (Form) {
        return Form.extend({
            initialize: function () {
                this._super();

                console.log('Hello ');

                resolver(this.onLoaded, this);

            },
            onLoaded: function () {
                console.log ("name=" + this.name);

            },
        });
    }
});