Admin Customization

Our Admin is built with React and is using FluentUI from Microsoft. The entry point for the admin is project/admin/index.tsx. To add new functionality just write it in this file, or write it in some other file and import it in project/admin/index.ts.

As Burdy is hook-based you can access and extend almost any burdy admin functionality by just adding actions and syncFilters.

Custom Page

You can add a new custom Page in the side nav by adding 2 sync filters, first admin/routes to add new route to Burdy's react-router and component to render and second one admin/sidenav to add a link in the side nav.

In project/admin/index.tsx

import React from 'react';
import Hooks from "burdy/src/shared/features/hooks";

const TestPage: React.FC = () => {
  return <p>Hello from Test Page</p>
};

Hooks.addSyncFilter('admin/routes', (routes) => {
  return [
    ...routes,
    {
      key: 'test',
      path: '/test',
      component: TestPage,
    },
  ]
})

Hooks.addSyncFilter('admin/sidenav', (nav) => {
  nav[0].links.push({
    url: '/test',
    key: 'test',
    name: 'Test Page'
  })
  return nav;
});

Resulting in:

Test Page

Settings Tab

You can extend settings section by adding new tab using syncFilter admin/settings/tabs.

import React from 'react';
import Hooks from "burdy/src/shared/features/hooks";

const TestTab: React.FC = () => {
  return <p>Hello from Test Tab</p>
};

Hooks.addSyncFilter('admin/settings/tabs', (tabs) => {
  return [
    ...tabs,
    {
      key: 'test',
      name: 'Test Tab',
      component: TestTab
    }
  ]
});

Resulting in:

Test Page

Our Admin is built with React and is using FluentUI from Microsoft. The entry point for the admin is project/admin/index.tsx. To add new functionality just write it in this file, or write it in some other file and import it in project/admin/index.ts.

you can access and extend almost any burdy admin functionality by just adding actions and syncFilters. As Burdy is hook-based

Copyright © Burdy Technologies. All rights reserved.