Skip to content

Commit 3beef24

Browse files
mtrezzamtrezza
authored
docs: Add info panel docs to README (#2601)
1 parent cf6ec88 commit 3beef24

File tree

1 file changed

+246
-2
lines changed

1 file changed

+246
-2
lines changed

‎README.md

+246-2
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,15 @@ Parse Dashboard is a standalone dashboard for managing your [Parse Server](https
6262
- [Features](#features)
6363
- [Data Browser](#data-browser)
6464
- [Filters](#filters)
65+
- [Info Panel](#info-panel)
66+
- [Segments](#segments)
67+
- [Text Item](#text-item)
68+
- [Key-Value Item](#key-value-item)
69+
- [Table Item](#table-item)
70+
- [Image Item](#image-item)
71+
- [Video Item](#video-item)
72+
- [Audio Item](#audio-item)
73+
- [Button Item](#button-item)
6574
- [Browse as User](#browse-as-user)
6675
- [Change Pointer Key](#change-pointer-key)
6776
- [Limitations](#limitations)
@@ -111,7 +120,7 @@ Parse Dashboard is continuously tested with the most recent releases of Node.js
111120
| Version | Latest Version | End-of-Life | Compatible |
112121
|------------|----------------|-------------|------------|
113122
| Node.js 18 | 18.9.1 | May 2025 | ✅ Yes |
114-
| Node.js 20 | 20.11.1 | April 2026 | ✅ Yes |
123+
| Node.js 20 | 20.11.1 | April 2026 | ✅ Yes |
115124

116125
## Configuring Parse Dashboard
117126

@@ -120,13 +129,17 @@ Parse Dashboard is continuously tested with the most recent releases of Node.js
120129
| Parameter | Type | Optional | Default | Example | Description |
121130
|----------------------------------------|---------------------|----------|---------|----------------------|---------------------------------------------------------------------------------------------------------------------------------------------|
122131
| `apps` | Array<Object> | no | - | `[{ ... }, { ... }]` | The apps that are configured for the dashboard. |
132+
| `infoPanel` | Array<Object> | yes | - | `[{ ... }, { ... }]` | The [info panel](#info-panel) configuration. |
133+
| `infoPanel[*].title` | String | no | - | `User Details` | The panel title. |
134+
| `infoPanel[*].classes` | Array<String> | no | - | `["_User"]` | The classes for which the info panel should be displayed. |
135+
| `infoPanel[*].cloudCodeFunction` | String | no | - | `getUserDetails` | The Cloud Code Function which received the selected object in the data browser and returns the response to be displayed in the info panel. |
123136
| `apps.scripts` | Array<Object> | yes | `[]` | `[{ ... }, { ... }]` | The scripts that can be executed for that app. |
124137
| `apps.scripts.title` | String | no | - | `'Delete User'` | The title that will be displayed in the data browser context menu and the script run confirmation dialog. |
125138
| `apps.scripts.classes` | Array<String> | no | - | `['_User']` | The classes of Parse Objects for which the scripts can be executed. |
126139
| `apps.scripts.cloudCodeFunction` | String | no | - | `'deleteUser'` | The name of the Parse Cloud Function to execute. |
127140
| `apps.scripts.showConfirmationDialog` | Bool | yes | `false` | `true` | Is `true` if a confirmation dialog should be displayed before the script is executed, `false` if the script should be executed immediately. |
128141
| `apps.scripts.confirmationDialogStyle` | String | yes | `info` | `critical` | The style of the confirmation dialog. Valid values: `info` (blue style), `critical` (red style). |
129-
| `apps.cloudConfigHistoryLimit` | Integer | yes | `100` | `100` | The number of historic values that should be saved in the Cloud Config change history. Valid values: `0`...`Number.MAX_SAFE_INTEGER`. |
142+
| `apps.cloudConfigHistoryLimit` | Integer | yes | `100` | `100` | The number of historic values that should be saved in the Cloud Config change history. Valid values: `0`...`Number.MAX_SAFE_INTEGER`. |
130143

131144
### File
132145

@@ -837,6 +850,237 @@ A relational filter allows you filter all users who:
837850

838851
To apply such a filter, simply go to the `_User` class and add the two required filter conditions with the `Purchase` and `Payment` classes.
839852

853+
### Info Panel
854+
855+
▶️ *Core > Browser > Show Panel / Hide Panel*
856+
857+
The data browser offers an info panel that can display information related to the currently selected object in the data browser table. The info panel is made visible by clicking on the menu button *Show Panel* in the top right corner when browsing a class for which the info panel is configured in the dashboard options.
858+
859+
The following example dashboard configuration shows an info panel for the `_User` class with the title `User Details`, by calling the Cloud Code Function `getUserDetails` and displaying the returned response.
860+
861+
```json
862+
"apps": [
863+
{
864+
"infoPanel": [
865+
{
866+
"title": "User Details",
867+
"classes": ["_User"],
868+
"cloudCodeFunction": "getUserDetails"
869+
}
870+
]
871+
}
872+
]
873+
```
874+
875+
The Cloud Code Function receives the selected object in the payload and returns a response that can include various items.
876+
877+
#### Segments
878+
879+
The info panel can contain multiple segments to display different groups of information.
880+
881+
| Parameter | Value | Optional | Description |
882+
|---------------------|--------|----------|----------------------------------------------------------------------------------------------------------------------------------------|
883+
| `segments` | Array | No | An ordered array of segments, where each segment represents a distinct group of items to display. |
884+
| `segments[i].title` | String | No | The title of the segment that will be displayed. |
885+
| `segments[i].items` | Array | No | An ordered array of items within the segment. Each item can be of different types, such as text, key-value pairs, tables, images, etc. |
886+
887+
Example:
888+
889+
```json
890+
{
891+
"panel": {
892+
"segments": [
893+
{
894+
"title": "Purchases",
895+
"items": [
896+
{
897+
"type": "text",
898+
"text": "This user has a high churn risk!"
899+
}
900+
]
901+
}
902+
]
903+
}
904+
}
905+
```
906+
907+
The items array can include various types of content such as text, key-value pairs, tables, images, videos, audios, and buttons. Each type offers a different way to display information within the info panel, allowing for a customizable and rich user experience. Below is a detailed explanation of each type.
908+
909+
#### Text Item
910+
911+
A simple text field.
912+
913+
| Parameter | Value | Optional | Description |
914+
|-----------|--------|----------|----------------------|
915+
| `type` | String | No | Must be `"text"`. |
916+
| `text` | String | No | The text to display. |
917+
918+
Example:
919+
920+
```json
921+
{
922+
"type": "text",
923+
"text": "This user has a high churn risk!"
924+
}
925+
```
926+
927+
#### Key-Value Item
928+
929+
A text item that consists of a key and a value. The value can optionally be linked to a URL.
930+
931+
| Parameter | Value | Optional | Description |
932+
|-----------|--------|----------|-----------------------------------------------------------------------------------|
933+
| `type` | String | No | Must be `"keyValue"`. |
934+
| `key` | String | No | The key text to display. |
935+
| `value` | String | No | The value text to display. |
936+
| `url` | String | Yes | The URL that will be opened in a new browser tab when clicking on the value text. |
937+
938+
Examples:
939+
940+
```json
941+
{
942+
"type": "keyValue",
943+
"key": "Lifetime purchase value",
944+
"value": "$10k"
945+
}
946+
```
947+
948+
```json
949+
{
950+
"type": "keyValue",
951+
"key": "Last purchase ID",
952+
"value": "123",
953+
"url": "https://example.com/purchaseDetails?purchaseId=012345"
954+
}
955+
```
956+
957+
#### Table Item
958+
959+
A table with columns and rows to display data in a structured format.
960+
961+
| Parameter | Value | Optional | Description |
962+
|-------------------|--------|----------|----------------------------------------------------------------------------------|
963+
| `type` | String | No | Must be `"table"`. |
964+
| `columns` | Array | No | The column definitions, including names and types. |
965+
| `columns[*].name` | String | No | The name of the column to display. |
966+
| `columns[*].type` | String | No | The type of the column value (e.g., `"string"`, `"number"`). |
967+
| `rows` | Array | No | The rows of data, where each row is an object containing values for each column. |
968+
969+
Example:
970+
971+
```json
972+
{
973+
"type": "table",
974+
"columns": [
975+
{
976+
"name": "Name",
977+
"type": "string"
978+
},
979+
{
980+
"name": "Age",
981+
"type": "number"
982+
}
983+
],
984+
"rows": [
985+
{
986+
"Name": "Alice",
987+
"Age": 30
988+
},
989+
{
990+
"Name": "Bob",
991+
"Age": 40
992+
}
993+
]
994+
}
995+
```
996+
997+
#### Image Item
998+
999+
An image to be displayed in the panel.
1000+
1001+
| Parameter | Value | Optional | Description |
1002+
|-----------|--------|----------|----------------------------------|
1003+
| `type` | String | No | Must be `"image"`. |
1004+
| `url` | String | No | The URL of the image to display. |
1005+
1006+
Example:
1007+
1008+
```json
1009+
{
1010+
"type": "image",
1011+
"url": "https://example.com/images?purchaseId=012345"
1012+
}
1013+
```
1014+
1015+
#### Video Item
1016+
1017+
A video to be displayed in the panel.
1018+
1019+
| Parameter | Value | Optional | Description |
1020+
|-----------|--------|----------|----------------------------------|
1021+
| `type` | String | No | Must be `"video"`. |
1022+
| `url` | String | No | The URL of the video to display. |
1023+
1024+
Example:
1025+
1026+
```json
1027+
{
1028+
"type": "video",
1029+
"url": "https://example.com/video.mp4"
1030+
}
1031+
```
1032+
1033+
#### Audio Item
1034+
1035+
An audio file to be played in the panel.
1036+
1037+
| Parameter | Value | Optional | Description |
1038+
|-----------|--------|----------|-------------------------------|
1039+
| `type` | String | No | Must be `"audio"`. |
1040+
| `url` | String | No | The URL of the audio to play. |
1041+
1042+
Example:
1043+
1044+
```json
1045+
{
1046+
"type": "audio",
1047+
"url": "https://example.com/audio.mp3"
1048+
}
1049+
```
1050+
1051+
#### Button Item
1052+
1053+
A button that triggers an action when clicked.
1054+
1055+
| Parameter | Value | Optional | Description |
1056+
|------------------|--------|----------|---------------------------------------------------------|
1057+
| `type` | String | No | Must be `"button"`. |
1058+
| `text` | String | No | The text to display on the button. |
1059+
| `action` | Object | No | The action to be performed when the button is clicked. |
1060+
| `action.url` | String | No | The URL to which the request should be sent. |
1061+
| `action.method` | String | No | The HTTP method to use for the action (e.g., `"POST"`). |
1062+
| `action.headers` | Object | Yes | Optional headers to include in the request. |
1063+
| `action.body` | Object | Yes | The body of the request in JSON format. |
1064+
1065+
Example:
1066+
1067+
```json
1068+
{
1069+
"type": "button",
1070+
"text": "Click me!",
1071+
"action": {
1072+
"url": "https://api.example.com/click",
1073+
"method": "POST",
1074+
"headers": {
1075+
"Content-Type": "application/json"
1076+
},
1077+
"body": {
1078+
"key": "value"
1079+
}
1080+
}
1081+
}
1082+
```
1083+
8401084
## Browse as User
8411085

8421086
▶️ *Core > Browser > Browse*

0 commit comments

Comments
 (0)