Skip to main content

Standard pages tuning

Fields Grouping​

In some cases, you may want to organize data fields into specific groups for better structure and clarity. For example, you could create a "Main Info" group to include columns like title, description, country, and apartment_image. Another group, "Characteristics," could hold attributes such as price, square_meter, number_of_rooms, property_type, and listed. Any values without a specified group will be categorized under "Other."

./resources/apartments.ts
 resources: [
    {
      ...
      options: {
        ...
        createEditGroups: [
          {
            groupName: 'Main info',
            columns: ['id','title', 'description', 'country', 'apartment_image']
          },
          {
            groupName: 'Characteristics',
            columns: ['price', 'square_meter', 'number_of_rooms', "property_type", "listed"]
          }
        ],
      }
    }
 ]

Here is how it looks: alt text

List​

Default Sorting​

./resources/apartments.ts
import { AdminForthSortDirections } from 'adminforth';

...
  resources: [
    {
      resourceId: 'aparts',
      options: {
        defaultSort: {
          columnName: 'created_at',
          direction: AdminForthSortDirections.ASC, 
        }
      }
    }
  ]

Page size​

use options.listPageSize to define how many records will be shown on the page

./resources/apartments.ts
  resources: [
    {
      resourceId: 'aparts',
      options: {
        ...
        listPageSize: 10,
      }
    }
  ]

Custom row click action​

By default, when you click on a record in the list view, the show view will be opened.

You can change this behavior by using options.listTableClickUrl.

To disable any action (don't open show) return null:

./resources/apartments.ts
  resources: [
    {
      resourceId: 'aparts',
      options: {
        ...
        listTableClickUrl: async (record, adminUser) => null,
      }
    }
  ]

To open a custom page, return URL to the custom page (can start with https://, or relative adminforth path):

./resources/apartments.ts
      options: {
        ...
        listTableClickUrl: async (record, adminUser) => {
          return `https://google.com/search?q=${record.name}`;
        }
      }

If you wish to open the page in a new tab, add target=_blank get param to the returned URL:

./resources/apartments.ts
      options: {
        ...
        listTableClickUrl: async (record, adminUser) => {
          return `https://google.com/search?q=${record.name}&target=_blank`;
        }
      }

Auto-refresh records​

options.listRowsAutoRefreshSeconds might be used to silently refresh records that are loaded (no new records will be fetched if they appear)

./resources/apartments.ts
  resources: [
      {
        resourceId: 'aparts',
        hooks: {
          list: {
            afterDatasourceResponse: async ({ response }: { response: any }) => { 
              response.forEach((r: any) => {
                // substitute random country on any load
                const countries = [ 'US', 'DE', 'FR', 'GB', 'NL', 'IT', 'ES', 'DK', 'PL', 'UA', 
                  'CA', 'AU', 'BR', 'JP', 'CN', 'IN', 'KR', 'TR', 'MX', 'ID']
                r.country = countries[Math.floor(Math.random() * countries.length)];
              })
              return { ok: true, error: "" }
            }
          }
        },
        options: {
          ...
          listRowsAutoRefreshSeconds: 1,
        }
      }
  ]

alt text

Creating​

Fill with default values​

Sometimes you want to generate some field value without asking user to fill it. For example createdAt oftenly store time of creation of the record. You can do this by using fillOnCreate:

./resources/apartments.ts

new AdminForth({
  ...
  resources: [
    {
      name: 'apartments',
      fields: [
        ...
        {
          name: 'created_at',
          type: AdminForthDataTypes.DATETIME,
          fillOnCreate: ({ initialRecord, adminUser }) => (new Date()).toISOString(),
        },
      ],
    },
    ...
  ],

Also you can assign adminUser ID by adminUser.dbUser.id in same hook:

./resources/apartments.ts
new AdminForth({
  ...
  resources: [
    {
      name: 'apartments',
      fields: [
        ...
        {
          name: 'created_by',
          type: AdminForthDataTypes.STRING,
          fillOnCreate: ({ initialRecord, adminUser }) => adminUser.dbUser.id,
        },
      ],
    },
    ...
  ],

Same effect can be achieved by using hooks. But fillOnCreate might be shorter and more readable.

Editing​

You can set a column editReadonly so it will be shown in the edit form but will be disabled.
This might be useful to better identify the record during editing or to show some additional information that should not be changed but can help to edit the record.

./resources/apartments.ts
new AdminForth({
  ...
  resources: [
    {
      name: 'apartments',
      fields: [
        ...
        {
          name: 'created_at',
          type: AdminForthDataTypes.DATETIME,
          editReadonly: true,
        },
      ],
    },
    ...
  ],