Repository files navigation

Parse Dashboard is a standalone dashboard for managing yourParse Server apps.

• Getting Started
  • Compatibility
    • Parse Server
    • Node.js
  • Configuring Parse Dashboard
    • Options
      • Root Options
        • App Options
        • Column Options
        • Script Options
        • Info Panel Options
        • User Options
      • CLI & Server Options
      • Helper CLI Commands
    • File
    • Environment variables
      • Multiple apps
      • Single app
  • Managing Multiple Apps
  • GraphQL Playground
  • App Icon Configuration
  • App Background Color Configuration
  • Other Configuration Options
    • Prevent columns sorting
    • Custom order in the filter popup
    • Persistent Filters
    • Keyboard Shortcuts
    • Scripts
    • Resource Cache
• Running as Express Middleware
• Deploying Parse Dashboard
  • Preparing for Deployment
  • Security Considerations
    • Security Checks
    • Configuring Basic Authentication
    • Multi-Factor Authentication (One-Time Password)
    • Running Multiple Dashboard Replicas
      • Using a Custom Session Store
  • Use Read-Only masterKey
    • Making an app read-only for all users
    • Makings users read-only
    • Making user's apps readOnly
  • Configuring Localized Push Notifications
  • Run with Docker
• Features
  • Data Browser
    • Filters
    • Info Panel
      • Response
        • Segments
        • Text Item
        • Key-Value Item
        • Table Item
        • Image Item
        • Video Item
        • Audio Item
        • Button Item
        • Panel Item
      • Prefetching
    • Freeze Columns
    • Browse as User
    • Change Pointer Key
      • Limitations
    • CSV Export
  • AI Agent
    • Configuration
    • Providers
      • OpenAI
  • Views
    • Data Sources
      • Aggregation Pipeline
      • Cloud Function
    • View Table
      • Pointer
      • Link
      • Image
      • Video
• Contributing

Install the dashboard fromnpm.

npm install -g parse-dashboard

You can launch the dashboard for an app with a single command by supplying an app ID, master key, URL, and name like this:

parse-dashboard --dev --appId yourAppId --masterKey yourMasterKey --serverURL "https://example.com/parse" --appName optionalName

You may set the host, port and mount path by supplying the--host,--port and--mountPath options to parse-dashboard. You can use anything you want as the app name, or leave it out in which case the app ID will be used.

The--dev parameter disables production-ready security features. This parameter is useful when running Parse Dashboard on Docker. Using this parameter will:

• allow insecure http connections from anywhere, bypassing the optionallowInsecureHTTP
• allow the Parse ServermasterKey to be transmitted in cleartext without encryption
• allow dashboard access without user authentication

⚠️ Do not use this parameter when deploying Parse Dashboard in a production environment.

After starting the dashboard, you can visithttp://localhost:4040 in your browser:

Parse Dashboard is compatible with the following versions of Parse Server.

Parse Dashboard automatically checks the Parse Server version when connecting and displays a warning if the server version does not meet the minimum required version. The required Parse Server version is defined in thesupportedParseServerVersion field inpackage.json.

Parse Dashboard is continuously tested with the most recent releases of Node.js to ensure compatibility. We follow theNode.js Long Term Support plan and only test against versions that are officially supported and have not reached their end-of-life date.

This section provides a comprehensive reference for all Parse Dashboard configuration options that can be used in the configuration file, via CLI arguments, or as environment variables.

Each class incolumnPreference can have an array of column configurations:

You can also start the dashboard from the command line with a config file. To do this, create a new file calledparse-dashboard-config.json inside your local Parse Dashboard directory hierarchy. The file should match the following format:

{"apps": [    {"serverURL":"http://localhost:1337/parse","appId":"myAppId","masterKey":"myMasterKey","appName":"MyApp"    }  ]}

You can then start the dashboard usingparse-dashboard --config parse-dashboard-config.json.

This only works when starting the app using theparse-dashboard command

There are also two methods you can use to configure the dashboard using environment variables.

Provide the entire JSON configuration inPARSE_DASHBOARD_CONFIG and it will be parsed just like the config file.

You can also define each configuration option individually.

HOST: "0.0.0.0"PORT: "4040"MOUNT_PATH: "/"PARSE_DASHBOARD_TRUST_PROXY: undefined // Or "1" to trust connection info from a proxy's X-Forwarded-* headersPARSE_DASHBOARD_SERVER_URL: "http://localhost:1337/parse"PARSE_DASHBOARD_MASTER_KEY: "myMasterKey"PARSE_DASHBOARD_APP_ID: "myAppId"PARSE_DASHBOARD_APP_NAME: "MyApp"PARSE_DASHBOARD_USER_ID: "user1"PARSE_DASHBOARD_USER_PASSWORD: "pass"PARSE_DASHBOARD_SSL_KEY: "sslKey"PARSE_DASHBOARD_SSL_CERT: "sslCert"PARSE_DASHBOARD_CONFIG: undefined // Only for reference, it must not existPARSE_DASHBOARD_COOKIE_SESSION_SECRET: undefined // set the cookie session secret, defaults to a random string. Use this option if you want sessions to work across multiple servers, or across restartsPARSE_DASHBOARD_AGENT: undefined // JSON string containing the full agent configuration with models array

Managing multiple apps from the same dashboard is also possible. Simply add additional entries into theparse-dashboard-config.json file's"apps" array:

{"apps": [    {"serverURL":"http://localhost:1337/parse",// Self-hosted Parse Server"appId":"myAppId","masterKey":"myMasterKey","appName":"My Parse Server App"    },    {"serverURL":"http://localhost:1337/parse2",// Self-hosted Parse Server"appId":"myAppId","masterKey":"myMasterKey","appName":"My Parse Server App 2"    }  ]}

Parse Dashboard has a built-in GraphQL Playground to play with the auto-generatedParse GraphQL API.

You can setup the GraphQL Playground by passing the--graphQLServerURL option to theparse-dashboard CLI:

parse-dashboard --dev --appId yourAppId --masterKey yourMasterKey --serverURL "https://example.com/parse" --graphQLServerURL "https://example.com/graphql" --appName optionalName

ThegraphQLServerURL option is also available through an environment variable calledPARSE_DASHBOARD_GRAPHQL_SERVER_URL:

HOST: "0.0.0.0"PORT: "4040"MOUNT_PATH: "/"PARSE_DASHBOARD_SERVER_URL: "http://localhost:1337/parse"PARSE_DASHBOARD_GRAPHQL_SERVER_URL: "http://localhost:1337/graphql"PARSE_DASHBOARD_MASTER_KEY: "myMasterKey"PARSE_DASHBOARD_APP_ID: "myAppId"PARSE_DASHBOARD_APP_NAME: "MyApp"

You can also setup the GraphQL Playground in yourparse-dashboard-config.json file:

{"apps": [    {"serverURL":"http://localhost:1337/parse","graphQLServerURL":"http://localhost:1337/graphql","appId":"myAppId","masterKey":"myMasterKey","appName":"My Parse Server App"    },    {"serverURL":"http://localhost:1337/parse2","graphQLServerURL":"http://localhost:1337/graphql2","appId":"myAppId","masterKey":"myMasterKey","appName":"My Parse Server App 2"    }  ]}

After starting the dashboard, you can visithttp://0.0.0.0:4040/apps/MyTestApp/api_console/graphql in your browser:

Parse Dashboard supports adding an optional icon for each app, so you can identify them easier in the list. To do so, youmust use the configuration file, define aniconsFolder in it, and define theiconName parameter for each app (including the extension). The path of theiconsFolder is relative to the configuration file. If you have installed ParseDashboard globally you need to use the full path as value for theiconsFolder. To visualize what it means, in the following exampleicons is a directory located under the same directory as the configuration file:

{"apps": [    {"serverURL":"http://localhost:1337/parse","appId":"myAppId","masterKey":"myMasterKey","appName":"My Parse Server App","iconName":"MyAppIcon.png",    }  ],"iconsFolder":"icons"}

Parse Dashboard supports adding an optional background color for each app, so you can identify them easier in the list. To do so, youmust use the configuration file, define anprimaryBackgroundColor andsecondaryBackgroundColor in it, parameter for each app. It isCSS style. To visualize what it means, in the following examplebackgroundColor is a configuration file:

{"apps": [    {"serverURL":"http://localhost:1337/parse","appId":"myAppId","masterKey":"myMasterKey","appName":"My Parse Server App","primaryBackgroundColor":"#FFA500",// Orange"secondaryBackgroundColor":"#FF4500"// OrangeRed    },    {"serverURL":"http://localhost:1337/parse","appId":"myAppId","masterKey":"myMasterKey","appName":"My Parse Server App [2]","primaryBackgroundColor":"rgb(255, 0, 0)",// Red"secondaryBackgroundColor":"rgb(204, 0, 0)"// DarkRed    }  ]}

You can setappNameForURL in the config file for each app to control the url of your app within the dashboard. This can make it easier to use bookmarks or share links on your dashboard.

To change the app to production, simply setproduction totrue in your config file. The default value is false if not specified.

You can prevent some columns to be sortable by addingpreventSort to columnPreference options in each app configuration

"apps": [  {"appId":"local_app_id","columnPreference": {"_User": [          {"name":"createdAt","visible":true,"preventSort":true          },          {"name":"updatedAt","visible":true,"preventSort":false          },        ]      }    }]

If you have classes with a lot of columns and you filter them often with the same columns you can sort those to the top by extending thecolumnPreference setting with thefilterSortToTop option:

"apps": [  {"columnPreference": {"_User": [          {"name":"objectId","filterSortToTop":true          },          {"name":"email","filterSortToTop":true          }        ]      }    }]

The filters you save in the data browser of Parse Dashboard are only available for the current dashboard user in the current browser session. To make filters permanently available for all dashboard users of an app, you can define filters in theclassPreference setting.

For example:

"apps": [{"classPreference": {"_Role": {"filters": [{"name":"Filter Name","filter": [          {"field":"objectId","constraint":"exists"          }        ]      }]    }  }}]

You can conveniently create a filter definition without having to write it by hand by first saving a filter in the data browser, then exporting the filter definition underApp Settings > Export Class Preferences.

Configure custom keyboard shortcuts for dashboard actions inApp Settings > Keyboard Shortcuts.

Delete a shortcut key to disable the shortcut.

You can specify scripts to execute Cloud Functions with thescripts option:

"apps": [  {"scripts": [      {"title":"Delete Account","classes": ["_User"],"cloudCodeFunction":"deleteAccount","showConfirmationDialog":true,"confirmationDialogStyle":"critical"      }    ]  }]

You can also specify custom fields with thescrips option:

"apps": [  {"scripts": [      {"title":"Delete account","classes": [          {"name":"_User","fields": [              {"name":"createdAt","validator":"value => value > new Date(\"2025\")" }            ]          }        ],"cloudCodeFunction":"deleteAccount"      }    ]  }]

Next, define the Cloud Function in Parse Server that will be called. The object that has been selected in the data browser will be made available as a request parameter:

Parse.Cloud.define('deleteAccount',async(req)=>{req.params.object.set('deleted',true);awaitreq.params.object.save(null,{useMasterKey:true});},{requireMaster:true});

The field which the script was invoked on can be accessed byselectedField:

Parse.Cloud.define('deleteAccount',async(req)=>{if(req.params.selectedField!=='objectId'){thrownewParse.Error(Parse.Error.SCRIPT_FAILED,'Deleting accounts is only available on the objectId field.');}req.params.object.set('deleted',true);awaitreq.params.object.save(null,{useMasterKey:true});},{requireMaster:true});

⚠️ Depending on your Parse Server version you may need to set the Parse Server optionencodeParseObjectInCloudFunction totrue so that the selected object in the data browser is made available in the Cloud Function as an instance ofParse.Object. If the option is not set, is set tofalse, or you are using an older version of Parse Server, the object is made available as a plain JavaScript object and needs to be converted from a JSON object to aParse.Object instance withreq.params.object = Parse.Object.fromJSON(req.params.object);, before you can call anyParse.Object properties and methods on it.

For older versions of Parse Server:

Parse.Cloud.define('deleteAccount',async(req)=>{req.params.object=Parse.Object.fromJSON(req.params.object);req.params.object.set('deleted',true);awaitreq.params.object.save(null,{useMasterKey:true});},{requireMaster:true});

Parse.Cloud.define('deleteAccount',async(req)=>{if(!req.master||!req.params.object){throw'Unauthorized';}req.params.object=Parse.Object.fromJSON(req.params.object);req.params.object.set('deleted',true);awaitreq.params.object.save(null,{useMasterKey:true});});

Parse Dashboard can cache its resources such as bundles in the browser, so that opening the dashboard in another tab does not reload the dashboard resources from the server but from the local browser cache. Caching only starts after login in the dashboard.

Example configuration:

constdashboard=newParseDashboard({enableResourceCache:true,apps:[{serverURL:'http://localhost:1337/parse',appId:'myAppId',masterKey:'myMasterKey',appName:'MyApp'}]});

Instead of starting Parse Dashboard with the CLI, you can also run it as anexpress middleware.

varexpress=require('express');varParseDashboard=require('parse-dashboard');vardashboard=newParseDashboard({"apps":[{"serverURL":"http://localhost:1337/parse","appId":"myAppId","masterKey":"myMasterKey","appName":"MyApp"}]});varapp=express();// make the Parse Dashboard available at /dashboardapp.use('/dashboard',dashboard);varhttpServer=require('http').createServer(app);httpServer.listen(4040);

If you want to run bothParse Server and Parse Dashboard on the same server/port, you can run them both as express middleware:

varexpress=require('express');varParseServer=require('parse-server').ParseServer;varParseDashboard=require('parse-dashboard');varapi=newParseServer({// Parse Server settings});varoptions={allowInsecureHTTP:false};vardashboard=newParseDashboard({// Parse Dashboard settings},options);varapp=express();// make the Parse Server available at /parseapp.use('/parse',api);// make the Parse Dashboard available at /dashboardapp.use('/dashboard',dashboard);varhttpServer=require('http').createServer(app);httpServer.listen(4040);

Make sure the server URLs for your apps can be accessed by your browser. If you are deploying the dashboard, thenlocalhost urls will not work.

In order to securely deploy the dashboard without leaking your apps master key, you will need to use HTTPS and Basic Authentication.

The deployed dashboard detects if you are using a secure connection. If you are deploying the dashboard behind a load balancer or front-facing proxy, then the app won't be able to detect that the connection is secure. In this case, you can start the dashboard with the--trustProxy=1 option (or set the PARSE_DASHBOARD_TRUST_PROXY config var to 1) to rely on the X-Forwarded-* headers for the client's connection security. This is useful for hosting on services like Heroku, where you can trust the provided proxy headers to correctly determine whether you're using HTTP or HTTPS. You can also turn on this setting when using the dashboard asexpress middleware:

vartrustProxy=true;vardashboard=newParseDashboard({"apps":[{"serverURL":"http://localhost:1337/parse","appId":"myAppId","masterKey":"myMasterKey","appName":"MyApp"}],"trustProxy":1});

You can view the security status of your Parse Server by enabling the dashboard optionenableSecurityChecks, and visiting App Settings > Security.

constdashboard=newParseDashboard({"apps":[{"serverURL":"http://localhost:1337/parse","appId":"myAppId","masterKey":"myMasterKey","appName":"MyApp""enableSecurityChecks":true}],});

You can configure your dashboard for Basic Authentication by adding usernames and passwords yourparse-dashboard-config.json configuration file:

{"apps": [{"...":"..."}],"users": [    {"user":"user1","pass":"pass"    },    {"user":"user2","pass":"pass"    }  ],"useEncryptedPasswords":true| false}

You can store the password in eitherplain text orbcrypt formats. To use thebcrypt format, you must set the configuseEncryptedPasswords parameter totrue.You can generate encrypted passwords by usingparse-dashboard --createUser, and pasting the result in your users config.

You can add an additional layer of security for a user account by requiring multi-factor authentication (MFA) for the user to login.

With MFA enabled, a user must provide a one-time password that is typically bound to a physical device, in addition to their login password. This means in addition to knowing the login password, the user needs to have physical access to a device to generate the one-time password. This one-time password is time-based (TOTP) and only valid for a short amount of time, typically 30 seconds, until it expires.

The user requires an authenticator app to generate the one-time password. These apps are provided by many 3rd parties and mostly for free.

If you create a new user by runningparse-dashboard --createUser, you will be asked whether you want to enable MFA for the new user. To enable MFA for an existing user, runparse-dashboard --createMFA to generate amfa secret that you then add to the existing user configuration, for example:

{"apps": [{"...":"..."}],"users": [    {"user":"user1","pass":"pass","mfa":"lmvmOIZGMTQklhOIhveqkumss"    }  ]}

Parse Dashboard follows the industry standard and supports the common OTP algorithmSHA-1 by default, to be compatible with most authenticator apps. If you have specific security requirements regarding TOTP characteristics (algorithm, digit length, time period) you can customize them by using the guided configuration mentioned above.

When deploying Parse Dashboard with multiple replicas behind a load balancer, you need to use a shared session store to ensure that CSRF tokens and user sessions work correctly across all replicas. Without a shared session store, login attempts may fail with "CSRF token validation failed" errors when requests are distributed across different replicas.

Parse Dashboard supports using any session store compatible withexpress-session. ThesessionStore option must be configured programmatically when initializing the dashboard.

Suggested Session Stores:

• connect-redis - Redis session store
• connect-mongo - MongoDB session store
• connect-pg-simple - PostgreSQL session store
• memorystore - Memory session store with TTL support

Example using connect-redis:

constexpress=require('express');constParseDashboard=require('parse-dashboard');const{ createClient}=require('redis');constRedisStore=require('connect-redis').default;// Instantiate Redis clientconstredisClient=createClient({url:'redis://localhost:6379'});redisClient.connect();// Instantiate Redis session storeconstcookieSessionStore=newRedisStore({client:redisClient});// Configure dashboard with session storeconstdashboard=newParseDashboard({apps:[...],users:[...],},{  cookieSessionStore,cookieSessionSecret:'your-secret-key',});**ImportantNotes:**-The`cookieSessionSecret`optionmustbesettothesamevalueacrossallreplicastoensuresessioncookiesworkcorrectly.-If`cookieSessionStore`isnotprovided,ParseDashboardwillusethedefaultin-memorysessionstore,whichonlyworksforsingle-instancedeployments.-Forproductiondeploymentswithmultiplereplicas,alwaysconfigureasharedsessionstore.####Alternative:UsingStickySessionsIfyoucannotuseasharedsessionstore,youcanconfigureyourloadbalancertousestickysessions(sessionaffinity),whichensuresthatrequestsfromthesameuserarealwaysroutedtothesamereplica.However,usingasharedsessionstoreistherecommendedapproachasitprovidesbetterreliabilityandscalability.###SeparatingAppAccessBasedonUserIdentityIfyouhaveconfiguredyourdashboardtomanagemultipleapplications,youcanrestrictthemanagementofappsbasedonuseridentity.Todoso,updateyour`parse-dashboard-config.json`configurationfiletomatchthefollowingformat:```json{"apps":[{"...":"..."}],"users":[{"user":"user1","pass":"pass1","apps":[{"appId":"myAppId1"},{"appId":"myAppId2"}]},{"user":"user2","pass":"pass2","apps":[{"appId":"myAppId1"}]}]}

The effect of such a configuration is as follows:

Whenuser1 logs in, he/she will be able to managemyAppId1 andmyAppId2 from the dashboard.

Whenuser2 logs in, he/she will only be able to managemyAppId1 from the dashboard.

Starting parse-server 2.6.5, it is possible to provide areadOnlyMasterKey to parse-server to prevent mutations on objects from a client.If you want to protect your dashboard with this feature, just use thereadOnlyMasterKey instead of themasterKey. All write calls will fail.

Start yourparse-server with

{"masterKey":"YOUR_MASTER_KEY_HERE","readOnlyMasterKey":"YOUR_READ_ONLY_MASTER_KEY",}

Then in your dashboard configuration:

vartrustProxy=true;vardashboard=newParseDashboard({"apps":[{"serverURL":"http://localhost:1337/parse","appId":"myAppId","masterKey":"YOUR_READ_ONLY_MASTER_KEY","appName":"MyApp"}],"trustProxy":1});

Make sure you specify thereadOnlyMasterKey for the apps that you want to use read-only feature in "apps" configuration.You can mark a user as a read-only user:

{"apps": [    {"appId":"myAppId1","masterKey":"myMasterKey1","readOnlyMasterKey":"myReadOnlyMasterKey1","serverURL":"myURL1","port":4040,"production":true    },    {"appId":"myAppId2","masterKey":"myMasterKey2","readOnlyMasterKey":"myReadOnlyMasterKey2","serverURL":"myURL2","port":4041,"production":true    }  ],"users": [    {"user":"user1","pass":"pass1","readOnly":true,"apps": [{"appId":"myAppId1"}, {"appId":"myAppId2"}]    },    {"user":"user2","pass":"pass2","apps": [{"appId":"myAppId1"}]    }  ]}

This wayuser1 will have a readOnly access tomyAppId1 andmyAppId2

Make sure you specify thereadOnlyMasterKey for the apps that you want to use read-only feature in "apps" configuration.You can give read only access to a user on a per-app basis:

{"apps": [    {"appId":"myAppId1","masterKey":"myMasterKey1","readOnlyMasterKey":"myReadOnlyMasterKey1","serverURL":"myURL","port":4040,"production":true    },    {"...":"..."}  ],"users": [    {"user":"user","pass":"pass","apps": [{"appId":"myAppId","readOnly":true}, {"appId":"myAppId2"}]    }  ]}

With this configuration, user1 will have read only access tomyAppId1 and read/write access tomyAppId2.

With the latest version of thedashboard, it is possible to send localized messages for push notifications.You can provide a list of locales or languages you want to support for your dashboard users.

{"apps": [    {"serverURL":"http://localhost:1337/parse","appId":"myAppId","masterKey":"myMasterKey","appName":"My Parse Server App","iconName":"MyAppIcon.png","supportedPushLocales": ["en","ru","fr"]    }  ],"iconsFolder":"icons"}

The official docker image is published ondocker hub

Run the image with yourconfig.json mounted as a volume

docker run -d -p 8080:4040 -v host/path/to/config.json:/src/Parse-Dashboard/parse-dashboard-config.json parseplatform/parse-dashboard --dev

You can also pass the appId, masterKey and serverURL as arguments:

docker run -d -p 4040:4040 parseplatform/parse-dashboard --dev --appId $APP_ID --masterKey $MASTER_KEY --serverURL $SERVER_URL

By default, the container will start the app at port 4040 inside the container. However, you can run custom command as well (seeDeploying in production for custom setup).

In this example, we want to run the application in production mode at port 80 of the host machine.

docker run -d -p 80:8080 -v host/path/to/config.json:/src/Parse-Dashboard/parse-dashboard-config.json parse-dashboard --port 8080 --dev

If you are not familiar with Docker,--port 8080 will be passed in as argument to the entrypoint to form the full commandnpm start -- --port 8080. The application will start at port 8080 inside the container and port8080 will be mounted to port80 on your host machine.

(The following is not a complete list of features but a work in progress to build a comprehensive feature list.)

▶️Core > Browser > Filter

The filter dialog allows to add relational filter conditions based on other classes that have a pointer to the current class.

For example, users in the_User class may have:

• purchases in aPurchase class with a_User pointer field
• transactions in aPayment class with a_User pointer field

A relational filter allows you filter all users who:

• purchased a specific item (inPurchase class)
• payed with a specific payment method (inPayment class)

To apply such a filter, simply go to the_User class and add the two required filter conditions with thePurchase andPayment classes.

▶️Core > Browser > Show Panel / Hide Panel

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 buttonShow Panel in the top right corner when browsing a class for which the info panel is configured in the dashboard options.

The following example dashboard configuration shows an info panel for the_User class with the titleUser Details, by calling the Cloud Code FunctiongetUserDetails and displaying the returned response.

"apps": [  {"infoPanel": [      {"title":"User Details","classes": ["_User"],"cloudCodeFunction":"getUserDetails","prefetchObjects":2,"prefetchStale":10,"prefetchImage":true,"prefetchVideo":true,"prefetchAudio":true      }    ]  }]

The Cloud Code Function receives the selected object in the payload and returns a response that can include various items.

The info panel can contain multiple segments to display different groups of information.

Example:

{"panel": {"segments": [      {"title":"Purchases","style": {"backgroundColor":"lightgray","font-size":"10px" },"titleStyle": {"backgroundColor":"orange","color":"white" },"items": [          {"type":"text","text":"This user has a high churn risk!"          }        ]      }    ]  }}

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.

A simple text field.

Example:

{"type":"text","text":"This user has a high churn risk!","style": {"backgroundColor":"red" },}

A text item that consists of a key and a value. The value can optionally be linked to a URL.

Examples:

{"type":"keyValue","key":"Lifetime purchase value","value":"$10k","style": {"backgroundColor":"green" },}

{"type":"keyValue","key":"Last purchase ID","value":"123","url":"https://example.com/purchaseDetails?purchaseId=123"}

{"type":"keyValue","key":"Purchase","value":"123","url":"browser/Purchase","isRelativeUrl":true}

{"type":"keyValue","key":"Purchase Value","value":"123","url":"browser/Purchase","isRelativeUrl":true,"values": [{"value":"456" }]}

To navigate to a specific object using a relative URL, the query parameters must be URL encoded:

constobjectId='abc123';constclassName='Purchase';constquery=[{field:'objectId',constraint:'eq',compareTo:objectId}];consturl=`browser/Purchase?filters=${JSON.stringify(query)}`;constitem={type:'keyValue',key:'Purchase',value:objectId,  url,isRelativeUrl:true}

A table with columns and rows to display data in a structured format.

Example:

{"type":"table","columns": [    {"name":"Name","type":"string"    },    {"name":"Age","type":"number"    }  ],"rows": [    {"Name":"Alice","Age":30    },    {"Name":"Bob","Age":40    }  ],"style": {"backgroundColor":"lightGray" }}

An image to be displayed in the panel.

Example:

{"type":"image","url":"https://example.com/images?purchaseId=012345","style": {"backgroundColor":"white" }}

A video to be displayed in the panel.

Example:

{"type":"video","url":"https://example.com/video.mp4","style": {"backgroundColor":"white" }}

An audio file to be played in the panel.

Example:

{"type":"audio","url":"https://example.com/audio.mp3","style": {"backgroundColor":"white" }}

A button that triggers an action when clicked.

Example:

{"type":"button","text":"Click me!","action": {"url":"https://api.example.com/click","method":"POST","headers": {"Content-Type":"application/json"    },"body": {"key":"value"    }  },"style": {"backgroundColor":"pink","color":"white" }}

A sub-panel whose data is loaded on-demand by expanding the item.

Example:

{"type":"panel","title":"Purchase History","cloudCodeFunction":"getUserPurchaseHistory","style": {"backgroundColor":"lightGray" },}

To reduce the time for info panel data to appear, data can be prefetched.

Prefetching is particularly useful when navigating through lists of objects. To optimize performance and avoid unnecessary data loading, prefetching is triggered only after the user has moved through 3 consecutive rows using the keyboard down-arrow key or by mouse click.

WhenprefetchObjects is enabled, media content (images, videos, and audio) in the info panel can also be prefetched to improve loading performance. By default, all media types are prefetched, but you can selectively disable prefetching for specific media types using theprefetchImage,prefetchVideo, andprefetchAudio options.

▶️Core > Browser > Freeze column

Right-click on a table column header to freeze columns from the left up to the clicked column in the data browser. When scrolling horizontally, the frozen columns remain visible while the other columns scroll underneath.

▶️Core > Browser > Browse

This feature allows you to use the data browser as another user, respecting that user's data permissions. For example, you will only see records and fields the user has permission to see.

⚠️ Logging in as another user will trigger the same Cloud Triggers as if the user logged in themselves using any other login method. Logging in as another user requires to enter that user's password.

▶️Core > Browser > Edit > Change pointer key

This feature allows you to change how a pointer is represented in the browser. By default, a pointer is represented by theobjectId of the linked object. You can change this to any other column of the object class. For example, if classInstallation has a field that contains a pointer to classUser, the pointer will show theobjectId of the user by default. You can change this to display the fieldemail of the user, so that a pointer displays the user's email address instead.

• This does not work for an array of pointers; the pointer will always display theobjectId.
• System columns likecreatedAt,updatedAt,ACL cannot be set as pointer key.
• This feature uses browser storage; switching to a different browser resets the pointer key toobjectId.

⚠️ For each custom pointer key in each row, a server request is triggered to resolve the custom pointer key. For example, if the browser shows a class with 50 rows and each row contains 3 custom pointer keys, a total of 150 separate server requests are triggered.

▶️Core > Browser > Export

This feature will take either selected rows or all rows of an individual class and saves them to a CSV file, which is then downloaded. CSV headers are added to the top of the file matching the column names.

⚠️ There is currently a 10,000 row limit when exporting all data. If more than 10,000 rows are present in the class, the CSV file will only contain 10,000 rows.

The Parse Dashboard includes an AI agent that can help manage your Parse Server data through natural language commands. The agent can perform operations like creating classes, adding data, querying records, and more.

To configure the AI agent for your dashboard, you need to add theagent configuration to your Parse Dashboard config:

{"apps": [// ...  ],"agent": {"models": [      {"name":"ChatGPT 4.1","provider":"openai","model":"gpt-4.1","apiKey":"YOUR_OPENAI_API_KEY"      },    ]  }}

The agent will use the configured models to process natural language commands and perform database operations using the master key from your app configuration.

To get an OpenAI API key for use with the AI agent:

1. Create an OpenAI account: Visitplatform.openai.com and sign up for an account if you don't already have one.

2. Access the API section: Once logged in, navigate to the API section of your OpenAI dashboard.

3. Create a new project:

   • Go to the "Projects" section
   • Click "Create project"
   • Name your project "Parse-Dashboard" (or any descriptive name)
   • Complete the project setup

4. Configure model access:

   • In your project, navigate to "Limits > Model Usage"
   • Select the AI models you want to use (e.g.,gpt-4,gpt-3.5-turbo)
   • These model names will be used as theagent.models[*].model parameter in your dashboard configuration

5. Generate an API key:

   • Go to the "API Keys" page in your project settings
   • Click "Create new secret key"
   • Give your key a descriptive name (e.g., "Parse Dashboard Agent")
   • Copy the generated API key immediately (you won't be able to see it again)

6. Set up billing: Make sure you have a valid payment method added to your OpenAI account, as API usage incurs charges.

7. Configure the dashboard: Add the API key to your Parse Dashboard configuration as shown in the example above.

▶️Core > Views

Views are saved queries that display data in a table format. Saved views appear in the sidebar, where you can select, edit, or delete them. Optionally you can enable the object counter to show in the sidebar how many items match the view.

Views can pull their data from the following data sources.

Display aggregated data from your classes using a MongoDB aggregation pipeline. Create a view by selecting a class and defining an aggregation pipeline.

Display data returned by a Parse Cloud Function. Create a view specifying a Cloud Function that returns an array of objects. Cloud Functions enable custom business logic, computed fields, and complex data transformations.

Cloud Function views can prompt users for text input and/or file upload when opened. Enable "Require text input" or "Require file upload" checkboxes when creating the view. The user provided data will then be available in the Cloud Function as parameters.

Cloud Function example:

Parse.Cloud.define("myViewFunction",request=>{consttext=request.params.text;constfileData=request.params.fileData;returnprocessDataWithTextAndFile(text,fileData);});

When designing the aggregation pipeline, consider that some values are rendered specially in the output table.

Parse Object pointers are automatically displayed as links to the target object.

Example:

{"__type":"Pointer","className":"_User","objectId":"xWMyZ4YEGZ" }

Links are rendered as hyperlinks that open in a new browser tab.

Example:

{"__type":"Link","url":"https://example.com","text":"Link"}

SetisRelativeUrl: true when linking to another dashboard page, in which case the base URL for the relative URL will be<PROTOCOL>://<HOST>/<MOUNT_PATH>/apps/<APP_NAME>/. The keyisRelativeUrl is optional andfalse by default.

Example:

{"__type":"Link","url":"browser/_Installation","isRelativeUrl":true,"text":"Link"}

A query part of the URL can be easily added using theurlQuery key which will automatically escape the query string.

Example:

{"__type":"Link","url":"browser/_Installation","urlQuery":"filters=[{\"field\":\"objectId\",\"constraint\":\"eq\",\"compareTo\":\"xWMyZ4YEGZ\",\"class\":\"_Installation\"}]","isRelativeUrl":true,"text":"Link"}

In the example above, the query string will be escaped and added to the url, resulting in the complete URL:

"browser/_Installation?filters=%5B%7B%22field%22%3A%22objectId%22%2C%22constraint%22%3A%22eq%22%2C%22compareTo%22%3A%22xWMyZ4YEGZ%22%2C%22class%22%3A%22_Installation%22%7D%5D"

Images are rendered directly in the output table with an<img> tag. The content mode is always "scale to fit", meaning that if the image file is 100x50px and the specified dimensions are 50x50px, it would display as 50x25px, since it's scaled maintaining aspect ratio.

Example:

{"__type":"Image","url":"https://example.com/image.png","width":"50","height":"50","alt":"Image"}

Videos are rendered directly in the output table with a<video> tag that includes playback controls. The content mode is always "scale to fit", meaning that the video maintains its aspect ratio within the specified dimensions.

Example:

{"__type":"Video","url":"https://example.com/video.mp4","width":"320","height":"240"}

We really want Parse to be yours, to see it grow and thrive in the open source community. Please see theContributing to Parse Dashboard guide.

As of April 5, 2017, Parse, LLC has transferred this code to the parse-community organization, and will no longer be contributing to or distributing this code.