Child Item

Re: Embedded Folder -Grid View Using AnchorTags

Is there a way I could enter this into a CMS source block (using eg Webflow)?

How do I go about creating an element that the javascript will source?

Will I be able to embed multiple folders using multiple scripts?

Eg. source code:

<div class=".embed"></div>

<script>var options = {
      // Shared link to Dropbox file
      link: "https://www.dropbox.com/scl/fo/pyx9b32plmfkwd1et2h0t/ABZMI8Ao8r-m3EzlfbxT0QM?rlkey=2bjry6s2mwiblayinivy4tvd5&dl=0",
      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: "grid", // or "list"
        headerSize: "small" // or "normal"
      }
    }
    Dropbox.embed(options, element);</script>

But I fear I'm not getting a part of the equation, as it's not working yet.

What I did seem to get working, is adding this to the anchor element

  data-folder-view="grid"
  data-folder-headerSize="small"

See my test page below

Test link

Thanks for your help!

Find more posts tagged with

Comments

Greg-DB

@Shivadas I can't offer specific guidance for a third party CMS or platform in particular such as Webflow, as that's not made by Dropbox, but in general, here's a basic way of creating a div element in HTML and then retrieving it in Javascript&colon;

<div id="container"></div>

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

Of course, exactly how you work with HTML/JavaScript like this isn't specific to Dropbox and is up to you, and may vary depending on how your platform works. You may need to refer to your platform's documentation, or general HTML/JavaScript guides and documentation for more information.

As for the Dropbox Embedder itself, it does support having multiple embeds on the same page (e.g., see the linked documentation page as an example), but note that you should only need to load the <script> tag itself once per page.

By the way, note that the "data-folder-" option attributes are not officially documented, and so they should not be considered officially supported and are subject to change/break without notice. To set those options, please use the JavaScript options.

Shivadas

@Greg-DB thanks for getting back to me so quickly.

In your example you use "ID" which is unique. Do I need to then add a var element in the script per element in the html?

I guess essentially the question is: not taking webflow into consideration, on a normal html page, how would I set up 3 folders? In the dropbox documentation, the link needs to be specified in the script

"Another way to use the Embedder is to embed content into a specific element using the JavaScript method Dropbox.embed(options, element). This approach can be particularly useful if you’re trying to create embedded content dynamically.

The options object must contain a link and may optionally define file settings and folder settings."

But how do I use the javascript method if I, say, want to have two elements:

<div class="dropbox-embed">folder one with dropbox.com/folder-one as shared link</div>

<div class="dropbox-embed">folder two with dropbox.com/folder-two as shared link</div>

How do I set it up so the javascript documented in dropbox documentaiton picks up on it?

Thanks a lot! I'm not very experienced with Javascript, but don't find much documentation on this yet online elsewhere

Greg-DB

@Shivadas The element you pass in to the Dropbox.embed method is where you want to have the embed placed. The element you select for any given embed is up to you. You can use the same element for multiple embeds, or you can use different ones.

If you want to create multiple embeds, you should call Dropbox.embed multiple times; once per embed. Each call should be given an options object containing the relevant link for that one.

Shivadas

sorry @Greg-DB still not fully understanding it. Could you give me an example with eg 2 different links, how it would fit in html?

Greg-DB

@Shivadas I don't have an example of that exact scenario handy. Feel free to try it out though and share what you have so far and let me know what you're stuck on. I'll take a look and help how I can.

Shivadas

Hi @Greg-DB,

What could maybe help, is to know how the documentation is structured in html?

What does the javascript-embed-element look like in the original html? And where is the script placed in that html? That last bit I think I could try to find, but since javascript rewrites the html by the time I see it, that might be hugely helpful to see

Greg-DB

@Shivadas The HTML doesn't need to be structured in any specific way; ultimately you decide how to construct your HTML, and then pass the container element to the Dropbox.embed method.

Here's a very simple example of making two embeds I just put together, modifying and combining your code with the example code from the documentation and discussion here:

<html>
<head>
    <script type="text/javascript" src="https://www.dropbox.com/static/api/2/dropins.js" id="dropboxjs" data-app-key="YOUR_APP_KEY"></script>
</head>
<body>
    
    <div id="container-1" style="height: 30vw; width: 80vw;"></div>

    <div id="container-2" style="height: 30vw; width: 80vw;"></div>

    <script>
        var options1 = {
          link: "YOUR_FIRST_SHARED_LINK",
          folder: {
            view: "grid", // or "list"
            headerSize: "small" // or "normal"
          }
        }
        var element1 = document.getElementById("container-1");
        Dropbox.embed(options1, element1);

        var options2 = {
          link: "YOUR_SECOND_SHARED_LINK",
          folder: {
            view: "grid", // or "list"
            headerSize: "small" // or "normal"
          }
        }
        var element2 = document.getElementById("container-2");
        Dropbox.embed(options2, element2);
    </script>

</body>
</html>

Shivadas

Hi! Ok thank you very much for this. In the documentation it mentions that this can help embedding content dynamically. I'm going to have to see how to adapt this to work in a CMS system that makes lists of items (deliverables) which then each refer to a folder.

If I would put a script after each div, would that work too?

Thanks a lot for this, @Greg-DB

Greg-DB

@Shivadas Yes, that should work too. There's no particular right way to structure this; ultimately the structure is up to you.