Web development in Anaplan XL Web

Anaplan XL Reporting Web enables developers to embed Anaplan XL reports in their own web pages.

Several reports can be embedded into one page and linked together using the parameters you need. This lets you make custom pages from existing published workbooks.

This page describes the web API, and the HTML and JavaScript required to embed reports.

It's possible to link to a published report directly using the URL syntax:

http://Server/AnaplanXLWeb/WebForm/ShowReport.aspx?rep=folder/report.xml

This can also include any web parameters to enable specific criteria to be passed.

Anaplan XL doesn't support "Quirks Mode" in Internet Explorer. To ensure that IE renders your page in standards mode, you will need to put a suitable doctype at the top of your page. 

Embedded Anaplan XL reports reference various JavaScript libraries which must be included in your page.

You should change the references to MyServerName to the name of the Anaplan XL website, for example WebServer01/AnaplanXLWeb.

Required CSS:

<link rel="stylesheet" type="text/css" href="http://MyServerName/Css/XLCubedWeb.css" /><link rel="stylesheet" type="text/css" href="http://MyServerName/Css/XLCubed.Workbook.css" /><link rel="stylesheet" type="text/css" href="http://MyServerName/Css/redmond/jquery-ui-1.8.custom.css" /><link rel="stylesheet" type="text/css" href="http://MyServerName/Css/redmond/jquery.treeview.css" />

Required JavaScript:

<script type="text/javascript" src="http://MyServerName/js/JQuery/jquery-1.4.2.min.js"></script><script type="text/javascript" src="http://MyServerName/js/JQuery/jquery-ui-1.8.custom.min.js"></script><script type="text/javascript" src="http://MyServerName/js/JQuery/jquery.treeview.min.js"></script><script type="text/javascript" src="http://MyServerName/js/JQuery/jquery.treeview.async.js"></script> <script type="text/javascript" src="http://MyServerName/js/JQuery/jquery.cookie.js"></script><script type="text/javascript" src="http://MyServerName/js/JQuery/jquery.n-contextmenu.js"></script><script type="text/javascript" src="http://MyServerName/js/JQuery/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="http://MyServerName/js/JQuery/jquery.xlcubedextensions.js"></script><script type="text/javascript" src="http://MyServerName/js/microsoft/microsoftajax.js"></script><script type="text/javascript" src="http://MyServerName/js/XLCubed.Web.js"></script><script type="text/javascript" src="http://MyServerName/js/XLCubed.Workbook.js"></script><script type="text/javascript" src="http://MyServerName/js/XLCubed.Toolbars.js"></script><script type="text/javascript" src="http://MyServerName/js/XLCubed.Repository.js"></script><script type="text/javascript" src="http://MyServerName/js/XLCubed.DialogManager.js"></script><script type="text/javascript" src="http://MyServerName/js/XLCubed.Controls.js"></script><script type="text/javascript" src="http://MyServerName/js/XLCubed.Dialogs.js"></script> <script type="text/javascript" src="http://MyServerName/WebServices/WorkbookService.svc/js"></script>

Anaplan XL reports are loaded into a div element, which requires markup in this style.

<div id="workbookdiv" style="position:relative;height:300px;width:600px;border:1px solid silver;"></div>

The id attribute is mandatory, and must be unique in the page.

The div must have the position of its style set, either inline as above or via CSS. It must be relative or absolute.

Initialization of the workbook is done via JavaScript.

<script>function loadFluenceXL(){ //Initialise Anaplan XL var xlcubedOptions = { BaseUrl:"http://MyServerName" }; XLCubed.Settings.Init(xlcubedOptions); //create the Anaplan XL workbook var div = document.getElementById("workbookdiv"); var book = new XLCubed.Workbook(div); //load a report into the workbook book.Load("MyFolder/MyReport.xml");}</script>

MyServerName must be replaced with the actual Anaplan XL web site.

The string passed to the Load() function is the path in the repository to an existing report published from Excel.

Optionally, you can pass parameters to the new XLCubed.Workbook() call to customize the appearance of the report.

var opts = { HorizontalScrollBar:false, VerticalScrollBar:true, SheetTabs:true, ContextMenus:false };var book = new XLCubed.Workbook(div, opts);

If you wish to load a different report, call book.Load() again on the same book variable. Don't create a second book in the same div.

Anaplan XL can impersonate a named user if required. To do this, call the API.

//Set up the user we want to run queries asvar logonOptions = { Username:"MyUsername", Domain:"MyDomain", Password:"MyPassword"}; XLCubed.Settings.Logon(logonOptions);

The Logon() function must be called after XLCubed.Settings.Init() and before book.Load().

If a report is published with web parameters, these can be set up through the API.

You can load a report with parameters set.

//create book as above...var params = { Date:"January 2010", Geography:"Europe" }; book.Load("MyFolder/MyReport.xml", params);

After a book has been loaded, you can update the parameters.

//book variable from elsewhere, the report is already loadedvar params = { Date:"March 2010", Geography:"America" }; book.ApplyParameters(params);

You can apply multiple values at once by passing an array.

//book variable from elsewhere, the report is already loadedvar params = { Geography:["America", "Europe"] }; book.ApplyParameters(params);

You can also retrieve the current values of the parameters.

//book variable from elsewhere, the report is already loadedvar params = book.GetParameters(); for(var param in params){ alert(param + " = " + params[param]);}

You can create a toolbar for your report.

Markup:

<div id="toolbar"></div>

Script:

//book already createdvar toolDiv = document.getElementById("toolbar");var toolbar = new XLCubed.WorkbookToolbar(toolDiv, book);

An Anaplan XL workbook will fire events, which you can attach to to customize your page and link reports together.

Binding to events uses the syntax:

//book already createdbook.Bind(eventName, eventHandlerFunction)

The eventHandlerFunction takes two arguments, an event object and a data object containing information about the event that fired.

function loadFluenceXL(){ //book already created book.Bind("load", loadHandler);}function loadHandler(e, data){ //we can get a reference to the book from here var b = data.workbook; alert("loaded");}

The events fired are:

An Anaplan XL workbook has a public API which you can call once a book has been loaded.

• cellInfo

This object has the cell value, and information on the tuple coordinates. A tuple axis has the hierarchies on the axis, and the members in an array.

For normal axes, the name will be axis+idx, where idx is the axis position. For example, 0 = Columns, 1 = Rows.

{ "value":object, "coordinates":[ {"axis":"where", "hierarchies":[ {"uniqueName":"hier1", "members":["mem1"]}, {"uniqeName":"hier2", "members":["mem2a", "mem2b"]} ]}, {"axis":"axis0", "hierarchies":[ {"uniqeName":"hier3", "members":["mem3"]} ]} ... ]}

If the Anaplan XL web site is hosted in a different domain to the containing website, then access to some elements is restricted by default. This typically shows up as an Access denied message after the report has loaded.

To enable correct access to the hosted site, you should add this line to your web.config.

<add key="LinkElementCrossOrigin" value="use-credentials"/>

And then this line after the call to XLCubed.Settings.Init();

XLCubed.Settings.LinkElementCrossOrigin = "use-credentials";

You can query the repository to get a list of the folders and files available on the server. To do this, you must reference a couple of JavaScript files.

Change the references to MyServerName to the name of the Anaplan XL website. For example, WebServer01/AnaplanXLWeb

Required CSS:

None

Required JavaScript:

<script type="text/javascript" src="http://MyServerName/js/JQuery/jquery-1.7.2.min.js"></script><script type="text/javascript" src="http://MyServerName/js/JQuery/jquery-ui-1.8.custom.min.js"></script><script type="text/javascript" src="http://MyServerName/js/Microsoft/MicrosoftAjax.js"></script> <script type="text/javascript" src="http://MyServerName/WebServices/RepositoryService.svc/js"></script><script type="text/javascript" src="http://MyServerName/js/XLCubed.min.js"></script>

Initialization of the repository is done via JavaScript, the simplest example is as follows:

<script>function loadFluenceXL(){ //Initialise Anaplan XL var xlcubedOptions = { BaseUrl:"http://MyServerName" }; XLCubed.Settings.Init(xlcubedOptions); //create a repository object var oRep = new XLCubed.Repository(); //and query the server. //This is asynchronous, so pass in a callback to handle the results oRep.GetRepository( function(oTopFolder) { alert(oTopFolder.folders.length); });}</script>

MyServerName must again be replaced with the actual Anaplan XL web site.

The oTopFolder object is an instance of the folder class, which itself contains file.

You can then iterate over the contents of the top-level folder to create your own UI, or do anything else required.

Folder

File

You can retrieve the names of the report parameters in JavaScript, for example:

<script>function loadFluenceXL(){ //Initialise Anaplan XL var xlcubedOptions = { BaseUrl:"http://MyServerName" }; XLCubed.Settings.Init(xlcubedOptions); //fill this in with a real path of a report var reportPath = "???"; //create a repository object var oRep = new XLCubed.Repository(); //and query the server. //This is asynchronous, so pass in a callback to handle the results oRep.GetReportParameters(reportPath, function(parameterNames) { alert(parameterNames.length); });}</script>

You can configure the HTML output of Anaplan XL web reports. This is configured on the Anaplan XL format sheet in Excel.

The area is in column Y, and is hidden by default. If you want to use this feature, you'll have to unhide the relevant columns.

Possible values are:

• FiltMemLabel
• FiltMem
• ColMemLabel
• ColPropLabel
• ColMem
• ColProp
• RowMemLabel
• RowPropLabel
• RowMem
• RowProp
• Data

Possible values are:

• WhereLabel
• WhereMem
• Header
• Data