Quick Sight Q Embedded Search Bar not showing

[Adolfo]

Hello everyone,

I’m experiencing an issue with the embedded Amazon Quick Sight Q search bar in my application. The search bar is not displaying correctly; it appears as a blank space in the browser. I’ve checked through some common troubleshooting steps but haven’t had much luck resolving the problem.

I am clicking directly the embedded urls generated directly (for dashboard and search bar) and only dashboard is showing.
Even if I add the response to an iframe the problem persists.

The part of the code for embedding:

 dashboard_config = {
            'InitialDashboardId': dashboardId,
            'FeatureConfigurations': {}
        }
        experience_config = {
            'Dashboard': dashboard_config,
        }
           response = quicksightClient.generate_embed_url_for_registered_user(
                AwsAccountId=accountId,
                ExperienceConfiguration=experience_config,
                UserArn=userArn,
                SessionLifetimeInMinutes=30
            )
urls.append(response['EmbedUrl'])

  q_search_bar_config = {
      'InitialTopicId': topicId
  }
  
  experience_config_q = {
      'QSearchBar': q_search_bar_config
}
  
  response = quicksightClient.generate_embed_url_for_registered_user(
        AwsAccountId=accountId,
        ExperienceConfiguration=experience_config_q,
        UserArn=userArn,
        SessionLifetimeInMinutes=30
    )
 urls.append(response['EmbedUrl'])

Here’s a summary of what I’ve looked into so far:

Issue: The embedded Amazon Quick Sight Q search bar is not displaying or functioning as expected.

Potential Causes and Checks:

1. Front-end Implementation:

• I’m using the latest version of the Quick Sight Embedding SDK.
• There are no JavaScript errors in the browser console related to the embedding code.
• The element in the html code seems to be created correctly but is not shown and doesn’t seem to have an specific style

2. Configuration:

• The domain I am using to display the embedded url is already registered in the Allowed Domains for Embedding of Quicksight.
• The Quick Sight reader or author ARN is authorized to view the dashboards in the embedding parameters.
• I’ve verified that the AWS region used for embedding matches the region of the Quick Sight dashboard.

3. Code Implementation:

• The Quick Sight embedding URL appears to be generated correctly, and the “QSearchBar” parameter is included in the ExperienceConfiguration.
• I’m not seeing any errors or exceptions being thrown during the embedding process.
• With the same approach, I am generating the url for a dashboard and it actually shows

Troubleshooting Steps Taken:

• Updated to the latest Quick Sight Embedding SDK version.
• Enabled detailed logging and error handling in my application to catch any issues.
• Double-checked IAM permissions, Quick Sight dashboard configuration, and AWS region settings.

Despite these efforts, the issue persists. If anyone has encountered a similar problem or has additional suggestions, I’d greatly appreciate your help.

Thank you!

[Wakana]

Hi @Adolfo,

Welcome to Quick Sight Community and thank you for posting a question!

I just would like to check with you,

• if the account you are using for the embed dashboard has Amazon Q in Quick Sight enabled.
• if the user has one topic shared with

kind regards,
Wakana

[Brett]

Hi @Adolfo,
It’s been awhile since we last heard from you. Are you still encountering the same issue as your initial topic or were you able to find a work around?

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

Thank you!

[Brett]

Hi @Adolfo,
Since we haven’t heard back, I’ll go ahead and close out this topic. However, if you have any additional questions, feel free to create a new topic in the community and link this discussion for relevant information that may be needed.

Thank you!

[pablito]

I’m experiencing the same issue and yes, the QnA is enabled and topic has been shared. Appreciate any pointers

[pablito]

After a few troubleshooting sessions I finnaly figured it out. To fully leverage the embedding capabilities you need to make sure you are using the QuickSight client (javascript) APIs on top of getting the embed URL. So in other words your backend code (code running on the server) will execute something like this:

quicksight.generate_embed_url_for_registered_user(
                AwsAccountId=account_id,
                SessionLifetimeInMinutes=30,
                ExperienceConfiguration={
                    "QuickSightConsole": {
                        "InitialPath": ipath,
                        "FeatureConfigurations": {
                            "StatePersistence": {
                                "Enabled": True
                            },
                            "AmazonQInQuickSight": {
                                "DataQnA": {
                                    "Enabled": True
                                },
                                "GenerativeAuthoring": {
                                    "Enabled": True
                                },
                                "ExecutiveSummary": {
                                    "Enabled": True
                                },
                                "DataStories": {
                                    "Enabled": True
                                }
                            }
                        }
                    }
                },
                UserArn=user_arn,
                AllowedDomains=allowed_domains
            )

After, if you just expose the embed URL in an iframe, you will not see the QnA buttons on dashboards and some functionality might be missing. This is because you need your QuickSight Client SDK. The SDK also has capabilities to control display features. So the code should look like this (this is just a snippet from my code. So you need to validate with AWS documentation:Embedding the full functionality of the Amazon Quick Sight console for registered users - Amazon Quick Suite. See SDK 2.0 section):

//Import the embed client SDK
import { createEmbeddingContext } from 'amazon-quicksight-embedding-sdk';

useEffect(() => {
    const embedDashboard = async () => {
      setLoading(true);
      setError('');
      
      try {
    
        
        const frameOptions = {
          url: embedUrl,
          container: containerRef.current,
          height: '800px',
          width: '100%',
          loadingTimeoutInMillis: 30000,
          onChange: (changeEvent, metadata) => {
            switch (changeEvent.eventName) {
              case 'FRAME_MOUNTED':
                console.log('Experience frame mounted');
                break;
              case 'FRAME_LOADED':
                console.log('Experience frame loaded');
                setLoading(false);
                break;
              case 'ERROR_OCCURRED':
                console.error('Frame error:', changeEvent);
                setError('Failed to load QuickSight frame');
                setLoading(false);
                break;
            }
          },
        };
        
        const contentOptions = {
          parameters: [],
          locale: 'en-US',
          toolbarOptions: {
            export: false,
            undoRedo: false,
            reset: false,
            dataQnA: true,
            buildStory: true,
            executiveSummary: true,
            buildVisual: true
          },
          onMessage: async (messageEvent, experienceMetadata) => {
            switch (messageEvent.eventName) {
              case 'ERROR_OCCURRED':
                console.log('Embedded experience failed loading');
                setError('Failed to load QuickSight experience');
                setLoading(false);
                break;
            }
          }
        };

        experienceRef.current = await embeddingContextRef.current.embedConsole(frameOptions, contentOptions);

} catch (err) {
        setError(`Failed to load QuickSight dashboard: ${err.message}`);
        setLoading(false);
      }