Property

Properties are AdminJS's representation of your model's fields.

Introduction

Properties are AdminJS's representation of your model's fields. Every adapter used by AdminJS must export a Property which is an extension of BaseProperty. In this section you will learn how to override default settings of your resource's properties as well as how to add new properties to your resource using it's configuration object.

Customizing properties

This tutorial will cover how you can use different Property options to customize your properties.

Creating custom properties

Let's assume that you would like to add a new property called randomPicture to your User resource which would show a randomly generated picture in your User resource's list and show actions.

First, let's create a custom React component which will display the image:

import React from 'react'
import { ShowPropertyProps } from 'adminjs'
import { Box } from '@adminjs/design-system'

const RandomPicture: React.FC<ShowPropertyProps> = (props) => {
  // Picsum generates a random 200x200 photo
  const url = 'https://picsum.photos/200'
  
  return <img src={url} />
}

export default RandomPicture

const UserResource = {
  resource: User,
  options: {
    properties: {
      randomPicture: {
        type: 'string',
        components: {
          list: Components.MyCustomAction, // see "Writing your own Components"
          show: Components.MyCustomAction,
        },
      },
    },
  },
}

Every property can be further customized. That will be covered in the later parts of this section.

Displaying a tooltip next to a field in forms

If a field that you are displaying in your form might require additional information to fill in correctly, you may want to use a description option in your property's configuration. This option allows you to set a message that will be displayed after hovering over a question mark icon next to a label in your form.

const UserResource = {
  resource: User,
  options: {
    properties: {
      links: {
        description: "User's Linkedin/Github/social profiles links",
      },
    },
  },
}

You can also use a translation key and define a translation in locale.

links: {
  description: "userLinksHint",
},

Defining available values for user to choose from

Although this is not required most of the time because your adapter of choice should be able to load enum values from your models, there can still be a situation where you want a field to be a selection instead of a regular text input. This can be done through availableValues option.

const UserResource = {
  resource: User,
  options: {
    properties: {
      gender: {
        availableValues: [
          { value: 'male', label: 'Male' },
          { value: 'female', label: 'Female' },
          { value: 'other', label: 'Other' },
          { value: 'notSay', label: 'Rather not say' },
        ],
      },
    },
  },
}

Passing props into HTML element/component

There could be a case where you want to pass extra props to the React component or HTML element which AdminJS is using to render a form field. You can use props for this:

const UserResource = {
  resource: User,
  options: {
    properties: {
      bio: {
        type: 'textarea',
        props: {
          rows: 20,
        },
      },
    },
  },
}

The example above sets textarea's rows prop to 20, the default being 2.