CODEWITHSUNDEEP
javascriptnode.jsmongodbkeystonejs
Vlad Cazacu
Vlad Cazacu

Reputation: 1540

Adding custom admin UI functionality to KeystoneJS

I'm just starting out with Keystone on a new project and couldn't find any docs that describe adding custom functionality to the admin UI.

Some of the things I'd need to implement but couldn't find any resources about:

  1. Creating new pages in the admin that are not dependent on models. In this case I'd need to use my own views, frontend JS and backend endpoints, which I'm not sure how to include or how to hook up to the admin UI. Is there a Keystone way of achieving this?
  2. Customising listing pages. For example i have some custom models that I'd like to reorder by drag-and-dropping in the listing table and have an additional save button above the table that submits the new order to an endpoint. For this I'd need a way to inject some custom JS and HTML in the respective listing page, but I'm not sure how to do that, if it's even possible.
  3. Custom fields in the admin item page that I don't want auto-generated by Keystone from the model. Is there a way to hijack the Keystone view for a specific model type and add custom elements?
  4. Declaring a new model with data from mongo from the same model. For example having a Category model that has a select element with other categories for selecting parents.

Sorry if these issues have already been discussed / documented, but I couldn't find any info related to them.

Thanks and looking forward to your thoughts on these issues.

Upvotes: 5

Views: 5161

Answers (2)

Gautam Singh
Gautam Singh

Reputation: 1138

info: I am the author of the repo https://github.com/k6js/k6js

You can do this in v5 but in v6 these features were dropped. This is how you can enable this.

In Keystone-6 you can override the page by simply creating a page in admin/list-name/index.tsx for list page and [id].tsx for item page. Keystone literally creates these pages in its own isolated nextjs instance with init content.

I have modified these admin-ui pages from keystone and added features which enables some extensions.

List Page components: ListPageHeader - you can add components to Header of the page ListPageActions - actions on the List page which is independent of the selection of items. ListItemsActions - actions which are applied to selection of items.

I also have added an Update button which does update many for selections.

Item page Components: ItemPageHeader - add header action ItemPageSidebar - add actions on sidebar, this can also be achieved by setting itemView.fieldPosition = 'sidebar' in the recent version of keystonef or a virtual fields.

i have also added feature to timestamp field view to allow filtering on timestamp values.

example of an item page here

// ./admin/pages/posts/[id].tsx - for item page
/** @jsxRuntime classic */
/** @jsx jsx */

import { jsx } from '@keystone-ui/core'
import { getItemPage } from '@k6js/admin-ui/pages/ItemPage'
import { type ItemPageComponents } from '@k6js/admin-ui'

const components: ItemPageComponents = {
  ItemPageHeader: ({ item }) => <div>Page Header Custom - {item?.id}</div>,
  ItemPageSidebar: ({ item }) => <div>Page sidebar Custom - {item?.id}</div>,
}

export default getItemPage({ listKey: 'Post', components })

you can run the example in the repo to see list page as well as item page examples including the timestamp filtering. All of this is active in the 'Post' page.

Upvotes: 0

Marcelo Lazaroni
Marcelo Lazaroni

Reputation: 10239

This is something that has been requested by many people and the Keystone people are working on it.

They discussed some of it here: https://github.com/keystonejs/keystone/issues/220

You can track the feature progress in here: https://productpains.com/post/keystonejs/admin-interface-extensibility

Upvotes: 0

Related Questions