Hi Team, can I please double check if we have any ...
# gooddata-cloud
r
Hi Team, can I please double check if we have any way to hide the dashboard title, private label, edit and share buttons when embedding a dashboard as an Iframe? (the area in the red box in the attached image). We want to link the edit functionality to our own button. Thanks in advance
Also, the button overlapping seems a visual bug to me, could you kindly double check that?
y
Hi Raffaella, Thanks for sending this in. For your first question, I’ll check internally and get back to you with an update. Regarding your second question, could you try resizing the dashboard (for example, by increasing the width) and let us know if the overlap still persists?
r
Hi Yvonne, thanks for checking. For the second issue, we don't allow resizing of the dashboard in our app, but when I see this from a tablet / mobile view, the edit button disappears, see attached.
y
Hi Raffaella, I have some feedback on your first question. It is possible to hide certain selected elements mentioned, by modifying the URL parameters in your iframe. For example, you can use:
?hideControl=[controlElement1,controlElement2]
To give you more context, in a URL such as:
<host_url>/dashboards/embedded/#/workspace/<workspace_id>/dashboard/<dashboard_id>?showNavigation=false&showEmbedButton=false
you can replace the part
?showNavigation=false&showEmbedButton=false
with:
?hideControl=[topBar,widgetsCatalogue]
Here,
controlElement1
is set to topBar and
controlElement2
is set to widgetsCatalogue. You can find more details on which elements can be hidden in our documentation here Regarding your follow-up, the resizing of the embedded dashboard can be managed on your end by adjusting the width parameter of the iframe. For example, in the snippet below you can change the
width
value to fit your preferred display:
Copy code
<iframe
    title="Embed GD Application"
    id="embedded-app-frame"
    src="<host_url>/dashboards/embedded/#/workspace/<workspace_id>/dashboard/<dashboard_id>?apiTokenAuthentication=true"
    width="1300"
    height="800"
></iframe>
On mobile view, the behavior you are seeing with the Edit button is expected. The visibility of certain controls depends on the available screen width. When embedding via iframe, the size you allocate directly affects the display. If the horizontal space is less than 1170px, elements such as the Edit button will be hidden. You can find more details about this behavior in the attached. documentation . Let me know if this helps