Access Document data in admin ui component?

eddy_solarxlast year

8

{
  name: "button",
  label: "Update Transactional Data",
  type: "ui",
  admin: {
    components: {
      Field: MyCustomUIField,
    },
  },
},

"use client";

export const MyCustomUIField: React.FC<{ path: string }> = ({
  path,
  ...rest
}) => {
  const data = useData(); // I was expecting a hook or something similar.

  return (
    <div className="mb-4">
      <button type="button">Update Data</button>
    </div>
  );
};

• 

  ritsu0455last year

  yeah, possible

  
  

  see

  https://payloadcms.com/docs/admin/hooks#useallformfields
  useField

  - access to 1 field

  
  useFormFields

  - acess to fields with selector

  
  useAllFromFields

  - just all fields

  
  
  

  note in 3.0 they are exported in

  @payloadcms/ui
• 

  eddy_solarxlast year

  Is a little hidden but its under

  
  

  import { useFormFields } from "@payloadcms/ui/forms/Form";

• 

  simka0997last year

  @423216344302092288

  @79302304150331392

  🙏

  
  
  @423216344302092288

  @79302304150331392

  I'm getting the data like this:

  
  
  

  const [fields] = useAllFormFields();
  const fieldsData = reduceFieldsToValues(fields, true);

  
  
  

  Any idea how I can also populate the relationship fields to not only get the ID of the related doc?

• 

  ritsu0455last year

  fetch

  them in

  useEffect
• 

  simka0997last year

  @423216344302092288

  I was hoping for a hack where I can simply adjust the depth before doing the above, but this works too. Thanks a lot 🙂

• 

  techinvertedlast year

  Hey

  @823927930874363905

  , have you figured this out? How do I push updates to other fields from a UI button field?

• 

  simka0997last year

  @149873958760480769

  sorry for the late response. I’m using useEffect to fetch the doc with depth of 2 now.

• 

  techinvertedlast year

  Okay thanks

  @823927930874363905