Embedding with Tableau Server

Tableau Partner Education

2007 © Tableau Software – All rights reserved

Tableau Embedding and Branding

Russell Christopher
Sales Consultant – OEM / Channel


Agenda

• Embedding: URL or JavaScript?
• Embedding and Filtering: The Basics
• Embedding and Filtering via
Objects/JavaScript
• Fun with JavaScript
• But wait, there‟s more!


Demo – Frame/URL & Object Embedding

PowerPoint is Boring


Frames/URLs or Objects?

Thinking about which
technique to use takes
longer than using one


Frames/URLs

Pro Con
• Host application • “Manual” control
may not support only
JavaScript • Can‟t control load
• Very, very easy order


Object/JavaScript

Pro Con
• Tableau‟s • You might need
JavaScript API some JavaScript
• Control load order know-how
• Easier to eyeball • More verbose
• Additional “fun
stuff”


URL Embed Parameters

Building Blocks



• This parameter is required
• Hides top navigation area
• Allows VizQL to do

:embed authentication
• Valid value: yes
• URL Parameter Only

http://server/views/wb/sheet?:embed=yes



• Hides “Remember my
changes” option
• Valid value: no

:customViews

http://server/views/wb/sheet?:embed=yes&:customViews=no



• Hides “Share” option
• Valid value: yes,no

:display_share

http://server/views/wb/sheet?:embed=yes&:display_share=no


Embed Parameters

• Renders view as PDF or
Image (PNG)
• Valid values: pdf, png

:format • URL Parameter Only

http://server/views/wb/sheet?:embed=yes&:format=png


Embed Parameters

• Controls how external
hyperlinks in view are
opened:
• Valid values:
:linktarget • _blank
• _self

http://server/views/wb/sheet?:embed=yes&:linktarget=_blank


_blank vs. _self

_blank
Popup Blocker

_self



• Re-renders the view
• Use to get up-to-date data in
conjunction w/ :embed

:refresh • Values: yes, no
• URL Parameter Only

http://server/views/wb/sheet?:embed=yes&:refresh=yes



• Returns “Value” to it‟s
original state

:revert • Values:
• all : revert everything
• filters : revert filters
• sorts : reverts sorts
• axes : reverts axes
• shelves: revert shelves

http://server/views/wb/sheet?:embed=yes&:revert=axes



• Display or hide tabs
• Values: yes, no

:tabs

http://server/views/wb/sheet?:embed=yes&:tabs=no



• Display or hide the toolbar
• Values: yes, no, top

:toolbar

http://server/views/wb/sheet?:embed=yes&:toolbar=no



The Basics:

“Show me sheet foo from
workbook bar with no
toolbar or tabs”



http://./views/bar/foo?
:embed=yes&:toolbar=no&
:tabs=no*
*Is this the worst use of color you‟ve ever seen, or what?



The Basics:

“Show me sheet foo from
workbook bar rendered as an
image with un-cached data”



http://./views/bar/foo?
:embed=yes&:format=png&
:refresh=yes


Filtering on the URL

Dimension / Parameter
=Value[s]
http://./views/wb/sheet?:embed=yes&Region=North

http://./views/wb/sheet?:embed=yes&Region=North,West

http://./views/wb/sheet?:embed=yes&Product=3&Color=Red



Don‟t forget to encode as
necessary
http://./views/wb/sheet?:embed=yes&Name=Bill%20Gates


Filtering on the URL - Measures

No Ranges
No Greater Than
No Less Than
http://./views/wb/sheet?:embed=yes&Sales=300


Filtering on the URL - Measures

Consider Parameters in a
Calculated Fields as a filter
http://./views/wb/sheet?:embed=yes&s1=300&s2=1000

[Sales] >= [Parameters].[s1] AND
[Sales] <= [Parameters].[s2]


Filtering on the URL – Dates / Times

Must be sumbitted as:
yyyy-mm-dd hh:mm:ss
http://./views/wb/sheet?:embed=yes&Date=2011-02-17

/views/wb/sheet?:embed=yes&Date=2011-02-17%2013:02:05

Must be 24-hour clock
format


Save you some
time reminder:
Don‟t forget the : in front of
your parameters

Object Parameters

Building Blocks


Object Parameters

• (Generally) Required for
Object Parameters

host_url • Your server name
• Object Parameter only

<object…>
<parameter name= “filter”
value=“http://foo.com” />
</object>


Object Parameters

• Required for Object
Parameters

site_root • Defines name of site to
communicate with
• Default site value = zero
length string
<object…>
<parameter name= “site_root” value=“” />
</object>


Object Parameters

• Required for Object
Parameters

name • Defines workbook & sheet
name to be viewed
• Can point to a custom view
(username@domain/[viewna
me]
<object…>
<parameter name= “name”
value=“WorkbookName/SheetName” />
</object>


Object Parameters

• Controls embedded <object>
view rendering order when

load-order multiple <objects> exist in
the same page
• Valid values – number

<object…>
<parameter name= “load-order” value=“4” />
</object>


Object Parameters

• Shows or hides tabs
• Valid values: yes, no

tabs

<object…>
<parameter name= “tabs” value=“yes” />
</object>


Object Parameters

• Show or hide the toolbar
• Valid values: yes, no, top

toolbar

<object…>
<parameter name= “toolbar” value=“no” />
</object>


What does this do?
<html>
<head/>
<body>
<script type="text/javascript"
src="http://public.tableausoftware.com/javascripts/api/viz_v1.js"></script>
<div class="tableauPlaceholder" id="tableauPlaceholder" style="width:654px;
height:1469px; top: 0px; left: 0px; width: 100%; margin-left: 76px;">
<object class="tableauViz" width="654" height="1469">
<param name="host_url" value="http://public.tableausoftware.com/"/>
<param name="site_root" value="" />
<param name="name" value="AnalyticsIncJavaScript/AnalyticsInc" />
<param name="tabs" value="no" />
<param name="toolbar" value=“yes" />
</object>
</div>
</body>
</html>

Object Parameters

Basic +


Object Parameters

• Hides “Remember my
changes” option

customViews • Valid value: no

<object…>
<parameter name= “customViews” value=“no” />
</object>


Object Parameters

• Hides “Share” option
• Valid value: yes, no

display_share

<object…>
<parameter name= “display_share” value=“no” />
</object>


Object Parameters

• Controls how external
hyperlinks in view are

linktarget opened
• Valid values:
• _blank
• _self

<object…>
<parameter name= “linktarget”
value=“_self” />
</object>


Object Parameters

• Specifies the trusted ticket to
present to Tableau Server

ticket • Cannot be used with path
parameter
• Must be used with name
parameter
• Valid value: a number
<object…>
<parameter name= “ticket” value=“987651124” />
</object>


Object Parameters

• Only to be use with trusted
authentication

path • Overrides name parameter
• Can‟t be used with ticket
parameter
• Can also include site
information
<object…>
<parameter name= “path”
value=“trusted/123456789/views/wb/sheet”/>
</object>


Object Parameters

• Filters view
• Filter by string, numbers,

filter datetime, measure values

<object…>
<parameter name= “filter” value=“Region=East,West” />
</object>


Filtering an Object
<html>
<head/>
<body>
<script type="text/javascript" src="http://public.tableausoftware.com/javascripts/api/viz_v1.js"></script>
<div class="tableauPlaceholder" id="tableauPlaceholder" style="width:654px; height:1469px; top: 0px; left:
0px; width: 100%; margin-left: 76px;">
<param name="toolbar" value="no" />
<param name="filter" value ="ClientName=Big%20Air%20Domestic,Big%20Air%20International"/>
</object>
</div>
</body>
</html>


Filtering an Object - Measures

Consider Parameters in a
Calculated Fields as a filter
http://./views/wb/sheet?:embed=yes&s1=300&s2=1000

[Sales] >= [Parameters].[s1] AND
[Sales] <= [Parameters].[s2]


Filtering an Object - Measures
<html>
<head/>
<body>
<param name="filter" value =“s1=300"/>
<param name="filter" value =“s2=310"/>
</object>
</div>
</body>
</html>


Filtering an Object – Date / Time
<html>
<head/>
<body>
<param name="filter" value ="BeginDate=2009-01-01"/>
<param name="filter" value ="EndDate=2009-05-01%2015:00:00"/>
</object>
</div>
</body>
</html> Must be 24-hour clock format


JavaScript

JavaScript fun!!!


JavaScript and the URL

Use JavaScript to re-write
the URL on your iframe‟s
.Location


<html>
<head/>

<body>
<script>

function HideToolbar()
{
window.f1.location="http://server/views/WB/S?:embed=y&:toolbar=no";
}

</script>

<div>
<input type="button" id="Button1" value="Click to hide Toolbar" onclick="HideToolbar()" />
</div>

<iframe name=“f1”
src="http://server/views/WB/S?:embed=y">
</iframe>

</body>

</html>Tableau Software – All rights reserved
2007 ©

<html>
<head/>

<body>
<script>

function FilterMe()
{
window.f1.location="http://server/views/WB/S?:embed=y&ClientName=EuroRail";
}

</script>

<div>
<input type="button" id="Button1" value="Click to hide Toolbar" onclick=“FilterMe()" />
</div>

<iframe name=“f1”
src="http://server/views/WB/S?:embed=y">
</iframe>

</body>

2007 ©

This isn’t a JavaScript class, but….

Cross-frame scripting
operations are restricted by
“Same Origin Policy”


JavaScript and the Object

Use the JavaScript API to
manipulate the viz



refresh()
revert()
show()
hide()
filter()

<html>
<head/>
<body>
<script type="text/javascript" src="http://tableau.russellchristopher.org/javascripts/api/viz_v1.js"></script>
<div>
<input type="button" id="Button1" value="Show Viz" onclick="ShowHideViz('Show')" />
<input type="button" id="Button2" value="Hide Viz" onclick="ShowHideViz('Hide')" />
</div>
<div class="tableauPlaceholder" id="tableauPlaceholder" style="width:654px; height:1469px; top: 0px; left: 0px; width: 100%; margin-left: 76px;">
.
</div>
<script>
function ShowHideViz( WhatToDo ){
var viz = window.tableau.vizs[0];
if( WhatToDo ==="Show")
{
viz.show();
}
else
{
viz.hide();
}
}
</script>
</body>
</html>

<html>
<head/>
<body>
<div>
<input type="button" id="Button1" value=“Refresh" onclick="RefreshRevert(„Refresh')" />
<input type="button" id="Button2" value=“Revert" onclick=“RefreshRevert(„Revert')" />
</div>
.
</div>
<script>
function RefreshRevert( WhatToDo ){
if( WhatToDo ===“Refresh")
{
viz.refresh();
}
else
{
viz.revert();
}
}
</script>
</body>
2007 ©

<html>
<head/>
<body>
<div>

<input type="button" id="Button1" value="EuroRail Only" onclick="FilterStuff('EuroRail')" />
<input type="button" id="Button2" value="All Railroads" onclick="FilterStuff('All')" />
</div>
.
</div>
<script>
function FilterStuff ( WhatToDo ){
var myFilter = {}; //same as "new Object()"
myFilter["Client_Name"] = []; //same as "new Array()"
if(WhatToDo==="EuroRail") {
myFilter["Client_Name"].push('EuroRail');
}
else
{
myFilter["Client_Name"].push('EuroRail');
myFilter["Client_Name"].push('US Rail');
}
viz.filter(myFilter);
}
</script>
</body>© Tableau Software – All rights reserved
2007
</html>

Other Goodness

Turn Share Off
Globally

tabadmin set vizqlserver.showshare false


Other Goodness

Turn
Download
Off
Globally
tabadmin set vizqlserver.showdownload false


Change Server Logo & Login Text:

Change
Logo &
Login Text

tabadmin customize name “Generic Company”
tabadmin customize logo “c:mylogo.gif”

Other Goodness - Undocumented

Additional object
parameters were built for
Tableau Public



Many of these work in
“normal” Tableau Server



Use at your own risk!



static_image
display_static_image
animate_transition
display_overlay
display_spinner


QA / Other?


Embedding with Tableau Server

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Embedding with Tableau Server

Similaire à Embedding with Tableau Server (20)

Dernier

Dernier (20)

Embedding with Tableau Server

Notes de l'éditeur