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

By: Unknown on 8:04 AM

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){
        tab.addClass("active");
        tabContent.addClass("active");
     } else {
    showDefault();
     }
} else {
    showDefault();
}
});


function showDefault(){
        $('#asset-description').addClass("active");
        $('#tab-properties').addClass("active");
}

• 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.css.push('codemirror.css');
    o.js.push('codemirror.js');
    o.js.push('javascript.js');
    o.js.push('formatting.js');
    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 "https://192.168.122.1:9443/store/assets/restservice/details/3601ed3c-5f49-4115-ac7d-d6f578d4c593#security"