New Topic
CommunityTopicQuestionIntegration
Following
photo
Deepak Chaganti
Yellowfin Support Team
Assigned
Properties
Category Integration
Product Version 9.0

Applying Filters to Embedded Dashboard in Cross-Origin iframe

Jaehyuk Lee shared this question 4 days ago
Awaiting Reply

I am integrating a Yellowfin dashboard into our application using an iframe and SSO authentication. I need to dynamically apply filters to the dashboard based on user context in our application.

Current Implementation:


  • Using the "Create an SSO login token without a valid access token" endpoint for authentication
  • Dashboard is loaded in an iframe using the login token
  • Need to filter dashboard content based on a Case ID from our application

Attempted Solutions:

  1. Adding filter during login token generation: Tried using the "FILTER" parameter in the login token generation endpoint Found this only works with "ENTRY=VIEWREPORT", but we need "ENTRY=VIEWDASHBOARD" Documentation reference: https://developers.yellowfinbi.com/dev/api-docs/current/#operation/createLoginTokenRPC
  2. Post-login navigation to filtered URL:
  3. Attempted to navigate the iframe to the dashboard URL with filter parameters after successful login
  4. URL format: https://yellowfin-staging.efraudservices.com/RunDashboard.i4?dashUUID=492722e1-a265-4d8e-80b0-f59718a3a118&filter24b29b22-af57-4b57-8c34-54b1646d18f7=test%2020250102
  5. This approach loses the authenticated session within the iframe

Questions:

  1. What is the recommended approach for applying filters to an embedded dashboard in a cross-origin iframe scenario?
  2. Is there a way to include dashboard filters in the initial SSO login token when using ENTRY=VIEWDASHBOARD?
  3. Does Yellowfin provide any JavaScript API or postMessage interface for cross-origin communication to apply filters?
  4. If none of the above are possible, what alternative methods would you recommend for achieving dynamic filtering in an embedded dashboard?

Files: info.jsp.html
1 The same question

Replies (3)

photo
1
Deepak Chaganti ● 2 days ago

Hello Jaehyuk,

My name is Deepak Chaganti from the Yellowfin Technical Support Team. We have received your support request, and I will be your primary contact on the following ticket:

Ticket Number: #31818
Case Title: Applying Filters to Embedded Dashboard in Cross-Origin iframe


I think we can try passing the filter values and the SSO token to the iFrame src URL.

1. Create SSO token including any additional parameters like ENTRY=VIEWDASHBOARD and DASHBOARDUUID=<dashboard-uuid>: https://developers.yellowfinbi.com/dev/api-docs/current/#operation/createLoginTokenRPC

2. Prepare the Embed link including filters. Filters can be specified using the filter[filterUUID]=value format in the URL. If you have multiple values for a filter, you can separate them using pipes (|).

3. Include the SSO token in the URL ie., The URL for the iframe should include the SSO token and the filter parameters.

For example:
<iframe src="http://<yellowfin-server-address>/JsAPI/v3?dashUUID=<dashboard-uuid>&filter[<filterUUID>]=value1|value2&LoginWebserviceId=<sso-token>" width="800" height="600"></iframe>

Please let me know if that helps.


Sincerely,

Deepak Chaganti

Yellowfin Technical Support Engineer

Reply
photo
1
Jaehyuk Lee ● 17 hours ago

Thank you for your previous response regarding applying filters to an embedded dashboard. I've attempted to implement the suggested solution but encountered issues that need clarification.



Current Implementation Status:

  1. Successfully generating SSO login token
  2. Successfully embedding dashboard using /logon.i4 endpoint
  3. Need to apply Case ID filter to the dashboard


Recent Attempts Based on Support Response:

  1. First Attempt - Direct URL Approach: Changed iframe src from:
    https://yellowfin-staging.efraudservices.com/logon.i4?LoginWebserviceId=<token>
    to:
    https://yellowfin-staging.efraudservices.com/JsAPI/v3?LoginWebserviceId=<token>&filter[24b29b22-af57-4b57-8c34-54b1646d18f7]=test_value
    Issue: Instead of loading the dashboard, the /JsAPI/v3 endpoint returns JavaScript code that appears to be Yellowfin's JavaScript API implementation.
  2. Second Attempt - JavaScript API Implementation: After receiving the JS API code, I attempted to implement it by: Loading the JS API script from /JsAPI/v3 Initializing the API using window.yellowfin.init() Creating a new session using newSession(token).
    Issue: Encountered an error in the JavaScript API's newSession function where data.showLoginPrompt results in TypeError: Cannot read properties of undefined (reading 'showLoginPrompt'). This occurs because the callback function in the getData method is receiving undefined as the data parameter.


Questions:

  1. What is the correct way to initialize and use the JavaScript API for our use case?
  2. Is there documentation available for the JavaScript API implementation?
  3. How should we properly handle the session creation and authentication flow when using the JS API?
  4. If the JavaScript API approach isn't recommended for our use case, what is the correct URL structure for embedding a dashboard with filters?

Thank you for your assistance.

Reply
photo
1
Deepak Chaganti ● 13 hours ago

Hi Jaehyuk,

Thanks for your response.

In your current implementation, could you please try without/JsAPI/v3 example:

<iframe src="http://<host>:<port>/logon.i4?dashUUID=<dashboard-uuid>&filter[<filterUUID>]=value1|value2&LoginWebserviceId=<sso-token>" width="800" height="600"></iframe>

JsAPI implementation:

It is slightly different to iframe implementation and gives more control in embedding YF content.

We have a wiki article that provides details and article links regarding the implement of JsAPI v3 for embedding YF in your application: https://wiki.yellowfinbi.com/display/yfcurrent/JavaScript+API+v3

In the above article we would be interested in: "2. embed Yellowfin content into other web applications"

Thanks,

Deepak

Reply
Leave a Comment
 
Attach a file