We have tried to make it as easy as possible for you to integrate AdaptableBlotter.JS into your application, while also accommodating the various different frameworks that our users enjoy.
The Adaptable Blotter package (and associated wrappers) are all available on npm which provides full version history and dependency details.
You can find further information in the following examples:
For a step by step by guide to building a one-page application using the Adaptable Blotter see Getting Started Tutorial.
Although there are a few different ways that you can integrate AdaptableBlotter.JS, they all essentially require the same 4 step process:
Create and populate a vendor grid - this will vary according to which grid you use but will include getting data, populating a grid with it, and setting up columns appropriately
Create an IAdapableBlotterOptions object which will include an assortment of properties needed by the Adaptable Blotter including a reference to the grid (or grid options) created in the previous step
Instantiate an AdaptableBlotter instance passing in the IAdaptableBlotterOptions created in the previous step
Theme / Style both the Adaptable Blotter and the underlying Vendor Grid.
Lets's look at each of these steps in turn:
Because the Adaptable Blotter sits on top of an underlying grid your first task is to create an instance of your underlying vendor grid.
Everything listed in this step would need to happen even if AdaptableBlotter.JS was not being used.
Although the actual steps required vary according to vendor grid manufacturer, you will likely need to perform some - or all - of the following actions:
Decide which underlying grid to use
AdaptableBlotter.JS works the same irrespective of the underlying grid (albeit with a different implementation) so you can choose whichever grid you prefer, or are most comfortable with, or already have licences for. Find further details how this works, and a list of currently implemented grids, at Underlying Grids.
Populate the grid with your data
Attach a datasource to the grid. This can be any object, dataset, array, streaming data flow which the underlying grid can accept. So long as the data can be viewed in the underlying grid, all the functionality in the Adaptable Blotter will work.
Create a grid setup using the underlying grid just as you would normally.
Once you have chosen your underlying grid define the columns, data types, cell editors, formatters and anything these else you require for your grid according to the requirements and specifications of that grid.
Depending on the vendor grid you will either pass the grid itself, or a gridoptions object, into the IAdapableBlotterOptions object in the next step.
When creating the <div> for your vendorGrid please give it the Id of "grid"; if not, then please set the vendorContainer property in ContainerOptions in IAdaptableBlotterOptions to be the Id that you do set.
This will allow the AdaptableBlotter easily to identify the vendor grid for theming and other purposes. See Container Options for more details.
The IAdaptableBlotterOptions object is the only object that the AdaptableBlotter requires to initialise and run.
It contains a number of useful properties - 2 mandatory and the rest optional (with sensible defaults).
One of the mandatory properties is vendorGrid which is the instance of the underlying grid that the Adaptable Blotter integrates with.
The other mandatory property is the name of the primaryKey column which allows us to identify your data dynamically at run time (See Primary Key for more details).
It is also the place where you set your Licence Key value (provided by Adaptable Blotter support team) which will determine which functionality is present. (See Licence Key for more details).
All the other properties allow you to configure your Blotter to fit your - and your organisation's - precise requirements.
You can see a full description of the object (and all its properties) at BlotterOptions.
Various examples can be found in the following sections.
Whichever method you use, you will need to pass your IAdaptableBlotterOptions object created in Step 2 as the only parameter.
For example to instantiate the ag-Grid you will use:
ab = new AdaptableBlotter(blotterOptions);
The constructor of the Adaptable Blotter has changed since Version 1. You no longer need to pass in any containers as they are now referenced in the IAdaptableBlotterOptions object, which has become the only parameter.
Once the Blotter is instantiated there is nothing more to do, and if you wish, you can perform all subsequent actions through the rich UI. However we do provide the Blotter API to allow you full runtime access to all the Blotter's objects and methods.
You can use our in-built themes (both for the Adaptable Blotter and / or Vendor Grid) or you can provide your own.
You might find it easiest to use the default themes to get up and running quickly and then in due course add your own themes and styles as you get more comfortable with the product.
For more information on using our default themes and the other options available, see Styles.