Skip to main content

Data Resource

Description​

"Data Resource" contains your data individually about each of your tables and data types from the tables. Based on that data, the admin dashboard creates tables for viewing as well as forms that are used to enter and correct that data.

Create​

Create a file in your project and fill it with your table data based on the schema from the example below:

Example:

src/admin/DataResource.ts
import { AdminListColumnsType, AdminResourceType } from '../types';
import {
  addHero,
  addHeroLocale,
  deleteHero,
  deleteHeroFile,
  heroFormData,
  heroListData,
  listForSelect
} from './adminActions';

export default function demoResource(locale: string): AdminResourceType {
  const primaryColumnName = 'id_hero';
  const localeColumnName = 'locale';

  const listColumns: AdminListColumnsType[] = [
    {
      id: primaryColumnName,
      label: { en: 'ID', de: 'ID' },
      minWidth: 10,
      display_in_list: 1
    },
    {
      id: 'display',
      label: { en: 'Display', de: 'Anzeige' },
      minWidth: 330,
      display_in_list: 1,
      inputParams: {
        type: 'checkbox',
        default: 1,
        required: 1,
        translatable: false
      }
    },
    {
      id: 'text_position',
      label: { en: 'Text position', de: 'Textposition' },
      display_in_list: 1,
      inputParams: {
        type: 'select',
        default: 1,
        required: 1,
        selectOptions: [
          { value: 0, name: 'left' },
          { value: 1, name: 'center' },
          { value: 2, name: 'right' }
        ],
        translatable: false,
        help: {
          en: 'Text position help text',
          de: 'Hilfetext zur Textposition'
        }
      }
    },
    {
      id: 'title_color',
      label: { en: 'Title color', de: 'Titelfarbe' },
      inputParams: {
        type: 'color',
        length: 25
      }
    },
    {
      id: 'description_color',
      label: { en: 'Description color', de: 'Beschreibung Farbe' },
      inputParams: {
        type: 'color',
        length: 25
      }
    },

    {
      id: 'background_image_path',
      label: { en: 'Background image path', de: 'Hintergrundbildpfad' },
      inputParams: {
        type: 'image',
        imageType: 'image/png, image/jpg, image/jpeg',
        length: 250
      }
    },
    {
      id: 'background_height',
      label: { en: 'Background height', de: 'Hintergrundhöhe' },
      inputParams: {
        type: 'decimal',
        length: 9,
        help: { en: 'Title help text', de: 'Titelhilfetext' }
      }
    },
    {
      id: 'image_path',
      label: { en: 'Image path', de: 'Bildpfad' },
      inputParams: {
        type: 'image',
        length: 250
      }
    },
    {
      id: 'image_height',
      label: { en: 'Image height', de: 'Bildhöhe' },
      inputParams: {
        type: 'integer',
        length: 9,
        help: { en: 'Image height help text', de: 'Hilfetext zur Bildhöhe' }
      }
    },
    {
      id: 'button_link',
      label: { en: 'Button link', de: 'Schaltflächenlink' },
      inputParams: {
        type: 'url',
        length: 250
      }
    },
    {
      id: 'title',
      label: { en: 'Title', de: 'Titel' },
      display_in_list: 1,
      inputParams: {
        type: 'text',
        required: 1,
        length: 250,
        translatable: true
      }
    },
    {
      id: 'description',
      label: { en: 'Description', de: 'Beschreibung' },
      display_in_list: 1,
      inputParams: {
        type: 'text',
        length: 500,
        translatable: true
      }
    },
    {
      id: 'image_alt',
      label: { en: 'Image alt', de: 'Image alt' },
      inputParams: {
        type: 'text',
        length: 250,
        translatable: true
      }
    },
    {
      id: 'button_text',
      label: { en: 'Button text', de: 'Schaltflächentext' },
      inputParams: {
        type: 'text',
        length: 250,
        translatable: true
      }
    },
    {
      id: 'rating',
      label: { en: 'Rating', de: 'Bewertungen' },
      display_in_list: 1,
      inputParams: {
        type: 'select',
        default: 1,
        required: 1,
        selectOptions: listForSelect
      }
    },
    {
      id: 'background_color',
      label: { en: 'Background color en', de: 'Hintergrundfarbe' },
      inputParams: {
        type: 'color',
        length: 25
      }
    }
  ];

  const functionsAndParams = {
    primaryColumnName: primaryColumnName,
    localeColumnName: localeColumnName,
    listData: (listLocale: string) => heroListData(listLocale),
    formData: (primaryColumnValue: string) => heroFormData(primaryColumnValue),
    insertData: (dataObject: FormData) => addHero(dataObject),
    insertLocaleData: (dataObject: FormData) => addHeroLocale(dataObject),
    deleteData: (primaryColumnValue: string) => deleteHero(primaryColumnValue),
    deleteFile: (primaryColumnValue: string, fieldName: string, filePath: string) =>
      deleteHeroFile(primaryColumnValue, fieldName, filePath)
  };
  const resource = { multiple: true, listColumns, ...functionsAndParams };

  return resource;
}

Data Types:​

Params:​

  • primaryColumnName: The primary unique column used in the table to identify the data (id or id_column... )
  • localeColumnName: A column that contains the id or name of the language whose data we want to get.

Functions:​

tip

Functions from your NextJs or React project that enable the DataResource to perform the given functionality.