Skip to main content

Create a Menu

After setting up your project, you can create a new menu by following these steps.

Platform CLI Workflow Video​

Prerequisites​

Before creating a menu, ensure you have:

  • A running data store project
  • Basic understanding of entity schemas

Step 1: Create Entity Schema​

First, create a schema in your data store project. Navigate to your schema directory and create a new file for your entity:

// In your data store schema directory (e.g., src/schema/cars.ts)
import { sqliteTable, text } from 'drizzle-orm/sqlite-core';
import * as path from 'path';
import {
  fileRegex,
  getConfigDefaults,
  system_fields,
} from '@dna-platform/crdt-lww/build/schema/system';
const filename = path.basename(__filename).replace(fileRegex, '');
const config = getConfigDefaults.byIndex(filename);
export const table = sqliteTable(
  filename,
  {
    ...system_fields,
    name: text(),
    type: text(),
  },
  config,
);

Step 2: Generate Menu Using Template​

Now you can generate the menu structure using the platform CLI:

platform menu

During this process:

  1. Select the entity you want to create a menu for

Step 3: Configure Menu Structure​

The generated menu will be placed in your project's menu directory. A typical menu configuration looks like this:

import { ISidebarMenu } from "~/components/platform/SideBar/type";

const menu = {
  title: "Cars",           // Display name in the sidebar
  icon: "CarIcon",        // Icon component name
  items: [],              // Submenu items if needed
  url: "/portal/cars",   // Route path
} as ISidebarMenu;

export default menu;

Step 4: Configure Menu Arrangement​

After creating your menu, you can control its position in the sidebar by configuring the arrangement.json file in your menu directory:

{
  "order": [
    "dashboard",
    "your-entity",    // Add your new menu item here
    "favorite",
    "activity_log",
    "contact",
    "organization",
    "settings"
  ]
}
tip

The order of items in the array determines their display order in the sidebar menu.

note

If a menu item is not listed in the arrangement.json file, it will be displayed in the top of the sidebar.

info

You can temporarily disable a menu item by removing it from the menu/index.ts array.

Generated Template Structure​

After running the menu command, the following folder structure will be created:

src/
├── [your-menu]/
│   ├── _components/
│   ├── grid/
│   ├── wizard/
│   ├── record/
│   ├── error.tsx
│   ├── layout.tsx
│   └── page.tsx
├── auto-generated/
│   ├── entities.tsx
│   └── index.tsx
└── server/menu/
    └── [your-entity]/
        └── index.ts

This structure contains all necessary components and layouts for your menu item.

After creating and configuring your menu, you can access different views by clicking on the menu item in the sidebar:

Available Views​

  1. Grid View (/portal/[your-menu]/grid)

    • The default view when clicking the menu item
    • Displays data in a tabular format with filtering and sorting capabilities
    • Allows bulk actions and data management

  2. Wizard View (/portal/[your-menu]/wizard/[code]/1)

    • Accessed through the "Create" button in the grid view
    • Provides a step-by-step form for creating new entries

  3. Record View (/portal/[your-menu]/record/[code]/dashboard)

    • Opens when clicking on a specific record in the grid
    • Shows detailed information about the selected item
    • Enables editing and managing individual records