This document shows you how to manipulate the index.html template and the tokens to customize the WSO2 Admin UI component of WSO2 Commons.

Before you continue with the rest of this document, it is recommended that you read the WSO2 Commons Admin UI Framework article [0].

The WSO2 Web Services Application Server (WSAS) uses the wso2adminui.jar and the wso2adminui.zip artifacts to build its UI components. WSO2 WSAS [0] uses the Apache Maven2 [1] building tool to build the distribution and its artifacts. When Maven2 builds the WSAS distribution, it downloads the wso2adminui.zip and reconfigures it to fit the semantics of the Admin UI framework.

The WSAS Administration UI uses the index.html, forget_password.html, sign_in_help.html, about.html and faq.html templates from the wso2adminui.zip artifact. This article mainly focuses on the index.html.

The index.html comes with the following place holders (a.k.a. tokens):

1. @menu.items@
2. @div.items@
3. @css.file.items@
4. @js.file.items@
5. @promotion.content@

WSAS uses its own ui-extensions-config.xml. The mapping section of this file shows the corresponding file that maps to the given token.

 1 <extension-config>
 2     ...
 3     <file-mappings>
 4         <mapping>
 5             <token>@menu.items@</token>
 6             <file>menu.html</file>
 7         </mapping>
 8         <mapping>
 9             <token>@div.items@</token>
10             <file>divs.html</file>
11         </mapping>
12         <mapping>
13             <token>@css.file.items@</token>
14             <file>css.html</file>
15         </mapping>
16         <mapping>
17             <token>@js.file.items@</token>
18             <file>js.html</file>
19         </mapping>
20         <mapping>
21             <token>@promotion.content@</token>
22             <file>promotion.html</file>
23         </mapping>
24     </file-mappings>
25     ...
26 </extension-config>

Thus, the menu.html, divs.html, css.html, js.html, and promotion.html contain the content that needs to be replaced with the given token. As they are default mapping files, they are listed under the /extensions/core folder.

Let's look at the WSAS administrator (or management) console [1] and relate them to the different mappings.

All the css files should be included in a css.html. For example, if you need to add your own css link,

<link rel='stylesheet' type='text/css' href='mycss/mycss.css'></link>, just go to the ${tomcat.home}/webapps/wso2wsas/extensions/core/css.html and add the prior entry.

The same semantics apply to the divs.html, js.html, and menu.html.

Resources:

WSO2 WSAS [1]

WSO2 Commons [1]

WSO2 Commons- Admin UI [1]

Apache Maven [2]

Applies To:

WSO2 Commons - Admin UI - All versions

WSO2 WSAS - All versions