Customizing Detail Pages

Using the DashboardDetailFormExtensionDefinition you can customize any existing detail page in the Dashboard.

Custom form inputs

Custom Fields

This feature replaces inputs for built-in entity fields only (like name, description, slug).

To customize the form input for a custom field you defined in your plugin, use the Custom Field Components instead.

You can replace any of the default form inputs with your own components using the inputs property.

Let's say you want to replace the default HTML description editor with a markdown editor component:

index.tsx

import { defineDashboardExtension } from '@vendure/dashboard';import { MarkdownEditor } from './markdown-editor';defineDashboardExtension({    detailForms: [        {            pageId: 'product-detail',            inputs: [                {                    blockId: 'main-form',                    field: 'description',                    component: MarkdownEditor,                },            ],        },    ],});

To learn how to build custom form components, see the Custom Form Elements guide.

Extending the detail query

You might want to extend the GraphQL query used to fetch the data for the detail page. For example, to include new fields that your plugin has defined so that you can render them in custom page blocks.

index.tsx

import { defineDashboardExtension } from '@vendure/dashboard';defineDashboardExtension({    detailForms: [        {            pageId: 'product-detail',            extendDetailDocument: `          query {              product(id: $id) {                  relatedProducts {                      id                      name                      featuredAsset {                        id                        preview                      }                  }              }          }      `,        },    ],});

Interacting with the detail page form

Sometimes you want to define a page block that needs to interact with the detail page's form:

To take some action when the form is submitted
To mark the form as dirty from inside your page block

These advanced use-cases can be achieved by using the useFormContext hook from react-hook-form.

Reacting to form submission

Here's how you can use the formState to react to a form submission:

Tsx

import { useEffect } from 'react';import { useFormContext } from 'react-hook-form';export function MyPageBlock() {    const { formState: { isSubmitSuccessful } } = useFormContext();    useEffect(() => {        if (isSubmitSuccessful) {            console.log('The detail page form was submitted');        }    }, [isSubmitSuccessful]);}

Setting the form as dirty

Let's say you have a page block that interacts with a custom mutation to set some data related to a Product. You want to fire your custom mutation when the form is submitted - this is done using the pattern above.

However, you need to somehow signal to the form that it is now dirty and can be save, even though no property of the Product itself may have changed.

Here's a work-around to allow this:

Tsx

import { useEffect } from 'react';import { useFormContext } from 'react-hook-form';import { Button } from '@vendure/dashboard';export function MyPageBlock() {    const { register } = useFormContext();    useEffect(() => {        // We register a "fake" field on the form that we only use        // to track the dirty state of this page block component        register('my-page-block-dirty-tracker')    }, [register]);        return (        <Button onClick={() => {            // We set that "fake" field to a random value to mark the whole            // form as dirty, so the "save" button becomes enabled.            setValue('dirty-tracker', Math.random(), { shouldDirty: true });        }}>Set dirty</Button>    );}