TabWidget
Description
The TabWidget provides a elegant way to display multiple “pages“ of related content within the same DSL view and an alternative to page actions or buttons.
Attributes
alignment: String - Determines the horizontal position of the tabs. Can be one of left, center, right
direction: String - Determines orientation of the tabs. Can be one of horizontal or vertical
stacked: Boolean - Used to display the icon for each tab above the label of the tab instead of before the label
activeTab: Number - Used to identify the current active tab
items: JSON Array - The actual tab items. Each item consists of id, icon and label
id: Number - The ID of the Tab
icon: String || Null - Icon name as determined from https://pictogrammers.com/library/mdi/
label: String - The tab label
A complete example of the JSON:
{
"alignment": "left",
"direction": "horizontal",
"stacked": false,
"activeTab": 1,
"items": [
{
"id": 1,
"label": "Tab 1",
"icon": "home"
},
{
"id": 2,
"label": "Tab 2",
"icon": null
}
]
}Example
.vxml
<raw type="TabWidget" action="tabAction">
<content variable="rawTabContent" />
</raw>
<info label="info.example" allowMarkdown="true" cols-md="12" cols-xs="12" variant="clear">
<visible function="showTabOneContent"/>
<binding function="getTabOneContent"/>
</info>
<info label="info.example" allowMarkdown="true" cols-md="12" cols-xs="12" variant="clear">
<visible function="showTabTwoContent"/>
<binding function="getTabTwoContent"/>
</info>Model
object TabItem {
TAB_ALIGNMENT alignment;
TAB_DIRECTION direction;
bool stacked;
int activeTab;
jsonarray items;
}
enum TAB_ALIGNMENT {
left,
center,
right
}
enum TAB_DIRECTION {
horizontal,
vertical
}
Presenter
unit TabWidget;
json rawTabContent;
jsonarray itemsArray;
TabItem tabItem;
void init() {
tabItem = TabItem:new();
tabItem.alignment = TAB_ALIGNMENT.left;
tabItem.direction = TAB_DIRECTION.horizontal;
tabItem.stacked = false;
tabItem.activeTab = 1;
itemsArray = /%[
{
"id": 1,
"label": "Tab 1",
"icon": "home"
},
{
"id": 2,
"label": "Tab 2",
"icon": null
}
]%/;
tabItem.items = itemsArray;
rawTabContent = "{}";
rawTabContent.jsonPut("alignment", tabItem.alignment);
rawTabContent.jsonPut("direction", tabItem.direction);
rawTabContent.jsonPut("stacked", tabItem.stacked);
rawTabContent.jsonPut("activeTab", tabItem.activeTab);
rawTabContent.jsonPut("items", tabItem.items);
}
DSL_VIEWS tabAction(json tabResponse) {
tabItem.activeTab = tabResponse.jsonGet("id");
rawTabContent.jsonPut("activeTab", tabItem.activeTab);
return null;
}
bool showTabOneContent(){
if(tabItem.activeTab == 1){
return true;
}
return false;
}
bool showTabTwoContent(){
if(tabItem.activeTab == 2){
return true;
}
return false;
}