How to pass reference field value to <script> tag in html of UI Page?

[Ankita Kolhe]

Hi Community,

Below is the highlighted html script where I need to pass reference field value to script tag:-

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

    <g:evaluate var="jvar_isNextPg" expression="RP.getParameterValue('sysparm_next_pg')"/>

    <j:choose>

        <j:when test="${jvar_isNextPg != 'true'}">

            <script>

            //var demo=entity;

            var x=document.getElementById("entity");

         //   var x=${entity};

            console.log('x: '+x);

                var iframeMsgHelper = (function () {

                    console.log('0*********');

                function createPayload(action, modalId, data) {

                    console.log('4*********');

                    return {

                        messageType: 'IFRAME_MODAL_MESSAGE_TYPE',

                        modalAction: action,

                        modalId: modalId,

                        data: (data ? data : {})

                    };

                }

                function pm(window, payload) {

                    if (window.parent === window) {

                        console.warn('Parent is missing. Is this called inside an iFrame?');

                        return;

                    }

                    console.log('5*********');

                    window.parent.postMessage(payload, location.origin);

                }

                function IFrameMessagingHelper(window) {

                    console.log('1*********');

                    this.window = window;

                    this.src=location.href;

                    this.messageHandler = this.messageHandler.bind(this);

                    this.window.addEventListener('message', this.messageHandler);

                }

                IFrameMessagingHelper.prototype.messageHandler = function (e) {

                    console.log('2*********');

                    if (e.data.messageType !== 'IFRAME_MODAL_MESSAGE_TYPE' || e.data.modalAction !== 'IFRAME_MODAL_ACTION_INIT') {

                        return;

                    }

                    this.modalId = e.data.modalId;

                };

                IFrameMessagingHelper.prototype.confirm = function (data) {

                    console.log('3*********');

                    //console.log('demo: '+entity);

                    var payload = createPayload('IFRAME_MODAL_ACTION_CONFIRMED', this.modalId, entity);

                    pm(this.window, payload);

                };

                IFrameMessagingHelper.prototype.cancel = function (data) {

                    console.log('6*********');

                    var payload = createPayload('IFRAME_MODAL_ACTION_CANCELED', this.modalId, data);

                    pm(this.window, payload);

                };

                return new IFrameMessagingHelper(window);

            }());

            </script>

            <g:ui_form>

    <g:ui_reference name="entity" id="entity" table="x_kpm79_kpmgi_iogc_kpmgi_iogc_entity_management_base"  completer="AJAXTableCompleter" ng-model="group"/>

<g:dialog_buttons_ok_cancel ok="return ok()" ok_style_class="btn btn-destructive" ok_text="${gs.getMessage('Submit')}" cancel="return cancel()" ok_type="button" cancel_type="button"/>

    </g:ui_form>

            <script>

                document.getElementById("ok_button").focus();

            </script>

        </j:when>

        <j:otherwise></j:otherwise>

    </j:choose>

    <style>

        .btn-destructive {

            background-color: rgb(220, 20, 60);

        }

        .outputmsg_div, #page_timing_div {

            display:none !important;

        }

        .modal-alert, .modal-md {

            width: 100%;

        }

        .modal-alert .modal-footer {

            padding: 10px 0px;

        }

        .modal-md .modal-footer {

            padding: 20px 10px 5px;

        }

        div.empty-space:after {

            content: "\00a0";

        }

    </style>

</j:jelly>

Could anyone please help on this?

Thanks,

Ankita

[Unique45]

Hello @Ankita Kolhe ,

Using getElementById method yo can get field value in script tag:

<script>
   var entity = document.getElementById('entity').value;
</script>

[Ankita Kolhe]

Hello @Unique45 ,

It's not working.

Thanks

[Unique45]

@Ankita Kolhe ,

Add alert and check the value of the entity and please let me know.

<script>
var entity = document.getElementById('entity').value;
alert(entity);
</script>

[Aniket Chavan]

Hello @Ankita Kolhe 

Give a try to the code below and see how it works for you.

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <g:evaluate var="jvar_isNextPg" expression="RP.getParameterValue('sysparm_next_pg')"/>
    <j:choose>
        <j:when test="${jvar_isNextPg != 'true'}">
            <script>
                // Extract the value of the reference field "entity"
                var entityValue = g_form.getValue('entity');

                // Pass the value to the IFrameMessagingHelper.prototype.confirm method
                iframeMsgHelper.confirm(entityValue);
            </script>
            <script>
                // ... Your existing script continues here
                // Ensure the rest of your script is not affected by the modification
                document.getElementById("ok_button").focus();
            </script>

            <g:ui_form>
                <g:ui_reference name="entity" id="entity" table="x_kpm79_kpmgi_iogc_kpmgi_iogc_entity_management_base"  completer="AJAXTableCompleter" ng-model="group"/>
                
                <g:dialog_buttons_ok_cancel ok="return ok()" ok_style_class="btn btn-destructive" ok_text="${gs.getMessage('Submit')}" cancel="return cancel()" ok_type="button" cancel_type="button"/>
            </g:ui_form>
        </j:when>
        <j:otherwise></j:otherwise>
    </j:choose>
    <style>
        .btn-destructive {
            background-color: rgb(220, 20, 60);
        }
        .outputmsg_div, #page_timing_div {
            display:none !important;
        }
        .modal-alert, .modal-md {
            width: 100%;
        }
        .modal-alert .modal-footer {
            padding: 10px 0px;
        }
        .modal-md .modal-footer {
            padding: 20px 10px 5px;
        }
        div.empty-space:after {
            content: "\00a0";
        }
    </style>
</j:jelly>

Please Mark ✅Correct if this solves your query and also mark 👍Helpful if you find my response worthy based on the impact.

Thanks,

Aniket