Add a new page

OverviewCopy Anchor Link

This article describes how to add a new page in the app.

Current working directory is the packages/<package-id> folder.

Create a new pageCopy Anchor Link

To create a new page, you need to create a new React component and add it to the app. To do this, follow these steps:

1. Open the <package-id>/pages folder or create a new one if it does not exist.

2. Create a new React component in the pages folder. You can use pages/CustomPage.js as a reference.

   Copy Text

   const CustomPage = {
   title: 'Custom Page',
   blocks: [
       {
       name: 'namespace/custom-block',// custom block name
       attributes: {
           title: 'Title from app',
       },
       },
   ],
   };
   export default CustomPage;

   You need to register the block in the blocks folder. For more information, see Add a new block.

3. Register the page in the pages/index.js file.

   Copy Text

   import CustomPage from './customPage';
   const pages = {
       'custom-page': CustomPage,
   }
   export { pages }

4. Import the page in the <package-id>/index.js file.

   Copy Text

   import { pages } from './pages/index';    

5. You can then use the page in the app. For example, you can link this page to a tab in the navigation bar.

   Copy Text

   {
     name: 'appmaker/nav-tab-item',
     clientId: 'nav-tab-item-1',
     attributes: {
       tabId: 'home',
       title: 'Home',
       iconName: 'home',
       pageId: 'CustomPage',        
     },
   },