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.