1. 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:

  2. Click on the plus icon on the toolbar

  3. Select Dropdown form the list

  4. Lets rename the Table by click on tree dots -> Rename, and set new name to Table_Games_Sales

  5. Same with Dropdown, and put new name Dropdown_Name

  1. Find the fx icon near to the Canvas in the left panel and click on onInitialization

  2. This will move us to the code editor where the party begins 💃 🕺 but no worries, JavaScript in the SAC is very developer-friendly and restricted. It is very easy to learn - and you can hear this from me, an ABAP fanboy. If you want to learn more about JS in SAC, please check out the handbook here (search for Developer Handbook)

  3. Firstly we have to create a variable which will hold the content from our table

var resultSet = Table_Games_Sales.getDataSource().getResultSet();
  1. Then we have to loop by the resultSet and assign all Names into our dropdown
for ( var i = 0; i< resultSet.length; i++ ){		
	Dropdown_Name.addItem(resultSet[i]["Name"].id,resultSet[i]["Name"].description);		
}

If you want to fill the dropdown by data not included into your table (Table_Games_Sales) you should use getMembers()

var resultSet = Table_Games_Sales.getDataSource().getMembers("Name");

for ( var i = 0; i< resultSet.length; i++ ){		
 Dropdown_Name.addItem(resultSet[i].id,resultSet[i].description);		
}

Nevertheless in this example will will stay with getResultSet(), because Name is available in our table and according to the handbook this is better solution because of the performance

  1. Ate the end our code should look like this

  2. Now it is a time to save and run our app

  3. As you can see dropdown looks good, but it ends at “A” - this is because of the limitation. Our file contain much more games.

Easies way to fix this is to create a additional filter on Publisher and make them cascading, but this will be described in the next post.

  1. Dropdown is filled, bu it is not working - not filtering any values in the table. To enable this, lest go back to the editor, and click on fx near to Dropdown_Name
  1. There is only one event - onSelect. In the code we need to get the selection from dropdown and set up a filter. Lets assign key to the new variable, and then use setDimentionFilter to put a filter.
var selectedName = Dropdown_Name.getSelectedKey();
Table_Games_Sales.getDataSource().setDimensionFilter("Name",selectedName);
  1. Please check your app. Dropdown Filter should work fine now. I have a bit different layout but no worries. I will explain how to do it step by step in my nex post.