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

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Embedding with Tableau Server

Similar to Embedding with Tableau Server (20)

Recently uploaded

Recently uploaded (20)

Embedding with Tableau Server

Editor's Notes