Templates

The created templates have to contain keywords based on which the React code is generated.

These keywords include:

• Entity - the name of the generated entity (e.g. customers)
• FIELD - the field from GraphQL schema (e.g. first_name)
• HEADER_NAME - the header name of the column (e.g. First name)
• columns - generated datagrid columns (list view)
• renderCell - cell formatting

info

In the future we will support keywords customization.

During generation, these keywords are replaced with the appropriate components.

Screenshot

In the top right corner you can choose the actual language. Then with the tippy tool you are able to inline edit any text on the page.

Template example

In the following example, we used all the keywords listed in the Templates section.

import React from 'react'
import { DataGrid, GridCellParams, GridColDef } from '@mui/x-data-grid'
import Translate from '../../i18n/Translate'

interface Props {
  data: any
  loading: boolean
}

const EntityListView: React.FC<Props> = (props: Props) => {

  const columns: GridColDef[] = [
    {
      field: 'FIELD',
      renderHeader: () => (
        <Translate
          entityName={'entity'}
          fieldName={'FIELD'}
          defaultMessage={'HEADER_NAME'}
        />
      ),
      width: 150,
      renderCell: (params: GridCellParams) => <FormatEntityField value={params} />
    },
  ]

  return (
    <DataGrid
      rows={props?.data?.entity ?? []}
      columns={columns}
      loading={props?.loading}
    />
  )
}

export default EntityListView

Generated React code

Example of generated React code for customers entity from template above.

import React from 'react'
import { DataGrid, GridCellParams, GridColDef } from '@mui/x-data-grid'
import { FormattedMessage } from 'react-intl'

interface Props {
  data: any
  loading: boolean
}

const CustomersListView: React.FC<Props> = (props: Props) => {
  const columns: GridColDef[] = [
    {
      field: 'customers.first_name',
      renderHeader: () => (
        <FormattedMessage
          tagName={({ children }: any) => (
            <span
              className="translate"
              dangerouslySetInnerHTML={{ __html: children }}
              data-message-id="customers.first_name"
            />
          )}
          id="customers.first_name"
          defaultMessage="First name"
        />
      ),
      width: 150,
      renderCell: (params: GridCellParams) => params.row.first_name,
    },
    {
      field: 'customers.last_name',
      renderHeader: () => (
        <FormattedMessage
          tagName={({ children }: any) => (
            <span
              className="translate"
              dangerouslySetInnerHTML={{ __html: children }}
              data-message-id="customers.last_name"
            />
          )}
          id="customers.last_name"
          defaultMessage="Last name"
        />
      ),
      width: 150,
      renderCell: (params: GridCellParams) => params.row.last_name,
    },
  ]

  return (
    <DataGrid
      rows={props?.data?.customers ?? []}
      columns={columns}
      loading={props?.loading}
    />
  )
}

export default CustomersListView

Creating a new custom template

Steps:

1. Create new-template folder in project-templates/react-material-ui-vite/templates/ and copy all the files expect node-modules from project-templates/react-material-ui-vite/templates/list to it
2. Rename the package name in the package.json file in the new-template folder to "name": "@iteria-app-mui/new-template" and run pnpm i.
3. In new-template/src/pages/Entity/ rename all the occurences of List to NewTemplate. You can read more about the naming convention for the files in /pages/ here.
4. In new-template/src/components/entities/Entity rename all the List tsx files to NewTemplate (EntityListContaine.tsx -> EntityNewTemplateContainer.tsx etc.), also do the same in those files for the default exports, types and exported components. You can read more about the naming conventuon for the files in /entities/ here and here.
5. For the files in the new-template/src/components/fields/list update the imports and the component names to the changed ones. Beware the paths of the imports ../Entity/EntityNewTemplateView are porposefully wrong. The path specifies the location of the to be generated file relative to the actual file. You can read more about the naming convention for the files in /fields/ here.
6. After this you should have a working custom template, which you can select on the generate page field by selecting the new-template template. Now you can start to customize your template.
7. You can set automatic pre fill rules in the new-template/src/templateVariables.json file. You can read more about the templateVariable file here.