Custom view in admin

[avanfeel]

Any ideas how to create a custom view, while keeping the layout of the admin (logo, nav, etc)?
I'm using admin.components.routes to import my custom view, but based on documentation I may be needing to import some "admin" folder an its contents.

[jmikrut]

Hey @avanfeel — great question!

We export the DefaultTemplate component, which comes with the layout of the admin panel. You can re-use it easily by importing it and re-using it.

Here's how you'd do that.

Payload config:

import { buildConfig } from 'payload/config';
import { CustomRouteWithDefaultTemplate } from './CustomRouteWithDefaultTemplate; 

export default buildConfig({
  admin: {
    components: {
      // Here is how you define custom routes
      // in the Admin UI.
      routes: [
        {
          path: '/custom-default-route',
          Component: CustomRouteWithDefaultTemplate,
        },
      ],
      afterDashboard: [
        // Here, you can add your own controls
        // below the built-in Dashboard component that 
        // allow you to link to your custom views.
        // You can also put controls ABOVE the default dashboard component
        // by using beforeDashboard
        AfterDashboard,
      ],
      afterNavLinks: [
        // Here, you can add your own links
        // to custom views within the Nav component.
        // You can also put them above the nav links
        // by using beforeNavLinks
        AfterNavLinks,
      ],
    },
  },
  // the rest of your config goes here
});

Then, here's an example of a CustomRouteWithDefaultTemplate component:

import React, { useEffect } from 'react';
import { Redirect } from 'react-router-dom';

import { DefaultTemplate } from 'payload/components/templates';
import { Button, Eyebrow } from 'payload/components/elements';
import { AdminView } from 'payload/config';
import { useStepNav } from 'payload/components/hooks';
import { useConfig, Meta } from 'payload/components/utilities';

const CustomDefaultRoute: AdminView = ({ user, canAccessAdmin }) => {
  const { routes: { admin: adminRoute } } = useConfig();
  const { setStepNav } = useStepNav();

  // The effect below will only run one time and will allow us
  // to set the step nav to display our custom route name
  useEffect(() => {
    setStepNav([
      {
        label: 'Custom Route with Default Template',
      },
    ]);
  }, [setStepNav]);

  // If an unauthorized user tries to navigate straight to this page,
  // Boot 'em out
  if (!user || (user && !canAccessAdmin)) {
    return (
      <Redirect to={`${adminRoute}/unauthorized`} />
    );
  }

  return (
    <DefaultTemplate>
      <Meta
        title="Custom Route with Default Template"
        description="Building custom routes into Payload is easy."
        keywords="Custom React Components, Payload, CMS"
      />
      <Eyebrow />
      <h1>Custom Route</h1>
      <p>Here is a custom route that was added in the Payload config. It uses the Default Template, so the sidebar is rendered.</p>
      <Button
        el="link"
        to={`${adminRoute}`}
        buttonStyle="secondary"
      >
        Go to Dashboard
      </Button>
    </DefaultTemplate>
  );
};

export default CustomDefaultRoute;

We're going to be producing videos that walk through all of this in greater depth but this should get you going. Lots of potential here.

[avanfeel]

Thank you @jmikrut !!! You nailed it. This is awesome, I'm using PayloadCMS as the starting point to build a general online management tool to manage a horse farm (breeding, feeding, pastures, etc). So there's a ton of features I'm thinking of adding, and this something critical I needed to resolve in order to move forward. So THANK YOU!

[AdanTouchPoint]

it is does not working for me :( , i follow this steps and can't see my component anywhere

[KasparTr]

This code doesn't compile.

'DefaultTemplate' refers to a value, but is being used as a type here. Did you mean 'typeof DefaultTemplate'?