How can I update Dropdown Items dynamically with JS

Forms
1

Hi,

How can I update Dropdown Items dynamically with JS? I try to set the Items property but nothing happens.

fd.field(‘DropDown0’).items = itemsArray;

Greetings,
George

2

Talked to support:

fd.field(‘DropDown0’).widget.setDataSource({data: [‘1’, ‘2’, ‘3’]});

George

1 Like
3

Hi George!

I’m sorry, I missed this topic in the community.

4

Hi,

How to update dropdown data source include text and value with text show on UI

Thanks

5

Hi!

I’m sorry, I don’t quite understand your issue. Could you please provide us a screenshot of what do you want to implement?

6

Hi,

after run fd.field(‘DropDown0’).widget.setDataSource({data: [‘1’, ‘2’, ‘3’]});
how to set selected value for the “DropDown0” value that is “2”

Thanks,

7

Hi!

Please use this code:

fd.field('DropDown0').widget.select(1);

‘1’ is an index of a choice value. Notice that this index is zero-based.

8

Hi,

I have array object like follow:
var datasource = {
Type0: { value: 0, text: “A” },
Type1: { value: 1, text: “B” },
Type2: { value: 2, text: “C” },
Type3: { value: 3, text: “D” },
};
I want to set the “text” value (A, B, C, D) of that array of object to dropdown choice

Please give me suggest code.
Thanks

9

Dear @dat,
Please, try it like this:

fd.field('DropDown0').widget.setDataSource(datasource);var datasource = [
  { value: 0, text: "A" },
  { value: 1, text: "B" },
  { value: 2, text: "C" },
  { value: 3, text: "D" },
  { value: 4, text: "E" }
];
fd.field('DropDown0').widget.setDataSource(datasource);
fd.field('DropDown0').widget.setOptions({dataTextField : 'text', dataValueField: 'value'});
2 Likes
10

hi I have tried this, however, when I select the option in dropdown, it will show [object Object]

 fd.control('DataTable1').$on('edit', function(e) {
           console.log("DataTable1 edit => " + e.column.field);
            if (e.column.field === 'Location'){        
               populateCategories(e.widget, e.model.Location, "Location");     
            }
    });

image

           var location = [];
            pnp.sp.web.lists.getByTitle('Location Master Data').items.select('Title', 'Description').get().then(function(items){
                    
                items.forEach(item => {
                    location.push({value: item.Title, text: item.Description});
                    //location.push({text: item.Description});
                });
                widget.setDataSource({data: location});
                widget.setOptions({dataTextField : "text", dataValueField: "value"});   
                widget._hideBusy(); 
            });
11

Dear @Derek_wong,
I don't understand your code, we have an example here -

Here's the code you need to use:

fd.spRendered(function() {
    fd.control('DataTable1').$on('edit', function(e) {
        if (e.column.field === 'Location') {
            //pass widget + current Location value
            populateLocations(e.widget, e.model.Location);
        }
    })

});

function populateLocations(widget, value) {
    //will show as loading
    widget._showBusy();

    sp.web.lists.getByTitle('Location Master Data').items
        .select('ID', 'Title')
        .get()
        .then(function(items) {
            //set options
            widget.setDataSource({
                data: items.map(function(i) { return i.Title })
            });

            //set value if one was select
            widget.value(value);
            //hide loading state
            widget._hideBusy();
        });
}
12

@Nikita_Kurguzov ,

I need to display text and get the selected value , same as your previous example. However, after I have selected the item, it only show the [object Object] instead of the text or value

fd.field('DropDown0').widget.setDataSource(datasource);var datasource = [
{ value: 0, text: "A" },
{ value: 1, text: "B" },
{ value: 2, text: "C" },
{ value: 3, text: "D" },
{ value: 4, text: "E" }
];
fd.field('DropDown0').widget.setDataSource(datasource);
fd.field('DropDown0').widget.setOptions({dataTextField : 'text', dataValueField: 'value'});

13

Dear @Derek_wong,
But you're doing something else in your sample above. By the way, what's the version of the app package you're using? Check it in your app catalog:
image

If you have older version than 1.8.1, please, follow update instruction here - Update the app package for Plumsail Forms (SharePoint Online) — SharePoint forms

14

@Nikita_Kurguzov May I know where can find this version in sharepoint ?

15

image

I am using 1.8.8 designer

16

Dear @Derek_wong,
This is not the same, this is the version of the desktop app. You need to check the app package. It can be found in your app catalog, the URL will be different depending on your setup.

You go to Admin Center > SharePoint Admin Center >More features > Apps:

image
image1609×704 37.6 KB

App catalog:
image

Distribute apps for SharePoint:

image
image867×604 25.9 KB

17

will that matter on the drop down showing object Object instead of text value?

18

Dear @Derek_wong,
It matters for everything, including this issue. It's likely that the functionality was updated with the app package, and we cannot help if we are not sure which version you're using.

19

I am not the admin on sharepoint , I will check tmr with the right person, May I know why it will keep show this error. when I click the dropdown in the datatable
image

20

btw..I just got the information
image