So basically I want to build an app that can display power bi reports. So, given that i have a list of power bi report embed urls, I want to programatically update the srcs (i.e. power bi report embed urls) inside the iframe element that i would pass in st.markdown() so that everytime i enter a new embed url, it automatically opens a new power bi report. Any way I can achieve that? Also, can anyone suggest me an alternative way to embed power bi reports if this doesnât work out?
Here is what i am kinda trying to achieve
Code snippet:
embed_urls=['rep1.powerbi.com','rep2.powerbi.com','rep3.powerbi.com']
for i in embed_urls:
st.markdown('<iframe src=i> </iframe>')
I know the piece of code above doesnât make any sense but it is close to what Iâm trying to achieve.
First, if you want to include html in your app from markdown, youâll need to include the optional argument unsafe_allow_html=True. Alternatively, you can use the components API to inject html, which comes in with its own iframe.
Second, youâll need to format the string to inject the variable: st.markdown(f'<iframe src={i}> </iframe>').
So two solutions would be:
for i in embed_urls:
st.markdown(f'<iframe src={i}> </iframe>', unsafe_allow_html=True)
for i in embed_urls:
st.components.v1.html(f'<iframe src={i}> </iframe>')
Just a follow-up question: Are both solutions -st.markdown including unsafe_allow_html and st.components.v1.html- technically the same resulting in an equivalent outcome? Or would you prefer one over the other under certain circumstances?
They differ in the layers created within the HTML of the app. The components API creates an iframe within which to put whatever HTML or script you are injecting. (So the above example would have both the iframe created by the components API and the typed-out iframe nested within, along with additional layers of divs.)
Also, if you are including some JavaScript, it doesnât seem to run with the st.markdown solution, but does run with the components API solution.
So the more complicated you are getting with what you are injecting, the more likely youâd need to start working with the components API, maybe even up to the point needing to actually create a custom component.
Iâve discovered something interesting while trying to embed an external Streamlit page inside a local Streamlit page. Apparently, if the page I embed is a local Streamlit page, thereâs no problem. But if itâs something Iâve uploaded to Streamlit Share cloud, it wonât let me embed it. Iâll show the code and the difference between both (url doesnt work, but url_local does):
import streamlit as st
import streamlit.components.v1 as components
#example of streamlit share public page
url = 'https://nl2sql.streamlit.app/' #use any external streamlit page
#a local but different streamlit page
url_local = 'http://192.168.1.150:8501/ #use any local streamlit page
#using iframe markdown
st.markdown(f'<iframe src={url} width="100%" height="600" style="position:absolute; top:200px; left:0; overflow:hidden; margin-top:-300px;"></iframe>', unsafe_allow_html=True)
st.markdown(f'<iframe src={url_local} width="100%" height="600" style="position:absolute; top:200px; left:0; overflow:hidden; margin-top:-300px;"></iframe>', unsafe_allow_html=True)
#using components
st.components.v1.iframe(url, width=None, height=600)
st.components.v1.iframe(url_local, width=None, height=600)
Is it just me? or embed an external streamlit page into a local streamlit page doesnât work?
When embedding a Streamlit Cloud app anywhere (even in another Streamlit app), you need the embedded app to have the right query parameter in its url:
Hello there đđ»
Thanks for stopping by! We use cookies to help us understand how you interact with our website.
By clicking âAccept allâ, you consent to our use of cookies. For more information, please see our privacy policy.
Cookie settings
Strictly necessary cookies
These cookies are necessary for the website to function and cannot be switched off. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.
Performance cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us understand how visitors move around the site and which pages are most frequently visited.
Functional cookies
These cookies are used to record your choices and settings, maintain your preferences over time and recognize you when you return to our website. These cookies help us to personalize our content for you and remember your preferences.
Targeting cookies
These cookies may be deployed to our site by our advertising partners to build a profile of your interest and provide you with content that is relevant to you, including showing you relevant ads on other websites.