Hi Gabbitas,
This is something which is not available within config tool but it can be achieved by Custom HTML, JS and CSS.
As mentioned in your example,
In VP, create a new tab with name 'Client' from Main menu.
Add a new panel in this tab, say 'Panel2'. Output Target of Main panel should be 'Panel2'.
In 'Main' panel's Panel Properties-->Contents, select 'Static HTML' option. Add the below code in it, if you are planning to run queries on the other 2 sub tabs.
//code
<ul id="Clients_Tab">
<li class="Clients_Tab_Link" id="Clients_0"><a class="active" onclick="AwareApp.runQuery('ClientListQuery',AwareApp.getPanelId('main','Clients','Panel2'));" href="#">Client List</a></li>
<li class="Clients_Tab_Link" id="Clients_1"><a onclick="AwareApp.runQuery('ClientOrdersQuery',AwareApp.getPanelId('main','Clients','Panel2'));" href="#">Client Orders</a></li>
</ul>
//code
- Create a folder in Tomcat/webapps/AwareIM folder, say 'client_code'. In this folder, create a js file with any name, say 'TabUtility.js' and add the following code in it.
//code
TabUtility = {
addEventListnerOnCustomTab: function(tabId){
var ul = document.getElementById(tabId); // Parent
ul.addEventListener('click', function (e) {
var target = e.target; // Clicked element
while (target && target.parentNode !== ul) {
target = target.parentNode; // If the clicked element isn't a direct child
if(!target) { // If element doesn't exist
return;
}
}
if (target.tagName === 'LI'){
for(var i=0;i<document.getElementById(tabId).children.length;i++){
if(target.id.split('_')[1]==i){
$('#'+target.id.split('_')[0]+'_'+i+' a').addClass('active');
}
else{
if($('#'+target.id.split('_')[0]+'_'+i+' a').hasClass("active")){
$('#'+target.id.split('_')[0]+'_'+i+' a').removeClass('active');
}
}
}
}
});
}
}
//code
- In 'Other Properties' of Main panel of 'Clients' tab, add the following code in Advanced-->Render Script section.
//code
TabUtility.addEventListnerOnCustomTab('Clients_Tab');
//code
Note: 'TabUtility' is the name of js file created in step #4
- In 'client_code' folder, create a css file, say 'tabs_custom.css' and add the following code in it.
//code
#Clients_Tab{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #515967;
background-color: #F4F4F5;
border-radius: 3px 3px 0px 0px;
cursor: pointer;
}
#Clients_Tab{
width:200px;
}
.Clients_Tab_Link {
float: left;
}
.Clients_Tab_Link a {
display: block;
color: black;
text-align: center;
padding: 6px 14px;
text-decoration: none;
border-radius: 3px 3px 0px 0px;
}
.Clients_Tab_Link a:hover{
background-color:#b6bdca;
}
.Clients_Tab_Link a.active{
color: #515967;
background-color: #fff;
}
//code
Add these 2 files ie, TabUtility.js and tabs_custom.css in startup.html existing in C:\AwareIM7\Tomcat\webapps\AwareIM folder
'tabs_custom.css' line should be added in <head> section before <style> section.
<link href="client_code/css/tabs_custom.css" rel="stylesheet">
'TabUtility.js' line should be added in <body> section.
<script type="text/javascript" src="client_code/js/TabUtility.js"></script>
Run the application after clearing your browser cache.
Please let us know how it goes.
