ServicePortal Issue problem 1

[sanyalshubh]

we have two dropdowns in a Service Portal widget —Country and State. When the user selects a country, the State dropdown should automatically populate with the corresponding states for that country.
So the above is not coming up.. how to build this logic on portal. On the table I can build the logic but in portal how to build?

[Sandeep Rajput · Accepted solution]

@sanyalshubh On your widget, I am assuming you have two drop downs, representing country and state. In your Widget HTML you can have the HTML like following.

<div>
  <label for="country">Country:</label>
  <select id="country" ng-model="data.selectedCountry" ng-change="c.getStates()">
    <option ng-repeat="country in data.countries" value="{{country.value}}">
      {{country.label}}
    </option>
  </select>
</div>

<div>
  <label for="state">State:</label>
  <select id="state" ng-model="data.selectedState" ng-disabled="!data.states.length">
    <option ng-repeat="state in data.states" value="{{state.value}}">
      {{state.label}}
    </option>
  </select>
</div>

In the widget client script, you can implement the event as follows,

(function() {
  angular.module('myApp').controller('myWidgetCtrl', function($scope, spUtil) {

    $scope.c.getStates = function() {
      if (!$scope.data.selectedCountry) return;
      
      $scope.data.states = [];  // Clear existing states

      // Call server to fetch states based on the selected country
      $scope.server.get({
        country: $scope.data.selectedCountry
      }).then(function(response) {
        $scope.data.states = response.states || [];
      });
    };

  });
})();

In the server side script, you can fetch the states based on selected country.

(function() {
  data.countries = [
    { label: 'United States', value: 'US' },
    { label: 'Canada', value: 'CA' },
    { label: 'India', value: 'IN' }
  ];

  data.states = [];

  if (input && input.country) {
    var stateRecords = new GlideRecord('u_state_table'); // Replace with your actual state table
    stateRecords.addQuery('country', input.country);
    stateRecords.query();

    var states = [];
    while (stateRecords.next()) {
      states.push({
        label: stateRecords.getValue('name'),
        value: stateRecords.getValue('sys_id')
      });
    }

    data.states = states;
  }
})();

[Dr Atul G- LNG]

Hi @sanyalshubh 

You can use the auto-populate, or make the state dependent on the country.

[sanyalshubh]

Hi @Dr Atul G- LNG 
I have a widgets that has two field .. so on widgets how we can achieve?

[Dr Atul G- LNG]

My hands are tight in scripting, so you can check code provided by @Sandeep Rajput  or @Ravi Gaurav 

[sanyalshubh]

Thanks @Dr Atul G- LNG no woories the code suggested by them with some tweak worked for me .. thanks for helping the community