Address Lookup Widget Issue

Peter Williams · ‎04-11-2023

Hello everyone i am trying to create a address lookup widget, however i am now able to push the information i have from the widget to the Fields in the Req item form in service now.

Body HTML Template code:

<html lang="en">
<body>
<h1>Autocomplete Search</h1>
<form ng-submit="$event.preventDefault()" data-pg-verify>
<div class="wrapper">
<label for="line1">Line 1</label>
<div type="text" ng-model="c.data.line1" id="line1" data-pg-address-line1 onchange="addVal"></div>
<div class="error" data-pg-address-line1-message></div>
</div>
<div class="wrapper">
<label for="line2">Line 2</label>
<input type="text" ng-model="c.data.line2" id="line2" data-pg-address-line2 />
<div class="error" data-pg-address-line2-message></div>
</div>
<div class="wrapper">
<label for="city">City</label>
<input type="text" ng-model="c.data.city" id="city" data-pg-city />
<div class="error" data-pg-city-message></div>
</div>
<div class="wrapper">
<label for="state">State/Province</label>
<input type="text" ng-model="c.data.state" id="state" data-pg-prov />
<div class="error" data-pg-prov-message></div>
</div>
<div class="wrapper">
<label for="zip">Zip/Postal Code</label>
<input type="text" ng-model="c.data.zip" id="zip" data-pg-pc />
<div class="error" data-pg-pc-message></div>
</div>
<div class="wrapper">
<label for="zip">Country</label>
<input type="text" ng-model="c.data.country" id="country" data-pg-country />
<div class="error" data-pg-country-message></div>
</div>

</form>
<div
class="generic-message"
data-pg-generic-message>
</div>
<div data-pg-status></div>
<script
src=
data-pg-key=
></script>
</body>
</html>

Client Controller:

function($scope) {
var c = this;
c.addVal = function () {

var line1 = document.getElementById('line1');
var city = document.getElementById('city');
var state = document.getElementById('state');
var zip = document.getElementById('zip');
var country = document.getElementById('country');

c.data.line1 = line1;
c.data.city = city;
c.data.state = state;
c.data.zip = zip;
c.data.country = country;
var g_form = $scope.page.g_form;
if(line1){
g_form.setValue('adresse_address', line1); // adresse_address is the variable name i am trying to get information in
}

c.server.update();
}
}

any help here is appricated

Punit S · ‎04-11-2023

Hi Peter,

It looks like there are a few things that might be causing issues with your code:

In your HTML template, you have a div with the ID "line1" and a "data-pg-address-line1" attribute. However, in your controller code, you are trying to access this element by its ID ("line1") instead of using the attribute selector ("[data-pg-address-line1]").
In your controller code, you are setting the c.data.line1 variable equal to the HTML element object itself(line1), rather than its value (line1.value) . The same is true for the other variables (city, state, etc.).
You are calling c.server.update() after setting the variables, which will send the entire c.data object to the server, rather than just the updated fields.

Here's an updated version of your controller code that should address these issues:

function($scope) {
  var c = this;
  c.addVal = function() {
    var line1 = document.querySelector('[data-pg-address-line1]').value;
    var city = document.querySelector('[data-pg-city]').value;
    var state = document.querySelector('[data-pg-prov]').value;
    var zip = document.querySelector('[data-pg-pc]').value;
    var country = document.querySelector('[data-pg-country]').value;
    
    c.data.line1 = line1;
    c.data.city = city;
    c.data.state = state;
    c.data.zip = zip;
    c.data.country = country;
    
    var g_form = $scope.page.g_form;
    if(line1) {
      g_form.setValue('adresse_address', line1);
    }
  };
}

This code uses the document.querySelector() method to select the HTML elements based on their attributes, and sets the c.data variables to their values. It also sets the adresse_address field on the form using the g_form.setValue() method, but only if the line1 variable has a value. Finally, it removes the unnecessary c.server.update() call.

Please mark my answer correct/helpful in case it adds value and moves you a step closer to your desired ServiceNow solution goal.

Thanks,
Punit

Peter Williams · ‎04-12-2023

thank you for your reply but it doesnt seem to have worked