from widgect code need to set record producer variable values

[somujayadev]

Hi team , i using the widget on record producer in  from that code i'm calling event and in onload script i'm setting the values but not setting thevalues getting java script error at the time of loading the record producer.

How can i resolve the issue giving my widget client controller script  and onlaod script coode please help me to resolve the issue .

thanks for your time and support .

html code :

<div class="search-widget">

<div class="form-group search-container">

<input type="text"
class="form-control"
placeholder="Start typing the address..."
ng-model="c.searchText"
ng-change="c.onSearchChange()"
ng-keydown="c.handleKeyDown($event)" />

<!-- Spinner -->
<span class="search-icon" ng-if="c.isLoading">
<i class="fa fa-spinner fa-spin"></i>
</span>

</div>

<!-- Dropdown -->
<ul class="dropdown-list" ng-if="c.locations.length > 0">
<li ng-repeat="loc in c.locations track by $index"
ng-click="c.selectLocation(loc)"
ng-class="{'active': $index === c.selectedIndex}">
<span ng-bind-html="c.highlightMatch(loc.name)"></span>
</li>
</ul>

<!-- No results -->
<div class="no-results" ng-if="c.noResults">
Address not found
</div>

</div>

Client controller script :

api.controller = function($scope, $rootScope, spUtil) {

    /* widget controller */

    var c = this;

    c.searchText = '';

    c.locations = [];

    c.noResults = false;

    c.selectedIndex = -1;

    c.isLoading = false;

    var debounceTimer;

    var MIN_CHARS = 2;

    function getGForm(scope) {

        while (scope) {

            if (scope.g_form) return scope.g_form;

            scope = scope.$parent;

        }

        return null;

    }

    c.onSearchChange = function() {

        if (debounceTimer) {

            clearTimeout(debounceTimer);

        }

        if (!c.searchText || c.searchText.length < MIN_CHARS) {

            c.locations = [];

            c.noResults = false;

            c.selectedIndex = -1;

            c.isLoading = false;

            return;

        }

        debounceTimer = setTimeout(function() {

            c.isLoading = true; // START LOADING

            c.server.get({

                searchText: c.searchText

            }).then(function(response) {

                c.locations = response.data.locations;

                c.noResults = (c.locations.length === 0);

                c.selectedIndex = -1;

            }).finally(function() {

                c.isLoading = false; // STOP LOADING

            });

        }, 300);

    };

    c.handleKeyDown = function(event) {

        if (c.locations.length === 0) return;

        if (event.key === 'ArrowDown') {

            event.preventDefault();

            c.selectedIndex = (c.selectedIndex + 1) % c.locations.length;

        } else if (event.key === 'ArrowUp') {

            event.preventDefault();

            c.selectedIndex = (c.selectedIndex - 1 + c.locations.length) % c.locations.length;

        } else if (event.key === 'Enter') {

            event.preventDefault();

            if (c.selectedIndex >= 0) {

                c.selectLocation(c.locations[c.selectedIndex]);

            }

        }

    };

    c.selectLocation = function(location) {

        alert("You selected: " + location.name);

        alert("Response is " + location);

        alert(JSON.stringify(location.raw));

        var event;

        try {

            event = new CustomEvent('address.selected', {

                detail: location.raw

            });

        } catch (e) {

            event = document.createEvent('CustomEvent');

            event.initCustomEvent('address.selected', true, true, location.raw);

        }

        window.dispatchEvent(event);

        // Update UI after selection

        c.searchText = location.name || '';

        // CLEAR DROPDOWN

        c.locations = [];

        c.noResults = false;

        c.selectedIndex = -1;

    };

    c.highlightMatch = function(text) {

        if (!c.searchText) return text;

        var regex = new RegExp('(' + c.searchText + ')', 'gi');

        return text.replace(regex, '<strong>$1</strong>');

    };

};

Onload client script :

function onLoad() {

    // Remove any existing listener first (safe reset)

    window.removeEventListener('address.selected', addressHandler);

    // Attach fresh listener

    window.addEventListener('address.selected', addressHandler);

    function addressHandler(event) {

        try {

            var addr = event.detail;

            if (!addr) return;

            console.log("Event received:", addr);

            g_form.setValue('street_name1', addr.street_address || '');

            g_form.setValue('town_city', addr.city || '');

            g_form.setValue('postal_code_zip_code', addr.postcode || '');

            g_form.setValue('supplier_country', addr.country || '');

        } catch (e) {

            console.log("Error setting values:", e);

        }

    }

}

[Ankur Bawiskar]

@somujayadev 

the syntax to get and set value of variable from widget is like this

$scope.page.g_form.setValue('variableName', 'value');

var val = $scope.page.g_form.getValue('variableName');

💡 If my response helped, please mark it as correct ✅ and close the thread 🔒— this helps future readers find the solution faster! 🙏