This mini tutorial looks at how you can add a custom icon for your asset types in the WSO2 Enterprise Store. The tutorial will change the icon which is applied to the gadget asset type.The act of adding a new icon involves the following steps:
- Creating a custom icon style
- Adding the custom icon style to the Store and Publisher
- Configuring the asset type to use the new icon style
All of the resources used in this article can be obtained from my git repo here
Creating a custom icon style
In order to create a custom icon we first need an image which will be the found of the foundation of our new icon.Secondly, we will need to create a CSS class which will allow us expose this image as an icon.
Creating the image
Creating the image
The ideal dimensions for an image that can be used as an icon in the Enterprise Store are as follows:
- Width : 36px
- Height : 75px
For this demo I have created a simple image conforming to the above dimensions (gadget.png):
Creating the icon CSS class
We will be defining a new CSS class in the my-icons.css style which will be adding to the Publisher and Store applications in the next step:
The choice of the CSS class name that you give to your icon is up to you but it is generally a good idea to prefix it with your company name or another unique identifier to avoid naming conflicts.
Adding the custom icon style to the Store and Publisher
Configuring the asset type to use the new icon style
It is customary for customizations to the WSO2 Enterprise Store to be done through app and asset extension.However, the process of adding a custom icon is a situation where the base layout must be altered directly.This is due to way in which app and asset extensions govern the behaviour of pages.The Enterprise Store consists of two different page types : global and asset specific.The global pages are those that display shared information or those that are not specific to a particular asset type.An example is the Top Assets page of the Store application. The asset specific pages on the other hand deal exclusively with pages specific to an asset type such as the listing and details pages in the Publisher.
Why is this relevant?
The fact that the icon will appear across multiple page types mean that we can no longer deliver the CSS styles and image via an extension.
Adding the style sheet
Copy the icon style sheet to css directory of each application's themes folder:
Copy the icon image (gadget.png) to the image directory of each applications themes folder:
Copy the icon style sheet to css directory of each application's themes folder:
- Store: {CARBON_HOME}/repository/deployment/server/jaggeryapps/store/themes/store/css
- Publisher: {CARBON_HOME}/repository/deployment/server/jaggeryapps/publisher/themes/default/css
Copy the icon image (gadget.png) to the image directory of each applications themes folder:
- Store: {CARBON_HOME}/repository/deployment/server/jaggeryapps/store/themes/store/img
- Publisher: {CARBON_HOME}/repository/deployment/server/jaggeryapps/publisher/themes/default/img
Using our icon style sheet
We can include our custom icon style (my-icons.css) sheet to the layout page.The layout page is found at the following locations:
- Store: {CARBON_HOME}/repository/deployment/server/jaggeryapps/store/themes/store/pages/2-column-right.hbs
- Publisher: {CARBON_HOME}/repository/deployment/server/jaggeryapps/publisher/themes/default/pages/single-col-fluid.hbs
The final step is to configure your asset type to use the new icon.This is done by creating an asset extension which alters the icon:
In this case we have decided to change the icon of the gadget asset type which is shipped with the Enterprise Store. To see your changes restart the server.
Note: The asset.js shown above is available here.
Note: The asset.js shown above is available here.
Final Result
Store
Publisher
Resources
All of the resources used in this tutorial have been uploaded to my git repo:
