Subsections
View in PortugueseThis content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.
Introduction
In some cases, your application is more complex and needs several navigable sections (e.g. one screen for insights and another for management). The Admin Framework offers the possibility to create section navigation items that work in a similar way.
Activity
- Remove the
pathfrom the navigation we had used before and add a newsubSectionItemsfield with an empty array:
_10{_10 "section": "orders",_10 "titleId": "admin-example.navigation.label",_10- "path": "/admin/iotraining",_10 "searchKeyWordsHelpers": "admin-example.navigation.search.kws",_10+ "subSectionItems": []_10}
- Add an element to the array of
subSectionItemswith alabelIdand apath(which can be the same as the previous one):
_11{_11 "section": "orders",_11 "titleId": "admin-example.navigation.label",_11 "searchKeyWordsHelpers": "admin-example.navigation.search.kws",_11 "subSectionItems": [_11+ {_11+ "labelId": "admin-example.navigation.insight",_11+ "path": "/admin/iotraining",_11+ }_11 ]_11}
- Add another element with a different
labelIdand anotherpath:
_15{_15 "section": "orders",_15 "titleId": "admin-example.navigation.label",_15 "searchKeyWordsHelpers": "admin-example.navigation.search.kws",_15 "subSectionItems": [_15+ {_15+ "labelId": "admin-example.navigation.insight",_15+ "path": "/admin/iotraining",_15+ },_15+ {_15+ "labelId": "admin-example.navigation.management",_15+ "path": "/admin/otheriotraining",_15+ }_15 ]_15}
- With the new paths, make the necessary changes to
routes.json:
_10{_10 "admin.app.example": {_10 "component": "adminExample",_10 "path": "/admin/app/iotraining"_10 },_10+ "admin.app.otherexample": {_10+ "component": "adminOtherExample",_10+ "path": "/admin/app/otheriotraining"_10+ }_10}
- Create the new
adminOtherExample.tsxcomponent at the root of thereact/folder:
/react/adminOtherExample.tsx
_10import React, { FC } from 'react'_10_10const AdminOtherExample: FC = () => {_10 return <h1>Other Example!</h1>_10}_10_10export default AdminOtherExample
- Finish by creating the messages for each of the
labelIddefined in step 3:
/messages/pt.json
_10{_10 "admin-example.navigation.label": "Treinamento de IO",_10 "admin-example.navigation.search.kws": "mock, test, treinamento, io",_10+ "admin-example.navigation.insight": "Informações",_10+ "admin-example.navigation.management": "Gerenciamento"_10}
/messages/en.json
_10{_10 "admin-example.navigation.label": "IO Training",_10 "admin-example.navigation.search.kws": "mock, test, training, io",_10+ "admin-example.navigation.insight": "Insights",_10+ "admin-example.navigation.management": "Management"_10}
/messages/es.json
_10{_10 "admin-example.navigation.label": "Entrenamiento de IO",_10 "admin-example.navigation.search.kws": "mock, test, entrenamiento, io",_10+ "admin-example.navigation.insight": "Información",_10+ "admin-example.navigation.management": "Administración"_10}
The expected result is, then:
