JavaScript

Let’s start by creating the popup Rename new window Definitely we should arrange this new space. Start with a new List Box Add tree new buttons: UP, DOWN, Save and Close Change style on List Box to add borders Rename new elements Create a new button on the Canvas Create a script variable Change name and set as array Create onClick event for the new - Change Layout button // Get current dimensions var currentDimensions = Table_Games_Sales.getDimensionsOnRows(); // Assign values to the global variable ScriptVariable_Dimensions_Values = Table_Games_Sales.getDimensionsOnRows(); // Clear the current list ListBox_Dimensions_Order.removeAllItems(); // Add current dimensions to the list for ( var i = 0; i < currentDimensions.length; i++ ){ ListBox_Dimensions_Order.addItem(currentDimensions[i]); } // Open popup Popup_Dimensions_Order.open(); Add code for Button_Save_And_close - onClick // Get all current dimensions var allDimensions = Table_Games_Sales.getDimensionsOnRows(); // Delete all dimensions for (var i = 0; i < allDimensions.length; i++){ Table_Games_Sales.removeDimension(allDimensions[i]); } // Set new dimensions for (var r = 0; r < ScriptVariable_Dimensions_Values.length; r++){ Table_Games_Sales.addDimensionToRows(ScriptVariable_Dimensions_Values[r]); } // Close popup Popup_Dimensions_Order.close(); Add code for Button_Down - onClick // Get all selected Keys var selectedValue = ListBox_Dimensions_Order.getSelectedKey(); // Change the order on the list and update List Box if (selectedValue){ var valueIndex = ScriptVariable_Dimensions_Values.indexOf(selectedValue); ScriptVariable_Dimensions_Values.splice(valueIndex,1); ScriptVariable_Dimensions_Values.splice( valueIndex + 1,0, selectedValue ); ListBox_Dimensions_Order.removeAllItems(); for ( var i = 0; i < ScriptVariable_Dimensions_Values.length; i++){ ListBox_Dimensions_Order.addItem(ScriptVariable_Dimensions_Values[i]); } } Add code for Button_Up - onClick // Get all selected Keys var selectedValue = ListBox_Dimensions_Order.getSelectedKey(); // Change the order on the list and update List Box if (selectedValue){ var valueIndex = ScriptVariable_Dimensions_Values.indexOf(selectedValue); ScriptVariable_Dimensions_Values.splice(valueIndex,1); ScriptVariable_Dimensions_Values.splice( valueIndex - 1,0, selectedValue ); ListBox_Dimensions_Order.removeAllItems(); for ( var i = 0; i < ScriptVariable_Dimensions_Values.length; i++){ ListBox_Dimensions_Order.addItem(ScriptVariable_Dimensions_Values[i]); } } At the end we have a complete and working solution. Congratulations 🍾 !

We need a CheckBox, it can be added from the toolbar Let’s change the background color of the CheckboxGroup. To do this, please click on the brush icon, bucket icon and then on more Change color to hex 1f303f Next change the font color Set new color to white, hex ffffff Remove the values from the Checkbox Rename checkbox to CheckboxGroup_Dimensions, bu click on the keys icon Add additional code to the Application - onInitialization // Get all dimensions var dimensions = Table_Games_Sales.getDataSource().getDimensions(); //Loop by dimensions and fill Checkbox for ( var y = 0; y < dimensions.length; y++ ){ CheckboxGroup_Dimensions.addItem(dimensions[y].id,dimensions[y].description); } Last but not least - we need a button Rename the button Let’s also add a code to handle it // Get current list of dimensions to remove it var currentDimensionsSet= Table_Games_Sales.getDimensionsOnRows(); // Get selected fields from CheckBox var selectedDimensions = CheckboxGroup_Dimensions.getSelectedKeys(); // Delete all existing dimensions for (var r = 0; r < currentDimensionsSet.length; r++){ Table_Games_Sales.removeDimension(currentDimensionsSet[r]); } // Add all new dimensions for (var i = 0; i < selectedDimensions.length; i++){ Table_Games_Sales.addDimensionToRows(selectedDimensions[i]); } At the end-user should be able to pick up interesting dimensions by themself

Button To clean the filter we need a button. Let’s get one from the plus in the toolbar Put the button near the Year dropdown and rename it Go to the Button_Clean_Filters - onClick Put the following code // Remove all filters from the model Table_Games_Sales.getDataSource().removeDimensionFilter("Name"); Table_Games_Sales.getDataSource().removeDimensionFilter("Publisher"); Table_Games_Sales.getDataSource().removeDimensionFilter("Year"); //Set all dropdowns selection to empty Dropdown_Name.setSelectedKey(''); Dropdown_Publisher.setSelectedKey(''); Dropdown_Year.setSelectedKey(''); Button should now work properly Design Please download image dataset from here ...

In this part of the tutorial, we are focusing on creating a cascade filter on the dropdown in SAC APP. Cascade means that filters on the dashboard will depend on each other. In the example, if you pick up the publisher name Nintendo then in the games list (Name) you should see only games that belong to Nintendo and no more others. To achieve this, we have to redesign our app a bit. ...

Firstly we have to move our table a few lines down. This can be done by moving the mouse between the table and toolbar and drag and dropping when the cursor changes the icon: Click on the plus icon on the toolbar Select Dropdown form the list Lets rename the Table by click on tree dots -> Rename, and set new name to Table_Games_Sales Same with Dropdown, and put new name Dropdown_Name ...

We have a model so now it is time to build a SAC APP. Go to applications, click on Create Application Click on the table from at the toolbar Select a existing model Click on model that we created in the previous post Delete columns Add Measure/Dimension to rows Select Name and Publisher Quit panel Save application Click on Run ...