Introduction

The MongoDB Binders plugin facilitates the seamless integration of MongoDB and Joget. This integration currently utilises few plugin types:

• Data List Filter - To filter the dataset to refine the result. Includes types for: Date, Date Range, Number, Options, Text Field.
• Datalist Binder - To populate datalist with data retrieve from MongoDB database.
• Form Load Binder - To retrieve form data from MongoDB database.
• Form Store Binder - To store form data to MongoDB database.
• Form Options Binder - To populate options field with data retrieve from MongoDB database.

Plugin Info

Plugins Available in the Bundle:

1. MongoDB Data List Filter

2. MongoDB Datalist Binder
3. MongoDB Form Load Binder
4. MongoDB Form Store Binder
5. MongoDB Form Options Binder

This plugin bundle is compatible with Joget DX 8.

Expected Outcome

Upon successful integration, Joget will be able to connect to MongoDB to store and retrieve data.

Figure 1: Example of successful integration with MongoDB

Getting Started

Setting up MongoDB

1. Install MongoDB Community Edition

Install MongoDB Community Edition on Linux/MacOS/Windows or with docker.

(Source: Install MongoDB Community Edition - MongoDB Manual v7.0.

2. Start MongoDB Community Edition

Start and access MongoDB from your shell

mongosh

(Source: Welcome to MongoDB Shell (mongosh) - MongoDB Shell)

3. Create MongoDB Database

After connecting to the shell, create a new database.

use jwdbtest

(Source: MongoDB mongosh Create Database (w3schools.com))

4. Create MongoDB Collection

Create a new collection under the database.

db.createCollection("posts")

(Source: MongoDB mongosh Create Collection (w3schools.com))

5. Use Database Management Tool (optional)

Now we can use any database management tool (Eg: tableplus, dbeaver...) and check if the database and collection is created.

Figure 2: TablePlus Database Management Tool

Steps

Import MongoDB Binders plugin into Joget App

1. You can obtain the jar file by the latest release at https://github.com/jogetoss/mongodb-binder/releases.

2. Upload the plugin jar file in Joget by going to Settings → Manage Plugins.

Create new Joget App

1. Create a new form and add some fields into the form.

Figure 3: Create new form

2. On the Settings tab, select MongoDB Form Load Binder for Form Load and MongoDB Form Store Binder for Form Store.

Figure 4: Setup Load and Store Form Binder

3. Click next, fill in the database name created in 3. Create MongoDB Database and collection name created in 4. Create MongoDB Collection, for more plugin configurations please refer to Configure MongoDB Form Load Binder and Configure MongoDB Form Store Binder.

Figure 5: MongoDB Form Store Binder config

4. Save the form. Now drag a select box into the form. We can load data from MongoDB Form Option Binder. Plugin configurations please refer to Configure MongoDB Options Binder.

Figure 6: MongoDB Form Option Binder config

5. Save the form again. On the upper right corner, click on Generate App > Generate CRUD.

Figure 7: Generate CRUD for form

5. Go to the list generated, change the Select Source of Data to MongoDB Datalist Binder. Plugin configurations please refer to Configure MongoDB Datalist Binder.

Figure 8: MongoDB Datalist Binder config

6. Go to the Design tab, drag some fields into the filter area, under Type you can see the MongoDB Data List Filters by different types. Plugin configurations please refer to Configure MongoDB Datalist Filter.

Figure 9: MongoDB Data List Filter config

7. Now run the UI. Add a new record and fill in the values. Click save.

Figure 10: Fill in new record

8. You can now see the value in the MongoDB database. You can also see the value in datalist where we configured the datalist binder.

Figure 11: Value saved into database and shown in datalist

9. Click on edit record. We can now see the record under the select box where we configured the form options binder.

Figure 12: Select Box showing value of record

MongoDB Binders Properties

Configure MongoDB Datalist Filter

Configure MongoDB Datalist Binder

Figure 13: MongoDB Datalist Binder Plugin Configurations

Configure MongoDB Form Load Binder

Figure 14: MongoDB Form Load Binder Plugin Configurations

Name	Description
Host	Target host to connect to a MongoDB  instance. Choices:- Local MongoDB Instance Leave the Host field blank (Link to default localhost) MongoDB Instance on a Remote Host Sample: "mongodb0.example.com:28015"
Port	Connect to a MongoDB instance running on your localhost or remote host with Choices:- Default Port Leave the Port field blank (Link to default port: 27017) Non default port To connect to a MongoDB instance running on localhost with a non-default port. Fill 28015(non-default port) in the port field.
Username	Fill in the Username field, if authentication is needed else leave it blank.
Password	Fill in the Password field, if authentication is needed else leave it blank.
Database Name*	In MongoDB, databases hold collections of documents Please fill in the Database Name in order to let the plugin to access to the database and load data. This is a mandatory field. Test the connection parameters Click on the "Test Connection" button at the bottom of the page to quickly test out your configurations.
Collection Name*	Please fill in the target Collection Name in order to load data from the collection. This is a mandatory field.
Primary Key Field	Primary Key for row of data, the plugin will load data based of Primary Key value.
Used for Grid?	When checked, this mean the binder is used for Grid . Important Do not forget to configure the Foreign Key Field in the Used for Grid tab, so that the data will load into grid based on the foreign key. This is a mandatory field. Important When Used for Grid is checked a filter can be use to filter the grid data.

Configure MongoDB Form Store Binder

Figure 15: MongoDB Form Store Binder Plugin Configurations

Name	Description
Host	Target host to connect to a MongoDB  instance. Choices:- Local MongoDB Instance Leave the Host field blank (Link to default localhost) MongoDB Instance on a Remote Host Sample: "mongodb0.example.com:28015"
Port	Connect to a MongoDB instance running on your localhost or remote host with Choices:- Default Port Leave the Port field blank (Link to default port: 27017) Non default port To connect to a MongoDB instance running on localhost with a non-default port. Fill 28015(non-default port) in the port field.
Username	Fill in the Username field, if authentication is needed else leave it blank.
Password	Fill in the Password field, if authentication is needed else leave it blank.
Database Name*	In MongoDB, databases hold collections of documents Please fill in the Database Name in order to let the plugin to access to the database and store data. This is a mandatory field. Test the connection parameters Click on the "Test Connection" button at the bottom of the page to quickly test out your configurations.
Collection Name*	Please fill in the target Collection Name in order to store data in the collection. This is a mandatory field.
Used for Grid?	When checked, this mean the binder is used for Grid . Important Do not forget to configure the Foreign Key Field in the Used for Grid tab, so that the data will store grid data based on the foreign key. This is a mandatory field.

Configure MongoDB Options Binder

Figure 16: MongoDB Options Binder Plugin Configurations

Name	Description
Host	Target host to connect to a MongoDB  instance. Choices:- Local MongoDB Instance Leave the Host field blank (Link to default localhost) MongoDB Instance on a Remote Host Sample: "mongodb0.example.com:28015"
Port	Connect to a MongoDB instance running on your localhost or remote host with Choices:- Default Port Leave the Port field blank (Link to default port: 27017) Non default port To connect to a MongoDB instance running on localhost with a non-default port. Fill 28015(non-default port) in the port field.
Username	Fill in the Username field, if authentication is needed else leave it blank.
Password	Fill in the Password field, if authentication is needed else leave it blank.
Database Name*	In MongoDB, databases hold collections of documents Please fill in the Database Name in order to let the plugin to access to the database in MongoDB. This is a mandatory field. Test the connection parameters Click on the "Test Connection" button at the bottom of the page to quickly test out your configurations.
Collection Name*	Please fill in the target Collection Name in order to load data from the collection. This is a mandatory field.
Use AJAX for cascade options?	When checked, this allows these fields to dynamically load available options based on the other field value (grouping column) when dealing with tremendous amount of selections. Read more at Ajax Cascading Drop-Down List. Important Do not forget to configure the dependency field in Field ID to control available option based on Grouping in the next tab. Important Remember to fill in the Grouping Field in the MongoDB Option Binder Properties to represend dependency values
Add Empty Option	Click this checkbox if you want an empty option in the selectbox.  Clicking this option will display the following field: Empty Option Label - Enter your "empty" label, for example "Select".
Value, Label, and Grouping Field	To populate a selectbox, for example, you need to return at least 2 objects. The first object is used for Id(Value Field). The second object is used for Label(Label Field). An optional third column(Grouping Field) can be returned for grouping value if for example, you are using the select box "Field ID to control available options based on Grouping" property field. When Use AJAX for cascade options is checked, make sure that the Grouping Field is filled.
Filter Condition	The filter can use to filter load options data