Skip to main content

​
Overview

The ProductDetails component renders the interface for creating new products and viewing product information. It displays details of an existing product item and allows a user to edit the product.

​
Permissions

To view details of an existing product, the entity user must have read permissions for the product object. To create, edit, and delete products, they must also have create, update, or delete permissions for the product object. For more information, see List of permissions.

​
Preview

Products component preview

​
Usage

You can use the ProductDetails component to create, view, edit, and delete details of an existing product. To create a new product, use the ProductDetails component without any props as shown: 
import { Dialog, ProductDetails } from "@monite/sdk-react"

...

// TODO: This component must be rendered within the MoniteProvider wrapper
const ProductDetailsPage = () => {
  return (
    <Dialog open alignDialog="right">
      <ProductDetails />
    </Dialog>
  );
};
To view details of an existing product, use the ProductDetails component with the id prop as shown: 
import { Dialog, ProductDetails } from "@monite/sdk-react"

...

// TODO: This component must be rendered within the MoniteProvider wrapper
const ProductDetailsPage = () => {
  return (
    <Dialog open alignDialog="right">
      <ProductDetails id="PRODUCT_ID" />
    </Dialog>
  );
};
To edit details of an existing product, you must provide the product ID via the id prop and set the initialView prop to Edit mode. 
import { Dialog, ProductDetails } from "@monite/sdk-react"

...

// TODO: This component must be rendered within the MoniteProvider wrapper
const ProductDetailsPage = () => {
  return (
    <Dialog open alignDialog="right">
      <ProductDetails
        id="PRODUCT_ID"
        initialView="edit"
      />
    </Dialog>
  );
};

​
Props

PropTypeDescription
defaultValuesobjectThis object is used to set default form values when creating a new product.
idstringThis is a required prop that accepts the UUID of the product to be displayed.
initialView("edit"| "read")The initialView prop determines whether the component is rendered in Read or Edit mode. Defaults to read.
onCreatedfunctionThis callback is triggered when a new product is created.
onDeletedfunctionThis callback is triggered after a product is deleted.
onEditfunctionThis callback is triggered when a product is edited.
onUpdatedfunctionThis callback is triggered when a product information is updated.