Decap CMS config.yml fields cannot access collections added using Eleventy.js' addCollection function

[JG515]

I added a collection using eleventyConfig.addCollection in .eleventy.js:

eleventyConfig.addCollection("featuredVisuals", function (collectionApi) {

let visualsCollection = [];

let tagsArray = collectionApi.getFilteredByTags("posts");
tagsArray.forEach(element => {
    visualsCollection.push(element);
    
});

return visualsCollection;

I can output the collection to the screen in my posts.njk file:

{% for object in collections.featuredVisuals %}

    <Br>title is {{ object.data.title }}<br>

{% endfor %}

However, I can't seem to get the new collection to populate a decap collection widget's relation field using config.yml:

• name: "regions"
  label: "Regions"
  folder: "regions"
  slug: "{{slug}}"
  create: true
  fields:

  • { label: "Layout", name: "layout", widget: "hidden", default: "layouts/region.njk" }

  • { label: "Title", name: "title", widget: "string" }

  • { label: "Published Title", name: "publishedTitle", widget: "string" }

  • { label: "Teaser", name: "teaser", widget: "string" }

  • { label: "Editorial Comments", name: "editorialComments", required: false, widget: "string" }

  • { label: "Date", name: "date", widget: "date", default: "" }

  • { label: "Featured Visual", name: "featuredVisual", required: false, widget: "relation", collection: "featuredVisuals", search_fields: ["title"], value_field: "{{slug}}", display_fields: ["title"], multiple: true } ||

  • { label: "Post Body", name: "body", widget: "markdown" }
    I believe a similar question was asked by someone else here, but no answer was given:

https://answers.netlify.com/t/cant-access-11ty-collection-from-config-yml/86307

Thanks so much for your help!

[danurbanowicz]

Decap CMS can only read or reference your 11ty collections if they are present as folder or file collections inside your repo. As these collections are generated by 11ty programatically, they bypass your repo root and output directly to your site folder.

In your case, you could create a new regions.njk file to output your regions collection as a folder inside your repo with each region as an .md file. You can then reference that collection in your Decap CMS relation widget.

[JG515]

Thanks for confirming that it can't be done using addCollection.

I wanted to add this as an issue because addCollection would be a nice Eleventy function for Decap to support.

I did start going down the path that you suggested creating a folder full of collection items for Decap's relation widget field to consume.

What we are actually trying to do is to populate one relation field with various kinds of collections aggregated together: posts, documents, events, features, etc..

I had some success by moving my collection folders into a folder named "input" and explicitly specifying it as input and output as “_site” in .eleventy.js. This way the input folder is not added to the user’s url path to the generated html. I don't want users to see /input/ in their url.

When I do it like this, any folder of collections successfully appears in the relation field drop down list.

I am going to attempt to filter these results next.

I like this approach because it does not require an additional “aggregatedFeaturedVisuals” folder full of njk or md items that already have a file in their respective folders (ie: posts, documents, events, features, etc..). It seemed inefficient to generate doubles of collection files just to have a folder of them aggregated.

However, I would rather not change the directory structure of the local build site if I don’t have to.

I have two questions since we’re on the topic of how I might solve this:

1. In decap’s config.yml for a collection, how do I specify the root folder?

This does not work:

_site/admin/config.yml

2)	  - label: "aggregatedFeaturedVisuals"
3)	    name: "aggregatedFeaturedVisuals"
4)	    folder: "."
5)	    fields:
6)	     - { label: "Title", name: "title", widget: "string" }

This does work, but I have to add an “input" folder and change directory structure:

  - label: "aggregatedFeaturedVisuals"
    name: "aggregatedFeaturedVisuals"
    folder: "input"
    fields:
     - { label: "Title", name: "title", widget: "string" }

2. Another thing that I tried was to use a generated json file with an array of all the aggregated items and specify it as a file in Decap’s config.yml. It only worked when there was 1 item in the json file. Is there a way to use one json file that contains all of the posts, documents, events, features, etc..

This did not work:

aggregatedFeaturedVisuals.json

[{
      "title" : "my first region",
      "tags" : ["regions"],
      "url" : "/regions/my-first-region/"},{
      "title" : "My first country",
      "tags" : ["countries"],
      "url" : "/countries/my-first-country/"},
      {
      "title" : "Second Country",
      "tags" : ["countries"],
      "url" : "/countries/second-country/"},
      {
      "title" : "Albania",
      "tags" : ["countries"],
      "url" : "/countries/albania/"},
      {
      "title" : "Third Country",
      "tags" : ["countries"],
      "url" : "/countries/third-country/"},{
      "title" : "Albania Threshold Program, Stage II",
      "tags" : ["countryprograms"],
      "url" : "/countryprograms/albania-threshold-program-stage-ii/"},
      {
      "title" : "Albania Threshold Program",
      "tags" : ["countryprograms"],
      "url" : "/countryprograms/albania-threshold-program/"},
      {
      "title" : "country program 10",
      "tags" : ["countryprograms"],
      "url" : "/countryprograms/country-program-10/"}]

It did populate the relation field when only one item was in the json file.

Thanks so much for your help and the answer to the previous question!

[danurbanowicz]

1. As you probably guessed, Decap CMS needs a folder collection to be inside a folder somewhere within the repo root, with the path specified: folder: "path/to/posts"
2. You could output a single JSON file to store all of your referenced items, declare this as a file collection, and then you should be able to do something like this in a relation widget to reference those items:-

- label: "Related Item"
  name: "relatedItem"
  widget: "relation"
  collection: "myFileCollection"
  file: "aggregatedFeaturedVisuals"
  search_fields: ["relatedItems.*.title"]
  display_fields: ["relatedItems.*.title"]
  value_field: "relatedItems.*.url" #save the URL as the value, could be an ID

The problem with file collections is that you cannot add new items from within the CMS as you can with folder collections.

More relation examples are in the docs