parse-community
Add data aggregation panel
New Feature / Enhancement Checklist
- [x] I am not disclosing a vulnerability.
- [x] I am not just asking a question.
- [x] I have searched through existing issues.
Current Limitation
An object may have related information stored in other classes, for example a user and its related purchase history and its related payment transactions. This related information needs to be researched manually by going into the respective classes. With each navigation, only the information in the current class is visible, there is no aggregated view of all information at once, e.g. purchase history and payment transactions.
Feature / Enhancement Description
Add a slide-in panel that displays aggregated information related to the selected object in the data browser table.
The process should be:
- User opens the side-panel
- User selects a row in the data browser table by clicking any field
- The selected object is sent incl. all its fields to a Parse Server Cloud Function
- The response is displayed in the info panel
Example Use Case
Dashboard options could look like this:
"apps": [
{
"infoPanel": [
{
"title": "User Details",
"classes": ["_User"],
"cloudCodeFunction": "getUserDetails",
}
]
}
]
The response of the Cloud Function could be:
{
// Nest response in `segments` property to be able to extend the response object
// in the future if needed; the `segments` property is an ordered array so that
// it can display segments in a given order
"segments": [
{
// The segment title
"title": "Purchases",
// The items within the segment; as ordered array to display items in a given
// order; items here are only
"items": [
{
// A plain text field
"type": "text",
"value": "This user has a high churn risk!"
},
{
// A key-value style
"type": "keyValue",
"key": "Lifetime purchase value",
"value": "$10k"
},
{
// A key-value style with a linked URL
"type": "keyValue",
"key": "Last purchase ID",
"value": "012345",
"url": "https://example.com/purchaseDetails?purchaseId=012345"
},
{
// An image
"type": "image",
"url": "https://example.com/images?purchaseId=012345"
}
]
}
]
}
The panel could look like this:
- The panel size should be resizable by the dashboard user do adapt it depending on available screen space and displayed info; some form of control like a drag handle would be needed for that, not visible in the screenshot.
- When being resized, text should wrap and images should resize.
- Sliding the panel in completely, so that it doesn't appear should disable loading the info unnecessarily.
- The panel should not cover any space other than the data browser itself.
Alternatives / Workarounds
- Research manually by navigating to each class
- User Dashboard Script to display information in a pop-up message
Future extensions
- Add buttons to execute scripts on the user, like the existing scripts feature in the context menu.
Thanks for opening this issue!
- 🎉 We are excited about your ideas for improvement!
![parse-github-assistant[bot] avatar](https://avatars.githubusercontent.com/in/136195?v=4 "Published by a pub.dev verified publisher"){kind=small}
@mtrezza From my understanding, the process involves:
- The dashboard reads the configuration to know which Cloud Function to call based on the selected class.
- The side panel makes an API call to the Cloud Function specified in the config.
- The response from the Cloud Function is displayed in the side panel.
can you define how the response from the Cloud Function should look? This will ensure consistency and make it easier to render the information in the panel.
Thank you!
I have updated the JSON response structure in the description above. The panel would structurally look like this (albeit in the style of the screenshot above, so it fits the dashboard style), where each element is a row:
For reference the HTML code of the render above as an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Panel Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
.panel {
width: 300px;
border: 1px solid #ccc;
padding: 15px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin: 0 auto;
}
.panel h2 {
font-size: 18px;
margin-bottom: 15px;
}
.panel table {
width: 100%;
border-collapse: collapse;
margin-bottom: 15px;
}
.panel table, .panel th, .panel td {
border: 1px solid #ddd;
}
.panel th, .panel td {
padding: 8px;
text-align: left;
}
.panel button {
display: block;
width: 100%;
padding: 10px;
background-color: #007BFF;
color: #fff;
border: none;
cursor: pointer;
margin-bottom: 15px;
}
.panel button:hover {
background-color: #0056b3;
}
.panel img, .panel video, .panel audio {
width: 100%;
margin-bottom: 15px;
}
.key-value {
margin-bottom: 15px;
}
.key-value a {
color: #007BFF;
text-decoration: none;
}
</style>
</head>
<body>
<div class="panel">
<h2>Purchases</h2>
<!-- Text Element -->
<div class="text-element">
<p>This user has a high churn risk!</p>
</div>
<!-- Key-Value Element -->
<div class="key-value">
<strong>Lifetime purchase value:</strong> $10k
</div>
<!-- Key-Value with Link Element -->
<div class="key-value">
<strong>Last purchase ID:</strong>
<a href="https://example.com/purchaseDetails?purchaseId=012345">012345</a>
</div>
<!-- Table Element -->
<div class="table-element">
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>30</td>
</tr>
<tr>
<td>Bob</td>
<td>40</td>
</tr>
</tbody>
</table>
</div>
<!-- Image Element -->
<div class="image-element">
<img src="https://example.com/images?purchaseId=012345" alt="Image">
</div>
<!-- Video Element -->
<div class="video-element">
<video controls>
<source src="https://example.com/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Audio Element -->
<div class="audio-element">
<audio controls>
<source src="https://example.com/audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<!-- Button Element -->
<div class="button-element">
<button onclick="handleButtonClick()">Click me!</button>
</div>
</div>
<script>
function handleButtonClick() {
fetch('https://api.example.com/click', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
// Instead of console logging, the response would need to displayed like other messages, there's a pop-up method for this, see for example the "script" feature of dashboard
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
}
</script>
</body>
</html>
Bounty increased due to scope increase of the feature and its high value for the usability of the dashboard.
I have updated the JSON response structure in the description above. The panel would structurally look like this (albeit in the style of the screenshot above, so it fits the dashboard style), where each element is a row:
I have checked the JSON response , I will get started with this feature asap