Monday, February 27, 2017

WSO2GREG-5.2.0- Writing extension to bind clientside javascript to pages in store

In a previous post I have explained how to Write extensions to replicate more artifact metadata in Store
In this post I will explain how to bind some client-side javascript/jquery to improve the behavior of pages in Store UI.

Followed by the sample steps explained in this previous post, Let's see how to add a custom javascript file to restservice asset type's details page.

In this sample js, I am going to set active tab of the asset details page to a desired one, using a URL fragment.

as of now, when we are browsing assets in Store and viewing metadata details of an asset, the first tab is opened by default.

Let's say, I wanted to go directly to the page with the third tab 4th tab(security) opened.

To do that,
  •  In [HOME]/repository/deployment/server/jaggeryapps/store/extensions/assets/restservice/themes/store/js/ location, add a js file, select-tab.js with following content

$(function() {
var fragment = window.location.hash;

if(fragment) {
    var tabName = '#asset-content-' + fragment.replace("#", "");
    var tab = $(tabName);
    var tabContentName = '#tab-content-'+ fragment.replace("#", "");
    var tabContent = $(tabContentName);
    if(tab.length > 0 && tabContent.length > 0){
     } else {
} else {

function showDefault(){

  • Now bind this js, to resetservice asset details page by editing [HOME]/repository/deployment/server/jaggeryapps/store/extensions/assets/restservice/themes/store/helpers/asset.js
 var name;
var custom = require('/extensions/app/greg-store-defaults/themes/store/helpers/asset.js');
var that = this;
In order to inherit all variables in the default helper
for (name in custom) {
    if (custom.hasOwnProperty(name)) {
        that[name] = custom[name];
var fn = that.resources;
var resources = function(page, meta) {
    var o = fn(page, meta);
    if (!o.css) {
        o.css = [];
    //code-mirror third party library to support syntax highlighting & formatting for WSDL content.
    o.js.push('xml.js'); //codemirror file to provide 'xml' type formatting.
    o.js.push('asset-view.js');//renders the wsdl content with codemirror supported formatting.
    o.js.push('select-tab.js');//renders active tab based on url fragment
    return o;

  • Restart the server and after login to store, goto URls like "


Read More
Designed ByBlogger Templates