HomeGuidesRecipesAPI ExplorerForumSupport
Partner Portal
Partner Portal

PayableDetails

The PayableDetails component renders the interface for creating, uploading, editing, and transitioning a payable. It also displays a copy of the uploaded payable alongside details of a payable, allowing a user to edit these details.

πŸ“˜

Permissions

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

Preview

`PayablesDetails` component preview.

PayableDetails component preview.

Usage

Use the PayableDetails component to create new payables and view and edit details of an existing payable. To view details of an existing payable, use the PayableDetails component with the id prop as shown:

import { Dialog, PayableDetails } from "@monite/sdk-react"

// This component must be rendered within the MoniteProvider wrapper
const PayableDetailsPage = () => {
  return (
    <Dialog open fullScreen>
      <PayableDetails id="PAYABLE_ID" /> 
    </Dialog>
  );
};

To create a new payable, import the PayableDetails component without providing the id prop as shown:

import { PayableDetails } from "@monite/sdk-react"

// This component must be rendered within the MoniteProvider wrapper
const PayableDetailsPage = () => {
  return <PayableDetails />;
};

Props

PropTypeDescription
idstringThis prop accepts the UUID of the payable details to be displayed or updated. This prop is not required for the creation of new payables.
onApprovedfunctionThis callback is triggered after a payable is approved by an entity user.
onCanceledfunctionThis callback is triggered after a payable is canceled. It contains one string argument representing the payable UUID.
onClosefunctionThis callback is triggered when the modal form is closed.
onPayfunctionThis callback is triggered after a payable is paid.
onRejectedfunctionThis callback is triggered after a payable is rejected by an approver.
onSavedfunctionThis callback is triggered after the "Save" button is clicked.
onSubmittedfunctionThis callback is triggered after a payable is submitted for approval.