Dragon Grid® 2.0 Documentation

Dragon Grid® is an external visualization engine that is built to embed within Birst dashboard’s to give users a more responsive grid experience. Dragon Grid leverages Infor Birst’s open api to introduce our external visuals into a wholly controlled Birst view. When a user opens a dashboard with Dragon Grid on it Birst reaches out to our system, pulls the relevant basic grid executable and then combines it with customer information supplied by Birst. This then allows for the same secure experience users currently get from Birst with just our added visualization.

How is Dragon Grid configured?

Dragon Grid® leveraged customer BQL queries through html based configuration and properties in HTML snippets that when placed in a Birst dashboard will combine the data goodness of Birst with the Visual flexibility of our Dragon Grid®. Through this configured HTML Birst developers tell Dragon Grid what data is needed for the visualization through supplying BQL as well configuring how they would like Dragon Grid to display their data through additional parameters at both the table and column level. This document will cover the current enabled parameters, however additional parameters will be added as we develop Dragon Grid.

General Notes to configurers.

The HTML in the grid IS case sensitive, so make sure if a variable is all lower case, you are using all lower case.
Build slow and save often. Birst can lose changes if the HTML is not saved, so doing quick saves throughout the build process will definitely save time.

Dragon Grid Release Management

Dragon Grid is a cloud based visualization engine which will version through the future as additional functionality is added with releases denoting each successive release of functionality. Typically once a release is in production it will not be updated to allow customers to remain on historical versions for simplicity of management. At all times Dragon Grid will have a development release which customers can access through XXXX where newly requested functionality will be added for testing etc. That said, our goal is to allow customers to upgrade at their own pace and as their business needs dictate rather than our schedule.

What are the major modes of Dragon Grid?

Dragon Grid currently supports three major modes which are all callable and configurable through the adjustment of a few table level and column level parameters:

Flat Grid - A basic table which will present users with basic Dragon Grid functionality.
Ragged Hierarchy - A configuration that allows the user to create a basic ragged hierarchy and support summary level aggregations as well as record level attributes.
Financial - A configuration specifically designed to address the needs of general financial reporting visualizations such as Income Statements, Balance Sheets, and Cash Flows.

We will now discuss the main parameters that will drive each.

Flat Grid

The flat grid is the most basic of three configurations, it does not require any specific configuration for the higher level Grid functionality. This is used wherever a standard Visualizer table would be leveraged.

Ragged Hierarchy

The ragged hierarchy depends on both the configuration of a hierarchy column as well as a few parameters to instruct Dragon Grid how to roll up.

Hierarchy Column Configuration - Dragon Grid relies on information within the configured hierarchy column to define where and how rows should be expanded and collapsed between the various levels within the hierarchy. The Hierarchy Column requires a break between each level in the hierarchy of ~~~ in order for the Hierarchy levels to be identified. This added information can be managed as raw data, Expression, added directly to the BQL with the basic notation [Level 1] + ‘~~~’ + [Level 2]. Therefore a hierarchy build supporting something like Year, Month, Day Name would look something like this.

2022~~~January~~~Monday

Hierarchy	Value
2022~~~January~~~Monday	10
2022~~~January~~~Tuesday	1
2022~~~February~~~Tuesday	100

Which will return the below options:

Summed at Year

Hierarchy	Value
2022	111

Summed at Month, Opened to 2nd level

Hierarchy

Value

2022

January

February

100

Summed at Month, Opened to 3rd level for just January

Hierarchy

Value

2022

January

Monday

Tuesday

February

100

In addition to the Hierarchy data meeting the required format the following parameters need to be enabled.

The name of the column which contains the hierarchy information needs to be identified which will also hide the original data column.

var hierarchyName = 'Org Structure';

Should the initial data be of interest it can be exposed by adding.

var showHierarchyField=true;

Columns which the developer would like to be aggregated need to be identified within the column settings.

var columnConfigurationList = [

{ column: 'Org Structure', leftJustify: true },

{ column: 'Org Count', aggregation: 'sum', rightJustify: true }

];

Financial Reporting

Financial reporting takes the Ragged Hierarchy the additional step of adding additional functionality. The following parameters are required on Financial reporting:

var hierarchyName = 'Chart of Accounts';

var financialGroupName = 'Chart of Accounts';

var asFinancials = true;

var showTotalRow = true;

Dragon Grid Parameters

Dragon Grid is enabled through the combination of customer BQL with the Dragon Grid visualization engine which requires the developer to set the parameters required to instruct Dragon Grid the options to be used when rendering the visualizations. These parameters can be at both the Grid/table level as well as at the column level for certain configurations. They are broken out and discussed in the two attached tables.

Grid level parameters and examples:

Parameter	Definition	Required	Type	Example
asFinancials	Activated Grid Financials mode.	No	Boolean	var asFinancials = true;
autosizeColumns	If true, instruct the grid to autosize each column (expand/contract them to fit the data) upon table instantiation. Default false.	No	Boolean	var autosizeColumns = true;
BirstConfig	This parameter identifies which the Birst javascript library to be used and needs to be updated to the environment the customer is using.	Yes	URL	<script src="https://app2101.bws.birst.com/js/birst_embed.js"></script>
columnConfigurationList	columnConfigurationList identifies the specifics of how Dragon Grid will visualize the data and will override table level settings.	No	Array	var columnConfigurationList = [ { column: 'Chart of Accounts', headerName: 'Chart of Accounts' }, { column: 'Prior End of Year Amount', aggregation: 'sum', currency: true,rightJustify:true, headerName: 'Prior End of Year Amount' } ];
currencySymbol	Sets a currency symbol for the Grid. Default ‘$’.	No	String	var currencySymbol = '$';
DragonGridKey Required. String. The customer’s Agile Dragon Chargebee Customer ID, used to look up what DragonGrid products they have access to (customizable grids and/or the dragon library).	DragonGridKey is the id that identifies the customer who is using the licensing.	Yes	String
enableStateManagement	Turns on the buttons to allow for saving of grid. When set to true Dragon Grid will give the user 3 buttons with which to save their changed to their personal copies of the Grid including reloading and setting to the original configuration created by the developer.	No	String	var enableStateManagement = true;
excelConfig:	If set, overrides the default configuration for Excel exports. See Excel Config Object below.	No	Array	var excelConfig = { author: 'Dragon Grid®', fileName: 'Warehouse', sheetName: 'Flat Grid' };
financialDepth	Sets the depth the financial hierarchy opens to.	No	String	var financialDepth = 2;
gridId	Unique ID for a grid on a page which allows for saving of grid configurations into the browser so users who return to the page will see their settings if saved.	No	String
gridTheme	This set the overall styling for the grid to a specific option set. Currently 2 are available: A alpine B alpine-dark If not set solution defaults to alpine.	No	String
headerStyle	Allows the developer to set the styling of the header.	No	Array	headerStyle: { backgroundColor: string, color: string };
hierarchyColumnConfiguration	hierarchyColumnConfiguration identifies the column to be used to establish the column to be used to generate any hierarchies to be used within the hierarchy and financial modes. If set, overrides default column configuration for the hierarchy’s column. Default undefined			var hierarchyColumnConfiguration = [ { column: 'Chart of Accounts', headerName: 'Chart of Accounts' }]
hierarchyName	Name of the column that is expected to contain the tilde separated data which will be split to generate the hierarchy view (looking for ‘~~~’ in the data).	No	String	var hierarchyName = ‘Chart of Accounts’;
layoutButtonStyle	Sets the backgroundColor and color for all 3 layout buttons, or allows you to set overrides for each button specifically, if you so desire. And you can set all values, but then each button will override the general values.	No	Array
numberLocale	By default the grid uses the locale of the bowser, however here the grid can be set to a local that is not specified in the browser.	No	String	var numberLocale = ‘DE’;
premadeId	If set to “dragonlibrary” this will make all preconfigured reports in the library available via select. If set to a single preconfigured report name, it will load that report with no select If set to an array of preconfigured report names, the user will get to choose which one they see (and switch between them).	No	String or Array of Strings.	Make Example
queryString	Valid BQL query to be run in order to provide data to the grid. This is required unless you are using a preconfigured report that comes with its query baked in. So it’s almost-always required, as something has to provide the queryString for there to be data to be rendered in the report.	No	String	Place example.
showColumnNames	If true, the grid will render the raw column names. If false, render the display names. Default false.	No	String	var showColumnNames = false;
showHierarchyField	If true, you’ll see the hierarchy field’s raw data in addition to the interpreted data. If false, it will be hidden. Default false.	No	Boolean	var showHierarchyField = true;
showTotalRow	If true, show the total for groups per the aggregation rules set on each column. If false, don’t. Default false.	No	String	var showTotalRow = true;
tablefont	Attempts to set the user’s font for the table to the font name provided. Relies upon the user’s machine having this font available as this does not load external fonts for the user.	No	String	var tablefont = ‘sans sarriff’;

Column level parameters and examples:

Dragon Grid gives added functionality at the column level as well. Column parameters are all nested as an array within the table parameter columConfigurationList. The block of configured columns would look something like this.

var columnConfigurationList = [

{ column: 'Chart of Accounts', headerName: 'Chart of Accounts' },

{ column: 'Acct Subtype', hidden: true },

{ column: 'Prior End of Year Amount', aggregation: 'sum', currency: true,rightJustify:true, headerName: 'Prior End of Year Amount' },

{ column: 'Level 3 Sort Order', hidden: true }

];

Parameter	Definition/Values	Required	Type	Example
column	This is the name of the column which references the column name within the BQL query.	Yes	String	{ column: 'Chart of Accounts' },

aggregation	Sets the aggregation for a column specifically used in Ragged Hierarchies and Financial reports to identify how to aggregate columns which span levels. If a column is not aggregated it will not show in the summary band of the hierarchy. Values: sum, min, max, count, avg, first, last	No	String	{ column: 'Amount', aggregation: 'sum'},
currency	Identifies the column as containing currency. The standard currency format is then applied of 2 decimal places to account for cents.	No	Boolean	{ column: 'Prior End of Year Amount', currency: true},
currencySymbol	Override the table’s default currency symbol with one specific for this column, if set.	No	String	NEED EXAMPLE
filter	Allows for the developer to turn off filtering for this particular column. Default true	No	Boolean	{ column: 'Acct Subtype', filter: false },
flex	Set this to a valid CSS flex shorthand notation in order to apply those flex rules for this column’s width.	No	String or Number	NEED example
headerName	Sets the name of the header, if unpopulated the raw column name is used.	No	Boolean	{ column: 'Prior End of Year Amount', aggregation: 'sum', headerName: 'Prior End of Year Amount' }
hidden	Set’s the column as hidden from view but available to be added from hidden columns within the standard column drawer. Default false.	No	Boolean	{ column: 'Acct Subtype', hidden: true },
ignore	Set’s the column as hidden from view as well as the column drawer. Default false.	No	Boolean	{ column: 'Acct Subtype', ignore: true },
leftJustify	Set’s column content to be left justified within the cell. Default false.	No	Boolean	{ column: 'Prior End of Year Amount', leftJustify: true},
minWidth	Set this to valid CSS min-width value to determine the minimum width for this column (eg ‘100px’)	No	Boolean	{ column: 'Acct Subtype', ignore: true },
numberLocale	The Grid currently sets the number format per the browser location, by setting this, you force a specific region's locale to be used.	No	String	{ column: 'Prior End of Year Amount', aggregation: 'sum', headerName: 'Prior End of Year Amount', numberLocale: ‘DE’ }
resizable	If true, allow resizing this column. If false, don’t allow it. Default true	No	Boolean	{ column: 'Acct Subtype', resizable: false },
sortable	Allows for the developer to turn off sorting for this particular column. Default true	No	Boolean	{ column: 'Acct Subtype', sortable: false },
rightJustify	Set’s column content to be right justified within the cell. Default false	No	Boolean	{ column: 'Prior End of Year Amount', rightJustify: true},

ExcelConfig Object

The excel config object allows the developer to configure specifics of excel output characteristics for the excel file itself.

var excelConfig = {

author: 'Dragon Grid®',

fileName: 'Warehouse',

sheetName: 'Flat Grid'

};

Parameter	Definition/Values	Required	Type	Example
author	If set, sets the author value in the excel document. Default ‘Agile Dragon Group’	No	String	var excelConfig = { author: 'Dragon Grid®', fileName: 'Warehouse', sheetName: 'Flat Grid'};
fileName	If set, sets the name of the excel file exported by Dragon Grid. Default ‘DragonGridExport’	No	String	var excelConfig = { author: 'Dragon Grid®', fileName: 'Warehouse', sheetName: 'Flat Grid'};
sheetName:	If set, sets the name name of the sheet which data is exported to in the excel file. Default ‘Dragon Grid 2.0’	No	String	var excelConfig = { author: 'Dragon Grid®', fileName: 'Warehouse', sheetName: 'Flat Grid'};

layoutButtonStyle

Dragon Grid supports styling of the different buttons used to manage the capture and load of user specific configurations. Each button allows for the

Note: LayoutButtonStyle is overrides saveStyle, resetStyle, loadStyle .

layoutButtonStyle?: {

backgroundColor?: string;

color?: string;

saveStyle?: {

backgroundColor: string;

color: string;

resetStyle?: {

backgroundColor: string;

color: string;

loadStyle?: {

backgroundColor: string;

color: string;

}

Parameter	Definition/Values	Required	Type	Example
backgroundColor	Background color for all 3 buttons	No	String
color	Foreground (font) color for all 3 buttons	No	String

Cut and Paste Mode Examples

The following are examples of each major Grid mode built to cut and paste into any processed Birst space. Note: All data in these examples is derived from the time dimension. Each example requires 2 steps to

Cut and paste the HTML into the Birst dashboard of a processed space.
Update the DragonGridKey to your key within the snippet.

Flat Grid Visualization Example

<html>

<!--Documentation for the configuration of Dragon Grid is located at the following link.

https://agiledragongroup.com/dragon-grid-documentation-->

<! –– Required update app2101 to your Birst URL in the us for cloudsuite it is 2101 ––>

//LicenseKey - Required

var LicenseKey = 'Launch-Trial';

//BQL - Required

var queryString = `SELECT Top 1000 USING OUTER JOIN [Time.Year] 'Year', [Time.Year] 'Year2', [Time.Month] 'Month', [Time.Date] 'Date' ,

[Time.Date] 'Hidden Date' ,

[Time.Date] 'Ignored Date' ,

Random()*100 'Dollars' , Random()*100 'Euro' FROM [ALL] Where [Time.Year] = 2020 OR [Time.Year] = 2021 ORDER BY [Time.Date] ASC` ;

// optional parameters

//Resizes Columns to size of data

var autosizeColumns = true;

//Determines Theme

// optional config. can be set to alpine or alpine-dark. if blank, defaults to alpine.

var gridTheme = 'alpine';

//Optional Adds Total Row to Grid

var showTotalRow=true

//Optional Enables user to save their changes and filters

var enableStateManagement = true;

//Option Excel Configuration Export Settings

var excelConfig = {

author: 'Dragon Grid®',

fileName: 'Work Anywhere Samples',

sheetName: 'Flat Grid'

};

// table level default currency. can be overridden in column definition

var currencySymbol = '$';

//Table Font

var tableFont = 'Serif';

// var hierarchyName = '';

// optional config. if set to true, will show the group field outside of the grouping

// var showHierarchyField=true;

//Header Example

var headerStyle = {backgroundColor:'#FF5733', color:'#000000' };

// supports currency, rightJustify, minWidth, flex, filter, sortable, currencySymbol, resizable

//var hierarchyColumnConfiguration = { minWidth: 300};

var columnConfigurationList = [

{ column: "Year", leftJustify: true },

{ column: "Date", leftJustify: true },

{ column: "Hidden Date", leftJustify: true, hidden:true },

{ column: "Ignored Date", leftJustify: true , ignore:true },

{ column: "Dollars", currency: true, rightJustify: true ,aggregation: "sum" },

{ column: "Euro", currency: true, leftJustify: true ,aggregation: "sum", currencySymbol : '€',numberLocale:'DE'},

{ column: "Year2", rightJustify: true , filter:false , headerName: 'Different Header Name', sortable:false, minWidth:'200'}

];

</script>

<H1>Dragon Grid® - Flat Grid Visualization Example</H1> <br><small>Be sure to update to your LicenseKey</small> <br>

<p>

<a href="https://agiledragongroup.com/dragon-grid-documentation/" param target="_blank">Dragon Grid® Documentation</a>

</p>

</html>

Ragged Hierarchy Visualization Example

<html>

<!--Documentation for the configuration of Dragon Grid is located at the following link.

https://agiledragongroup.com/dragon-grid-documentation-->

<! –– Required update app2101 to your Birst URL in the us for cloudsuite it is 2101 ––>

//LicenseKey - Required

var LicenseKey = 'Launch-Trial';

//BQL - Required

var queryString = `SELECT Top 1000 USING OUTER JOIN

[Time.Year] +'~~~' + [Time.Month] + '~~~' + [Time.Week of Year] + '~~~' + Format([Time.Date],'yyyy-MM-dd') 'Time Hierarchy', [Time.Year] 'Year', [Time.Year] 'Year2', [Time.Month] 'Month', [Time.Date] 'Date' ,

[Time.Date] 'Hidden Date' ,

[Time.Date] 'Ignored Date' ,

Random()*100 'Dollars' , Random()*100 'Euro' FROM [ALL] Where [Time.Year] = 2020 OR [Time.Year] = 2021 ORDER BY [Time.Date] ASC` ;

// optional parameters

//Resizes Columns to size of data

var autosizeColumns = true;

//Determines Theme

// optional config. can be set to alpine or alpine-dark. if blank, defaults to alpine.

var gridTheme = 'alpine';

//Optional Adds Total Rows to Grid

var showTotalRow=true;

//Optional Enables user to save their changes and filters

var enableStateManagement = true;

//Option Excel Configuration Export Settings

var excelConfig = {

author: 'Dragon Grid®',

fileName: 'Work Anywhere Samples',

sheetName: 'Flat Grid'

};

// table level default currency. can be overridden in column definition

var currencySymbol = '$';

//Table Font

var tableFont = 'Serif';

// Hierarchy

// optional config. if set to true, will show the group field outside of the grouping

// var showHierarchyField=true;

var hierarchyName = 'Time Hierarchy'

//Header Example

var headerStyle = {backgroundColor:'#FF5733', color:'#000000' };

//Button Styling

var layoutButtonStyle= {

backgroundColor: 'Orange',

color: 'Black'}

//Column Configuration

var columnConfigurationList = [

{ column: "Year", leftJustify: true },

{ column: "Date", leftJustify: true },

{ column: "Hidden Date", leftJustify: true, hidden:true },

{ column: "Ignored Date", leftJustify: true , ignore:true },

{ column: "Dollars", currency: true, rightJustify: true ,aggregation: "sum" },

{ column: "Euro", currency: true, leftJustify: true ,aggregation: "sum", currencySymbol : '€',numberLocale:'DE'},

{ column: "Year2", rightJustify: true , filter:false , headerName: 'Different Header Name', sortable:false, minWidth:'200'}

];

</script>

<H1>Dragon Grid® - Ragged Hierarchy Visualization Example</H1> <br><small>Be sure to update to your LicenseKeyy</small> <br>

<p>

<a href="https://agiledragongroup.com/dragon-grid-documentation/" param target="_blank">Dragon Grid® Documentation</a>

</p>

</html>

Financial Visualization Example

<html>

<!--Documentation for the configuration of Dragon Grid is located at the following link.

https://agiledragongroup.com/dragon-grid-documentation-->

<! –– Required update app2101 to your Birst URL in the us for cloudsuite it is 2101 ––>

//LicenseKey - Required

var LicenseKey = 'Launch-Trial';

//BQL - Required

var queryString = `SELECT Top 1000 USING OUTER JOIN

[Time.Date] 'Hidden Date' ,

[Time.Date] 'Ignored Date' ,

Random()*100 'Dollars' , Random()*100 'Euro' FROM [ALL] Where [Time.Year] = 2020 OR [Time.Year] = 2021 ORDER BY [Time.Date] ASC` ;

//Financial Parameters

var asFinancials = true;

var financialDepth = 2;

// optional parameters

//Resizes Columns to size of data

var autosizeColumns = true;

//Determines Theme

// optional config. can be set to alpine or alpine-dark. if blank, defaults to alpine.

var gridTheme = 'alpine';

//Optional Adds Total Rows to Grid

var showTotalRow=true;

var showGroupTotalRow=true;

//Optional Enables user to save their changes and filters

var enableStateManagement = true;

//Option Excel Configuration Export Settings

var excelConfig = {

author: 'Dragon Grid®',

fileName: 'Work Anywhere Samples',

sheetName: 'Flat Grid'

};

// table level default currency. can be overridden in column definition

var currencySymbol = '$';

//Table Font

var tableFont = 'Serif';

// Hierarchy

// optional config. if set to true, will show the group field outside of the grouping

// var showHierarchyField=true;

var hierarchyName = 'Time Hierarchy';

//Header Example

var headerStyle = {backgroundColor:'Yellow', color:'Green' };

//Button Styling

var layoutButtonStyle= {

// backgroundColor: 'Orange',

// color: 'Black',

saveStyle: {

backgroundColor: 'green',

color: 'red'

}

// supports currency, rightJustify, minWidth, flex, filter, sortable, currencySymbol, resizable

//var hierarchyColumnConfiguration = { minWidth: 300};

var columnConfigurationList = [

{ column: "Time Hierarchy", leftJustify: true, hidden:true },

{ column: "Year",hidden:true},

{ column: "Date", leftJustify: true,hidden:true },

{ column: "Hidden Date", leftJustify: true,ignore:true },

{ column: "Ignored Date", leftJustify: true,ignore:true },

{ column: "Dollars", currency: true, rightJustify: true ,aggregation: "sum" },

{ column: "Euro", currency: true, leftJustify: true ,aggregation: "sum", currencySymbol : '€',numberLocale:'DE'},

{ column: "Year2", rightJustify: true , filter:false , headerName: 'Different Header Name', sortable:false, minWidth:'200'}

];

</script>

<H1>Dragon Grid® - Financial Visualization Example</H1> <br><small>Be sure to update to your LicenseKey</small> <br>

<p>

<a href="https://agiledragongroup.com/dragon-grid-documentation/" param target="_blank">Dragon Grid® Documentation</a>

</p>

</html>

Dragon Grid® 2.0 Documentation

Dragon Grid®

What is Dragon Grid?

How is Dragon Grid configured?

Dragon Grid Release Management

What are the major modes of Dragon Grid?

Flat Grid

Ragged Hierarchy

Financial Reporting

Dragon Grid Parameters

Grid level parameters and examples:

Column level parameters and examples:

ExcelConfig Object

layoutButtonStyle

Cut and Paste Mode Examples

Flat Grid Visualization Example

Ragged Hierarchy Visualization Example

Financial Visualization Example

Try Dragon Grid®

No Obligation Trial