As of the default behavior in we only show selected set of metadata of a given asset instance in the Store. But there are requirements of showing all the metadata/fields of an asset instance in the Store. In this post I am going to explain how to achieve this with GREG-5.2.0 extensions.
For this example scenario, I am going to explain how to extend restservice asset type to show its all the artifact fields.
As shown in above image we have only two tabs Description and User Reviews.
But, when we consider Publisher there are several tables which contains metadata information related to an asset instance.
In this example, I will use tabs in Store details page to map tables in the rxt of the restservice.
After adding extensions Store Rest service details page will look like above. Each of the tab will correspond to a table in rxt and will contain the details of that particular table when selected.
Follow, below steps in-order to implement this extension.
- Add below pageDecorator to [GREG_HOME]/repository/deployment/server/jaggeryapps/store/extensions/assets/restservice/asset.js
assetCombinedWithRXT: function(page){
if (page.assets && page.assets.type) {
var user = server.current(ctx.session);
if(user){
var rxt = require('rxt');
var am = rxt.asset.createUserAssetManager(ctx.session,page.assets.type);
page.assetWithRxt = am.combineWithRxt(page.assets);
}
}
}
- Now your final asset.js file should something similar to this[1]
- Copy below content to a file asset.hbs in to [GREG_HOME]/repository/deployment/server/jaggeryapps/store/extensions/assets/restservice/themes/store/partials/
<script>
var isSocial = ('{{features.social.enabled}}' == 'true');
</script>
<div class="asset-description">
{{#with assets}}
{{#with attributes}}
<div class="asset-description-header">
<div class="es-col-lg-12 col-lg-12 white-bg left">
<h3>{{../../rxt.singularLabel}} {{t "Details"}}</h3>
</div>
</div>
<!-- asset details folder-->
<div class="asset-details-header ">
<!-- aset details -->
<div class="col-xs-12 col-sm-12 col-md-5 col-lg-5 white-bg">
<div class=" details-image white-bg">
{{> asset-thumbnail ..}}
</div>
<div class="details-container">
<div class="es-col-lg-12 col-lg-12">
{{> asset-details ..}}
</div>
</div>
</div>
<!-- end of asset details-->
</div>
<div class="asset-details-wrapper ">
<div class="white-bg padding-double">
{{> asset-utilization ../..}}
{{> asset-version-info ../..}}
</div>
</div><!-- description column-->
<!-- asset description -->
<div class="assetp-properties">
{{> view-asset-top-common-button-group ../.. }}
<ul class="es-nav nav es-nav-tabs nav-tabs" id="assetp-tabs" data-aid="{{../path}}">
<li id="asset-description" class="active">
<a href="#tab-properties" data-toggle="tab" data-type="basic">{{t "Description"}}</a>
</li>
{{#each ../../assetWithRxt/tables }}
{{#if_equal name "overview"}}
{{else}}
{{#if this.fields}}
<li id="asset-content-{{name}}">
<a href="#tab-content-{{name}}" data-toggle="tab" data-type="basic">{{label}}</a>
</li>
{{/if}}
{{/if_equal}}
{{/each}}
<li id="user-reviews">
<a href="#tab-reviews" data-toggle="tab" data-type="comments">{{t "User Reviews"}}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-properties">
<div class="content">
{{>overview ../..}}
</div>
</div>
{{#each ../../assetWithRxt/tables}}
{{#if_equal name "overview"}}
{{else}}
<div class="tab-pane" id="tab-content-{{name}}">
<div class="content">
<div>
{{renderTablePreview .}}
</div>
</div>
</div>
{{/if_equal}}
{{/each}}
<div class="tab-pane" id="tab-reviews">
{{#if ../../features.social.enabled}}
<iframe src='{{url ""}}/pages/user-reviews?target={{../../type}}:{{../../id}}&url-domain={{../../../features.social.keys.urlDomain}}' data-script='{{url ""}}/extensions/app/social-reviews/export-js/social.js' data-script-type="text/javascript" width="100%" height="100%" style="min-height: 500px;"></iframe>
{{/if}}
{{#if ../../inDashboard}}
<div id="comment-content" class="content"></div>
{{else}}
<div id="comment-content" class="content user-review"></div>
{{/if}}
</div>
</div>
</div>
{{/with}}
{{/with}}
</div>
- For Later versions of WSO2 GREG product this asset.hbs may need to have slightly modified referring to its default asset.hbs file.
- Now restart the server. Login to Store and you can see several tabs when you goto a details page of a restservice.
- Click on each tab to see the corresponding table content.
[1] https://github.com/ayshsandu/greg-store-details-extension-sample/blob/master/asset.js
