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": "MyExampleOneLevel",
"position": 9,
"gridWidth": 24
},
{
"widgetName": "MyExampleList",
"position": 10,
"gridWidth": 24
}
],
"rolesAllowed": [
"CXBOX_USER"
]
}
{
"name": "myexample",
"icon": "calendar",
"order": 32219,
"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": "MyExampleSecondLevelTop",
"position": 19,
"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": 32221,
"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": "MyExampleSecondLevelDown",
"position": 9,
"gridWidth": 24
},
{
"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": 32220,
"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": "MyExampleSecondLevelDown",
"position": 9,
"gridWidth": 24
},
{
"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": 32222,
"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": "MyExampleFourLevel",
"position": 11,
"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": 32224,
"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.
How does it look?
How to add?
Example
Step1 Add hidden = true for view
{
"name": "myexample",
"icon": "calendar",
"order": 32226,
"title": "Standard Navigation Tabs - hidden",
"navigation": {
"type": "standard",
"menu": [
{
"title": "Tab title 2[0]",
"child": [
{
"title": "Tab title [0]",
"child": [
{
"viewName": "myexamplefourthlevelbutton",
"hidden": false
},
{
"viewName": "myexamplefourthleveltabhidden",
"hidden": true
}
]
},
{
"viewName": "myexamplethirdleveltabhidden",
"hidden": true
}
]
},
{
"viewName": "myexamplesecondleveltabhidden",
"hidden": true
}
]
}
}
defaultView
(since release 2.0.5)
The "defaultView" for Aggregate view
The "defaultView" feature lets you set a default view to open when navigating through drilldowns on a screen or selecting an option from the left-hand menu. You can also configure it to open a hidden view if needed.
How does it look?
How to add?
Example
Step1 Add defaultView for Aggregate view
{
"name": "myexampledefaultview",
"icon": "calendar",
"order": 32225,
"title": "Standard Navigation Tabs - defaultView",
"navigation": {
"type": "standard",
"menu": [
{
"title": "Tab Title 2 [0]",
"defaultView": "myexampledvthirdleveltab",
"child": [
{
"title": "Tab Title 3 [0] (parent Tab Title 2 [0])",
"child": [
{
"viewName": "myexampledvfourthleveltab",
"hidden": true
},
{
"viewName": "myexampledvfourthleveltab"
},
{
"viewName": "myexampledvfourthleveltab"
}
]
},
{
"viewName": "myexampledvthirdleveltab"
}
]
},
{
"title": "Tab Title 2 [1]",
"defaultView": "myexampledvhfourthleveltab",
"child": [
{
"title": "Tab Title 3 [0] (parent Tab Title 2 [0])",
"child": [
{
"viewName": "myexampledvhfourthleveltab",
"hidden": true
},
{
"viewName": "myexampledvhfourthleveltab"
},
{
"viewName": "myexampledvhfourthleveltab",
"hidden": true
}
]
}
]
}
]
}
}
Typical Use Case
1) Navigate to the Client List tab within the main Task entity.
2) Select the Create button to open a new tab for entering contact details.
3) After completing the details, click the Save button to return to the Client Form.
primaryViewName
The "primaryViewName" for screen.
The "primaryViewName" feature lets you set a default view to open when navigating through drilldowns on a screen or selecting an option from the left-hand menu. You can also configure it to open a hidden view if needed.
How does it look?
How to add?
Example
Step1 Add primaryViewName for screen
{
"name": "myexampleprimaryview",
"icon": "calendar",
"order": 32227,
"primaryViewName" : "myexamplepv",
"title": "Standard Navigation Tabs - primaryViewName",
"navigation": {
"type": "standard",
"menu": [
{
"viewName": "myexamplepv",
"hidden": false
},
{
"viewName": "myexamplepv",
"hidden": false
}
]
}
}
primaryViews
The "primaryViews" for screen.
The "primaryViews" feature lets you set a default views to open when navigating through drilldowns on a screen or selecting an option from the left-hand menu. You can also configure it to open a hidden view if needed.
The "primaryViews" feature lets you define a sequence of views. If a user's role restricts access to the first view, the system automatically displays the next available view from the list. If none of the views are accessible, the default will be the first view specified on the screen.
How does it look?
How to add?
Example
Step1 Add primaryViews for screen
{
"name": "myexampleprimaryviews",
"icon": "calendar",
"order": 32228,
"title": "Standard Navigation Tabs - primaryViews",
"primaryViews" : ["myexamplepvs","myexamplepvs"],
"navigation": {
"type": "standard",
"menu": [
{
"viewName": "myexamplepvs",
"hidden": false
},
{
"viewName": "myexamplepvs",
"hidden": false
},
{
"viewName": "myexamplepvs",
"hidden": false
}
]
}
}