153 lines
4.3 KiB
Plaintext
153 lines
4.3 KiB
Plaintext
export const metadata = {
|
||
title: `${pageNumber} Admin Setting Pages`,
|
||
}
|
||
|
||
# {metadata.title}
|
||
|
||
<Note type="soon">
|
||
|
||
Admin customizations are coming soon.
|
||
|
||
</Note>
|
||
|
||
In this chapter, you’ll learn how to create a setting page in the admin dashboard.
|
||
|
||
## What is a Setting Page?
|
||
|
||
A setting page is a React component that adds a new page to the settings panel of the admin dashboard.
|
||
|
||
For example, you may create a setting page to manage configurations related to your custom functionalities.
|
||
|
||
---
|
||
|
||
## How to Create a Setting Page?
|
||
|
||
A setting page is created in a file named `page.tsx` under the `src/admin/settings` directory. The file’s default export must be the React component, and it must also export a configuration object.
|
||
|
||
For example, you can create the file `src/admin/settings/custom/page.tsx` with the following content:
|
||
|
||
```tsx title="src/admin/settings/custom/page.tsx"
|
||
import type { SettingConfig } from "@medusajs/admin"
|
||
import { ChatBubbleLeftRight } from "@medusajs/icons"
|
||
|
||
const CustomSettingPage = () => {
|
||
return (
|
||
<div>
|
||
<h1>Custom Setting Page</h1>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export const config: SettingConfig = {
|
||
card: {
|
||
label: "Custom",
|
||
description: "Manage your custom settings",
|
||
// optional
|
||
icon: ChatBubbleLeftRight,
|
||
},
|
||
}
|
||
|
||
export default CustomSettingPage
|
||
```
|
||
|
||
The new setting page’s path is the file’s path relative to `src/admin/settings` and prefixed with `/a/settings`. So, the above UI route is a new page added at the path `localhost:7001/a/settings/custom`.
|
||
|
||
The setting page is shown on the Settings panel as a card. In the exported configuration object, you configure the card’s label, description, and optionally icon. In this example, you use an icon from [Medusa’s UI Icons package](https://docs.medusajs.com/ui/icons/overview).
|
||
|
||
### Test the Setting Page
|
||
|
||
To test the setting page, start the Medusa application:
|
||
|
||
```bash npm2yarn
|
||
npm run dev
|
||
```
|
||
|
||
Then, open the Settings page of the admin dashboard. You’ll find a new card that links to your setting page.
|
||
|
||
---
|
||
|
||
## Using UI Components
|
||
|
||
Similar to other admin customizations, it’s highly recommended that you use the [Medusa UI package](https://docs.medusajs.com/ui) to match your page’s design with the rest of the Medusa Admin.
|
||
|
||
For example, you can rewrite the above UI route to the following:
|
||
|
||
```tsx title="src/admin/settings/custom/page.tsx"
|
||
import type { SettingConfig } from "@medusajs/admin"
|
||
import { ChatBubbleLeftRight } from "@medusajs/icons"
|
||
import { Container, Heading } from "@medusajs/ui"
|
||
|
||
const CustomSettingPage = () => {
|
||
return (
|
||
<Container>
|
||
<Heading level="h1">Custom Setting Page</Heading>
|
||
</Container>
|
||
)
|
||
}
|
||
|
||
export const config: SettingConfig = {
|
||
card: {
|
||
label: "Custom",
|
||
description: "Manage your custom settings",
|
||
icon: ChatBubbleLeftRight,
|
||
},
|
||
}
|
||
|
||
export default CustomSettingPage
|
||
```
|
||
|
||
---
|
||
|
||
## Setting Page Props
|
||
|
||
A setting page receives a `notify` prop, which is an object having the following properties:
|
||
|
||
- `success`: a function that shows a success toast message.
|
||
- `error`: a function that shows an error toast message.
|
||
- `warn`: a function that shows a warning toast message.
|
||
- `info`: a function that shows an info toast message.
|
||
|
||
Each of these functions accepts two parameters: the message’s title and the message’s content.
|
||
|
||
For example:
|
||
|
||
```tsx title="src/admin/settings/custom/page.tsx" highlights={[["11", "success", "Show a success toast message on the click of a button."]]}
|
||
import type { RouteProps, SettingConfig } from "@medusajs/admin"
|
||
import { ChatBubbleLeftRight } from "@medusajs/icons"
|
||
import { Container, Heading, Button } from "@medusajs/ui"
|
||
|
||
const CustomSettingPage = ({ notify }: RouteProps) => {
|
||
return (
|
||
<Container>
|
||
<Heading level="h1">Custom Setting Page</Heading>
|
||
<Button
|
||
onClick={() =>
|
||
notify.success("Success!", "You clicked the button!")
|
||
}
|
||
className="mt-3"
|
||
>
|
||
Click me
|
||
</Button>
|
||
</Container>
|
||
)
|
||
}
|
||
|
||
export const config: SettingConfig = {
|
||
card: {
|
||
label: "Custom",
|
||
description: "Manage your custom settings",
|
||
icon: ChatBubbleLeftRight,
|
||
},
|
||
}
|
||
|
||
export default CustomSettingPage
|
||
```
|
||
|
||
If you click the button on your setting page, a toast message will show with the title and message you specified.
|
||
|
||
<Note title="Tip">
|
||
|
||
Admin UI Routes support [Tailwind CSS](https://tailwindcss.com/) out of the box.
|
||
|
||
</Note>
|