...
| Anchor | ||||
|---|---|---|---|---|
|
| Table of Contents | ||
|---|---|---|
|
Overview
Enabling the Javascript API
The Javascript API is enabled on all new installations of Yellowfin, form version 5.1 onwards. If you have upgraded from an older version, contact Yellowfin Support for instructions on enabling the API for your installation.
Using the Javascript API
There are two ways to load a report or dashboard on your HTML page. The simple method involves including a single Javascript URL. The more advanced method allows you to customise the report or dashboard display and load content on demand from other scripts.
Basic Use
Include a script tag in your HTML page that points to your Yellowfin server. The report or dashboard identifier must be included as a parameter on the URL. For example:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<!-- report example -->
<script type="text/javascript" src="http://reporting.example.com/JsAPI?reportUUID=e5e5aaf3-c3b8-4f9b-8280-e21e4d848e63"></script>
<!-- dashboard example -->
<script type="text/javascript" src="http://reporting.example.com/JsAPI?dashUUID=3b0b6c9a-9dfb-41f0-b85a-eb17bb8aeeb9"></script>
{code}
|
The
...
URL
...
to
...
the
...
API
...
is
...
based
...
on
...
the
...
URL
...
used
...
to
...
access
...
the
...
Yellowfin
...
front-end.
...
For
...
example,
...
if
...
users
...
access
...
Yellowfin
...
through
...
*http://reporting.example.com:8080/*
...
then
...
the
...
Javascript
...
API
...
URL
...
will
...
be
...
*http://reporting.example.com/8080/JsAPI*.
...
The
...
URL
...
will
...
be
...
accessed
...
by
...
the
...
end
...
user's
...
browser,
...
so
...
it
...
must
...
be
...
accessible
...
from
...
anywhere
...
that
...
end
...
users
...
will
...
user
...
your
...
page
...
(internal
...
network,
...
external,
...
via
...
VPN,
...
etc.).
...
To
...
ensure
...
the
...
server
...
supports
...
the
...
version
...
of
...
the
...
API
...
your
...
page
...
is
...
written
...
for,
...
you
...
can
...
use
...
the
...
version
...
parameter.
...
If
...
the
...
server
...
supports
...
multiple
...
versions
...
of
...
the
...
API,
...
this
...
parameter
...
determines
...
which
...
version
...
the
...
server
...
will
...
use.
...
If
...
the
...
server
...
does
...
not
...
support
...
the
...
requested
...
version,
...
an
...
error
...
message
...
will
...
be
...
displayed.
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script src="http://localhost/JsAPI?version=2.1&reportUUID=e5e5aaf3-c3b8-4f9b-8280-e21e4d848e63" type="text/javascript"></script>
{code}
|
If
...
the
...
version
...
parameter
...
is
...
not
...
included,
...
the
...
server
...
will
...
use
...
its
...
current
...
version.
...
See Version History for more information.
Report URL Parameters
A report is identified by the reportUUID parameter. For backwards compatibility, it may alternatively be identified by the reportId or wsName parameters. Additional parameters may also be added to the URL, which will alter the way the report is displayed. The available parameters are:
| Expand | ||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||
|
Examples
This example includes a report and sets the dimensions of the report:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script src="http://localhost/JsAPI?reportUUID=e5e5aaf3-c3b8-4f9b-8280-e21e4d848e63&width=500&height=350" type="text/javascript"></script>
{code}
|
This
...
example
...
uses
...
an
...
existing
...
element
...
to
...
display
...
the
...
report
...
in,
...
and
...
passes
...
the
...
user
...
credentials:
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<div id="myReportDiv" style="background: blue; width: 500px; height: 350px">
<script src="http://localhost/JsAPI?reportUUID=e5e5aaf3-c3b8-4f9b-8280-e21e4d848e63&elementId=myReportDiv&username=admin@yellowfin.com.au&password=test" type="text/javascript"></script>
</div>
{code}
|
This
...
example
...
uses
...
an
...
existing
...
element
...
to
...
display
...
the
...
report
...
in,
...
overrides
...
the
...
report
...
dimensions,
...
and
...
changes
...
some
...
of
...
the
...
initial
...
display
...
options:
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<div id="myReportDiv" style="background: blue; width: 500px; height: 350px">
<script src="http://localhost/JsAPI?reportUUID=e5e5aaf3-c3b8-4f9b-8280-e21e4d848e63&elementId=myReportDiv&width=400&height=300&showFilters=false&display=table" type="text/javascript"></script>
</div>
{code}
h2. Dashboard URL Parameters
{styleclass: Class=topLink}[top|#top]{styleclass}
A dashboard is identified by the {{dashUUID}} parameter. Additional parameters may also be added to the URL, which will alter the way the dashboard is displayed. The available parameters are:
h3. {expand:title=Expand here...}
||Parameter||Description||
|{{dashUUID}}|Must be present.
The unique ID identifying the dashboard to load.|
|{{version}}|The API version to use. If the server does not support the requested version, an error message will be displayed. If this is not included, the server will use its current API version.|
|{{elementId}}|The id of the html element in which to load the dashboard. If this is not included, a container element will be created at the point that the script tag is included.|
|{{showTitle}}|Default: {{true}}
Set to {{false}} to omit the title bar at the top of the report. All interactive buttons included in the title bar will also be omitted.|
|{{showInfo}}|Default: {{true}}
Set to {{false}} to omit the Info button in the title bar.|
|{{showFilters}}|Default: {{true}}
Set to {{false}} to omit the Filters button in the title bar. Any analytical filters will not be displayed.|
|{{showExport}}|Default: {{true}}
Set to {{false}} to omit the export button in the title bar.|
|{{height}}|Set this to a numeric value to override the dashboard height.
If not specified, the dashboard height will be set large enough to show all reports without scrolling.|
|{{width}}|Set this to a numeric value to override the dashboard width.
Set this to {{auto}} to expand to fill the parent element.
If not specified, the dashboard width will be set based on the logged-in user's preference setting, or the system configuration setting.|
|{{username}}|Set this along with the {{password}} parameter to authenticate as a particular user when loading the dashboard. This avoids the need for users to enter their login details before viewing restricted dashboards.|
|{{password}}|Set this along with the {{username}} parameter to authenticate as a particular user when loading the dashboard.|
|{{token}}|Use a web service token to authenticate a user when loading the dashboard.|
{expand}
h3. Examples
This example includes a dashboard, and sets the dimensions of the dashboard:
{code:html} |
Dashboard URL Parameters
A dashboard is identified by the dashUUID parameter. Additional parameters may also be added to the URL, which will alter the way the dashboard is displayed. The available parameters are:
| Expand | ||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||
|
Examples
This example includes a dashboard, and sets the dimensions of the dashboard:
| Code Block | ||||
|---|---|---|---|---|
| ||||
<script src="http://localhost/JsAPI?dashUUID=3b0b6c9a-9dfb-41f0-b85a-eb17bb8aeeb9&width=auto&height=500" type="text/javascript"></script>
{code}
|
This
...
example
...
uses
...
an
...
existing
...
element
...
to
...
display
...
the
...
report
...
in
...
and
...
passes
...
user
...
credentials:
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<div id="myDashDiv" style="background: blue; width: 900px; height: 500px">
<script src="http://localhost/JsAPI?dashUUID=3b0b6c9a-9dfb-41f0-b85a-eb17bb8aeeb9&elementId=myDashDiv&username=admin@yellowfin.com.au&password=test" type="text/javascript"></script>
</div>
{code}
|
This
...
example
...
uses
...
an
...
existing
...
element
...
to
...
display
...
the
...
report
...
in,
...
overrides
...
the
...
report
...
dimensions,
...
and
...
changes
...
some
...
of
...
the
...
initial
...
display
...
options:
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<div id="myDashDiv" style="background: blue; width: 900px; height: 500px">
<script src="http://localhost/JsAPI?dashUUID=3b0b6c9a-9dfb-41f0-b85a-eb17bb8aeeb9&elementId=myDashDiv&width=800&height=400&showFilters=false" type="text/javascript"></script>
</div>
{code}
\\
\\
{horizontalrule}
{styleclass: Class=topLink}[top|#top]{styleclass} |