How to modify tenant API store main page in WSO2 API Manager.

In this article we will discuss how we can modify tenant API Store to support lengthy tenant domain names. With API Manager 1.9.0 we cannot have very lengthy names. In this modification we will show part of tenant name in store and show full name when you place mouse courser on tenant store.

in template.jag(/store/site/themes/fancy/templates/api/tenant-stores-listing/template.jag) paste following before this line

"<li class="thumbnail span3 tenent-thumb">"
<a href="<%= encode.forHtmlAttribute(encode.forUri(jagg.getSiteContext() + 
"?tenant="+tenantDomains[i])) %>" title="<%=tenantDomains[i]%>">

in css(styles-layout,css) do following
#tenent_list{ width:900px }
.tenent-thumb{ margin: 0.79% 0.79% !important; /* re-declare thumb border styles since it is overidden by styles-layout */ border: 1px solid #DDDDDD; border-radius: 4px 4px 4px 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); display: block; line-height: 20px; padding: 8px 4px 4px 4px; transition: all 0.2s ease-in-out 0s; }
.tenent-thumb h3{ margin:0px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:200px; }

Then you will see it as follows.

No comments:

Post a Comment

Empowering the Future of API Management: Unveiling the Journey of WSO2 API Platform for Kubernetes (APK) Project and the Anticipated Alpha Release

  Introduction In the ever-evolving realm of API management, our journey embarked on the APK project eight months ago, and now, with great a...