This repository contains comprehensive examples demonstrating how to implement Reveal SDK with MongoDB as your data source. You'll find both server-side implementations (Node.js with JavaScript and TypeScript) and client-side examples to help you quickly build powerful analytics applications.
This repository provides everything you need to learn and implement a Reveal SDK application with MongoDB, including working code samples, configuration examples, and best practices.
-
Read [Setting up a Reveal Server](https://help.revealbi.io/web/
-
Node.js (JavaScript) - Located in
server/node-js/- Implementation using JavaScript with MongoDB integration
- Includes examples for custom queries, aggregation pipelines, and user-based filtering
- Features authentication, data source providers, and row-level security
-
Node.js (TypeScript) - Located in
server/node-ts/- Type-safe implementation using TypeScript
- Comprehensive examples with MongoDB aggregation pipelines
- Includes dashboard management and user context handling
-
HTML with Dashboard Selector -
client/index-ds.html- Add new dashboards with a MongoDb datasource
-
HTML with Dashboard Selector -
client/index-dsi.html- Add new dashboards with a MongoDb datasource + datasource item with UserContext
-
HTML with Direct Dashboard Loading -
client/load-dashboard.html- Loading dashboards
The essential dependencies for a Node.js application using Reveal with MongoDB are:
- Reveal SDK Node.js package (
reveal-sdk-node) - MongoDB Node.js Driver (included with Reveal SDK)
- Express.js for server implementation
- dotenv for environment configuration
Reveal is integrated into a Node.js application via the NPM package. The configuration is set up in your main server file (main.js or main.ts):
const revealOptions = {
userContextProvider: userContextProvider,
authenticationProvider: authenticationProvider,
dataSourceProvider: dataSourceProvider,
dataSourceItemProvider: dataSourceItemProvider,
dataSourceItemFilter: dataSourceItemFilter,
dashboardProvider: dashboardProvider,
dashboardStorageProvider: dashboardStorageProvider
}
app.use('/', reveal(revealOptions));In this setup:
- User Context Provider: Manages user authentication and role-based access
- Authentication Provider: Handles MongoDB credentials securely
- Data Source Provider: Configures MongoDB connection strings and database names
- Data Source Item Provider: Defines custom queries, aggregation pipelines, and data filtering
- Data Source Item Filter: Controls which collections users can access based on roles
- Dashboard Provider/Storage: Manages dashboard loading and saving
Authentication is handled by implementing the authentication provider for MongoDB. Username and password credentials are securely managed using environment variables:
const authenticationProvider = async (userContext, dataSource) => {
if (dataSource instanceof reveal.RVMongoDBDataSource) {
const username = process.env.MONGO_USERNAME;
const password = process.env.MONGO_PASSWORD;
return new reveal.RVUsernamePasswordDataSourceCredential(username, password);
}
};Resources:
The Data Source Provider specifies MongoDB connection details including connection string and database name:
const dataSourceProvider = async (userContext, dataSource) => {
if (dataSource instanceof reveal.RVMongoDBDataSource) {
dataSource.connectionString = process.env.CONNECTION_STRING;
dataSource.database = process.env.DATABASE_NAME;
}
return dataSource;
};Resources:
MongoDB's powerful aggregation framework can be leveraged through custom queries. This example shows how to create dynamic queries based on user context:
const dataSourceItemProvider = async (userContext, dataSourceItem) => {
if (dataSourceItem instanceof reveal.RVMongoDBDataSourceItem) {
await dataSourceProvider(userContext, dataSourceItem.dataSource);
if (dataSourceItem.id === "Custom_Query_Filtered") {
const username = userContext.userId;
dataSourceItem.collection = "customers";
dataSourceItem.customQuery = JSON.stringify([
{
$lookup: {
from: "accounts",
localField: "accounts",
foreignField: "account_id",
as: "accounts"
}
},
{
$match: {
username: username
}
},
{
$project: {
username: "$username",
accounts: "$accounts"
}
}
]);
}
}
return dataSourceItem;
};Resources:
The User Context Provider manages user information and roles, enabling row-level security:
const userContextProvider = (request) => {
const userId = request.headers["x-header-one"];
const props = new Map();
props.set("userId", userId);
// Set Role based on userId
const role = userId === "glopez" ? "Admin" : "User";
props.set("Role", role);
return new reveal.RVUserContext(userId, props);
};Resources:
The Data Source Item Filter controls which MongoDB collections users can access based on their roles:
const dataSourceItemFilter = async (userContext, dataSourceItem) => {
if (dataSourceItem instanceof reveal.RVMongoDBDataSourceItem) {
const includedList = ["customers", "accounts"];
const role = userContext?.properties.get("Role") || "User";
if (role === "User") {
// Allow only items in the included list for "User" role
if (dataSourceItem.collection && includedList.includes(dataSourceItem.collection)) {
return true;
}
} else {
// Allow everything for non-"User" roles
return true;
}
}
return false;
};Resources:
The Dashboard Provider and Storage Provider manage dashboard loading and saving:
const dashboardProvider = async (userContext, dashboardId) => {
const filePath = path.join(dashboardDefaultDirectory, `${dashboardId}.rdash`);
if (fs.existsSync(filePath)) {
return fs.createReadStream(filePath);
} else {
throw new Error(`Dashboard file not found: ${filePath}`);
}
};The HTML client requires three dependencies:
- jQuery
- Day.js (for date handling)
- Reveal JavaScript library
These can be accessed locally or through a CDN:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dayjs.min.js"></script>
<script src="https://dl.revealbi.io/reveal/libs/[version]/infragistics.reveal.js"></script>Dashboards are loaded using the RevealView component:
$.ig.RevealSdkSettings.setBaseUrl("http://localhost:5111/");
var revealView = new $.ig.RevealView("#revealView");
revealView.dashboardId = "Sales";Pass custom headers (like userId) to the server for authentication and filtering:
$.ig.RevealSdkSettings.setAdditionalHeadersProvider(function (url) {
var headers = {};
headers["x-header-one"] = "glopez"; // or dynamically get from user session
return headers;
});Resources:
Create a .env file in your server directory with the following variables:
# MongoDB Configuration
CONNECTION_STRING=mongodb+srv://your-connection-string
DATABASE_NAME=your_database_name
MONGO_USERNAME=your_username
MONGO_PASSWORD=your_password
# Server Configuration
PORT=5111git clone https://github.com/RevealBi/sdk-samples-mongodb.git
cd sdk-samples-mongodbcd server/node-js
npm install
# Create and configure your .env file
npm startcd server/node-ts
npm install
# Create and configure your .env file
npm startOpen any of the HTML files in the client/ directory in your web browser, or serve them using a local web server.
Explore these video resources to help you set up and configure Reveal BI:
For a comprehensive learning path, check out the Reveal SDK Videos:
Reveal SDK Videos
Reveal SDK fully supports MongoDB's aggregation pipeline, allowing you to:
- Perform complex data transformations
- Join collections using
$lookup - Filter data with
$match - Project specific fields with
$project - Unwind arrays with
$unwind
This repository includes examples based on a sample financial database with:
- customers collection: User account information
- accounts collection: Financial account details
The examples demonstrate joining these collections and filtering based on user context.
A trial license key is valid for 30 days and can be extended upon request. When a license is purchased, the key is valid for the duration of the contract. It's important to keep track of the license expiry date to avoid disruptions. The license key can be set in code, configuration files, or the home directory.
The following resources are available to help with your implementation:
- Documentation: Comprehensive documentation covering installation, licensing, and features
- MongoDB Data Source Guide: Specific guidance for MongoDB integration
- GitHub - SDK Samples: Additional SDK samples and examples
- GitHub - Issues & Features: Bug reports and feature requests
- Support via Discord: Direct interaction with the product team
- Support via GitHub Discussions: Community support and discussions
- YouTube Channel: Webinars and tutorial videos
- JavaScript API Reference: Complete API documentation
- Developer Playground: Interactive feature experimentation
If you encounter any issues or have questions:
- Check the documentation
- Review existing GitHub issues
- Join our Discord community
- Post in GitHub Discussions
We welcome contributions! Please feel free to submit issues, feature requests, or pull requests.
This project is licensed under the MIT License - see the LICENSE file for details.
Ready to get started? Choose your preferred server implementation (JavaScript or TypeScript), configure your MongoDB connection, and start building powerful analytics dashboards!