How do I view results as a grid, especially for database, CSV and MongoDB collections?

The AngularJS-based database search front-end for SearchBlox can be used for a grid-based result for database, CSV and MongoDB collections. 

Follow these steps to install and configure the Angular JS plugin:

  1. Remove or rename the existing plugin folder in ../webapps/searchblox.
  2. Download the zip file from https://github.com/searchblox/database-search and expand the folder into the SearchBlox installation under ..webapps/searchblox.
  3. Access the AngularJS based search page at http://localhost:8080/searchblox/plugin/index.html.
  4. Edit the /plugin/data/facet.json file to add/modify/remove the term, number range and date range filters.
  5. Add sorting options and faceted search options on the facet.json file.

Facet.json is the configuration file that provides options for your search results as required. After placing the plugin folder in SearchBlox, the path for facet.json file is ../webapps/searchblox/plugin/data/facet.json.

To add a new facet filter, define the field name, display name and the size of the filter values to be shown in facet.json.

Create Visualizations

You can create visualizations by clicking the Create Visualization button at the top right-hand corner above the search results.

Configuring Database Collection Results

Sample database result in JSON:

[{
"keywords": " 1 John physics California VCU",
"description": "",
"created_at": "2015-12-02T06:43:32.528Z",
"_autocomplete": " 1 John physics California VCU",
"source": "{\"no\":1,\"fname\":\"John\",\"dept\":\"physics\",\"address\":\"California\",\"university\":\"VCU\"}",
"title": "1",
"content": " 1 John physics California VCU",
"contenttype": "db",
"uid": "1"
 
},{
"keywords": " 2 Smith Chemistry Arizona ACR",
"description": "",
"created_at": "2015-12-02T06:43:32.531Z",
"_autocomplete": " 2 Smith Chemistry Arizona ACR",
"source": "{\"no\":2,\"fname\":\"Smith\",\"dept\":\"Chemistry\",\"address\":\"Arizona\",\"university\":\"ACR\"}",
"title": "2",
"content": " 2 Smith Chemistry Arizona ACR",
"contenttype": "db",
"uid": "2"
 
},{
"keywords": " 3 Caty Biology Texas TCS",
"description": "",
"created_at": "2015-12-02T06:43:32.532Z",
"_autocomplete": " 3 Caty Biology Texas TCS",
"source": "{\"no\":3,\"fname\":\"Caty\",\"dept\":\"Biology\",\"address\":\"Texas\",\"university\":\"TCS\"}",
"title": "3",
"content": " 3 Caty Biology Texas TCS",
"contenttype": "db",
"uid": "3"
 
}
]

Changes in facet.json grid columns:

"gridColumns": [
        {
            "name": "Id",
            "width": 50,
            "field": "@no"
        },
        {
            "name": "Title",
            "cellTemplate": "<button class=\"text-left btn-link\" data-ng-click=\"getExternalScopes().modal(row.entity)\"><b ng-bind=\"COL_FIELD\"></b></button>",
            "field": "title"
        },
        {
            "name": "Description",
            "field": "keywords",
            "cellTemplate": "<div ng-bind-html=\"row.entity.keywords\"></div>"
        },
        {
            "name": "Name",
            "field": "source.address",
            "cellTemplate": "<i ng-bind=\"COL_FIELD\"></i>"
        },
     {
            "name": "Address",
            "field": "source.fname",
            "cellTemplate": "<i ng-bind=\"COL_FIELD\"></i>"
        },
        {
            "name": "Last modified",
            "field": "lastmodified",
            "cellTemplate": "<i ng-bind=\"COL_FIELD\"></i>"
        }
    ]
}

Results in AngularJS faceted search:

Sample CSV collection and MongoDB collection results grid: 

Configuring CSV and MongoDB collections is similar to database collection configuration. Sample results are shown below:

In MongoDB, there is no source attribute so the attribute name can be directly given:

mongodb facet.json
{
        "name": "no",
        "field": "x",
        "cellTemplate": "<i ng-bind=\"COL_FIELD\"></i>"
    },
 {
        "name": "ID",
        "field": "_id",
        "cellTemplate": "<i ng-bind=\"COL_FIELD\"></i>"
    },


Have more questions? Submit a request

Comments