Problem with relation widget (help)

Netlify CMS
1

Hi, I’d appreciate some help with this. I’m trying to use the “relation” widget for the collection “projects tags” but I can’t get the input to show the tags that I have stored in the collection (projects tags)… Always show “no options”.

image
image1185×205 5 KB

The field “Project Tags” should show me the tags that I have stored in the “ProjectS Tags” collection.

Please help.

  - name: 'projects'
    label: 'Projects'
    folder: 'content/projects'
    format: 'frontmatter'
    create: true
    slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
    editor:
      preview: false
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - label: 'Project Tags'
        name: 'project_tags'
        widget: 'relation'
        collection: 'projects_tags'
        search_fields: ['tag']
        value_fields: 'tag'
        multiple: true

  - name: 'projects_tags'
    label: 'Projects Tags'
    folder: 'content/projects_tags'
    format: 'frontmatter'
    create: true
    slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
    identifier_field: 'tag'
    editor:
      preview: false
    fields:
      - { name: 'tag', label: 'Tag Name', widget: string }
2

Try creating a project tag through the cms and see if its format matches the tags you already have stored. I don’t see anything wrong with your config at least…

3

Okok, at least my config is ok. But the tags that I have stored were created in the cms. That’s why I don’t understand why they don’t show in the relation widget.

image
image943×513 15.1 KB

BTW i’m using this script in my index.html in the admin folder

<script src="https://unpkg.com/@ncwidgets/netlify-cms@^0.9.0/dist/netlify-cms.js"></script>
4

Can you test your config with the official version of the cms?

https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js
5

I’m gonna try that… but first… I was looking at the files that my localhost request and I found this:

image
image1591×723 88.2 KB

And then I access to the link from projects tags are fetched (https://api.github.com/repos/ovirex/my-portfolio/git/trees/master:content/projects_tags) and show me all the tags just fine… so I suppose the problem might be… the cms?? the custom widget??

6

Testing with the official version of the cms… this errors appear:

image
image868×365 18.1 KB

This is the fields 5 of the collection 0:

- label: 'Project Tags'
  name: 'project_tags'
  widget: 'relation'
  collection: 'projects_tags'
  search_fields: ['tag']
  value_fields: 'tag'

edit: no error, I replace value_fields for value_field

And Now works just fine:

image
image1041×290 6.66 KB

Ok I fix the error and tried to use the script that I told you before, just to see if the problem was the property name, but no, with the script with the custom id widget doesn’t work. :sob: :sob: :upside_down_face: :upside_down_face:

In theory my problem is solved. Thank you very mucho bro, but any suggestion on how I could add an id to the projects collection? cause now I can’t use that custom widget id

7

Sure thing! I’m using a plain old script tag:

<script>
  CMS.registerWidget(
    'uuid',
    createClass({
      getDefaultProps: function() {
        return {
          value: ''
        }
      },
      uuid: function(options) {
        options = options || {};
        var size = options.size || 12;
        var url = options.url || "Uint8ArdomValuesObj012345679BCDEFGHIJKLMNPQRSTWXYZ_cfghkpqvwxyz-";
        var id = "";
  
        if (typeof self === "undefined" || (!self.crypto && !self.msCrypto)) {
          while (0 < size--) {
            id += url[(Math.random() * 64) | 0];
          }
          return id;
        }
  
        // else
        var crypto = self.crypto || self.msCrypto;
        var bytes = crypto.getRandomValues(new Uint8Array(size));
        while (0 < size--) {
          id += url[bytes[size] & 63];
        }
        return id;
      },
      componentDidMount: function() {
        var value = this.props.value;
        var onChange = this.props.onChange;
        var uuid = this.uuid;
  
        if (!value) {
          onChange(uuid());
        }
      },
      render: function() {
        var value = this.props.value;
        var classNameWrapper = this.props.classNameWrapper;
        var forID = this.props.forID;
  
        return h('span', { id: forID, className: classNameWrapper }, value);
      }
    })
  );
</script>

It creates a custom widget which you can use like this:

- {name: id, label: ID, widget: uuid, hint: "Do not edit this field"}
4 Likes
8

It works terrific, I barely understand the code hahaha BUT IT WORKS… thank you a lot bro, you are great.

2 Likes
9

I switched from ncw-file-relation widget to the latest relation widget that has been recently extended to support folder to file collections relationship. Before the switch the performances were acceptable even with big JSON files as per mfi indicator crypto. The new relation widget, instead, stays in waiting state forever.

10

Hi @joliyasmith :wave:t6: , welcome to the forums and thanks so much for reaching out. Can you share your site name so we can look into this and specifically what your issue is?