Sample project with the MongoDB Connector

We have prepared a ready-to-use sample project with a server that retrieves data from MongoDB using Flexmonster MongoDB Connector. Then, the server passes the data to Flexmonster Pivot.

In our sample project, we connect to Flexmonster’s sample database. You can also connect to your MongoDB database.

Prerequisites

• Node.js

Run a sample GitHub project

Step 1. To get our sample project, download it as ZIP or clone it with the following command:

git clone https://github.com/flexmonster/pivot-mongo && cd pivot-mongo

Step 2. Install the npm dependencies described in package.json:

npm install

Step 3. Run the server with the following commands:

npm run build
npm run start

Open the client/index.html file in the browser to see the result.

In the project, Flexmonster Pivot shows the data from Flexmonster’s sample database. To connect to your own database, see the Connect to your MongoDB database section.

To learn more about how the sample project works, check out the following files:

• src/controller/mongo.ts — shows how to use the Connector.
• client/index.html — shows how to configure Flexmonster Pivot.

Connect to your MongoDB database

To connect to your MongoDB database, make the following changes in the sample project:

Step 1. Open src/controller/mongo.ts and replace the existing connection string with yours:

MongoClient.connect("<your_connection_string>", (err, db) => {
    // ...
});

Step 2. Replace the database name with yours:

dbo = db.db("<your_database_name>");

Step 3. optional Configure caching and logging for the MongoDB Connector. Learn more about the Connector’s configurations.

Step 4. In client/index.html, replace the index value with your collection’s name:

report: {
  dataSource: {
    type: "api",
    url: "http://localhost:9204/mongo",
    index: "<your-collection-name>"
  }
}

Step 5. Run the server with the following commands:

npm run build
npm run start

To see Flexmonster with the data from your MongoDB database, open the client/index.html file in the browser.

Now you can improve and expand our sample project or embed the Connector into your server using the Embedding the Connector into a server tutorial.

Display non-Latin characters correctly

If your data contains non-Latin characters, ensure you have set UTF-8 encoding for your data and page so the data is displayed correctly in the component.

See also

• Configure the MongoDB Connector
• Configure which data subset is shown
• Specify functionality available to users
• Define number formatting
• Define a format for date and time