Dynamic parameter defaults

Question & Answer
, , ,
1

Hello,

We use Quicksight with an embed on our React page. Users log on to our enviroment and are able to use QS dashboarding here. We do work with RLS in our datasets.

I am trying to achieve dynamic parameter defaults however I do not seem to get user information when users log on to our React page. I am trying to figure out what is necessary to get the information back to QS so I can build a dataset with usernames and their default values. These users do not have a QS login so I can’t get this information from my ‘Manage Quicksight’.
Can anyone guide me to the necessary steps so I can explain this to my development team?
Also, is there any other documentation next to this YT vid I found?

Thanks in advance!

2

Please reference this blog post here. Creating parameter defaults in Amazon QuickSight - Amazon QuickSight

To implement dynamic parameter defaults in embedded QuickSight dashboards, you need to pass user information via the embedding process using the generateEmbedUrlForAnonymousUser or generateEmbedUrlForRegisteredUser API with namespace parameters [1]. For users without QuickSight logins, you’ll need to leverage the embedding context and pass user attributes through the embedding API call.

When embedding QuickSight dashboards in a React application, the core challenge is passing user context from your application to QuickSight, especially when users don’t have direct QuickSight logins. This is critical for implementing dynamic parameter defaults and row-level security (RLS).
The key to solving this issue is to pass user information during the embedding process:

  • For anonymous users (users without QuickSight accounts):
    const embedUrlParams = {
  AwsAccountId: 'YOUR_AWS_ACCOUNT_ID',
  Namespace: 'default',
  AuthorizedResourceArns: ['arn:aws:quicksight:region:account-id:dashboard/dashboard-id'],
  ExperienceConfiguration: {
    Dashboard: {
      InitialDashboardId: 'dashboard-id',
      Parameters: [
        {
          Name: 'userParam',
          Values: ['currentUserValue']
        }
      ]
    }
  },
  UserArn: 'ANONYMOUS_USER_ARN',
  // Critical for passing user context
  Identities: [
    {
      'User': 'username',
      'CustomFederationProviderUrl': 'your-identity-provider',
      'CustomFederationProviderType': 'CUSTOM_OIDC'
    }
  ]
};

This approach uses the generateEmbedUrlForAnonymousUser API with the Identities parameter to pass user context
You’ll need to set up a dataset that maps usernames to their default parameter values

  1. Create a mapping table in your data source with columns for:

    • Username
    • Default parameter values
    • Any RLS constraints

  2. Configure your QuickSight dataset with RLS using this mapping table, referencing the username passed during embedding.

  3. Implement Parameter Defaults Based on User Context
    Use calculated fields in your QuickSight analysis that reference the user information passed during embedding

ifelse(${user} = ${username}, ${default_value}, '')

Implementation Steps for Development Team

  1. Backend API Development:

    • Create an API endpoint that generates the QuickSight embed URL
    • Include user context in the embedding parameters
    • Implement proper authentication and authorization

  2. React Component Implementation:

    • Develop a component that calls your backend API
    • Handle the returned embed URL and token
    • Implement the QuickSight embedding SDK [5]

  3. User Context Mapping:

    • Create a data mapping between your application’s user system and QuickSight parameters
    • Ensure this mapping is accessible during the embedding process

Code Example for React Implementation

import { embedDashboard } from 'amazon-quicksight-embedding-sdk';

const QuickSightEmbed = ({ userId, username }) => {
  useEffect(() => {
    async function embedDashboardForUser() {
      // Call your backend API to get embed URL with user context
      const response = await fetch('/api/get-quicksight-embed-url', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ userId, username })
      });
      
      const { url, token } = await response.json();
      
      // Use the QuickSight Embedding SDK
      const options = {
        url: url,
        container: '#dashboardContainer',
        parameters: {
          userParam: username
        },
        height: '700px'
      };
      
      const dashboard = embedDashboard(options);
    }
    
    embedDashboardForUser();
  }, [userId, username]);
  
  return <div id="dashboardContainer"></div>;
};
3

Thank you, I’ll try this and let you know if I am succesful!

4

Hi @NJK90,
It’s been awhile since we last heard from you on this thread, did you have any additional questions regarding this topic?

If we do not hear back within the next 3 business days, I’ll close out this topic.

Thank you

5

Hi @NJK90,
Since we have not heard back, I’ll go ahead and close out this topic. However, if you have any additional questions, feel free to create a new post in the community and link this topic for relevant information if needed.

Thank you!