Anaplan XL Web におけるウェブ開発

Anaplan XL Reporting Web では、開発者が Anaplan XL レポートを独自のウェブ ページに埋め込むことができます。

必要なパラメーターを使用して、複数のレポートを一つのページに埋め込み、まとめてリンクすることができます。これにより、既存の公開済みワークブックからカスタム ページを作成できます。

このページでは、ウェブ API、レポートを埋め込むために必要な HTML と JavaScript について説明します。

次の URL 構文を使用して、公開されたレポートに直接リンクすることができます。

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

これには、特定の条件を渡すためのウェブ パラメーターも含めることができます。

Anaplan XL では Internet Explorer の「互換モード」をサポートしていません。IE でページを標準モードでレンダリングするようにするには、ページの上部に適切な doctype を配置する必要があります。 

埋め込まれた Anaplan XL レポートは、ページに含める必要があるさまざまな JavaScript ライブラリを参照します。

MyServerName への参照を Anaplan XL Web サイトの名前 (例: WebServer01/AnaplanXLWeb) に変更する必要があります。

必要な 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" />

必要な 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 レポートは div 要素に読み込まれるため、このスタイルでマークアップする必要があります。

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

id 属性は必須であり、ページ内で一意である必要があります。

div には、上記のようにインライン又は CSS 経由でスタイルの位置を設定する必要があります。相対的または絶対的である必要があります。

ワークブックの初期化は 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 は実際の Anaplan XL Web サイトに置き換える必要があります。

Load() 関数に渡される文字列は、Excel から公開された既存のレポートへのリポジトリ内のパスです。

必要に応じて、新しい XLCubed.Workbook() 呼び出しにパラメーターを渡して、レポートの見た目をカスタマイズできます。

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

別のレポートを読み込む場合は、同じ book 変数に対して book.Load() を再度呼び出します。同じ div 内に 2 番目の book を作成しないでください。

Anaplan XL は必要に応じて名前付きユーザーになりすますことができます。これを行うには API を呼び出します。

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

Logon() 関数は、XLCubed.Settings.Init() の後、book.Load() の前に呼び出す必要があります。

ウェブ パラメーターを使用してレポートが公開される場合、これらは API を通じて設定できます。

パラメーターを設定したレポートを読み込むことができます。

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

ブックを読み込んだ後、パラメーターを更新できます。

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

配列を渡すことで複数の値を一度に適用できます。

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

パラメーターの現在の値を取得することもできます。

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

レポート用のツールバーを作成できます。

マークアップ:

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

スクリプト:

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

Anaplan XL ワークブックによってイベントがトリガーされます。このイベントをアタッチしてページをカスタマイズし、レポートをまとめてリンクすることができます。

イベントへのバインドには次の構文を使用します。

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

eventHandlerFunction では、イベント オブジェクトと、トリガーされたイベントに関する情報を含むデータ オブジェクトの二つの引数を取ります。

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");}

トリガーされるイベントは以下のとおりです。

Anaplan XL ワークブックには、ブックが読み込まれたら呼び出すことができるパブリック API があります。

• cellInfo

このオブジェクトには、セルの値とタプルの座標に関する情報が含まれています。タプル軸には、軸上に階層があり、配列内にメンバーがあります。

通常の軸の場合、名前は axis+idx になります。ここで、idx は軸の位置です (例: 0 = 列、1 = 行)。

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

Anaplan XL Web サイトが、そのウェブサイトを含むものとは異なるドメインでホストされている場合、一部の要素へのアクセスはデフォルトで制限されます。これは通常、レポートが読み込まれた後に [Access denied]メッセージとして表示されます。

ホスト サイトへの正しいアクセスを有効にするには、次の行を web.config に追加する必要があります。

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

XLCubed.Settings.Init(); への呼び出しの後に次の行を追加します。

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

リポジトリに対してクエリを実行して、サーバー上で使用可能なフォルダーとファイルのリストを取得できます。これを行うには、いくつかの JavaScript ファイルを参照する必要があります。

MyServerName への参照を Anaplan XL Web サイトの名前に変更します (例: WebServer01/AnaplanXLWeb)。

必要な CSS:

なし

必要な 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>

リポジトリの初期化は JavaScript を介して行われます。最もシンプルな例は次のとおりです。

<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 を実際の Anaplan XL Web サイトに置き換える必要があります。

oTopFolder オブジェクトはフォルダー クラスのインスタンスであり、それ自体にファイルが含まれています。

その後、最上位フォルダーの内容を反復処理して独自の UI を作成したり、その他の必要な操作を実行したりできます。

フォルダー

ファイル

JavaScript 内のレポート パラメーターの名前を取得できます。次に例を示します。

<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>

Anaplan XL Web レポートの HTML 出力を構成できます。これは Excel の Anaplan XL 書式シートで構成します。

この領域は列 Y にあり、デフォルトでは非表示になっています。この機能を使用したい場合は、関連する列の非表示を解除する必要があります。

次の値があります。

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

次の値があります。

• WhereLabel
• WhereMem
• Header
• Data