如何在管理UI列表屏幕中为keystone 5列表添加更多操作按钮

Question

我只是想知道如何在图像中添加这样的按钮如何添加具有要应用于列表的自定义功能的新按钮。就像导出为csv一样。

Answer 1

您需要使用 listManageActions ui hook。这就是你如何做到这一点

// ./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>),

};