Adding a custom list order to asset types

Introduction

This brief tutorial will provide a set of instructions to reorganize the order in which the icons appear in the WSO2 Enterprise Store . The tutorial will illustrate the steps for achieving this goal in the Store application. Our goal is to add a new asset type and get it to appear as the first entry in the asset type navigation menu as shown below:

A deploy-able sample with all the necessary resources is available here [1] . The content of this tutorial is valid for WSO2 Enterprise Store 2.1.0.

How are the icons rendered?

The list of available assets is populated using two page decorators (both called navigationBar) :

1. In the app extension, https://github.com/wso2/carbon-store/blob/master/apps/store/extensions/app/store-common/app.js#L122 
2. In the default asset extension, https://github.com/wso2/carbon-store/blob/master/apps/store/extensions/assets/default/asset.js#L223

In both cases a single bit of logic is invoked:

The implementation of  the navigationBar page decorator can be viewed here.

The above snippet of code iterates through all of the available asset types and builds an array which is used to render the asset icons. In order to control the order we will be writing a new page decorator which will be invoked by both application and asset pages.

Changing the order of the asset types

We will need to introduce a new page decorator to alter the order of the assets.The new decorator defines a list of predefined asset types as shown below:

Important: When you define new asset types you will need to modify the hard coded list of asset types

The above snippet of code is defined in the decorators.js located here. The key change is located at line 16 where the UI activated asset type list is replaced with a hard coded list of values to reflect the order depicted in the original screenshot.

Once the new decorator is written we will need to wire it up by adding a new default asset extension and by changing the decorator used to populate asset types for global pages.

Affecting changes to the asset pages

In order to affect changes to the icon list that appears in the asset pages we can deploy an asset extension which will modify the default asset behaviour (the order of icons in this case).

This is packaged as an app extension and is available here. The instructions for deploying the app extension is described in the README.md of the repo.To summarize, you will need to:

1. Stop the running WSO2 Enterprise Store Server
2. Copy the mycustom-store folder to the {CARBON_HOME}/repository/deployment/server/jaggeryapps/store/extensions/app directory
3. Restart the WSO2 Enterprise Store Server

Affecting changes to the Top Assets page

In order to affect changes to the icon list in global pages such as the top-assets page we will need to directly modify the navigationBar decorator defined in the store-common app extension  here [2].

Done!

To view these changes navigate to the WSO2 ES Store application: https://localhost:9443/store

References

[1] https://github.com/splinter/es-menu-sample
[2] https://github.com/wso2/carbon-store/blob/master/apps/store/extensions/app/store-common/app.js#L122