Type standard
Tab is a component that enables users to switch between different components using tabs.
The tabs are organized as a tab bar. If the number of tabs exceeds the space available in the tab bar, navigation buttons will appear to help users scroll through the tabs.
- Tab names can only use constant values.
- Currently, a three-level tab hierarchy is supported.
View without tabs
How does it look?
How to add?
Example
Step1 Add business widget to .view.json using widget position property.
{
"name": "myexamplesingle",
"title": "Tab Title 2[0]",
"template": "DashboardView",
"url": "/screen/myexample/view/myexamplesingle",
"widgets": [
{
"widgetName": "MyExampleList",
"position": 10,
"gridWidth": 24
}
],
"rolesAllowed": [
"CXBOX_USER"
]
}
{
"name": "myexample",
"icon": "calendar",
"order": 31219,
"title": "Standard Navigation Tabs - One Level",
"navigation": {
"type": "standard",
"menu": [
{
"viewName": "myexamplesingle",
"hidden": false
}
]
}
}
SecondLevel
How does it look?
How to add?
Example
Step1 Add widget SecondLevelMenu first to .view.json using widget position property.
{
"name": "myexamplesecond",
"title": "Title widget tab 2[0]",
"template": "DashboardView",
"url": "/screen/myexample/view/myexamplesecond",
"widgets": [
{
"widgetName": "SecondLevelMenu",
"position": 10,
"gridWidth": 24
},
{
"widgetName": "MyExampleList",
"position": 20,
"gridWidth": 24
}
],
"rolesAllowed": [
"CXBOX_USER"
]
}
Step2 Add view to the .screen.json with type Single
{
"name": "myexample",
"icon": "calendar",
"order": 31219,
"title": "Standard Navigation Tabs - Second Level down",
"navigation": {
"type": "standard",
"menu": [
{
"viewName": "myexamplesecond",
"hidden": false
},
{
"viewName": "myexamplesecond",
"hidden": false
}
]
}
}
Step1 Add widget SecondLevelMenu after a widget to .view.json using widget position
{
"name": "myexampleseconddown",
"title": "Title widget tab 2[0]",
"template": "DashboardView",
"url": "/screen/myexampledown/view/myexampleseconddown",
"widgets": [
{
"widgetName": "MyExampleList",
"position": 10,
"gridWidth": 24
},
{
"widgetName": "SecondLevelMenu",
"position": 20,
"gridWidth": 24
},
{
"widgetName": "MyExampleInfo",
"gridWidth": 30
}
],
"rolesAllowed": [
"CXBOX_USER"
]
}
Step2 Add view to the .screen.json with type Single
{
"name": "myexampledown",
"icon": "calendar",
"order": 31219,
"title": "Standard Navigation Tabs - Second Level down",
"navigation": {
"type": "standard",
"menu": [
{
"viewName": "myexampleseconddown",
"hidden": false
},
{
"viewName": "myexampleseconddown",
"hidden": false
}
]
}
}
ThirdLevelMenu
How does it look?
How to add?
Example
Step1 Add widget ThirdLevelMenu after a widget SecondLevelMenu to .view.json using widget position see more Tab levels
{
"name": "myexampleseconddown",
"title": "Title widget tab 2[0]",
"template": "DashboardView",
"url": "/screen/myexampledown/view/myexampleseconddown",
"widgets": [
{
"widgetName": "MyExampleList",
"position": 10,
"gridWidth": 24
},
{
"widgetName": "SecondLevelMenu",
"position": 20,
"gridWidth": 24
},
{
"widgetName": "MyExampleInfo",
"gridWidth": 30
}
],
"rolesAllowed": [
"CXBOX_USER"
]
}
Step2 Add view to the .screen.json with type Aggregate see more How add name for tab
{
"name": "myexample",
"icon": "calendar",
"order": 31219,
"title": "Standard Navigation Tabs - Third Level",
"navigation": {
"type": "standard",
"menu": [
{
"title": "Tab Title 2[0]",
"child": [
{
"viewName": "myexamplethirdleveltab"
},
{
"viewName": "myexamplethirdleveltab"
},
{
"viewName": "myexamplethirdleveltab",
"hidden": true
}
]
},
{
"title": "Tab Title 2[1]",
"child": [
{
"viewName": "myexamplesecondlevel"
}
]
}
]
}
}
FourthLevelMenu
How does it look?
How to add?
Example
Step1 Add widget FourthLevelMenu after a widget ThirdLevelMenu to .view.json using widget position see more Tab levels
{
"name": "myexamplefourthleveltab",
"title": "Tab Title 4 [0] (parent Tab Title 3 [0] (parent Tab Title 2 [0]))",
"template": "DashboardView",
"url": "/screen/myexample/view/myexamplefourthleveltab",
"widgets": [
{
"widgetName": "SecondLevelMenu",
"position": 10,
"gridWidth": 24
},
{
"widgetName": "MyExampleList",
"position": 20,
"gridWidth": 24
},
{
"widgetName": "ThirdLevelMenu",
"position": 30,
"gridWidth": 24
},
{
"widgetName": "MyExampleInfo",
"position": 50,
"gridWidth": 24
},
{
"widgetName": "FourthLevelMenu",
"position": 60,
"gridWidth": 24
},
{
"widgetName": "MyExampleFormFourthLevel",
"position": 70,
"gridWidth": 24
}
],
"rolesAllowed": [
"CXBOX_USER"
]
}
Step2 Add view to the .screen.json with type Aggregate
{
"name": "myexample",
"icon": "calendar",
"order": 31220,
"title": "Standard Navigation Tabs - Fourth Level",
"navigation": {
"type": "standard",
"menu": [
{
"title": "Tab Title 2 [0]",
"child": [
{
"title": "Tab Title 3 [0] (parent Tab Title 2 [0])",
"child": [
{
"viewName": "myexamplefourthleveltab",
"hidden": true
},
{
"viewName": "myexamplefourthleveltab"
},
{
"viewName": "myexamplefourthleveltab"
}
]
},
{
"viewName": "myexamplethirdleveltab"
}
]
},
{
"title": "Tab Title 2 [1]",
"child": [
{
"title": "Tab Title 3 [0] (parent Tab Title 2 [1])",
"child": [
{
"viewName": "myexamplesecondlevel"
}
]
}
]
}
]
}
}
Additional properties
If a view is marked as hidden, it will not appear in the general hierarchy and can only be accessed through a specific link (e.g., drilldown or button click). When you exit a hidden view, it will disappear.
Rules for working with hidden views:
Hidden views cannot be used by default. You cannot configure the system to switch to a hidden view by default, such as when opening a screen.
How does it look?
How to add?
Example
Step1 Add hidden = true for view
{
"name": "myexample",
"icon": "calendar",
"order": 31219,
"title": "Navigation tabs standard hidden",
"navigation": {
"type": "standard",
"menu": [
{
"title": "2[0]",
"child": [
{
"title": "3[0]",
"child": [
{
"viewName": "myexamplefourthlevelbutton",
"hidden": false
},
{
"viewName": "myexamplefourthleveltabhidden",
"hidden": true
}
]
},
{
"viewName": "myexamplethirdleveltabhidden",
"hidden": true
}
]
},
{
"viewName": "myexamplesecondleveltabhidden",
"hidden": true
}
]
}
}