Multilevel dropdown

Forms SharePoint 2019
1

Hi there,

I'm creating a dropdown which changes its select options on change:

For example:
In the initial state there is only one option:

image
image823×141 1.16 KB

But on selection of this item, other related options are selected:
image
image762×271 3.92 KB

So, what i am wondering is: is there a way to add indentation to the new added items?
I am using standard setDataSource option:

dataSource.push({value: "51841970", text: "KU Leuven"});
fd.field('Organigram').widget.setDataSource(dataSource);
fd.field('Organigram').widget.setOptions({dataTextField : 'text', dataValueField: 'value'})

Any help would be greatly appreciated.

Thank you!

2

Hello @asmita_adh,

Why don't you create cascading drop-downs?

A user can select an option from the drop-down and see additional options related to the selected category in another drop-down. That would be more user-friendly and easier to implement.

You can find the instruction on how to create cascading drop-downs here.

3

Hi @mnikitina ,

Well that was my initial try but since I'm making a rest call to populate the dropdown everytime, I cant seem to change it...

fd.field('Organigram').$on('change', function(data) {
        organigramPicker();
        data ? $('#eenheidNaam').append(data + ' > ') : '';
    });

function organigramPicker(){
    var Id =  fd.field('Organigram').value;
    var query = {"query":{"match":{"_id": Id }}};
        $.ajax({
            url: "......../_search/",
            type:"post",
            dataType: "json",
            contentType: "application/json; charset=utf-8; odata=verbose;" ,
            data: JSON.stringify(query),
            success: function(data){
                $(data.hits.hits[0]._source.globalChildren).each(function(index, child){
                    dataSource.push({value: child.id, text: getGlobalNames(child.id)});
                });
            }
        }).done(() => {
            populateOrganigramDropdown();
        });
}

How do I make it work?
Thanks for your help already :slight_smile: