Subsections

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 path from the navigation we had used before and add a new subSectionItems field with an empty array:

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

Add an element to the array of subSectionItems with a labelId and a path (which can be the same as the previous one):

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

Add another element with a different labelId and another 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",
+   }
  ]
}

With the new paths, make the necessary changes to routes.json:

{
  "admin.app.example": {
    "component": "adminExample",
    "path": "/admin/app/iotraining"
  },
+ "admin.app.otherexample": {
+   "component": "adminOtherExample",
+   "path": "/admin/app/otheriotraining"
+ }
}

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

/react/adminOtherExample.tsx

import React, { FC } from 'react'

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

export default AdminOtherExample

Finish by creating the messages for each of the labelId defined in step 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"
}

The expected result is, then:

Any questions?

See the answersheet for this step or check our [office hours] on the VTEX Developers channel(https://www.youtube.com/c/VTEXDevelopers)

Help us make this content better!

VTEX IO courses are open source. If you see something wrong, you can open a pull request!

Make a contribution

or open an issue