How can I add more action buttons for keystone 5 list in admin ui list screen

Question

I just wonder how to add buttons like these in the image

How can I add a new button with custom functionality to be applied on the list. Just like export as csv.

Answer 1

You need to use listManageActions ui hook. this is how you would do that

// ./admin-ui/index.js // this file is automatically imported into admin-ui for hooks
import { UpdateItems, DeleteItems, useList } '@keystonejs/admin-ui/components'
import { useQuery, useMutation, useApolloClient } '@apollo/react-hooks'

const ExportCsvButton = () => {
  const { list, selectedItems } = useList();
  // your logic and react state hooks etc
  // selectedItems contains array of item Ids which are selected, list is the list you are in.
  const exportCsv = () => {
     // your logic to retrieve the items and data for exporting or doing custom work
     // you can use graphql to get 
  }
  return (<Button onClick={() => exportCSV()}> Export CSV </Button>
}
export default {
  // re-implement the default delete many and update many items buttons + custom Button
  listManageActions: () => (<div><UpdateItems /><DeleteItems /><ExportCsvButton /></div>),
};