This is what I have working, make locations public and widget public too.
HTML template:
<div id="name-group" class="form-group" ng-class="{'has-error' : SafetyForm.location.$invalid && !SafetyForm.location.$pristine}">
<label>Location*</label>
<ui-select ng-model="c.selected.value" on-select="c.onSelectCallback($item, $model)" ng-required="true">
<ui-select-match>
<span ng-bind="$select.selected.name"></span>
</ui-select-match>
<ui-select-choices repeat="item in (c.locations | filter: $select.search) track by item.sys_id" refresh="c.refreshLocation($select.search)"
refresh-delay="0">
<span ng-bind="item.name"></span>
</ui-select-choices>
</ui-select>
<span class="help-block" ng-show="SafetyForm.location.$invalid && !SafetyForm.location.$pristine">
Please describe the location.
</span>
</div>
**************
Server :
(function() {
var locations = [];
if(input && input.action === 'searchLocation'){
var grl = new GlideRecord('cmn_location');
if(options.locations_query){
grl.addEncodedQuery(options.locations_query);
}
grl.addQuery('name', 'CONTAINS', input.query);
grl.setLimit(20);
grl.query();
while(grl.next()){
locations.push({
name: grl.name.toString(),
sys_id: grl.sys_id.toString()
});
}
data.locations = locations;
return data;
}
*****
Client
c.locations = [];
c.data.location = '';
c.selected = {value: c.locations[0]};
c.refreshLocation = function(query){
if(query) {
c.server.get({
action: 'searchLocation',
query: query
}).then(function(response){
c.locations = response.data.locations;
});
}
}
c.onSelectCallback = function(item, model) {
c.data.location = item.sys_id;
}
c.remove = function (item) {
var index = c.data.files.indexOf(item);
c.data.files.splice(index, 1);
}
}
