Skip to main content

​
Overview

The TemplateSettings component (alias DocumentSettings) enables users to customize their invoice look-and-feel and branding. Users can:
  • choose from several built-in PDF templates,
  • upload, replace, or remove the entity logo for PDFs,
  • change the format of document numbers for invoices, quotes, and other document types (for example, INV-00042 or IN/2025/042),
  • set the next number for invoices and other document types,
  • add or hide certain sections in PDFs (such as bank account details or signatures),
  • and more.
All options apply only to newly created documents and do not affect existing documents.
The TemplateSettings component displays the available settings in tabs:
TemplateSettings component: 'Layout and logo' tab
Individual tabs are also available as standalone components in case you want to expose only a subset of the available settings or to organize the settings in a different layout: The dialog form of TemplateSettings is embedded into InvoiceDetails for seamless invoice editing experience.

​
Permissions

To access and use the TemplateSettings component, the authenticated entity user must have a role with the read and update permissions for the entity resource.

​
Usage

Use the TemplateSettings component in your application as follows:
React
import { TemplateSettings } from "@monite/sdk-react";

...

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

​
Props

​
isDialog
boolean
default:"false"
If true, the component will be rendered inside a <Dialog> wrapper.This prop also controls the component’s caption: “Template settings” (if false) or “Edit template settings” (if true).
​
isOpen
boolean
default:"false"
This prop has effect only if isDialog is true. It controls the overall visibility of the component.
​
handleCloseDialog
function
Has effect only if isDialog is true. This callback is triggered when the user closes the template settings dialog.

​
See also