custom button component in admin panel

unonweb

2 months ago

1 1

• Selected Answer
  

  matthijs166

  2 months ago

  Hey there,

  So we have an implementation of preview buttons for our collections. I'm not really sure, but I think that you can use the Payload API in the React component and call a custom endpoint (https://payloadcms.com/docs/rest-api/overview#custom-endpoints)

  Field config

  import { Field } from "payload/types";
  import { PreviewButtonField } from "./components/PreviewButtonField";
  
  export const PreviewButtons: Field = {
      name: "previewButtons",
      label: "Voorbeeld",
      type: "ui",
      admin: {
          position: "sidebar",
          components: {
              Field: PreviewButtonField,
          }
      }
  }

  React component:

  import { Button } from "payload/components";
  import { Label, useFormFields } from "payload/components/forms";
  import React from "react";
  import "./index.scss";
  
  type Props = {
      label?: string;
  };
  
  export const PreviewButtonField: React.FC = ({ label }: Props) => {
      const url = useFormFields(([fields]) => fields.url);
  
      return (
          <>
              <Label label={label} />
              <div className="preview-buttons">
                  <a href={`${process.env.PAYLOAD_PUBLIC_FRONDEND_SERVER_URL ?? ''}${url.value}`} target="live-preview">
                      <Button
                          className="preview-button"
                          buttonStyle="primary"
                      >
                          Live
                      </Button>
                  </a>
                  <a href={`${process.env.PAYLOAD_PUBLIC_FRONDEND_SERVER_URL ?? ''}${url.value}?draft=true`} target="draft-preview">
                      <Button
                          className="preview-button"
                          buttonStyle="secondary"
                      >
                          Concept
                      </Button>
                  </a>
              </div>
          </>
      );
  };

  And the styling:

  .preview-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  
    a,
    button {
      width: 100%;
      margin: 0;
    }
  }

  1 reply
• 

  unonweb

  2 months ago

  Hi Matthijs, that's a great starting point! I appreciate that a lot!