Embedding Vizpad

Vizpads/Dashboards have tabs associated with them and Individual Vizes are associated with tabs. Each Vizpad can have 10 tabs at the maximum with each having 25 Vizes maximum. 

The same Vizpadlist API will return the vizpads and each of them has tabs information as shown below:

Sample Embedding URL:

http://domain/dashboard/vizpadId/tabId/?access=read&datasetId=datasetId&jwt=userToken&hideDownload=false&hideFiltersApplied=false&hideTabs=false

The given vizpad will be loaded with the current tab as the tabId specified in the embedding URL.hideDownload = Option to show or hide the download iconhideTabs = Option to hide the bottom pane where all the tabs are shown. User can switch to other tabs from this display

Post Messages 

This allows user to perform certain tasks through post messages

We use window.postmessage for the communication between the Tellius(embedded app) and the embedding App.

The communication can be both ways, one from embedding app(i.e CustomerX) to embedded app(i.e Tellius) and vice versa.

1. For the embedding app to communicate to the embedded app please refer below

2. For the Embedded app to communicate to the embedding app, .Embedding app needs to have an eventLister to receive this message. For every Point click in the chart, Area selection or highlighting the chart Tellius will post a message to the embedding app.

Connect

1. To connect to Tellius app, embedding app (in this case CustomerX) need to Post a message called INITIALIZE after the app is loaded.

2. Tellius app will respond back with a message called TELLIUS_INITIALIZED . This is useful to  Validate that the received message is from Tellius and communicate further.

3. Once TELLIUS_INITIALIZED is received, filters can be applied.

Example:

var telliusFrame ;   

document.querySelector("iframe").addEventListener("load", function() {       

telliusFrame = document.getElementsByTagName("iframe")[0].contentWindow;

        telliusFrame.postMessage('INITIALIZE', "*");

       })       

function receiveMessage(event) {       

if(event.data === 'TELLIUS_INITIALIZED') {           

telliusFrame.postMessage({             

  actionType: "getVizpadFiltersApplied",   

        }, "*");     

  }    }

window.addEventListener("message", receiveMessage, false)

Apply Filters

Following types of filters are supported:

  1. Local Filters -  Filters applied on the viz level
  2. Global filters - Filters applied on the vizpad level (tab level)

To apply a local Filter we need to define the props in following structure:

{actionType: "vizFilter", // actionType   

filters: [{ 

      vizId: "0568aff9-d059-458b-80ac-989cba5f1c34", //id of the viz to apply as local filter   

    value: "10000",     

  column: "Sales",   

    operator: ">="   

}]

}

To apply a global Filter at tab level, we need to define the props in following structure:

{ actionType: "vizpadFilter",

filters: [{    

value: "Same",    

column: "Ship_Mode",    

operator: "Does not contain" }],

      allTabs: false // decides if the filter has to be added to current active tab or all the tabs of the vizpad

}

Operators Supported for Normal filters (measures/dimensions)

S No.

Filter Name

Filter Operator

1

Less than

<

2

Less than or Equal to

<=

3

Greater than

> 

4

Greater than or Equal to

>=

5

Equal to

=

6

Between

>= & <=

7

In

in

8

Not in

Not in

9

Does not Equal

!=

10

Contains

like

11

Doesn’t contain

not like

12

Starts with

like

13

End with

like

14

Doesn’t start with

not like

** Between operator: two filters will be required to support the Between operator.For usage refer example below

{ actionType: "vizFilter",

filters: [{

    vizId: "7fcae9ae-9101-4c82-b354-71c36b9d7c11",    

value: "900",  

  column: "Shipping_Cost",    

operator: ">=",

}, {  

  vizId: "7fcae9ae-9101-4c82-b354-71c36b9d7c11",  

  value: "1200",    

column: "Shipping_Cost",  

  operator: "<="

}]

}

Operators for Date/Time Columns

S No.

Filter Name

Filter Operator

1

Today

today

2

Yesterday

yesterday

3

Last 5 Days

last 5 days

4

Last 7 Days

last 7 days

5

Last 15 Days

last 15 days

6

Last 30 Days

last 30 days

7

Last week

last week

8

Last month

last month

9

This month

this month

10

Last 3 months

last 3 months

11

Last 6 months

last 6 months

12

This year

this year

13

Last year

Last year

14

Last 3 years

last 3 years

15

Last 6 years

last 6 years

16

Custom Range

custom

** Custom Range: refer example below  to see how we can apply custom range

{ actionType: "vizFilter",

filters: [{    

value: {  

      start: "2014-02-18T00:00:00Z",  

      end: "2018-02-18T00:00:00Z"  

  },  

  column: "Ship_Date",    

filterKind: "vizTimelineFilter",  

  vizId: "7fcae9ae-9101-4c82-b354-71c36b9d7c11",

}]

}

Get Filters

Following actions are supported

actionType

comments

Example

getAllFiltersApplied

It returns the list of all filters applied

telliusFrame.postMessage({               

actionType: "getAllFiltersApplied"   

  }, "*");

getVizpadFiltersApplied

It returns the list of all filters applied at vizpad level

telliusFrame.postMessage({         

      actionType: "getVizpadFiltersApplied"   

        }, "*");

getVizFiltersApplied

It returns the list of all filters applied at viz level

telliusFrame.postMessage({         

      actionType: "getVizFiltersApplied"     

      }, "*");

Apply and Get Resolution

 To get the resolution applied on the vizpad level, use the following structure:

telliusFrame.postMessage({               

actionType: "getResolutionApplied"     

      }, "*");

To apply the resolution on the viz or vizpad level, use the following structure. 

If applied on vizpad level, all the date columns used in all of the vizes will use the resolution as given in request. 

telliusFrame.postMessage({   

actionType: "resolution",    resolution: "monthly",

}, "*");

If on viz level, all the date columns used in the particular viz will follow the resolution given in the request

telliusFrame.postMessage({   

actionType: "resolution",   

vizId: "97b7c4e9-fe07-48cb-87ab-9118ea2556ed",   

resolution: "monthly",

}, "*");

Resolutions supported:

S No.

Filter Name

Filter Operator

1

Hourly

hourly

2

Daily

daily

3

Weekly

weekly

4

Monthly

monthly

5

Quarterly

quarterly

6

Yearly

yearly

Remove Filters

To remove filters we need:

  1. actionType
  2. Id of the filter
  3. vizId, in case of Viz Filter

Below are some examples to remove filters:

  1. To remove all Viz Filters

telliusFrame.postMessage({   

actionType: "removeAllVizFilter"}

, "*");

  1. Remove applied filters from a Vizpad (will remove from all the tabs if that filter exists in other tabs)

telliusFrame.postMessage({ 

  actionType: "removeVizpadFilter",   

id: "advancedFilter_idD_5j7kiov0e",

}, "*");

  1. Remove applied filters from a Viz 

telliusFrame.postMessage({   

actionType: "removeVizFilter",   

vizId: "f086db5c-e824-4bce-a1ec-07d005d8196f", 

  id: "advancedFilter_idD_maqkb30lh",

}, "*");

Get Columns in the Business View

To get List of columns as a part of the window message, we need to set actionType as getBusinessViewColumns.  

Ex:

{    actionType: "getBusinessViewColumns"}

Embedding app will receive columns info as follow:

{ columns: ["List of columns info"],

columnNames: ["list of columnNames"],

actionType: "BVCOLUMNS",

}

Drill

We can Drill down by:

  1. Column Name
  2. Hierarchy

To drill by column use following structure:

telliusFrame.postMessage({   

actionType: "drillByColumn",   

vizId: "0d4abe5e-0758-4bdd-a71c-14e5f9d9a2b0", 

  drillByColumn: "Gender", 

  filters: [{   

    value: "Desktop",     

  column: "Device_Type",   

    operator: '='   

},    {   

    value: "Direct",   

    column: "Source",     

  operator: '='   

}]

}, "*");

To drill by hierarchy, use following structure:

telliusFrame.postMessage({ 

  actionType: "drillByHierarchy",   

vizId: "0d4abe5e-0758-4bdd-a71c-14e5f9d9a2b0", 

  drillByColumns: ["county_name", "state_name"], 

  filters: [{     

  value: "Desktop",     

  column: "Device_Type",     

  operator: '='   

},    {   

    value: "Direct",     

  column: "Source",     

  operator: '='    }]

}, "*");

Edit and Save Vizpads

  1. To enable Edit, we have added the below snippet to support through postmessage. This will allow the user to edit the vizpad.The default cancel button has been removed when the vizpad is accessed through a post message. `enableEditModeForWindowComm` 

telliusFrame.postMessage({     

          actionType: "enableEditModeForWindowComm"       

    }, "*")

  1. To enable Save, we have added the below snippet to  support through postmessage. This will allow users to save a vizpad to the existing project.
  2. When you save the vizpad using the below post message `saveVizpadForWindowComm`, The vizpad will not change its state to the view mode.I will still be retained in the edit mode after save until changed from the post message request  to  enter view mode. However , the user will be notified with a success message in the top banner of vizpad upon saving the vizpad. Moreover, there will be a window communication message with an actionType “VIZPAD_SAVED” will be sent so that the embedding application gets the successcallback. A similar message will be passed for a failure condition as well with an actionType “VIZPAD_SAVED_FAILED”.

telliusFrame.postMessage({       

        actionType: "saveVizpadForWindowComm"     

      }, "*")

Did we help you?

Contact