Properties view JSONForms

[quratulain-ali]

Hi,

I was looking at the @eclipse-emfcloud/jsonforms-property-view. I wanted to have a dropdown list to set references of a model element. Following is an excerpt of typeschema.json

"boards": { "type": "string", "enum": ["foo", "bar"] }

& uischema.json

{ "type": "Control", "scope": "#/properties/boards" }

Now I want the enum to be populated dynamically not a static list of foo, bar.
Any leads for this?

Cheers,
Qurat ul ain

[ndoschek]

Hi @quratulain-ali,
I'll have a look into it and get back to you asap :)
Cheers,
Nina

[ndoschek]

Hi again @quratulain-ali,

I had a look and I would suggest to try this approach:

I took the person-detail example from https://github.com/eclipse-emfcloud/jsonforms-property-view/tree/master/example as base for this rough guide.

First of all, providing the type schema as JsonSchema object would be a good prerequisite.
For the example, the typeschema would be stored in a separate *.ts file and could look like this:

typeschema.ts

import { JsonSchema } from '@jsonforms/core';

export const typeSchema: JsonSchema = {
    $id: '#person',
    title: 'Person',
    type: 'object',
    properties: {
        firstName: {
            type: 'string',
            minLength: 3,
            maxLength: 30
        },
        lastName: {
            type: 'string',
            minLength: 3,
            maxLength: 30
        },
        registered: {
            type: 'boolean'
        },
        birthDate: {
            type: 'string',
            format: 'date'
        },
        personalId: {
            type: 'integer',
            minimum: 100,
            maximum: 5000
        },
        nationality: {
            type: 'string',
            enum: ['AUT', 'GBR', 'GER', 'LUX', 'NOR', 'SRB']
        },
        email: {
            type: 'array',
            items: {
                type: 'string',
                format: 'email'
            }
        }
    },
    required: ['personalId']
};

In the customized JsonFormsResourcePropertyDataService, I would adapt the following parts:

• Introduce the typeschema as member of the class and initialise it with the schema from the previous step:

import { typeSchema as typeSchemaBase } from './typeschema';
...
    protected typeschema: JsonSchema;

    @postConstruct()
    init(): void {
        this.typeschema = typeSchemaBase;
    }
...

• Use the member as type schema provider:

    getSchema(_selection: Object, _properties?: Object): Promise<JsonSchema | undefined> {
        return Promise.resolve(this.typeschema);
    }

• Finally, update the enum values of your typeschema. I assumed in this case a separate provider, we can subscribe to:

    @postConstruct()
    init(): void {
        this.typeschema = typeSchemaBase;
        // subscribe to updates and apply new enum values
        this.myEnumDataProvider.onUpdate((newEnumList: string[]) => {
            this.typeschema.properties!['nationality'].enum = newEnumList;
        });
    }

This last step depends also on your requirements, it could of course also be from an API call, user input, or any other data source.

HTH and please don't hesitate to reach out if there's anything more we can discuss or if you have further questions.
Cheers, Nina

[quratulain-ali]

Thanks Nina for getting back to me. There is one thing that I don't understand here is where does this.myEnumDataProvider comes from?

[ndoschek]

Hi @quratulain-ali,
Oh sorry for not making that more clear.
This is just a placeholder in the example code for an instance that would allow do get updated enum values. I just assumed in this case a separate provider, we can subscribe to. The updated enum values could of course also com from an API call, user input, or any other data source instead.
Cheers, Nina