dosubot[bot] commented on issue #29141:
URL: https://github.com/apache/superset/issues/29141#issuecomment-2157180028
<!-- Answer -->
To edit the `href` link of the title of each chart within an embedded
Superset dashboard in your React application, you can use JavaScript DOM
manipulation to target and modify elements inside the iframe created by the
`@superset-ui/embedded-sdk`. Here is an example of how you can achieve this:
1. First, ensure that you have access to the iframe element.
2. Use JavaScript to access the content of the iframe and modify the `href`
attribute of the chart titles.
Here is a sample code snippet to demonstrate this:
```javascript
// Function to update the href links of chart titles inside the iframe
function updateChartTitleLinks(iframeId, newHref) {
const iframe = document.getElementById(iframeId);
if (iframe && iframe.contentWindow) {
const iframeDocument = iframe.contentWindow.document;
// Wait for the iframe content to load
iframe.onload = () => {
// Select all chart title elements (assuming they have a specific
class or tag)
const chartTitleLinks = iframeDocument.querySelectorAll('.header-title
a');
// Update the href attribute for each chart title link
chartTitleLinks.forEach(link => {
link.href = newHref;
});
};
}
}
// Call the function with the iframe ID and the new href link
updateChartTitleLinks('superset-iframe', 'https://new-link.com');
```
In this example:
- Replace `'superset-iframe'` with the actual ID of your iframe element.
- Replace `'.header-title a'` with the appropriate selector for the chart
title links in your Superset dashboard.
- Replace `'https://new-link.com'` with the new URL you want to set for the
chart title links.
This code will update the `href` attribute of all chart title links inside
the specified iframe once the iframe content has loaded
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/src/embedded/index.tsx)</sup>.
Additionally, the `@superset-ui/embedded-sdk` provides a structured way to
embed and interact with Superset dashboards. The `embedDashboard` function from
the SDK can be used to embed the dashboard and manage the iframe. Here is a
brief overview of how you can use it:
```javascript
import { embedDashboard } from '@superset-ui/embedded-sdk';
// Function to embed the dashboard
async function embedSupersetDashboard() {
const mountPoint = document.getElementById('dashboard-mount-point');
const dashboard = await embedDashboard({
id: 'your-dashboard-id',
supersetDomain: 'https://superset.example.com',
mountPoint,
fetchGuestToken: async () => {
// Fetch and return the guest token from your backend
return 'your-guest-token';
},
dashboardUiConfig: {
hideTitle: false,
hideTab: false,
hideChartControls: false,
filters: {
visible: true,
expanded: true,
},
},
debug: true,
iframeTitle: 'Embedded Dashboard',
});
// Now you can interact with the embedded dashboard
// For example, you can get the permalink of the dashboard
const permalink = await dashboard.getDashboardPermalink('some-anchor');
console.log(permalink);
}
// Call the function to embed the dashboard
embedSupersetDashboard();
```
This approach ensures that you have a robust and maintainable way to embed
and interact with Superset dashboards in your React application
<sup>[[2]](https://github.com/apache/superset/blob/master/superset-embedded-sdk/src/index.ts)</sup>.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
