Search

Connectors

Contact support

Interactive apps (Streamlit)

Interactive apps (Streamlit)

Build interactive apps with Streamlit in Peliqan, for example to search data, make updates to data, data entry, data quality checks etc.

Streamlit is a wonderful low-code Python module to add UI components with a single line of code per component. Streamlit is built-in into Peliqan and available as the st module.

Contents

UI elements

Show data

# Show a title
st.title("My title")

# Show a text
st.text("My text")

# Show anything, e.g. a JSON object, string, DF...
st.write(my_data)

# Show a chart
st.line_chart(data)

# Load a table from Peliqan and show it as a table, JSON or DF
dbconn = pq.dbconnect('dw_123') 
rows = dbconn.fetch('db_name', 'schema_name', 'table_name')

st.table(rows)
st.json(rows)
st.dataframe(rows)

Input elements

Button

button = st.button("Click me")
if button:
		# do stuff when button clicked

Dropdown (select)

option = st.selectbox("Please Choose", ["Email", "Home phone", "Mobile phone"])
st.write("You selected:", option)

Use a callback function to handle a selection:

def on_change():
    st.text(f"Selected option: %s" % st.session_state.my_selectbox)

st.selectbox("Please choose", ["A", "B", "C"], key = 'my_selectbox', on_change = on_change)

Save selection in Peliqan state and load from state on each run:

options = ["Option 1", "Option 2", "Option 3"]
selected_option = pq.get_state()

index = None
if selected_option:
	for i, option in enumerate(options):
	    if selected_option == option:
	        index = i

def on_change():
    st.text(f"Selected option: %s" % st.session_state.my_selectbox)
    pq.get_state(st.session_state.my_selectbox)

st.text(f"Index: %s" % index)
st.selectbox("Please choose", options, index = index, key = 'my_selectbox', on_change = on_change)

Interactive grid with ability to update data

from st_aggrid import AgGrid, GridOptionsBuilder

dbconn = pq.dbconnect(pq.DW_NAME)
df = dbconn.fetch(pq.DW_NAME, 'crm', 'companies', df=True)

gb = GridOptionsBuilder.from_dataframe(df)
gb.configure_selection('single')
gridOptions = gb.build()

grid_response = AgGrid(
  df, 
  gridOptions=gridOptions,
  update_mode="SELECTION_CHANGED")
selected = grid_response['selected_rows']

if len(selected):
  st.write("Selected company id: %s" % selected[0]["id"])
  new_country = st.text_input("Edit country", selected[0]["country"])

  if st.button('Update company'):
    pq.update_cell(
			table_name = "companies", 
			field_name = "country", 
			row_id = selected[0]["id"], # must be value from primary key column
			value = new_country)
    st.write("Company updated ! New country: %s" % new_country)

Upload file & show file (from base64)

import base64

uploaded_file = st.file_uploader("Upload PDF file", accept_multiple_files=False, type=['pdf'])

if uploaded_file is not None:
    file_contents = uploaded_file.read()

    file_base64 = base64.b64encode(file_contents).decode('utf-8')
    html_show_file = f"""<embed src="data:application/pdf;base64,{file_base64}" type="application/pdf" width="100%" height="600px" />"""
    st.markdown(html_show_file, unsafe_allow_html = True)

Manage layout of a full-fledged app UI

Embedded Portal / Market place

Use Streamlit to build a market place or portal, which can be embedded in your existing SaaS platform:

image
image
‣
View example code of the above market place (portal) with tiles

Business application or widget

Use Streamlit to build a business application or widget:

image
‣
View example code using a Streamlit grid and containers

Layout tips & tricks

Hide top header (with action menu and “Run” animation):

st.markdown(
    """
    <style>
        header {
            display: none !important;
        }
    </style>
    """,
    unsafe_allow_html=True
)

Make UI full width:

st.markdown(
    """
    <style>
        .block-container {
            width: 100% !important;
            padding: 20px !important;
            max-width: 100% !important;
        }
    </style>
    """,
    unsafe_allow_html=True
)