Dynamic parameter defaults

Q&A
, , ,
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!

Control shows All when there is only 1 option available
2

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

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

When embedding Quick Sight dashboards in a React application, the core challenge is passing user context from your application to Quick Sight, especially when users don’t have direct Quick Sight 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 Quick Sight 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 Quick Sight 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 Quick Sight 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 Quick Sight 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 Quick Sight embedding SDK [5]

  3. User Context Mapping:

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

Code Example for React Implementation

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

const Quick SightEmbed = ({ 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 Quick Sight 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!