How to pass username and password in secret.toml to the JS function for streamlit-aggrid onCellClick

🎈 Using Streamlit
,
1

I am new to Streamlit and creating an application and am using streamlit-aggrid.
I have a column with download icons and on click of the cell, it should download the file from artifactory URL. I have 2 issues here :slight_smile:

  1. I need to pass the Username and Password in the secrets.toml to the JS code for aggrid to connect to the artifactory to download file. Instead of hardcoding it to URL. No able to do that.
  2. Streamlit is not identifying the fetch API used in JS Code function.

UI Lokks like below:

image
image2389×442 33.6 KB

AgGrid column configuration for the Request column:

gd.configure_column(field=“artifactoryRequestURL”,
header_name=“Request”,
headerTooltip=“The request parameters passed for the transaction”,
cellStyle = request_style,
cellRenderer = custom_cell,
onCellClicked=show_payload,
width=170,
suppressHeaderMenuButton=True,
tooltipShowDelay=0,
autoHeight=True)

Show_payload code:
show_payload=JsCode(
“”"

function (params){
if(params.value!=“”){
url=“https://username:password@oneartifactoryci.sample.com/artifactory/test_folder/CNUM/1111/response_inline.md”
fetch(url, { method: “get”, mode: “no-cors”, referrerPolicy: “no-referrer” })
.then((res) => res.blob())
.then((res) => {
const aElement = document.createElement(“a”);
aElement.setAttribute(“download”, responseData);
const href = URL.createObjectURL(res);
aElement.href = href;
aElement.setAttribute(“target”, “_blank”);
aElement.click();
URL.revokeObjectURL(href);
});
}
};
“”"
)

Any help or guidance to right direction is much appreciated