Multiple custom renderer vue

General
1

Using Vue 3 with vuetify and jsonforms/vue-vuetify installed. I’m just testing around but can’t seem to get two renderer to work. i have two renderer one is rating , one is multiselect dropdown which using v-select.

const schema = {
properties: {
name: {
type: “string”,
minLength: 3,
description: “The task’s name”,
},
agree: {
type: “boolean”,
},
dueDate: {
type: “string”,
format: “date”,
description: “The task’s due date”,
},
category: {
type: “string”,
enum: [“Never”, “Daily”, “Weekly”, “Monthly”],
description: “Select one”,
},
multiSelect: {
type: “array”,
uniqueItems: true,
enum: [“Enum1”, “Enum2”, “Enum3”, “Enum4”, “Enum5”],
description: “Select multiple”,
},
rating: {
type: “integer”,
minimum: 0,
maximum: 5,
},
},
required: [“name”],
};

const uischema = {
  type: "VerticalLayout",
  elements: [
    {
      type: "Control",
      scope: "#/properties/agree",
    },
    {
      type: "Group",
      label: "My Group",
      rule: {
        effect: "SHOW",
        condition: {
          scope: "#/properties/agree",
          schema: { const: true },
        },
      },
      elements: [
        {
          type: "Control",
          scope: "#/properties/name",
        },
      ],
    },
    {
      type: "VerticalLayout",
      elements: [
        {
          type: "Control",
          scope: "#/properties/dueDate",
        },
        {
          type: "Control",
          scope: "#/properties/category",
        },
        {
          type: "Control",
          scope: "#/properties/multiSelect",
        },
        {
          type: "Control",
          scope: "#/properties/rating",
        },
      ],
    },
  ],
};

const customRenderers = markRaw([
…extendedVuetifyRenderers,
{ renderer: MultiSelectRenderer, tester: multiSelectTester },
{ renderer: RatingRenderer, tester: ratingTester },
]);
const renderers = Object.freeze(customRenderers);

export const multiSelectTester = rankWith(
5, // Priority rank
(uischema, schema) => uischema.scope === “#/properties/multiSelect”,
);

export const ratingTester = rankWith(
6, // Priority rank
(uischema, schema) => uischema.scope === “#/properties/rating”,
);

ye32bvSnB9
ye32bvSnB9244×334 2.89 KB

The multiselect dropdown doesn’t use the custom renderer. Can help advice what am I missing

2

Hi @Aleixa ,

the vue-vuetify renderer set provides enum controls with rank 10 in the extended renderer set. See here: jsonforms/packages/vue-vuetify/src/extended/AutocompleteEnumControlRenderer.entry.ts at master · eclipsesource/jsonforms · GitHub

Thus, it should work if you use rank 11 or higher for your custom control.

Best regards,
Lucas

1 Like
3

The issue is in the schema. The multiSelect is declared is of type array but it’s also an enum of string values. You likely wanted to model all entries as enums, e.g.

    "multiSelect": {
      "type": "array",
      "items": {
        "type": "string",
        "enum": ["Enum1", "Enum2", "Enum3", "Enum4", "Enum5"]
      },
      "uniqueItems": true,
      "description": "Select multiple"
    },

As @lucas-koehler said, the pure enum renderer has a rank of 10, however it also produces errors for your schema as your array and enum declarations will never match.

So fixing the schema should already enable your custom renderer as the off-the-shelf renderer for multi-enums has a rank of 5.

2 Likes
4

@sdirix @lucas-koehler
Thanks for the help.
Able to render it out after changing enums with a rank of 6 and above.

Just want to ask, how do I determine the priority rank? Where can I check what rank is the default one or is it I can just simply put a high number like 30 for all custom renderers ?

5

Hi @Aleixa,

For the exact priorities you will need to check the code base. Note that if you only go slightly above them, a future update which contains more specialized renderers on our side might then return a higher priority than yours.

The highest priority we have in the code base is 20. So if you stay well above that, e.g. 100+, you will never run into issues.

1 Like