How to create multi select choice field in jelly script interactive filter(Dynamic Content Block)

[Sonu Parab]

Hello All,

1) We have one requirement, we want to display list of users(sys_users) in one multi  choice field.

2) Show list of Incidents records using one report.

3) When the one or two users are selected from multi choice field then filter incident report which matches the Caller field.

Thank you.

[Juhi Tembhare]

Hello @Sonu Parab,

You can check this code where the 3rd filter have the multi-select option. Apply this code on the Dynamic Content Block to create 3 consecutive filters which dependent on each other. 

<?xml version="1.0" encoding="UTF-8"?>

<j:jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:g2="glide2" xmlns:j2="null">

    <g:evaluate>

        var choiceList1 = new GlideChoiceList();

        choiceList1.add('', '--None--');

        var choiceList2 = new GlideChoiceList();

        choiceList2.add('', '--None--');

        var choiceList3 = new GlideChoiceList();

        choiceList3.add('', '--None--');

        var gr = new GlideAggregate('sn_customerservice_team_member');

        gr.groupBy('responsibility');

        gr.orderBy('responsibility');

        gr.query();

        while (gr.next()) {

            choiceList1.add(gr.getValue('responsibility'), gr.getDisplayValue('responsibility'));

        }

    </g:evaluate>

    <script>

        (function () {

            var select1 = document.getElementById('select1');

            var select2 = document.getElementById('select2');

            var select3 = document.getElementById('select3');

            select1.addEventListener('change', function () {

                var selectedValue = select1.value;

                // Clear options for select2

                select2.innerHTML = '';

                var defaultOption = document.createElement('option');

                defaultOption.value = '';

                defaultOption.textContent = '--None--';

                select2.appendChild(defaultOption);

                if (selectedValue) {

                    // Fetch users based on selected responsibility

                    var gr2 = new GlideRecord('sn_customerservice_team_member');

                    gr2.addQuery('responsibility', selectedValue);

                    gr2.query();

                    while (gr2.next()) {

                        var user = gr2.getValue('user');

                        var usr = new GlideRecord('sys_user');

                        if (usr.get(user)){

                            var userDisplayValue = usr.name;

                            console.log('test1' + userDisplayValue);

                        }

                        var newOption = document.createElement('option');

                        newOption.value = user;

                        newOption.textContent = userDisplayValue;

                        select2.appendChild(newOption);

                    }

                }

            });

            select2.addEventListener('change', function () {

                var selectedValue = select2.value;

                var selectedValue1 = select1.value;

                // Clear options for select3

                select3.innerHTML = '';

                var defaultOption = document.createElement('option');

                defaultOption.value = '';

                defaultOption.textContent = '--None--';

                select3.appendChild(defaultOption);

                if (selectedValue) {

<!--                     console.log('selectedValue' + selectedValue); -->

                    // Fetch users based on selected responsibility

                    var gr3 = new GlideRecord('sn_customerservice_team_member');

                    gr3.addQuery('user', selectedValue);

                    gr3.addQuery('responsibility', selectedValue1);

                    gr3.query();

                    while (gr3.next()) {

                        console.log('test');

                        var account = gr3.getValue('account');

                        var acc = new GlideRecord('customer_account');

                        if (acc.get(account)){

                            var accountDisplayValue = acc.u_known_as_name;

                        }

                        var newOption = document.createElement('option');

                        newOption.value = account;

                        newOption.textContent = accountDisplayValue;

                        select3.appendChild(newOption);

                    }

                }

<!--                 console.log('inside 102' + accountDisplayValue); -->

            });

        })();

            var my_dashboardMessageHandler = new DashboardMessageHandler("my_unique_id");

            function publishFilter() {

<!--                 console.log('inside function' + select3.value); -->

        var acct= select3.value;

                var filter_message = {};

                filter_message.id = "my_unique_id";

                filter_message.table = "cmdb_ci";

                // Add your own filter query logic here

                filter_message.filter = "company="+acct;

                SNC.canvas.interactiveFilters.setDefaultValue({

                    id: filter_message.id,

                    filters: [filter_message]

                }, false);

                my_dashboardMessageHandler.publishFilter(filter_message.table, filter_message.filter);

            }

    </script>

    Select Responsibility:

    <select id="select1">

        <g:options choiceList="${choiceList1}" />

    </select>

    Users:

    <select id="select2">

        <option value="">--None--</option>

        <j:forEach var="choice" items="${choiceList2.choices}">

            <option value="${choice.value}">${choice.label}</option>

        </j:forEach>

    </select>

    Account:

    <select id="select3">

<option value="">--None--</option> 

        <j:forEach var="choice" items="${choiceList3.choices}">

            <option value="${choice.value}">${choice.label}</option>

        </j:forEach>

    </select>

    <input id="apply" type="button" value="Apply" onclick="publishFilter();" />

</j:jelly>

If it helps, kindly mark it helpful.