Subseções

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.

Introdução

Em alguns casos a sua aplicação é mais complexa e precisa de várias seções navegáveis (e.g. uma tela para insights e outra para gestão). O Admin Framework oferece a possibilidade de criar itens de navegação de seção que funcionam de forma análoga.

Atividade

Remova o path do navigation que tínhamos usado antes e adicione um novo campo subSectionItems com um array vazio:


_10{
_10  "section": "orders",
_10  "titleId": "admin-example.navigation.label",
_10- "path": "/admin/iotraining",
_10  "searchKeyWordsHelpers": "admin-example.navigation.search.kws",
_10+ "subSectionItems": []
_10}

Adicione um elemento para o array de subSectionItems com uma labelId e um path (que pode ser o mesmo do anterior):


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

Adicione mais outro elemento com um labelId diferente e outro 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}

Com os paths novos, faça as alterações necessárias no 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}

Crie o novo componente adminOtherExample.tsx na raiz da pasta react/:

/react/adminOtherExample.tsx


_10import React, { FC } from 'react'
_10
_10const AdminOtherExample: FC = () => {
_10  return <h1>Other Example!</h1>
_10}
_10
_10export default AdminOtherExample

Finalize criando as mensagens para cada um dos labelId definidos no passo 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}

O resultado esperado é então:

Answer sheet

See answer sheet for adminOtherExample.tsx

adminOtherExample.tsx


_10import React, { FC } from 'react'
_10
_10const AdminOtherExample: FC = () => {
_10  return <h1>Other Example!</h1>
_10}
_10
_10export 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}