Interpolating variables in SKYUX

Szymon Zaleski

We are currently exploring embedding Tableau dashboards built on our internal data warehouse in SKY Add-ins. Technically it's fairly easy to achieve that by filtering a specific dashboard by record ID. Unfortunately it looks like there is a problem with interpolation of variables when using embedded object. Example:

This works:




However, when {{ recordId }} is used in <param, it does not work.





{{ recordId }} is already available, because it shows in the header, however it's not being passed to param.


My guess is, it has something to do with <param> being nested within <object> tag and interpolation not working in SKYUX/Angular, but I don't know for sure. Has anyone ever encountered a similar issue? Any help appreciated


Szymon

Chris Rodgers

Hello Szymon,


I would also be taking a guess here since I'm not familiar with tableauViz, but I have a similar hunch to yours. I'm guessing it's a timing issue.


You could try placing an `*ngIf` on the div prior to your tableauViz so it only gets rendered once your recordId has been set. If recordId is undefined until your add-in is fully loaded, maybe that's as easy as `<div *ngIf="recordId">`. Again, I'm not sure what the behavior of that tableauViz object is, so I might be completely off, but it could be something quick to try.

Szymon Zaleski

Chris,


Thanks for the suggestion. I tried *ngIf before


and it produced this, even with directly putting 284 instead of {{ recordId }}:



The object wasn't rendered at all, so it's like it has to be created right away or it's not created at all.

TableauViz is, I believe, a standard Tableau API defined in this case in an external JS file.


For what I could read from the script, tableauViz acts like a web document itself, it creates an iframe within the object and displays the dashboard there.


In theory in this case there's no need for SKYUX, so maybe it would make more sense to skip it entirely and generate the add-in as a simple PHP/ASP web page with the tableauViz call generated server side. Nevertheless the idea of having a Tableau connector app where you can display any dashboard feeding from an external data warehouse and filter it based on the CRM context (recordId) sounds pretty awesome.

Chris Rodgers

Hey Szymon,


Sorry, I'm completely out of my element when it comes to Tableau. Is the following an alternate way of using the Tableau JS APIs to create the same visualization or something entirely different?

https://help.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api_sample_basic_embed.htm


Seems like that would let you load the visualization when your tile/add-in is ready.


I only found that page because a google search sent me to the following page when I searched for changing Tableau Viz parameters via the API (possibly another option if you need to change the visualization after it loads):

https://help.tableau.com/current/api/js_api/en-us/JavaScriptAPI/js_api_sample_select_marks.htm


Anyway, I could be completely off base (probably!).


Alternatively sure, while SKYUX is intended to help your add-in adopt the same user experience as the Blackbaud product it resides in, it is not a requirement. So, if you can achieve the same result (with a UX that is complimentary to the Blackbaud product your add-in resides in), then that is certainly an option.

Szymon Zaleski

Hey Chris,


thanks for the links. I actually found the same documentation and rewrote the script to use the API directly, rather than the viz object. It's much cleaner and allows a much better control over the displaying the dashboards the way we want to display them. Folks at Fred Hutch are very excited about these capabilities and we will definitely be using it a lot more moving forward. Being able to display dashboards like this one directly on the donor's record is a game changer.



Thanks for all your help!