The two most common type of components you'll be creating in your UI extensions are list components and detail components.
In Vendure, we have standardized the way you write these components so that your ui extensions can be made to fit seamlessly into the rest of the app.
The specific pattern described here is for Angular-based components. It is also possible to create detail views using React components, but in that case you won't be able to use the built-in Angular-specific components.
Let's say you have a plugin which adds a new entity to the database called ProductReview. You have already created a list view, and
now you need a detail view which can be used to view and edit individual reviews.
The detail component itself is an Angular component which extends the BaseDetailComponent or TypedBaseDetailComponent class.
This example assumes you have set up your project to use code generation as described in the GraphQL code generation guide.
Here is the standard layout for detail views:
Here's how the routing would look for a typical list & detail view:
From Vendure v2.2, it is possible for your custom entities to support custom fields.
If you have set up your entity to support custom fields, and you want custom fields to be available in the Admin UI detail view, you need to add the following to your detail component:
Then add a card for your custom fields to the template:
Architecture reviews, custom plugin work, migrations, ongoing support. Get a hand from the team that builds Vendure.
Talk to the team