Using an External Collection on a Static Page

Objective and Outcomes

In this tutorial you will learn how to connect an external collection to a static page on your Duda site.

1. Create a New External Collection

First you need to add an external collection to your site. If you aren't sure how to do this, you can learn more by checking out the external collection creation section in our Tutorial on Creating and Using Collections in the Duda Editor.

For this tutorial, we will be creating an external collection comprised of images. We will be using this JSON data as our external collection in this example:

You can specify the page_item_url of the external collection as _all_ to use it on any page of a site, or the specific page's name to specify that page of a site.

🚧

Unique page_item_url

You can only use _all_ or a single page once in the collection, each row must have a unique page_item_url.

Once our external collection has been created, we must designate its use on every page by clicking on the ... next to the external collection and selection Enable on Regular Pages. Alternatively, you can accomplish this by updating the collection using the API and setting the property static_page_bindable to true.

2. Connect the External Collection to an Image Widget

In this tutorial, we will be showing the external collection connection by connecting the data to an image widget.

Select the Widgets tab from the editor sidebar and search for the Image widget. Drag and drop the widget onto the site to create a new instance of the widget. The Image Content panel will appear automatically (if you don't see the panel, click anywhere on the widget). Click the gear icon from the panel header and select Connect to data from the menu. Now we should be able to select any of our images available from our external collection.

3. Known Limitations

• When toggling a collection for use on static pages, the Editor requires a refresh to reflect that change.
• When selecting what data to connect, if you are using multiple external collections, the menu doesn't show which collection each piece of data is being taken from.
• You cannot use more than one collection on a page
• You cannot use more than one row from a collection on a page
• In order to use an external collection, you actually have to send the static_page_bindable property
• page_item_url can be _all_, but can also be a single page e.g., /about