Problem with relation widget (help)

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”.

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 }

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…

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.

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>

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

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

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

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??

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

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:

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

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"}
3 Likes

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

2 Likes