Documentation
Feedback
Guides
Learning Center

Learning Center
Learning Center
Subsections
View in Portuguese
This 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

  1. Remove the path from the navigation we had used before and add a new subSectionItems field 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
}

  1. Add an element to the array of subSectionItems with a labelId and a path (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
}

  1. Add another element with a different labelId and another path:

_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
}

  1. 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
}

  1. Create the new adminOtherExample.tsx component at the root of the react/ folder:

/react/adminOtherExample.tsx


_10
import React, { FC } from 'react'
_10
_10
const AdminOtherExample: FC = () => {
_10
return <h1>Other Example!</h1>
_10
}
_10
_10
export default AdminOtherExample

  1. Finish by creating the messages for each of the labelId defined 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:

{"base64":"  ","img":{"width":1064,"height":646,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":1361142,"url":"https://user-images.githubusercontent.com/18701182/92791871-6fca0f80-f383-11ea-98f8-382c743a6657.gif"}}

Answer sheet

See answer sheet for adminOtherExample.tsx
adminOtherExample.tsx

_10
import React, { FC } from 'react'
_10
_10
const AdminOtherExample: FC = () => {
_10
return <h1>Other Example!</h1>
_10
}
_10
_10
export default AdminOtherExample

See answer sheet for en.json
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
}

See answer sheet for es.json
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
}

See answer sheet for navigation.json
navigation.json

_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
}

See answer sheet for pt.json
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
}

See answer sheet for routes.json
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
}

On this page