Here we will explain how to implement a custom dropdown into a blox widget.

Once implemented your blox dropdown widget will look similar to the image below.

Step 1 - Add CSS & JavaScript libraries to Dashboard

First you need to save 3 libraries to your Sisense repository. (See attached zip file for required libraries, material.css, bootstrap.min.css, ej2.min.js) An ideal location for these would be https://YOUR-DOMAIN-HERE/resources/ . Once you have added these libraries to your Sisense repository be sure to take a note of the exact file location URL.

Navigate to your selected dashboard where you will be adding the dropdown, hit the 'Options' or 3 vertical dots icon found at the top of the dashboard when in design mode. This will open a dropdown with a number of options to select. (See image below) Click 'Edit Script' which will open a new window containing the dashboards scripts.

Within the dashboard scripts window, look for a dashboard.on('initialized', function () script. If this exists copy the 3 items beginning with $('head').append and paste them directly after the opening { of the script. If this script doesn't exist, copy and paste the entire script from below and paste it below any existing scripts within the script editor, (if any exist). Be sure to replace YOUR-LIBRARY-URL-HERE with the URL location where you saved your scripts at the beginning of Step 1 and hit Save.

dashboard.on('initialized', function () {
$('head').append('<link href="YOUR-LIBRARY-URL-HERE/material.css" rel="stylesheet" />');
$('head').append('<link href="YOUR-LIBRARY-URL-HERE/bootstrap.min.css" rel="stylesheet" />');
$('head').append('<script type="text/javascript" src="YOUR-LIBRARY-URL-HERE/ej2.min.js"></script>')
});

Step 2 - Create new Widget

Next, add a new 'widget' to your dashboard using the  button found at the top of the dashboard when in design mode. This will open a popup window to configure your new widget, click the blue 'Advanced Configuration' text in the bottom left of the popup window to open a blank widget screen.

From here you want to update the type of widget you would like to create by selecting Blox from the widget type drop down, found in the top left of the screen directly below the Sisense logo. (See image below. Area surrounded by green border.) Once you have selected Blox you will see a screen similar to the image below.

Step 3 - Add a custom dropdown to the Dashboard

Your widget will automatically be linked to the data source chosen on creation of your dashboard, however you need to select a dimension/field containing the data that you would like the dropdown to be populated with. To do this hit the Add '+' icon beside items in the left hand widget panel. This will open a pop-out window where you can select your preferred field to add to the widget. (See image below. Area surrounded by green border.) Once you have selected your preferred dimension you will see it listed under Items in the left hand widget panel.

Step 4 - Add dropdown scripts and style to Design Editor

Within the right hand widget panel, click on the Design tab and ensure the Editor tab is selected. Here we will the required code to implement the dropdown and link it to the dimension/field chosen in Step 3. First select and copy all of the code from the snippet below then paste it into a new text editor window such as Notepad.

{
    "style": ":root { --primaryColour: #000000; } .dropdown-custom .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .dropdown-custom .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after, .dropdown-custom.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .dropdown-custom.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after { background: var(--primaryColour); } .dropdown-custom .e-dropdownbase .e-list-item.e-active, .dropdown-custom .e-dropdownbase .e-list-item.e-active.e-hover { color: var(--primaryColour); } .blox-carousel .container, .blox-slides .container { padding-left: 0; padding-right: 0; } .blox-slides .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) { padding: 7px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.15); background: #fff }",
    "script": "(function (window, document, undefined) {var DisplayName='Countries'; var DropdownName='CountryDropdownList'; var Dimension='DimCountries.CountryName'; var ListItems='{choices:CountryName}'; var SearchbarPlaceholder='Search ' + DisplayName; var SelectPlaceholder='Select ' + DisplayName; var DropdownObj = new ej.dropdowns.DropDownList({fields: { text: 'title', value: 'value' }, cssClass: 'dropdown-custom', placeholder: SelectPlaceholder, popupHeight: '250px', change: onChange }); CurrentFilterMembers=[]; ListItems=ListItems.replace(/@/g,',');ListItems=ListItems.split(String.fromCharCode(92)).join(String.fromCharCode(92,92));ListItems = ListItems.substring(0, ListItems.length-1); ListItems='[' + ListItems + ']';ListItems=JSON.parse(ListItems); prism.activeDashboard.filters.$$items.forEach((itemFilter) => { if (itemFilter.jaql.dim == '[' + Dimension + ']') { filterList = itemFilter.jaql.filter; filterListTurnedOff = itemFilter.jaql.filter.filter; if (itemFilter.jaql.collapsed == false && itemFilter.jaql.filter.hasOwnProperty('exclude')) { CurrentFilterMembers = ListItems.map(a => a.value); excludeFilterMembers = itemFilter.jaql.filter.exclude.members; CurrentFilterMembers = CurrentFilterMembers.filter((el) => !excludeFilterMembers.includes(el)); DropdownObj.value = CurrentFilterMembers; } if (itemFilter.jaql.collapsed == false && filterList.explicit == true && itemFilter.jaql.filter.filter != undefined) { CurrentFilterMembers = itemFilter.jaql.filter.members; excludeFilterMembers = itemFilter.jaql.filter.filter.exclude.members; CurrentFilterMembers = CurrentFilterMembers.filter((el) => !excludeFilterMembers.includes(el)); DropdownObj.value = CurrentFilterMembers; } else if (itemFilter.jaql.collapsed == true  && itemFilter.jaql.filter.hasOwnProperty('exclude') && itemFilter.jaql.filter.filter != undefined && filterListTurnedOff.hasOwnProperty('turnedOff')) { CurrentFilterMembers = ListItems.map(a => a.value); excludeFilterMembers = itemFilter.jaql.filter.exclude.members; CurrentFilterMembers = CurrentFilterMembers.filter((el) => !excludeFilterMembers.includes(el)); DropdownObj.value = CurrentFilterMembers; } else if (itemFilter.jaql.collapsed == true && itemFilter.jaql.filter.hasOwnProperty('exclude')) { CurrentFilterMembers = ListItems.map(a => a.value); excludeFilterMembers = itemFilter.jaql.filter.exclude.members; CurrentFilterMembers = CurrentFilterMembers.filter((el) => !excludeFilterMembers.includes(el)); DropdownObj.value = CurrentFilterMembers; } else if (itemFilter.jaql.collapsed == true && itemFilter.jaql.filter.filter != undefined) { CurrentFilterMembers = itemFilter.jaql.filter.members; excludeFilterMembers = itemFilter.jaql.filter.filter.exclude.members; CurrentFilterMembers = CurrentFilterMembers.filter((el) => !excludeFilterMembers.includes(el)); DropdownObj.value = CurrentFilterMembers;} else if (itemFilter.jaql.filter.all == true) { DropdownObj.value = ListItems.map(a => a.value); } else if (itemFilter.jaql.filter.hasOwnProperty('exclude')) { CurrentFilterMembers = ListItems.map(a => a.value); excludeFilterMembers = itemFilter.jaql.filter.exclude.members; CurrentFilterMembers = CurrentFilterMembers.filter((el) => !excludeFilterMembers.includes(el)); DropdownObj.value = CurrentFilterMembers;} else { CurrentFilterMembers = itemFilter.jaql.filter.members; DropdownObj.enabled = true; DropdownObj.value = CurrentFilterMembers; } if (itemFilter.disabled == true) { DropdownObj.enabled = false;}}}); DropdownObj.dataSource = ListItems, DropdownObj.appendTo('#' + DropdownName); function onChange(args) { selectedItems =  args.value; prism.activeDashboard.filters.update({ jaql:{ dim:'['+Dimension+']', filter:{ members: selectedItems }, datatype:'value'}},{save:true, refresh:true, unionIfSameDimensionAndSameType:false})};})(window, document);",
    "titleStyle": [
        {
            "display": "none"
        }
    ],
    "showCarousel": true,
    "carouselAnimation": {
        "showButtons": false
    },
    "body": [
        {
            "type": "Container",
            "items": [
                {
                    "type": "TextBlock",
                    "text": "Countries",
                    "style": {
                        "backgroundColor": "#ececec",
                        "text-align": "center",
                        "font-weight": "bold",
                        "font-size": "16px",
                        "margin": "0px",
                        "padding": "10px"
                    }
                },
                {
                    "type": "TextBlock",
                    "id": "CountryDropdownList"
                }
            ]
        }
    ],
    "actions": []
}

There are 4 areas in the script above that must be updated to ensure the code is linked correctly with your dashboard and data source. These areas are the opening "style": and "script": elements which can be found on the opening 2 lines of the code snippet. We will also update the "text" parameter in the first TextBlock found at the bottom of the code snippet and finally the "id": parameter in the second TextBlock also found at the bottom of the code snippet. We will step though and update each element one by one.

Step 4 - Part 1 - Start by looking at the "style": element found on the opening line of the code snippet following the opening { (curly bracket), as seen in the snippet below.

    "style": ":root { --primaryColour: #000000; } .dropdown-custom .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .dropdown-custom .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after, .dropdown-custom.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .dropdown-custom.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after { background: var(--primaryColour); } .dropdown-custom .e-dropdownbase .e-list-item.e-active, .dropdown-custom .e-dropdownbase .e-list-item.e-active.e-hover { color: var(--primaryColour); } .blox-carousel .container, .blox-slides .container { padding-left: 0; padding-right: 0; } .blox-slides .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left) { padding: 7px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.15); background: #fff }",

Replace the 6 digits after the # in --primaryColour: #000000 found at the beginning of the code snippet, with the relevant 6 digit HEX code of your preferred colour. You will find this colour code within your company brand guidelines or you can use this colour picker to help you choose a preferred colour. By replacing this code you will be adding your company brand colours to certain elements of the dropdown.

Step 4 - Part 2 - Look for the "script": element within the code snippet. If you are having trouble finding this you can hit CTRL + F (find) in your Text Editor and type "script": into the search box provided and hit enter. (See image below for example)

"script": "(function (window, document, undefined) {var DisplayName='Countries'; var DropdownName='CountryDropdownList'; var Dimension='DimCountries.CountryName'; var ListItems='{choices:CountryName}'; var SearchbarPlaceholder='Search ' + DisplayName; var SelectPlaceholder='Select ' + DisplayName;

Once you have found this section of code there are 6 variables (listed below) that you will be interested in which can be found on the opening line of the "style": element. There are 4 variables that you must update and 2 variables that you can update if you wish. If you choose not to update the text of the 2 optional variables, you should not remove these variables from the code as this could result in an error with your dropdown.

Required
The areas highlighted in green should be updated to match the dimension/field that you added to your dashboard in Step 3.

1. var DisplayName='Countries';                           
    This is the display name / title of the dropdown, it should be relevant to the dropdown dimension and should be 2 words MAX.

2. var DropdownName='CountryDropdownList';     
    This is the name of the dropdown. (Do not not use spaces within this name).
    Note: If you will be adding multiple dropdowns to your dashboard, it is important that you give each dropdown a unique DropdownName.

3. var Dimension='DimCountries.CountryName';
    This is the dimension used to populate the dropdown as so must match the exact spelling from your dashboard. (This is also case sensitive.) It uses the following format Table.Column.
    If you are unsure of the correct naming, navigate to your dashboard and place your mouse cursor over the dimension title listed under Items in the left hand widget panel.
    This will display a small popup window with the Table and Column details. (See image below)

    Here you can see Table.Column = DimCountries.CountryName

4. var ListItems='{choices:CountryName}';
    This variable populates the dropdown with the list items to select from. It is important this name matches the exact spelling of the dimension title listed under Items in the
    left hand widget panel. (This is also case sensitive.)

Optional
The text areas highlighted in green will be used as placeholder text in your dropdown for search purposes only. You can update the text highlighted in green to another phrase if you wish (2 words MAX). However if you choose not to update the text, you should not remove these variables from the code as this could result in an error with your dropdown.

5. var SearchbarPlaceholder='Search ' + DisplayName;
    This will be the placeholder text displayed if your dropdown has a filter enabled.

6. var SelectPlaceholder='Select ' + DisplayName;
    This is the placeholder text displayed if there are no options selected on the dropdown.

Once you have updated the variables with the correct information from your dashboard and depending on how you chose to edit these variables, you should ensure that they are all on a single line, clear of any nonuniform characters or added text. They should then be placed in the exact location in the code as displayed in the code block at the beginning of Step 4, directly after "script": "(function (window, document, undefined) {. NOTE: A red wavy line under any of the code indicates an error and the scripts will not save correctly. Carefully step through the instructions above to try and resolve this error.

Step 4 - Part 3 - Once you have successfully updated the style and script elements and added them back into the complete code block, scroll to the bottom of the code and look for the "text": parameter in the first TextBlock element. (See highlighted area in image below) Replace the text within the "" (double quotes) to the exact name and spelling including any capitals of the var DisplayName = '' variable you created in Step 4 - Part 2.

Step 4 - Part 4 - Whilst at the bottom of the code and look for the "id": parameter in the second TextBlock. (See highlighted area in image below) Replace the text within the "" (double quotes) to the exact name and spelling, including any capitals of the var DropdownName= '' variable you created in Step 4 - Part 2.

Once you have completed this step and all previous steps have been completed correctly, you will see a working version of your dropdown in the main widget area. If you do not carefully step through the instructions again to rule out any errors. If you have any trouble or require any further assistance, please contact Rapid Bi.

Step 5 - Turn off Dashboard Filters

Within the right hand widget panel, click on the Filters tab, then ensure that the Dashboard Filters toggle is turned off. This will stop applying all dashboard filters to the widget.

Step 5 - Apply custom dropdown to Dashbaord

To ensure your dropdown is saved and successfully applied to your dashboard, hit the Apply button at the top of the main widget panel.

If you have any trouble or require any further assistance, please contact Rapid Bi.

Occasionally you may want to know how to change the colour of the on-focus and selected items within your custom dropdown.

When complete with your custom colour, your dropdown will look similar to the image below.

Note: It is advised to open a new window of your preferred text editor such as Notepad before continuing.

Step 1

First, find out if you are using a 'MultiSelect' or a 'DropDown List'. This is important because the code snippets are slightly different for each. Open a new code editor such as Notepad then jump over to your Sisense dashboard and open the script editor of the blox widget you would like to update. Hit 'CTRL + A' (select all), 'CTRL + C' (copy), then jump back to the Notepad window you previously launched and hit 'CTRL + V (paste). In the opening 'script' tag of the code, look for the initialization script of your dropdown to determine the type of dropdown you have implemented.  The initialization script will look similar to that of the example below. 

Within your text editor, you can hit 'CTRL + F' and search for new ej.dropdowns to help you find the relevant code.

this[DropdownName] = new ej.dropdowns.MultiSelect({ });  // This is a MultiSelect

this[DropdownName] = new ej.dropdowns.DropDownList({ }); // This is a DropDown list

Step 2

Based on the type of dropdown you found in Step 1, copy the relevant code snippet from the options below into a new text editor window such as Notepad. Replace the 6 digits after the # in --primaryColour: #000000 found at the beginning of the code snippet, with the relevant 6 digit HEX code of your preferred colour. You will find this colour code within your company brand guidelines or you can use this colour picker to help you choose a preferred colour.

CSS styles for 'MultiSelect'.

"style": ":root { --primaryColour: #000000; } .dropdown-custom .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .dropdown-custom .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after, .dropdown-custom.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .dropdown-custom.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after { background: var(--primaryColour); } .dropdown-custom .e-checkbox-wrapper .e-frame.e-check, .dropdown-custom .e-css.e-checkbox-wrapper .e-frame.e-check { background-color: var(--primaryColour); }",

CSS styles for 'DropDown List'.

"style": ":root { --primaryColour: #000000; } .dropdown-custom .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .dropdown-custom .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after, .dropdown-custom.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .dropdown-custom.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after { background: var(--primaryColour); } .dropdown-custom .e-dropdownbase .e-list-item.e-active, .dropdown-custom .e-dropdownbase .e-list-item.e-active.e-hover { color: var(--primaryColour); }", 

Step 3

Once you have updated primaryColour: #000000 to your desired colour, CTRL + C (copy) the entire "style": code snippet you have just edited, and navigate back to the text editor (Notepad) window that contains the entire widget code. After the opening { hit enter to create a new line break and CTRL + V (paste) to insert the style code directly before the "script": tag within your blox widget code. Note: If a "style": tag already exists, be sure not to override any of the current styles. In this case you should copy everything within the double quotes following "style": and carefully paste these styles directly before the closing }", the end of the existing style attribute. 

Step 4

When you have your new styles code in place you can copy the entire code block from your text editor, and paste the code back into the Sisense widget design editor and hit apply. A red wavy line under any of the code indicates an error and the scripts will not save correctly. Carefully step through the instructions above to try and resolve this error.

If you require any further assistance, please contact Rapid Bi.