QuickSight Q Search Bar Not Rendering with No Errors

Question & Answer
, , ,
1

Hello all,

I’ve been trying to get a Q search bar for anonymous users to render with minimal code following the instructions from GitHub - awslabs/amazon-quicksight-embedding-sdk: A SDK to help users embed QuickSight dashboards on other pages. but unfortunately have not been able to get it rendered. Each time I execute my lambda function, I see the dashboard being briefly processed (loading shows up) but immediately vanishes and goes to a normal white screen. Below is the code I am currently using:

EmbedTest.html:

html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; background-color: #eeeeee; } #QEmbedDiv { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
$(document).ready(async function() { try { if (typeof QuickSightEmbedding !== 'undefined') { const embeddingContext = await QuickSightEmbedding.createEmbeddingContext(); 
                const frameOptions = {
                    url: 'EMBED_URL_PLACEHOLDER',
                    container: '#QEmbedDiv',
                    width: '100%',
                    height: '100%',
                    withFramePlaceholder: true
                };

                const contentOptions = {
                    panelOptions: {
                        panelType: 'SEARCH_BAR',
                        focusedHeight: '250px',
                        expandedHeight: '500px'
                    },
                    showTopicName: false,
                    allowTopicSelection: true
                };

                await embeddingContext.embedQSearchBar(frameOptions, contentOptions);
                console.log('Q Search bar embedded successfully.');
            } else {
                console.error('QuickSightEmbedding is not defined');
            }
        } catch (error) {
            console.error('Error embedding Q Search bar:', error);
        }
    });
</script>

lambda_function.py:

import boto3
import re

def lambda_handler(event, context):
try:
quicksight = boto3.client(‘quicksight’, region_name=‘<REGION_HERE>’)
aws_account_id = context.invoked_function_arn.split(“:”)[4]

    embed_url_response = quicksight.generate_embed_url_for_anonymous_user(
        AwsAccountId=aws_account_id,
        Namespace='default',
        SessionLifetimeInMinutes=60,
        AuthorizedResourceArns=[
            'arn:aws:quicksight:<REGION_HERE>:<ACCOUNT_NUMBER>:topic/<TOPIC_ID_HERE>'
        ],
        ExperienceConfiguration={
            'QSearchBar': {
                'InitialTopicId': '<TOPIC_ID_HERE>'
            }
        },
        AllowedDomains=[
            '<LAMBDA_FUNCTION_URL>'
        ]
    )

    embed_url = embed_url_response.get('EmbedUrl')
    if not embed_url:
        raise Exception('Failed to generate embed URL')

    with open('EmbedTest.html', 'r') as file:
        html_content = file.read()

    html_content = re.sub('EMBED_URL_PLACEHOLDER', embed_url, html_content)

    return {
        'statusCode': 200,
        'headers': {
            'Content-Type': 'text/html',
            'Access-Control-Allow-Origin': '*'
        },
        'body': html_content
    }

except Exception as e:
    print(f"Error generating embed URL or creating HTML: {e}")
    return {
        'statusCode': 500,
        'headers': {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*'
        },
        'body': f"Error: {str(e)}"
    }

Below is the elements rendered on the page:

Container
Container1482×255 16.1 KB

Could anyone provide me some pointers on what I may be doing wrong? I already have an IAM role which grants permission to the topic and generate_embed_url_for_anonymous_user. The lambda function url is also already within the list of allowed domains on QuickSight. I also can confirm that this is for the regular classic search bar.

I also tried to open the embedded links manually, but they also show nothing. As they are meant to be embedded, I assume that this is expected, or am I missing something?

Thanks in advance.

2

Hey @the_benny_boy!

My first thought based on the screenshot of your dev tools, is an issue with the iframe sizing. I noticed height and width are set to 0, so maybe there is an issue with using % for height and width. I would try specifying specific pixel sizes to see if anything appears on the screen.

Also, inspect the div after you’ve made the change to see if anything has changed.

If you keep running into issues without an error message its probably worth submitting a support ticket. Here are the steps to open a support case. If your company has someone who manages your AWS account, you might not have direct access to AWS Support and will need to raise an internal ticket to your IT team or whomever manages your AWS account. They should be able to open an AWS Support case on your behalf.

3

Hey @duncan , thank you for your response on this! I have set the height and width specifically but no luck unfortunately. After double checking, I’m thinking it might have to do with not having capacity-pricing enabled (as I am currently using user-based pricing), which makes sense but is strange considering that no errors have popped up about it (considering that the generative Q&A search bar did show errors but not the classic Q search bar) so thinking that may be the culprit? Managed to narrow it down after seeing that it was rendering for registered users but not when I tried to generate it for anonymous users.

Also, would you or anyone happen to know if I have to purchase both Q questions capacity and reader capacity pricing for the Q search bar to work or if only Q questions capacity would be sufficient? I am currently able to render dashboards for anonymous users with anonymous users so would like to maintain that if possible and just do the minimum to be able to render the Q search bar and ask questions. Thanks in advance!