Components

Resource Components

AdminGuesser

<AdminGuesser> creates a complete Admin Context and Interface, rendering automatically an <AdminUI> component for resources exposed by a web API documented with any format supported by @api-platform/api-doc-parser (for Hydra documented APIs, use the <HydraAdmin>component instead). It also creates a schemaAnalyzer context, where the schemaAnalyzer service (for getting information about the provided API documentation) is stored. The <AdminGuesser> renders all exposed resources by default, but you can choose what resource you want to render by passing <ResourceGuesser> components as children. Deprecated resources are hidden by default, but you can add them back using an explicit <ResourceGuesser> component.

//App.js
import { AdminGuesser, ResourceGuesser } from '@api-platform/admin';

const App = () => (
  <AdminGuesser
    entrypoint={entrypoint}
    dataProvider={dataProvider}
    authProvider={authProvider}>
  <ResourceGuesser
    name"books"
    list={BooksList}
    show={BooksShow}
    edit={BooksEdit}
    create={BooksCreate} />
  <ResourceGuesser name"authors" />
</AdminGuesser>
)

export default App;

Props

ResourceGuesser

Based on React-Admin’s <Resource> component, the ResourceGuesser provides default props <CreateGuesser>, <ListGuesser>, <EditGuesser> and <ShowGuesser>. Otherwise you can pass it your own CRUD components using create, list, edit, show props.

// App.js
import { AdminGuesser, ResourceGuesser } from '@api-platform/admin';

const App = () => (
  <AdminGuesser
    entrypoint={entrypoint}
    dataProvider={dataProvider}
    schemaAnalyzer={schemaAnalyzer}
  >
    <ResourceGuesser
      name="books"
      list={BooksList}
      show={BooksShow}
      create={BooksCreate}
      edit={BooksEdit} />
    <ResourceGuesser name="reviews" />
  </AdminGuesser>
);

export default App;

Props

You can also use props accepted by React-Admin’s <Resource> component. For example, the props list, show, create & edit.

Page Components

ListGuesser

Based on React-Admin’s <List>, ListGuesser displays a list of resources in a <Datagrid>, according to children passed to it (usually <FieldGuesser> or any field component available in React-Admin). Use hasShow and hasEdit props if you want to display show and edit buttons (both set to true by default). By default, <ListGuesser> comes with <Pagination>.

// BooksList.js
import { FieldGuesser, ListGuesser } from '@api-platform/admin';
import { ReferenceField, TextField } from 'react-admin';

export const BooksList = props => (
  <ListGuesser {...props}>
    <FieldGuesser source="author" />
    <FieldGuesser source="title" />
    <FieldGuesser source="rating" />
    <FieldGuesser source="description" />
    <FieldGuesser source="publicationDate" />
  </ListGuesser>
);

Props

You can also use props accepted by React-Admin’s <List>.

CreateGuesser

Displays a creation page for a single item. Uses React-Admin’s <Create> and <SimpleForm>. For simple inputs, you can pass as children API Platform Admin’s <InputGuesser>, or any React-Admin’s Input components for more complex inputs.

// BooksCreate.js
import { CreateGuesser, InputGuesser } from '@api-platform/admin';

export const BooksCreate = props => (
  <CreateGuesser {...props}>
    <InputGuesser source="author" />
    <InputGuesser source="title" />
    <InputGuesser source="rating" />
    <InputGuesser source="description" />
    <InputGuesser source="publicationDate" />
  </CreateGuesser>
);

Props | Name | Type | Value | required | Description |

You can also use props accepted by React-Admin’s <Create>.

EditGuesser

Displays an edition page for a single item. Uses React-Admin’s <Edit> and <SimpleForm> components. For simple inputs, you can use API Platform Admin’s <InputGuesser>, or any React-Admin’s Input components for more complex inputs.

// BooksEdit.js
import { EditGuesser, InputGuesser } from '@api-platform/admin';

export const BooksEdit = props => (
  <EditGuesser {...props}>
    <InputGuesser source="author" />
    <InputGuesser source="title" />
    <InputGuesser source="rating" />
    <InputGuesser source="description" />
    <InputGuesser source="publicationDate" />
  </EditGuesser>
);

Props

You can also use props accepted by React-Admin’s <Edit>.

ShowGuesser

Displays a detailed page for one item. Based on React-Admin’s <Show> component. You can pass <FieldGuesser> as children for simple fields, or use any of React-Admin’s Basic Fields for more complex fields.

// BooksShow.js
import { FieldGuesser, ShowGuesser } from '@api-platform/admin';

export const BooksShow = props => (
  <ShowGuesser {...props}>
    <FieldGuesser source="author" />
    <FieldGuesser source="title" />
    <FieldGuesser source="rating" />
    <FieldGuesser source="description" />
    <FieldGuesser source="publicationDate" />
  </ShowGuesser>
);

Props

You can also use props accepted by React-Admin’s <Show> component.

Hydra

HydraAdmin

Creates a complete Admin Context and Interface, as <AdminGuesser>, but configured specially for Hydra. If you want to use other formats (see supported formats: @api-platform/api-doc-parser) use the <AdminGuesser> instead.

// App.js
import { HydraAdmin, ResourceGuesser } from '@api-platform/admin';

const App = () => (
  <HydraAdmin
    entrypoint={entrypoint}
    dataProvider={dataProvider}
    authProvider={authProvider}
   >
     <ResourceGuesser name="books" />
     { /* ... */ }
  </HydraAdmin>
);

export default App;

Props

dataProvider

Based on React-Admin’s Create, Delete, getList, getManyReference, GetOne, Update methods, the dataProvider is used by API Platform Admin to communicate with the API. In addition, the specific introspect method parses your API documentation. Note that the dataProvider can be overrided to fit your API needs.

schemaAnalyzer

Analyses your resources and retrieves their types according to the Schema.org vocabulary.

Other Components

Pagination

Set by default in the <ListGuesser/> component, the <Pagination/> component uses React-Admin’s <Pagination> component. By default, it renders 30 items per page and displays a navigation UI. If you want to change the number of items per page or disable the pagination, see the Pagination documentation.

FieldGuesser

Renders fields according to their types, using schemaAnalyzer. Based on React-Admin’s <ReferenceField> component.

// BooksShow.js
import { FieldGuesser, ShowGuesser } from '@api-platform/admin';

export const BooksShow = props => (
  <ShowGuesser {...props}>
    <FieldGuesser source="author" />
    <FieldGuesser source="title" />
    <FieldGuesser source="rating" />
    <FieldGuesser source="description" />
    <FieldGuesser source="publicationDate" />
  </ShowGuesser>
)

Props

You can also use props accepted by React-Admin’s Basic Fields.

InputGuesser

Uses React-Admin’s <ReferenceInput> to generate inputs according to your API documentation (e.g. number HTML input for numbers, checkbox for booleans, selectbox for relationships…)

Props