nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

JSAPI dashboard in edit mode

turbo_di

<p>Hi</p>
<p> </p>
<p>I have a dashboard, which is integrated in my single page application with JSAPI, and I would like to make it editable (to give users ability to construct adhoc reports based on provided data objects). I didn't find any appropriate methods in <a data-ipb='nomediaparse' href='http://developer.actuate.com/be/documentation/JAVADOCS/JSAPI-iHub31/symbols/actuate.Dashboard.html'>actuate.Dashboard</a> class.</p>
<p> </p>
<p>Is it possible with JSAPI or should I use iframe for this?</p>
<p>Thanks in advance!</p>

Find more posts tagged with

Comments

Clement Wong

<p>Yes, with JSAPI, you can set dashboard.setIsDesigner(true); to edit mode. Otherwise, set dashboard.setIsDesigner(false); to read-only.</p>
<pre class="_prettyXprint _lang-">
<script type="text/javascript" src="http://ihub:8700/iportal/jsapi"></script>
...

<body onload="acload()">
<div id="dashboardContainer">

<script defer="defer" type="text/javascript" language="JavaScript">
var dashboard;
function acload() {
actuate.load("dashboard");
var reqOps = new actuate.RequestOptions( );
reqOps.setRepositoryType(actuate.RequestOptions.REPOSITORY_ENCYCLOPEDIA);
reqOps.setVolume( "Default Volume" );
actuate.initialize("http://ihub:8700/iportal/",reqOps,null,null, afterInit );
}

function afterInit(){
var containerID = "dashboardContainer";
dashboard = new actuate.Dashboard(containerID);
dashboard.setIsDesigner(true);
dashboard.setDashboardName("/dashboards/foo.dashboard");
dashboard.submit();
}

</script>

...

</body>
</html>
</pre>

turbo_di

<p>Cool, that works!</p>
<p> </p>
<p>However I got the following in browser console:</p>
<pre class="_prettyXprint _lang-js">
Access to Font at 'http://127.0.0.1:8700/iportal/dashboard/fonts/yggdrasil/yggdrasil.ttf'
from origin 'http://localhost:1841' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:1841' is therefore not allowed access.
</pre>
<p>Is there a way to configure CORS for ihub resources?</p>
<p> </p>
<p>Thank you very much</p>

Clement Wong

<p>You can change the setting in WEB-INF/web.xml (of Information Console):</p>
<pre class="_prettyXprint _lang-">
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

</pre>
<p>A restart is needed.</p>

delee

<p>What would be the JSAPI to view a data object, using the Data Analyzer? </p>

Clement Wong

<p>Example to using Interactive Crosstabs with a materialized Data Object (.DATA):</p>
<pre class="_prettyXprint _lang-">

<!DOCTYPE html>

<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Interactive Crosstab JSAPI Page</title>
<script type="text/javascript" src="http://iHub:8700/iportal/jsapi"></script>
</head>

<body onload="acload()">

<div id="xtabContainer">

<script defer="defer" type="text/javascript" language="JavaScript">

var dataAnalyzer;

function acload() {
actuate.load("xtabAnalyzer");
var reqOps = new actuate.RequestOptions();
reqOps.setRepositoryType(actuate.RequestOptions.REPOSITORY_ENCYCLOPEDIA);
reqOps.setVolume( "Default Volume" );
actuate.initialize("http://iHub:8700/iportal/",reqOps, null, null, loadAnalyzer );
}

function loadAnalyzer(){
var pathName = "/Resources/Data Objects/MyDataObject.data";

dataAnalyzer = new actuate.XTabAnalyzer('xtabContainer');
dataAnalyzer.setWidth(1000);
dataAnalyzer.setHeight(700);
dataAnalyzer.setDatamartFile(pathName);
dataAnalyzer.submit();
}
</script>

</body>
</html>

</pre>