Hi Team,
I am trying to hide quick sight icon and dashboard name from the embed dashboard in my web application. Currently we are using C#.Net language to create the embed URL.
Attached the screenshot of the things need to be hidden
If your use-case is dashboard embedding, then you can just embed the dashboard.
In your screenshot, you are embedding the QuickSight console. This embeds the complete console experience which would include the logo and dashboard name .
Kind regards,
Koushik
@Koushik_Muthanna
Can you please brief about how can i embed only dashboard…? Does it contains toolbar…?
Have a look at this workshop to get a better understanding on embedding : Workshop Studio , as you are embedding the console , you should be able to try dashboard embedding within the same code.
@Koushik_Muthanna
Yes I gone through the Launch site. In that your saying if you load complete console then toolbar option will appears and if you load only dashboard then it will be hidden am i correct..?
Below is the code i have used for embeding the dashboard
private GenerateEmbedUrlForRegisteredUserRequest GetQSConsoleEmbeddingConfiguration(string userArn, string? dashboardId = null)
{
string initialPath = !string.IsNullOrEmpty(dashboardId) ? $"/dashboards/{dashboardId}" : "/start/dashboards";
return new GenerateEmbedUrlForRegisteredUserRequest
{
AwsAccountId = _options.AccountId,
ExperienceConfiguration = new RegisteredUserEmbeddingExperienceConfiguration
{
QuickSightConsole = new RegisteredUserQuickSightConsoleEmbeddingConfiguration
{
InitialPath = initialPath,
FeatureConfigurations = new RegisteredUserConsoleFeatureConfigurations
{
StatePersistence = new StatePersistenceConfigurations
{
Enabled = false
}
}
}
},
UserArn = userArn
};
}
I tried with embed only dashboard by using below code. In that i can see only left side buttons in the toolbar and right side buttons will get disappeared.
private GenerateEmbedUrlForRegisteredUserRequest GetQSDashboardEmbeddingConfiguration(string userArn, string? dashboardId = null)
{
return new GenerateEmbedUrlForRegisteredUserRequest
{
AwsAccountId = _options.AccountId,
ExperienceConfiguration = new RegisteredUserEmbeddingExperienceConfiguration
{
Dashboard = new RegisteredUserDashboardEmbeddingConfiguration
{
InitialDashboardId = dashboardId,
FeatureConfigurations = new RegisteredUserDashboardFeatureConfigurations
{
StatePersistence = new StatePersistenceConfigurations
{
Enabled = false
}
}
}
},
UserArn = userArn
};
}
In that your saying if you load complete console then toolbar option will appears and if you load only dashboard then it will be hidden am i correct..?
Yes that’s correct .
Use Dashboard as ExperienceConfiguration RegisteredUserEmbeddingExperienceConfiguration - Amazon QuickSight
@Koushik_Muthanna
I used RegisteredUserEmbeddingExperienceConfiguration but still the toolbar option is showing only left side buttons. Attached the code above.
have a look at the SDK ( amazon-quicksight-embedding-sdk - npm ) , toolbar options for dashboard embedding.
I tried using SDK ( amazon-quicksight-embedding-sdk - npm )
but i am getting below errors
Uncaught Error: Container is required for the experience
at n.getContainer (quicksight-embedding-js-sdk.min.js:9:31782)
at new e (quicksight-embedding-js-sdk.min.js:9:33237)
at i (quicksight-embedding-js-sdk.min.js:9:1197)
at new n (quicksight-embedding-js-sdk.min.js:9:44621)
at new n (quicksight-embedding-js-sdk.min.js:9:58703)
at quicksight-embedding-js-sdk.min.js:9:73187
at p (quicksight-embedding-js-sdk.min.js:9:4467)
at Generator. (quicksight-embedding-js-sdk.min.js:9:6111)
at Generator.next (quicksight-embedding-js-sdk.min.js:9:4988)
at r (quicksight-embedding-js-sdk.min.js:9:476)
and
Uncaught Error: Creating the frame timed out
at quicksight-embedding-js-sdk.min.js:9:31165
The code i have used here is
async function loadDashboard() {
const valueToCheck = await checkValueExistence();
if (valueToCheck.length > 0) {
const embedDashboard = async (embbedURL = valueToCheck) => {
debugger;
const {
createEmbeddingContext,
} = QuickSightEmbedding;
console.log(embbedURL);
const embeddingContext = await createEmbeddingContext();
const containerDiv = document.getElementById("embedding-container");
const frameOptions = {
url: embbedURL,
container: containerDiv,
height: "700px",
width: "1000px",
};
const contentOptions = {
toolbarOptions: {
export: false,
undoRedo: false,
reset: false,
},
attributionOptions: {
overlayContent: false,
},
};
const embeddedDashboard = await embeddingContext.embedDashboard(frameOptions, contentOptions);
};
await embedDashboard(); // Call the embedDashboard function
}
}
<div>
<input type="hidden" id="hiddenEmbedUrl" runat="server" value ="" />
<div id="experience-container"></div>
</div>
C#
private GenerateEmbedUrlForRegisteredUserRequest GetQSDashboardEmbeddingConfiguration(string userArn, string? dashboardId = null)
{
return new GenerateEmbedUrlForRegisteredUserRequest
{
AwsAccountId = _options.AccountId,
ExperienceConfiguration = new RegisteredUserEmbeddingExperienceConfiguration
{
Dashboard = new RegisteredUserDashboardEmbeddingConfiguration
{
InitialDashboardId = dashboardId,
FeatureConfigurations = new RegisteredUserDashboardFeatureConfigurations
{
StatePersistence = new StatePersistenceConfigurations
{
Enabled = false
}
}
}
},
UserArn = userArn
};
}
Please help on this.
@Koushik_Muthanna
The above issue is resolved. But i was not able to enable the toolbar buttons for Schedule, help and other options. Can you please help on this.
Hi @manjunathdl ,
For schedules, bookmarks, alerts etc, you have to set the enabled flags to true while generating the embed url. Check under Dashboard FeatureConfigurations here
Regards,
Arun Santhosh
Pr QuickSight SA
@ArunSanthosh
After enable the schedules, bookmarks ,export, snapshots etc.. I am able to see only export and bookmark not the other options. Below is the code changes for it.
private GenerateEmbedUrlForRegisteredUserRequest GetQSDashboardEmbeddingConfiguration(string userArn, string? dashboardId = null)
{
return new GenerateEmbedUrlForRegisteredUserRequest
{
AwsAccountId = _options.AccountId,
ExperienceConfiguration = new RegisteredUserEmbeddingExperienceConfiguration
{
Dashboard = new RegisteredUserDashboardEmbeddingConfiguration
{
InitialDashboardId = dashboardId,
FeatureConfigurations = new RegisteredUserDashboardFeatureConfigurations
{
StatePersistence = new StatePersistenceConfigurations
{
Enabled = true
},
Bookmarks = new BookmarksConfigurations
{
Enabled = true
},
Schedules = new SchedulesConfigurations
{
Enabled = true
},
RecentSnapshots = new RecentSnapshotsConfigurations
{
Enabled = true
},
ThresholdAlerts = new ThresholdAlertsConfigurations
{
Enabled = true
}
}
}
},
UserArn = userArn
};
}
and from UI side
async function loadDashboard() {
const valueToCheck = await checkValueExistence();
if (valueToCheck.length > 0) {
const embedDashboard = async (embbedURL = valueToCheck) => {
const {
createEmbeddingContext,
} = QuickSightEmbedding;
console.log(embbedURL);
const embeddingContext = await createEmbeddingContext();
const containerDiv = document.getElementById("embedding-container");
const frameOptions = {
url: embbedURL,
container: containerDiv,
height: "700px",
width: "100%"
};
const contentOptions = {
toolbarOptions: {
export: true,
undoRedo: true,
reset: true,
bookmarks: true
},
attributionOptions: {
overlayContent: false,
}
};
const embeddedDashboard = await embeddingContext.embedDashboard(frameOptions, contentOptions);
};
await embedDashboard();
}
}
Can you please suggest, if any other changes required..
Hi @manjunathdl ,
Cross check the version of embedding SDK you are using. Schedules and alerts are available on the latest version - 2.10.0 - only.
Regards,
Arun Santhosh
Pr QuickSight SA
@ArunSanthosh
I am using quicksight-embedding-js-sdk 2.10.0 only. but i am using directly quicksight-embedding-js-sdk.min.js file in our application(not from npm).
Am i missing any dependency…?
@manjunathdl
in the api call : GenerateEmbedUrlForRegisteredUser - Amazon QuickSight
@Koushik_Muthanna @ArunSanthosh
Anything is missing from my side…? Please suggest..
@ArunSanthosh @Koushik_Muthanna
Any suggestion …?
Hi @manjunathdl ,
Apologies for the delayed response. Looked through the code that you had shared earlier. You are missing couple of toolbar options. Add scheduling:true, thresholdAlerts:true to your UI code contentOptions > toolbarOptions. That will enable the scheduling and alert buttons on the embedded dashboard toolbar. (See below screenshot; I do see that the options I mentioned above aren’t explicitly called out in our embedding SDK doc page. I’m submitting a doc update request for the same.)
I’m marking this as solution for now. Please let us know if you have further questions.
Regards,
Arun Santhosh
Pr QuickSight SA
1 Like
Thank you so much for the above answer. it worked fine for me.
But Is it possible to enable the below toolbar options…?
- help
- view
- fit to window under view
- recent snapshots under schedule
@Koushik_Muthanna @ArunSanthosh
Any suggestion on the above questions