UI Macro and UI Page prefilling data

0890KM · 2 hours ago

Hey All,

I want my UI Macro to pass data inputs from the RITM variables into the UI page input fields. What am I doing wrong?

Here's my UI Macro code:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

    <button type="button" onclick="getAddress()">Open Verification Address</button>
    <script>
        function getAddress() {
            var inputs = {};

            inputs['address'] = g_form.getValue("usps_street_address");
            inputs['city'] = g_form.getValue("uspsCity");
            inputs['state'] = g_form.getValue("uspsState");
            inputs['zipcode'] = g_form.getValue("uspsZipcode");

            // Create GlideDialogWindow
            var gdw = new GlideDialogWindow('name_of_ui_page'); 
            gdw.setTitle("Verify Address Info");


            // Pass the inputs as data
            gdw.setPreference('address', inputs['address']);
            gdw.setPreference('city', inputs['city']);
            gdw.setPreference('state', inputs['state']);
            gdw.setPreference('zipcode', inputs['zipcode']);
            gdw.setSize(800, 600);
            gdw.render();
    }
    </script>
</j:jelly>

This is the UI Page code:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide">

<html>

<head>
    <style>
        input[type="text"] {
            width: 250px;
            padding: 6px;
            box-sizing: border-box;
        }

        .form-field {
            margin-bottom: 12px;
        }

        label {
            display: block;
            margin-bottom: 4px;
            font-weight: bold;
        }
    </style>
</head>

<j:set var="address" value="${preferences.address}" />
<j:set var="city" value="${preferences.city}" />
<j:set var="state" value="${preferences.state}" />
<j:set var="zipcode" value="${preferences.zipcode}" />

<g:ui_macro name="name_of macro">
    <g:param name="address" value="${address}" />
    <g:param name="city" value="${city}" />
    <g:param name="state" value="${state}" />
    <g:param name="zipcode" value="${zipcode}" />
</g:ui_macro>

<div>
    <div>
        <h3><strong>Please verify the address</strong></h3>
        <p>To ensure we have the correct information on file, enter your full address below. This helps us confirm your location and provide accurate service.</p>
    </div>
    <h3>Mailing Address</h3>
    <div class="form-field">
        <label for="addrStreet">Street Address</label>
        <input type="text" id="addrStreet" value="${address}" />
    </div>
    <div class="form-field">
        <label for="addrCity">City</label>
        <input type="text" id="addrCity" value="${city}" />
    </div>
    <div class="form-field">
        <label for="addrState">State</label>
        <input type="text" id="addrState" value="${state}" />
    </div>
    <div class="form-field">
        <label for="addrZip">ZIP Code</label>
        <input type="text" id="addrZip" value="${zipcode}" />
    </div>
</div>

<div>
    <button id="verifyBtn" class="btn btn-primary">Verify Address</button>
</div>

</html>
</j:jelly>