Sub Seções

Subseções

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

  1. Remova o path do navigation que tínhamos usado antes e adicione um novo campo subSectionItems com um array vazio:
{
  "section": "orders",
  "titleId": "admin-example.navigation.label",
- "path": "/admin/iotraining",
  "searchKeyWordsHelpers": "admin-example.navigation.search.kws",
+ "subSectionItems": []
}
  1. Adicione um elemento para o array de subSectionItems com uma labelId e um path (que pode ser o mesmo do anterior):
{
  "section": "orders",
  "titleId": "admin-example.navigation.label",
  "searchKeyWordsHelpers": "admin-example.navigation.search.kws",
  "subSectionItems": [
+   {
+     "labelId": "admin-example.navigation.insight",
+     "path": "/admin/iotraining",
+   }
  ]
}
  1. Adicione mais outro elemento com um labelId diferente e outro path:
{
  "section": "orders",
  "titleId": "admin-example.navigation.label",
  "searchKeyWordsHelpers": "admin-example.navigation.search.kws",
  "subSectionItems": [
+   {
+     "labelId": "admin-example.navigation.insight",
+     "path": "/admin/iotraining",
+   },
+   {
+     "labelId": "admin-example.navigation.management",
+     "path": "/admin/otheriotraining",
+   }
  ]
}
  1. Com os paths novos, faça as alterações necessárias no routes.json:
{
  "admin.app.example": {
    "component": "adminExample",
    "path": "/admin/app/iotraining"
  },
+ "admin.app.otherexample": {
+   "component": "adminOtherExample",
+   "path": "/admin/app/otheriotraining"
+ }
}
  1. Crie o novo componente adminOtherExample.tsx na raiz da pasta react/:

/react/adminOtherExample.tsx

import React, { FC } from 'react'

const AdminOtherExample: FC = () => {
  return <h1>Other Example!</h1>
}

export default AdminOtherExample
  1. Finalize criando as mensagens para cada um dos labelId definidos no passo 3:

/messages/pt.json

{
  "admin-example.navigation.label": "Treinamento de IO",
  "admin-example.navigation.search.kws": "mock, test, treinamento, io",
+ "admin-example.navigation.insight": "Informações",
+ "admin-example.navigation.management": "Gerenciamento"
}

/messages/en.json

{
  "admin-example.navigation.label": "IO Training",
  "admin-example.navigation.search.kws": "mock, test, training, io",
+ "admin-example.navigation.insight": "Insights",
+ "admin-example.navigation.management": "Management"
}

/messages/es.json

{
  "admin-example.navigation.label": "Entrenamiento de IO",
  "admin-example.navigation.search.kws": "mock, test, entrenamiento, io",
+ "admin-example.navigation.insight": "Información",
+ "admin-example.navigation.management": "Administración"
}

O resultado esperado é então:

adminadmin

Está com dúvidas?

Veja o gabarito para esta etapa ou participe do nosso office hours


Ajude-nos a fazer este conteúdo melhor!

Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!

Faça uma contribuição

ou abra uma issue


Next step