Adding a custom icon for your asset type

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

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

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:

• Store: {CARBON_HOME}/repository/deployment/server/jaggeryapps/store/themes/store/css
• Publisher: {CARBON_HOME}/repository/deployment/server/jaggeryapps/publisher/themes/default/css

Adding the icon image
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

Configuring the asset type to use the new icon style

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.

Final Result

Store

Publisher

Resources

All of the resources used in this tutorial have been uploaded to my git repo:

https://github.com/splinter/es-tutorial-1

Jaggery WS Module sample

URL: https://gist.github.com/splinter/d9d4ee81ca3421f7ccbb6cb9213efc8a

Accessing the currently logged in user from a Governance Center Extension

The WSO2 Governance Registry 5.2.0 ships with two applications which constitute the Governance Center user experience.These two applications can be extended for individual needs by writing custom extensions. A common use case when writing such extensions is the need to access the currently logged in user.

The process of obtaining the logged in user is easy as:

The returned object contains the following properties:

• username
• tenantId

Important Note: Special care must be taken when using the tenantId property in the above object in Store application. This is due to the fact that a user can access the Store using a tenant URL thus the tenant Id of the currently logged in user may not always be the tenant Id of the store view.In order to ameliorate this difficulty the Store provides a tenant API which can be used to obtain tenant specific resources.For the complete API please consult the source [1].

Reference
[1] https://github.com/wso2/carbon-store/blob/master/apps/store/modules/tenant-api.js

Changing the authentication method of the G-Reg Governance Center Store and Publisher

The Enterprise Store (ES) 2.1.0 and Governance Registry (G-Reg) 5.2.0 products support two main authentication methods:

• Basic authentication
• SAML based Single Sign On (SSO)

The process of switching between these two authentication methods can be done by simply editing a configuration file and restarting the respective server.The configuration file for the active authentication method is found in the authentication block of application configuration file:

• For the Publisher it is found at {CARBON_HOME}/repository/deployment/server/jaggeryapps/publisher/config/publisher.json
• For the Store it is located at {CARBON_HOME}/repository/deployment/server/jaggeryapps/store/config/store.json

The {CARBON_HOME} section should be replaced with the location of the product in your file system.

The image above highlights the authentication block in the store.json file.The configuration block is the same in both the Publisher and Store applications.

Changing the active authentication method

The active authentication method can be changed by altering the activeMethod property to either basic or sso.

In the case of the SAML SSO authentication method an additional change must be done  to the {CARBON_HOME}/repository/conf/identity/sso-idp-config.xml.

The above file is used to register service providers with the embedded WSO2 Identity components which provide SAML SSO authentication support.If you are using an external IDP then you should not worry about this file.The service provide configuration blocks should be altered to reflect any port and host changes of the server.

Accessing CodeShip Build Environment variables from a deployment script

This is just for my personal reference:

CodeShip build time parameters:

https://codeship.com/documentation/continuous-integration/set-environment-variables/

Sample Script utilizing some of the environment variables:

echo " Commit #: $CI_COMMIT_ID \n Commit Message: $CI_MESSAGE \n Build URL: $CI_BUILD_URL" > $CI_BUILD_NUMBER-build.txt