Model configuration

To configure your models, you can use the model property of the NextAdmin options parameter.

This property allows you to configure everything about how your models, their fields, their relations are displayed and edited.

Example for a schema with a User, Post and Category model:

import { NextAdminOptions } from "@premieroctet/next-admin";
 
export const options: NextAdminOptions = {
  /* Your other options here */
  model: {
    User: {
      toString: (user) => `${user.name} (${user.email})`,
      title: "Users",
      icon: "UsersIcon",
      list: {
        display: ["id", "name", "email", "posts", "role", "birthDate"],
        search: ["name", "email"],
        filters: [
          {
            name: "is Admin",
            active: false,
            value: {
              role: {
                equals: "ADMIN",
              },
            },
          },
        ],
      },
      edit: {
        display: [
          "id",
          "name",
          "email",
          "posts",
          "role",
          "birthDate",
          "avatar",
        ],
      },
    },
    Post: {
      toString: (post) => `${post.title}`,
    },
    Category: {
      title: "Categories",
      icon: "InboxStackIcon",
      toString: (category) => `${category.name}`,
      list: {
        display: ["name", "posts"],
      },
      edit: {
        display: ["name", "posts"],
      },
    },
  },
};

It takes as key a model name of your schema as value an object to configure it.

By default, if no models are defined, they will all be displayed in the admin. If you want more control, you have to define each model individually as empty objects or with the following properties:

You can customize the following for each model:

list property

This property determines how your data is displayed in the list View

list.fields property

The fields property is an object that can have the following properties:

list.filters property

The filters property allow you to define a set of Prisma filters that user can apply on list page. It’s an array of the type below:

It can also be an async function that returns the above type so that you can have a dynamic list of filters.

list.exports property

The exports property is available in the list property. It’s an object or an array of objects that can have the following properties:

edit property

This property determines how your data is displayed in the edit view

edit.styles property

The styles property is available in the edit property.

Here is an example of using styles property:

styles: {
  _form: "form-classname",
  ... // all fields
};

edit.fields property

This property can be defined for each field of the corresponding model. When you define a field, use the field’s name as the key and the following object as the value:

edit.hooks property

The hooks property allows you to intercept the values of a form, before and after its insertion in the database. It is an object that can have the following properties:

actions property

The actions property is an array of objects that allows you to define a set of actions that can be executed on one or more records of the resource. On the list view, there is a default action for deletion. The object can have the following properties:

NextAdmin Context

The NextAdmin context is an object containing the following properties:

Notice

The edit page’s form can display notice alerts. To do so, you can pass objects in the display array of the edit property of a model. This can be useful to display alerts or information to the user when editing a record. This object takes the following properties :

Here is a quick example of usage.

Considering you have a model User with the following configuration:

export const options: NextAdminOptions = {
  basePath: "/admin",
  title: "⚡️ My Admin",
  model: {
    User: {
      /**
        ...some configuration 
      **/
      edit: {
        display: [
          "id",
          "name",
          {
            title: "Email is mandatory",
            id: "email-notice",
            description: "You must add an email from now on",
          } as const,
          "email",
          "posts",
          "role",
          "birthDate",
          "avatar",
          "metadata",
        ],
        /** ... some configuration */
      },
    },
  },
};

In this example, the email-notice notice will be displayed in the form before the email field.

CustomInputProps

Represents the props that are passed to the custom input component.

HookError

The HookError is an error that can be thrown in the beforeDb hook of the edit property. It takes the following arguments in its constructor:

ClientActionDialogContentProps

Represents the props that are passed to the custom dialog component.

ListDataFieldValue

Represents a formatted value used by Next-Admin. It will have different shapes depending of the data type.

It will always have the following :

Scalar

Count

Link

Date