This blogpost aims to educate users on how they can extend the limited functionalities and features of Dynamics 365 CE (CRM Online) Out of the Box (OOB) grids by incorporating a custom grid called jQuery Bootgrid. This is focused on the SharePoint integration grid for documents, but the same concepts can be applied to other grids as well.
Dynamics 365 CE OOB grid for SharePoint documents does not provide versatile features for its users. In my case, we created a custom integration between CRM and SharePoint for backend, and on the front end, we used the JQuery Bootgrid to enable enhanced features. For instance, the OOB grid does not allow the user to download the documents, remove or add custom columns in the view, etc. They only allow us to retrieve documents from SharePoint in a fixed table with no interactive features like sorting, searching, or paging.
However, to improve User Interface (UI) and User Experience (UX), it becomes essential to improve the grid design and allow more functionality such as downloading the documents or viewing them in a separate window using hyperlinks. In my case, considering I used custom integration, I was not limited to the CRM database, I could also involve other dynamics databases like Azure BLOB (storage given by azure to store documents).
In order to provide all these functionalities in one place, we used a custom grid called jQuery Bootgrid. Bootgrid is a powerful table extender. It not only extends the table with multiple functionalities but also enhances its overall presentation. The important features supported by Bootgrid are mentioned below:
Features:
Following features are provided by jQuery Bootgrid:
- Easy Navigation
Bootgrid provides you with powerful pagination, sorting and search fields functionalities which help you to navigate through your data easily
- Localization Support
Once you assign the label in the grid, it becomes very difficult to change or update it; however, with the localization support feature, this task is simplified and hence becomes easy to use.
- Data API
In Bootgrid all the settings can be set via data attributes
- Responsive web design
Bootgrid provides users with a responsive web design that allows web pages to display accurately on multiple devices, windows, and screens without compromising on the resolution.
- Dynamic Manipulation
We can append, clear, or remove rows dynamically with an API using the powerful grid features.
- Column converters and formators
We use formatters and converters for more flexibility, better sorting experience, and to manipulate the visualization of data cells.
- Async server-side data loading
We can also load data asynchronously in Bootgrid through Ajax calls e.g., a REST services
Configurations:
To configure Bootgrid you need to add the following scripts in the head sections of your html file:
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”> <link rel=”stylesheet” type=”text/css” href=”https://www.alphabold.com/query.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.js”> </script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.js”> </script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.js”> </script>
HTML Code:
<!DOCTYPE html> <html lang=”en”> <head> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”> <link rel=”stylesheet” type=”text/css” href=”https://www.alphabold.com/query.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.js”> </script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.js”> </script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.js”> </script> </head> <body> <div> <button id=”init-basic” type=”button” onclick=”myFunction()”>Prettify Table</button> </div> <div> <table id=”grid-basic”> <thead> <tr> <th data-column-id=”id” data-type=”numeric”>ID</th> <th data-column-id=”sender”>Sender</th> <th data-column-id=”received” data-order=”desc”>Received</th> </tr> </thead> <tbody> <tr> <td>10238</td> <td>[email protected]</td> <td>14.10.2013</td> </tr> … </tbody> </table> </div> </body> </html>
JavaScript Code:
function myFunction(){ $(“#grid-basic”).bootgrid(); }
To extend an ordinary table, just call $(“{id of table}”).bootgrid().
For example:
The table in the screenshot above can be converted by simply clicking on “Prettify Table”.
Sort Date Column:
The built-in sorting functionality of Bootgrid works for numbers and strings but not for columns that contain dates. If we use pre-defined sorting, dates get sorted as numeric. Hence, we need formatters or converters.
Formatters:
To manipulate the visualization of data cells, we use formatters. A formatter is just a function that gets invoked on data cell rendering. Formatters returns an HTML string.
Example:
formatters: { “commands”: function (column, row) { return “html code”; },
Converters:
Converts contains two methods, ”from” and ”to”. From converts, a string to a desired type, whereas, to converts a type into a representational string.
(“#grid”).bootgrid({ converters: { datetime: { from: function (value) { return moment(value); }, to: function (value) { return value.format(“lll”); } } } });
Conclusion:
jQuery Bootgrid helps you convert your table into a grid that contains multiple functionalities like paging, sorting, searching, and many more. It is super easy to use, it requires no coding, just one function call, and you’re good to go! If you have any questions regarding jQuery Bootgrid, feel free to comment below.
If you have any question or queries, do not hesitate to reach out to us!
