Skip to content
KeystoneJS LogoKeystoneJS

Admin UI app

A KeystoneJS app which provides an Admin UI for content management.

Usage

JS
const { Keystone } = require('@keystonejs/keystone');
const { GraphQLApp } = require('@keystonejs/app-graphql');
const { AdminUIApp } = require('@keystonejs/app-admin-ui');

const keystone = new Keystone({...});

const authStrategy = keystone.createAuthStrategy({...});

module.exports = {
  keystone,
  apps: [
    new GraphQLApp(),
    new AdminUIApp({
      adminPath: '/admin',
      authStrategy,
    }),
  ],
};

Config

OptionTypeDefaultRequiredDescription
adminPathString/adminfalseThe path of the Admin UI.
apiPathString/admin/apifalseThe path of the API provided to the Admin UI.
graphiqlPathString/admin/apifalseThe path of the graphiql app, an in-browser IDE for exploring GraphQL.
authStrategyObjectnullfalseSee Authentication Guides
hooksString./admin-ui/falsePath to customization hooks. See below for more information.
enableDefaultRouteBoolfalsefalseIf enabled, the path of the Admin UI app will be set to /.
schemaNameStringpublicfalse
isAccessAllowedFunctiontruefalseControls which users have access to the Admin UI.
adminMetaObject{}falseProvides additional adminMeta. Useful for Hooks and other customizations

hooks

Customization hooks allow you to modify various areas of the Admin UI to better suit your development needs. The index.js file at the given path should export a single config object containing your chosen hooks. All are optional.

If omitted, Keystone will look under ./admin-ui/ for a hooks config export.

Usage

index.js
JS
new AdminUIApp({ hooks: require.resolve('./custom-hooks-path') });

The following hooks are available. Each is a function that takes no arguments.

/custom-hooks-path/index.js
JS
export default {
  logo,
  pages,
  customToast,
};

The logo to display on the signin screen.

This must return a React component.

JS
export default {
  logo: () => <MyAwesomeLogo />,
};

itemHeaderActions

Header components on the Item Details page can be replaced using this hook. Ths replaces the components for item Details page for all Lists.

This must return a React component.

/admin-ui/index.js
JS
import { ItemId, AddNewItem } '@keystonejs/admin-ui/components/'
export default {
  // re-implement the default AddNewItem and ItemId button + custom text
  listHeaderActions: () => (<div><ItemId /><AddNewItem /><p>Hello world</p></div>),
};

listHeaderActions

Header components on the List page can be replaced using this hook. This replaces components on list page for all Lists.

This must return a React component.

/admin-ui/index.js
JS
import { CreateItem } '@keystonejs/admin-ui/components/'
export default {
  // re-implement the default create item button + custom text
  listHeaderActions: () => (<div><CreateItem /><p>Hello world</p></div>),
};

listManageActions

Custom Actions component for multiple items in the list can be replaced with this hook. This replaces the list management toolbar Items for all lists.

This must return a React component.

/admin-ui/index.js
JS
import { UpdateItems, DeleteItems } '@keystonejs/admin-ui/components/'
export default {
  // re-implement the default delete many and update many items buttons + custom text
  listManageActions: () => (<div><UpdateItems /><DeleteItems /><p>Hello world</p></div>),
};

pages

Allows grouping list pages in the sidebar or defining completely new pages.

Should return an array of objects, which may contain the following properties:

NameTypeDescription
labelStringThe page name to display in the sidebar.
pathStringThe page path.
component`FunctionClass`
childrenArrayAn array of either Keystone list keys or objects with listKey and label properties.
JS
export default {
  pages: () => [
    // Custom pages
    {
      label: 'A new dashboard',
      path: '',
      component: Dashboard,
    },
    {
      label: 'About this project',
      path: 'about',
      component: About,
    },
    // Ordering existing list pages
    {
      label: 'Blog',
      children: [
        { listKey: 'Post' },
        { listKey: 'PostCategory', label: 'Categories' },
        { listKey: 'Comment' },
      ],
    },
    {
      label: 'People',
      children: ['User'],
    },
  ],
};

customToast

Allows customising the content of toast notification when an item is updated or deleted.

The hook function receives a context variable containing an item key with the original item data, a list key that can be used to limit the scope of the hook, the original message as well as a toastAction that will be either 'update' or 'delete'. The function should return a React component.

JS
export default {
  customToast: ({ item, list, message }) => {
    // custom Toast for MyList
    if (list.key === 'MyList') {
      return (
        <div>
          <strong>My custom toast notification!</strong>
          {item && item._label_ ? <strong>{item._label_}</strong> : null}
        </div>
      );
    }
    // Default toast
    return (
      <div>
        {item && item._label_ ? <strong>{item._label_}</strong> : null}
        <div>{message}</div>
      </div>
    );
  },
};

isAccessAllowed

This function takes the same arguments as a shorthand imperative boolean access control. It must return either true or false.

Important: If omitted, all users with accounts will be able to access the Admin UI. The example below would restrict access to users with the isAdmin permission.

Usage

JS
new AdminUIApp({
  /*...config */
  isAccessAllowed: ({ authentication: { item: user, listKey: list } }) => !!user && !!user.isAdmin,
}),

On this page

  • Usage
  • Config
  • hooks
  • isAccessAllowed
Edit on GitHub