Hello!
I'm trying to figure out a way to display Dropbox folder in a custom-component. What I have achieved this far : (using an amazing guide -> Dropbox file chooser integration
- Got the Dropbox Chooser working and am able to get the link into the Textbox element from the required folder. (this is also needed to save the data into the google sheet database, when needed i can re-call the URL into textbox)
- Got the Embedder working from Dropbox using the Custom Element -> See code below
What I now would like to get to is that when I choose the Dropbox folder in the chooser, I would like to automatically update the link in the Embedder "link: " section of the code.
Values that I have for the Models:
- Chooser - { "dropboxURL": null }
- Text Input - {{ customComponent1.model.dropboxURL}}
- Embedder - {
"dropboxURL": {{textInput1.value}}
}
<style>
body { margin: 0; }
</style>
<script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="123"></script>
<script>
var element = document.getElementById("dropbox");
var options = {
// Shared link to Dropbox file -> Sample..
link: "https://www.retool.com/",
file: {
// Sets the zoom mode for embedded files. Defaults to 'best'.
zoom: "best" // or "fit"
},
folder: {
// Sets the view mode for embedded folders. Defaults to 'list'.
view: "list", // or "grid"
headerSize: "normal" // or "small"
}
}
Dropbox.embed(options, element);
</script>
<div id="dropbox"></div>
Image of the setup:
Thank you for your input and time!