DropDown Field Add Options

Forms
1

I have a standard DropDown field, that I want to add options to.

The field is called ddlComponents.

I use the following code (same as I use on a Multu Select which works fine) but nothing is added to the Drop Down:

fd.field("ddlComponents").options.push(com.Title);

What am I doing wrong?

2

Hello @sphilson,

For a drop-down choice field you can use this code to add new options:

var options = fd.field('Choice').options;
options.push('new option');
fd.field('Choice').widget.setDataSource({
            data: options
        });
3

Is it possible to set a Title and Value?

For example, if I have the following data:
ID, Title
1, Item A
2, Item B
3, Item C

Then when the user selects "Item B" from the dropdown, I can get the ID 2? (note IDs are not "ordinal" in real need so IDs could be any numeric value, not an incrementing value.

4

The first two lines work fine, but the third line throws a js error:

Uncaught (in promise) TypeError: Cannot read property 'setDataSource' of null
at :20:69
at Array.forEach ()
at :17:35

5

@sphilson,

In this case, it is better to use the Lookup field. Thus you can filter values dynamically and get extra values. Please find the example here.

Please replace 'Choice' in the code with the internal name of the field.

var options = fd.field('Choice').options;
options.push('new option');
fd.field('Choice').widget.setDataSource({
            data: options
        });
6

To use a Lookup Field, I have to create a List/Library and link a field on my main list to this new list. That is not the scenario I have/need.

My need is I need a drop down list, that I can populate with arbitrary data, then execute some code when the user selects one of those arbitrary items based on an ID. The arbitrary data is not necessarily available as SharePoint list.

7

I did, this is the actual code I have:

var options = fd.field('ddlComponents').options;
options.push(com.Name);
fd.field('ddlComponents').widget.setDataSource({
data: options
});

8

Hello @sphilson,

Is that a common field or SharePoint field? Could you please share the screenshot of the form.

Also, could you please share the complete code that you are using. Thank you!

9

Hi @mnikitina ,

I'm using the code you posted here to push values into a dropdown, but I need to push different values based on another dropdown.

What would be the best way to do this?

thanks
Matt

10

Hello @mattforrestxar,

You can check the value of the first dropdown and based on that push specific values to the second dropdown.

fd.field('DropDown1').$on('change', function(value){
    var options;
    if(value == 'Item 1'){
        var options = ['Choice 1', 'Choice 2']
    }
    if(value == 'Item 2'){
        var options = ['Choice 3', 'Choice 4']
    }

    if(options){
        fd.field('DropDown2').widget.setDataSource({
            data: options
        });
   }
})
11

Thanks @mnikitina that's worked a treat. :grinning:

1 Like
12

@mnikitina I'm using SharePoint list to load data to Drop-down using following code

web.lists.getByTitle('Department Codes').items.select('Title').get().then(function(items) {

    fd.field('DropDown1').widget.setDataSource({
        data: items.map(function(i) { return i.Title })
    });

});

}

Is there a way to add only unique values to the drop-down(distinct) ?

13

Hello @madhawa.rajapaksha,

You can use this code to create a new array with unique Titles only:

pnp.sp.web.lists.getByTitle('ListName').items.select('Title').get().then(function(items) {
    //create new array with unique Titles
    var resArr = [];
    items.filter(function(itm){
      var unq = resArr.findIndex(x => (x.Title == itm.Title));
      if(unq <= -1){
            resArr.push(itm);
      }
      return null;
    })
    
    fd.field('Field1').widget.setDataSource({
        data: resArr.map(function(i) { return i.Title })
    });
});
1 Like
14

@mnikitina,
Thanks for your quick response …!!!, I also tried to do it different approaches, so I have ended up with below code with in one line. It is also working. I like to know your feedback about my code.

pnp.sp.web.lists.getByTitle('ListName').items.select('Title').get().then(function(result) {
fd.field('Field1').widget.setDataSource({
data: result.map(item => item['Title']).filter((value, index, self) => self.indexOf(value) === index)

});

});

15

@madhawa.rajapaksha,

This approach is an option too. Great job!)

1 Like
16

Thanks @mnikitina ...!!!