Panel: tags fields in table columns

1

Hi,

in some forms, we use tags and load the available list of tags from a static list:

        settingsfields:
          type: fields
          fields:
            type: tags
            label: Tags
            accept: options
            options:
              type: api
              url: "{{ site.url }}/tags.json"

if i add the same options in a table in the panel, i recive an error:

    columns:
      tags:
        label: Tags
        type: tags
        options:
          type: api
          url: "{{ site.url }}/tags.json"

the problem is, that the preview is rendered by the vue component ‘k-tags-field-preview’, an this components expects that ‘options’ is an array and not a object.

Exists same other property for this, or is this feature not implemented?

i write my own extension, but a core solution would be better.

<script>
export default {
  extends: "k-tags-field-preview",

    created: function() {

        var options = this.column?.options || this.field?.options || [];

        if(Array.isArray(options)){
            return;
        }

        options = this.column?.options;

        if(!options || !options.type || options.type != "api" || !options.url){
            return;
        }

        const url = '..' + options.url;

        this.column.options = [];

        this.$api.get(url).then((tags) => {
        var tagsList = []
          for (const [key, value] of Object.entries(tags)) {
            tagsList.push({value: key.trim(), text: value});
          }

          this.column.options = tagsList;
        });
    },
   
  computed: {
    bubbles() {
      let bubbles = this.value;

      // predefined options
      var options = this.column?.options || this.field?.options || [];

      if (typeof bubbles === "string") {
        bubbles = bubbles.split(",");
      }

      /*FIX: trim babble values*/
      bubbles = bubbles.map( t => t.trim());

      return bubbles.map((bubble) => {
        if (typeof bubble === "string") {
          bubble = {
            value: bubble,
            text: bubble,
          };
        }

        for (const option of options) {          
          if (option.value == bubble.value) {
            bubble.text = option.text;
          }
        }

        return {
          back: "light",
          color: "black",
          ...bubble,
        };
      });
    },
  },
};
</script>
2

I don’t understand this example, could you provide more context please?

And what’s your Kirby version?

3

Hi,

in forms we use a tags-field with a static list of tags, loaded over a json file:

 settingsfields:
          type: fields
          fields:
            type: tags
            label: Tags
            accept: options
            options:
              type: api
              url: "{{ site.url }}/tags.json"

image

the url “/tags.json” returns this:

{"Motorsport":"Motorsport(title)", ...}

in the tags field in the markdown file of the page is ‘Motorsport’ stored, and the field in the panel shows ‘Motorsport (title)’. this is correct.

In tabels, i only see the stored value from the markdown file:

image
image1041×162 14.8 KB

In this case, i expect here also the value ‘Motorsport (title)’ in the tags cell but i do not know how to configure the tags column in the blueprint.

4

i hope you understand what i mean:-)
We use kirby version 3.8.7 currently

5

What you see is in the list is the label, the preview can only show what is stored in the file (the value). Otherwise, you have to get the label from the blueprint (or in your case from your endpoint).

so yes, you either need a custom preview or you have to store what you want to see in your content file.