Service Portal DropDown

shiprashaw · ‎10-26-2016

Hi All,

I have created a dropdown in a widget.

The dropdown should add options dyanamically from a table.

Below if the server side code getting the data from table:

// populate the 'data' object

data.myUserObject = gs.getUser().getFullName();

var t = new GlideRecord('u_customer_360');

//t.addQuery('name', 'kb_knowledge');

//t.addQuery('element', 'topic');

t.query();

while (t.next()) {

// var articles = $sp.getKBTopicArticles(t.getValue('value'));

//if (articles.length == 0)

// continue;

data.name = t.getValue('u_customer_name')

data.category=t.getValue('u_category');

data.address=t.getValue('u_address');

data.account=t.getValue('u_account');

data.segment=t.getValue('u_segment');

data.billing_start=t.getValue('u_billing_start_date');

data.billing_end=t.getValue('u_billing_end_date');

data.service_start=t.getValue('u_service_start_date');

data.mail=t.getValue('u_email');

data.subscriber=t.getValue('u_subscriber_id');

}

Below if the client code of widget to add data to a dropdown having id "mySelect":

function() {

/* widget controller */

var c = this;

var op=c.data.account;

selectID = document.getElementById('mySelect');

myOption = document.createElement("option");

myOption.text = op;

selectID.appendChild(myOption);

}

When i am hard-coding the value of myOption.text (suppose "Hello World"), it is perfectly adding it to the dropdown while the same is not happening in case of c.data.account.

I have tried using $scope.account as well, but also did not work.

Kindly help!!

ChrisBurks · ‎10-27-2016

Hi Shipra,

Since you didn't re-post your server code, I'm assuming you're using what you posted previously:

Server Side code:

data.item=[];

var z = new GlideRecord('u_customer_360');

z.query();

var a = {}; <----------------------Move this inside the while loop

while (z.next()) {

a.acc=z.getValue('u_subscriber_id');

gs.log(a.acc,"aaa");

data.item.push(a);

}

If the "a" object is outside of the loop it will always contain the same data. So the above code should look like this:

Server Side code:

data.item=[];

var z = new GlideRecord('u_customer_360');

z.query();

while (z.next()) {

var a = {}; <----------------------inside the while loop

a.acc=z.getValue('u_subscriber_id');

gs.log(a.acc,"aaa");

data.item.push(a);

}

View solution in original post

Brad Tilton · ‎10-26-2016

Hi Shipra,

I would go about this in a different way where you're using angular rather than dom manipulation. First of all, in your server script I would push all of those values to an array rather than hardcoding properties into the data object. If you do that you can use ngOptions to build your select box and skip the client section.

AngularJS - ngOptions

shiprashaw · ‎10-26-2016

Hi Brad,

I tried the solution you suggested but its not working. The values are correctly getting stored in an array but the same array is not generating option in html.

HTML:

</select>

Server Side code:

data.item=[];

var z = new GlideRecord('u_customer_360');

z.query();

var a = {};

while (z.next()) {

a.acc=z.getValue('u_subscriber_id');

gs.log(a.acc,"aaa");

data.item.push(a);

}

Thanks

ChrisBurks · ‎10-26-2016

Hi Shipra,

One of the differences between using ngRepeat and ngOptions is that ngModel has to be used in conjunction with ngOptions. And you'll probably want to dot walk out an actual key instead of just using the whole object when setting ngOptions.

ie: <select ng-options="a.acc for a in data.item" ng-model="c.subscribers"></select>

shiprashaw · ‎10-27-2016

Hi Chris,

I did used ng-model with ng-option. Now it is pulling data but its is just pulling one value twice rather than two different values from the data.item.

The table has two value suppose "A" and "B" but its only pulling A twice.

Client Code:

function() {

var c = this;

this.data.OptionText=c.data.item;

}

HTML:

Kindly suggest.