How to create a New Fields on the existing the Users Tabs on payloadCMS

Solution note:

To create the necessary field on the user tab, for more specific information on the user detail

1. Login to the administrator in the payload.

2. Then, browse to the Users option from the side navbar.

3. Check which fields are available in the User tab.

Follow this in the code section

1. Go to the Users folder, which is inside the payload.

2. In the Users folder, browse to the “index.tsx” folder, where you may declare the necessary field for the Users, for example.

 fields: [
  {
   name: 'name',
   type: 'text',
  },
  {
   name: 'First_Name',
   type: 'text',
  },
  {
   name: 'Last_Name',
   type: 'text',
  },
  {
   name: 'User_Supervisor',
   type: 'text',
  },
  {
   name: 'status',
   label: 'Status',
   type: 'select',
   hasMany: true,
   defaultValue: 'active',
   required: true,
   options: [
    {
     label: 'Active',
     value: 'active',
    },
    {
     label: 'Inactive',
     value: 'inactive',
    },
    {
     label: 'Pending',
     value: 'pending',
    },
   ],
  },
  {
   name: 'roles',
   type: 'select',
   hasMany: true,
   defaultValue: ['user'],
   options: [
    {
     label: 'admin',
     value: 'admin',
    },
    {
     label: 'user',
     value: 'user',
    },
   ],
   hooks: {
    beforeChange: [ensureFirstUserIsAdmin],
   },
   access: {
    read: admins,
    create: admins,
    update: admins,
   },
  },
 ],
 timestamps: true,
}

and save your modifications.

Return to the Users tab on the local server, where we can see the fields return on the code reflecting.

Then fill out the fields and save the form.

Then, head to the users tab on the admin page and show the new field value on the user table. Click on the column button where we may pick the addition value.

To obtain the value of the user from the backend, we may use the fetch method to fetch data from the backend via API.

  useEffect(() => {
  const fetchEmployees = async () => {
   try {
    const response = await fetch('http://localhost:3000/api/users')
    if (!response.ok) {
     throw new Error('Network response was not ok')
    }
    const data = await response.json()
    setEmployees(data.docs)
   } catch (error) {
    setError(error)
   } finally {
    setLoading(false)
   }
  }

  fetchEmployees()
 }, [])