Pages publishing Button interaction

[hoangtran74]

I couldn't find any solutions or documentation anywhere, hoping someone can point me to the right direction.

Option 1: For example, in the Page component, I have an approver field with ties to a selection of drop-down options. At the page creation, it will be drafted, and would like the publishing button to be disabled unless the approver option is selected as "approved.

Options 2: Fetching the approving processed info from an external API, then using that info to enable or disable the publishing button.

[JarrodMFlesch]

Hey @hoangtran74! This is definitely possible.

For this type of customization I recommend creating a custom publish button. You can see the basics of how these are structured here.

Here is an example that might point you in the right direction:

import { useAuth } from 'payload/components/utilities';
import { CustomPublishButtonProps } from 'payload/types';
import * as React from 'react';

export const CustomPublishButton: CustomPublishButtonProps = ({ publish, label, disabled, DefaultButton }) => {
  const { user } = useAuth();
  const userRoles = Array.isArray(user?.role) ? user?.role : [user?.role];

  if (userRoles.includes('admin')) {
    return (
      <DefaultButton
        publish={publish}
        label={label}
        disabled={disabled}
      />
    );
  }

  return null;
};

While this is a bit different than your use-case, I think the foundation is the same. I would imagine you using the useField() hook to get the value of your approval select field.

[hoangtran74]

this work for me. Thank you.

[rawkode]

@JarrodMFlesch How we would enforce this at the server level?

[JarrodMFlesch]

I would probably use a beforeValidation hook on the collection, compare the incoming data with the original doc data and if they are different ensure the user has the roles you want to allow this functionality to.

[rawkode]

@JarrodMFlesch I did try that approach, but I couldn't find out how to get the user from the beforeValidate hook; the req object doesn't appear to have it. Unless my IDE is mistaken?

[JarrodMFlesch]

@rawkode yeah req will have the user on it. Want to paste what your hook looks like in here? I also responded to your discord thread, that will be faster to get a response from me/others likely!