Using Textbox value to update link in Dropbox embedder

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

  1. 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)
  2. 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:

  1. Chooser - { "dropboxURL": null }
  2. Text Input - {{ customComponent1.model.dropboxURL}}
  3. 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!

Hello @Klearner!

It looks like you'll want to have your custom component subscribe to changes in its model. Can you try something like this?

var element = document.getElementById("dropbox");

//use the subscribe function for listen to changes in the model
Retool.subscribe((model) => {
  var options = {

    //pass the url from the model as your link
    link: model.dropboxURL, 

    file: {
      zoom: "best",
    },
    folder: {
      view: "list",
      headerSize: "normal",
    },
  };
  Dropbox.embed(options, element);
});
1 Like

@Kabirdas Amazing, thank you! It is working!

Now I ran into a different problem. It creates Multiple pages within the Iframe. Is there a way to refresh the Iframe so when the link value changes, it refreshes the Iframe?

It seems like it's storing the the old Value somewhere.

Ah! It looks like Dropbox has an unmount function to handle just that, maybe something like the following will work?

var element = document.getElementById("dropbox");
var embed;

Retool.subscribe((model) => {
  if (embed) Dropbox.unmount(embed);
  var options = {
    // Shared link to Dropbox file -> Sample..
    link: model?.dropboxURL,

    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"
    },
  };
  embed = Dropbox.embed(options, element);
});
1 Like

@Kabirdas - amazing! you're the boss! Thank you so much for your help!! Working like a charm!

Great to hear :grin: