1. You can just start with any of your favorite IDE with a new 'HTML and Javascript' web project.
   or
   Create a new file using notepad / edit / gedit or any of the text editor of your choice.
2. Copy the following code by clicking on button at the top right of the code block and Paste it in the newly created file.
3. Find the code var connToken = "connection-token";, modify this with your 'connection-token' taken from JPDB dashboard and save it with any file-name and extenstion '.html'.
4. Open this file in browser to see the code working. Add few records.
5. Confirm adding of data by logging into the Developer API Dashboard than click on Visualize option on left navigation.

Most of the code in the above example is self explanatory. The important points are:

Use of 'jpdb-commons.js' Javascript library to speedup the development.

                                             
                                                <script src="http://login2explore.com/jpdb/resources/js/jpdb-commons.js"></script>
                                            
                                        

Below code snippet defines the JPDB API end point used for manipulating the data i.e. Index Manipulation Language (iml).

                                             
                                                var apiBaseUrl = "http://api.login2explore.com:5577";    // API Base URL
                                                var imlPartUrl = "/api/iml";                           // API End-Point Part URL
                                            
                                        

Variables to be defined with your choice of database name and relation name.

                                             
                                                // TBD Change the dbName and relName with your choice of database name and relation name.
                                                var dbName = "company_db";
                                                var relName = "emp_rel";
                                            
                                        

Following Javascript methods are created to make this example page working.

                                             
                                                
                                                //To Set api base Url so that user can locate its data to baseUrl of another JPDB instance
                                                function setBaseUrl(apiBaseUrl);
                                                
                                                // Send data to JPDB instance for inserting in the give relation for the user database.
                                                function mySave() {... } 
                                           
                                                // Initializes form data to default values 
                                                function resetFormData() {... }
                                           
                                                // Restore form field focus to first field.
                                                function resetFocus() {... }
                                            
                                        

This line will set the apiBaseUrl to the Url which you wants to set.

                                             
                                                setBaseUrl(apiBaseUrl);
                                            
                                        

This line will read the form data and convert it to Json object.

                                             
                                                var formDataInJson = getFormDataInJson($form);
                                            
                                        

Connection token is required to call the JPDB API. Replace 'connection-token' with your connection-token taken from JPDB dashboard.

                                             
                                                var connToken = "connection-token";
                                            
                                        

Creates a PUT json request.

                                             
                                                var putReq = createPUTRequest(connToken, jsonObj, dbName, relName);
                                            
                                        

Ajax (POST) call to JPDB API with the given json request.

                                             
                                                var respJson = executeCommand(putReq, imlPartUrl);
                                            
                                        

1. Create a new HTML file and copy the following code.
2. You must change the 'connection-token' for getting connection to JPDB.

Most of the code in the above example is self explanatory. The important points are:

Following Javascript methods are created to make this example page working.

                                             
                                                // Retrieve an employee record based on Employee ID.
                                                function getEmployee() {... } 
                                           
                                                // Get next record details from JsonPowerDB database
                                                function getNextRecord() {... }
                                                
                                                // Get previous record details from JsonPowerDB database
                                                function getPrevRecord() {... }
                                                
                                                // Get first record details from JsonPowerDB database
                                                function getFirstRecord() {... }
                                                
                                                // Get last record details from JsonPowerDB database
                                                function getLastRecord() {... }
                                           
                                                // Set and display data in the form 
                                                function setDataInFormFields(respRecordJson) {... }
                                            
                                        

Creates a FIND_RECORD json request.

                                             
                                                var getFindRecordReq = createFIND_RECORDRequest(connToken, dbName, relName, jsonObj);
                                            
                                        

Creates a NEXT_RECORD json request.

                                             
                                                var getNextRecordReq = createNEXT_RECORDRequest(connToken, dbName, relName, recordNumber);
                                            
                                        

Creates a PREV_RECORD json request.

                                             
                                                var getPreviousRecordReq = createPREV_RECORDRequest(connToken, dbName, relName, recordNumber);
                                            
                                        

Creates a FIRST_RECORD json request.

                                             
                                                var getFirstRecordReq = createFIRST_RECORDRequest(connToken, dbName, relName);
                                            
                                        

Creates a LAST_RECORD json request.

                                             
                                                var getLastRecordReq = createLAST_RECORDRequest(connToken, dbName, relName);
                                            
                                        

1. Create a new HTML file and copy the following code by clicking on button at the top right of the code block and Paste it in the newly created file.
2. Find the code var connToken = "connection-token"; and modify this with your connection-token taken from JPDB dashboard.

Most of the code in the above example is self explanatory. The important points are:

Following Javascript methods are created to make this example page working.

                                             
                                                // Set a page when a particular button is clicked.
                                                function setPage(buttonId) {... } 
                                           
                                                // Managing enable or disable buttons as per displayed page 
                                                function buttonDisabled() {... }
                                           
                                                // Get all data from JPDB database according to the page number and page size.
                                                function getPage(pageNo, pageSize){... }
                                           
                                                // Create table heading
                                                function createTableHeader(dataColumn){... }
                                           
                                                // Create table rows and table data columns according to the requested page number and page size.
                                                function createTableRows(jsonArrayData, dataColumn){... }
                                            
                                        

Creates a GETALLCOL json request.

                                             
                                                var getReqCol = createGETALLCOLRequest(connToken, dbName, relName);
                                            
                                        

Creates a GETALL json request.

                                             
                                                var getReqData = createGETALLRequest(connToken, dbName, relName, pageNo, pageSize);
                                            
                                        

1. Create a new HTML file and copy the following code.
2. You must change the connection-token for getting connection to JPDB.

Most of the code in the above example is self explanatory. The important points are:

Following Javascript method created to make this example page working.

                                             
                                                // Delete a particular record when delete button is clicked.
                                                function deleteRecord(reqId) {... } 
                                            
                                        

Creates a REMOVE json request.

                                            
                                                var getRemoveRequest = createREMOVERecordRequest(connToken, dbName, relName, reqId);
                                            
                                        

The following code is having an edit button which will redirect you to ' Edit Employee ' page and remaining code is same as ' Retrieve Multiple Record with Delete Operation '.

Create a another HTML file and copy the following code to edit / update the employee details.

Following Javascript methods are created in Edit Employee Page.

                                             
                                                // Get Record Number from URL.
                                                function getRecordNumber() {... } 
                                                
                                                // Get record details of a particular record number.
                                                function getRecordDetails() {... } 
                                                
                                                // Get the record details from local storage in case of cancel update.
                                                function getDataOnCancelEvent() {... } 
                                                
                                                // Update a particular record details in the JPDB database.
                                                function updateRecord() {... } 
                                                
                                                // Get the form data and check whether any changes occur or not.
                                                function getChangedFormDataInJson($form) {... }
                                            
                                        

Creates a GET_RECORD json request.

                                            
                                                var getReqRecord = createGET_RECORDRequest(connToken, dbName, relName, recordNumber);
                                            
                                        

Creates a UPDATE json request.

                                            
                                                var getReqUpadateRecord = createUPDATERecordRequest(connToken, formJsonStr, dbName, relName, recordNumber);
                                            
                                        

1. Create a new HTML file and copy the following code.
2. You must change the connetion-token for getting connection to JPDB.

Most of the code in the above example is self explanatory. The important points are:

Following Javascript methods are created to make this example page working.

                                             
                                                // Check whether a particular record is exist or not in JSONPowerDB database.
                                                 function checkExistingData() {... } 
                                            
                                        

Creates a FIND_RECORD json request.

                                            
                                                var getReqData = createFIND_RECORDRequest(connToken, dbName, relName, dataObj);