Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Dynamics 365 Community / Forums / Microsoft Dynamics 365 | Integration, Dataverse... / Toggle multiple-select...
Microsoft Dynamics 365 | Integration, Dataverse...
Answered

Toggle multiple-select columns disability and empty columns JavaScript

(0) ShareShare
ReportReport
Posted on by ALAN365

Hello,

I have a requirement that toggle multiple-select columns disability. The detail as below

I have 4 multiple-select columns: Category (abc_category), Tool (abc_tool), Book (abc_book) and Food (abc_food).

Category
- Tool (100010000)
- Book (100010001)
- Food (100010002)

Tool
- Tool01(100010000)
- Tool02(100010001)
- Tool03(100010002)

Book
- Book01(100010000)
- Book02(100010001)
- Book03(100010002)
- Book04(100010003)

Food
- Food01(100010000)
- Food02(100010001)

All the columns are inserted in a Form. When the form onload, only Category displayed. Once selecting one/more item/s, the relate column/s will display and the item/s can be selected.
For example,
1. In Category, Tool is selected, the Tool column displayed and then the items, for example, Tool01 and Tool03 are selected.
2. Now, in Category, I unselect Tool item, the Tool column should be disappeared from the form AND the selected items, Tool01 and Tool03 need to be cleared.
3. When I again select items Tool from Category, Tool column will display, but it's a blank column.

My code as below. Part of the second functionality does not work, that mean, cannot empty Tool column once I unselect Tool item in Category. Could you please check the code and find where is wrong.

function toggleMultiSelectVisibility(executionContext) {

    debugger;

    const formContext = executionContext.getFormContext();

    formContext.getControl("abc_tool").setVisible(false);

    formContext.getControl("abc_book").setVisible(false);

    formContext.getControl("abc_food").setVisible(false);


    const category = formContext.getAttribute("abc_category");

    const CategorySelectedOptions = category.getSelectedOption();

    if (CategorySelectedOptions != null) {


        if (CategorySelectedOptions.filter(i => i.value === 100010000).length > 0) {

            formContext.getControl("abc_tool").setVisible(true);

        } else {

            formContext.getAttribute("abc_tool").setValue(null);

        }

        if (CategorySelectedOptions.filter(i => i.value === 100010001).length > 0) {

            formContext.getControl("abc_book").setVisible(true);

        } else {

            formContext.getAttribute("abc_book").setValue(null);

        }

        if (CategorySelectedOptions.filter(i => i.value === 100010002).length > 0) {

            formContext.getControl("abc_food").setVisible(true);

        } else {

            formContext.getAttribute("abc_food").setValue(null);

        }
    }
  • ALAN365 Profile Picture
    ALAN365 on at
    RE: Toggle multiple-select columns disability and empty columns JavaScript

    Hi Tamilarasu,

    Thank you so much, it's work well.

    Only have to do some changes: change function setMultiOptionSet(formContext) to function setMultiOptionSet(executionContext), and change formContext = formContext.getFormContext() to formContext = executionContext.getFormContext() 

    Thank you again!

  • Verified answer
    Tamilarasu Arunachalam Profile Picture
    Tamilarasu Arunachalam 560 on at
    RE: Toggle multiple-select columns disability and empty columns JavaScript

    Hi ALAN365 ,

           According to my understanding to your question, i have done a snippet on my solution and it is working good.

    But you should add the function in both onload of form and on-change of category field

    function setMultiOptionSet(formContext) {
    formContext = formContext.getFormContext();

    var categories = formContext.getAttribute("crdce_category");
    var getCategories = categories.getValue();

    var tools=formContext.getAttribute("crdce_tools");

    var books=formContext.getAttribute("crdce_books");

    if(getCategories !== null){
        getCategories.forEach(element => {
            if (getCategories.includes(element) === true) {
                switch(element){
                    case 100010000:
                        formContext.getControl("crdce_tools").setVisible(true);
                        break;
                    case 100010001:
                        formContext.getControl("crdce_books").setVisible(true);
                        break;
                }
            }
        });
    }
    if(getCategories === null || getCategories.includes(100010000) !== true){
        tools.setValue([]);
        formContext.getControl("crdce_tools").setVisible(false);
    }
    if(getCategories === null || getCategories.includes(100010001) !== true){
        books.setValue([]);
        formContext.getControl("crdce_books").setVisible(false);
    }
}

    If this answer helps you, like and verify my answer

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

December Spotlight Star - Muhammad Affan

Congratulations to a top community star!

Top 10 leaders for November!

Congratulations to our November super stars!

Tips for Writing Effective Suggested Answers

Best practices for providing successful forum answers ✍️

Leaderboard

#1
André Arnaud de Calavon Profile Picture

André Arnaud de Cal... 291,280 Super User 2024 Season 2

#2
Martin Dráb Profile Picture

Martin Dráb 230,235 Most Valuable Professional

#3
nmaenpaa Profile Picture

nmaenpaa 101,156

Leaderboard

Featured topics

Get batch job history log from D365 FO to Power Automate

Product updates

Dynamics 365 release plans