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

Question

我只是想知道如何在图像中添加这样的按钮

如何在列表中添加具有自定义功能的新按钮。就像导出为 csv.

Answer 1

您需要使用 listManageActions ui 钩子。这就是你的做法

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

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

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

javascript

content-management-system

keystonejs