How to create a input field binding to a element attribute?

[rsoika]

Hi,
I am currently trying to implement a custom input field that is associated with a certain property of an element.
Currently I do this more or less manually:

	// create input element for attribute 'documentation'
	if (element instanceof TaskNode) {
		const task: TaskNode=element;
		const documentationInput = document.createElement('input');
		documentationInput.insertAdjacentText('beforeend', ''+task.documentation);
		documentationInput.onchange = function (this) {
			console.log('...set new value.... ');
			// send some RequestEditValidationAction...?
		};
	}

I guess there is somewhere in the GLSP code already a mechanism or a class to achieve this in a more easy way? The direct-task-editor form the workflow example seems to be something like that. But the code with all the suggest methods is hard to understand. Also I can not see how to bind this to a specific attribute of my element.

Can someone provide an example or a code fragment how to send a new element attribute value in a onchange event back to the GLSP server?

[tortmayr]

There is no mechanism directly in GLSP. For more complex forms one would typically use a third-party library that is specialized on forms.
The direct-task-editor use (or abuses 😉) the autocomplete-widget which main purpose is to provide autocomplete-able suggestions for the command palette. While its technially possible to implement a form editor with this widget we would not recommend it.
I saw your question in the emf.cloud discussions regarding the use of json-forms for this use case which is also what I would have recommended. IMO it there is no need to reinvent the wheel here so relying on a well established library like json-forms definitly makes sense.

[rsoika]

Thanks for your answer. Yes I also think the json-forms will be a more sustainable approach, especially as I plan to provide an extensible approach to customize the BPMN default property forms with individual bpmn-extensions.

But just for a better understanding: If I change the property of a selected element will this already trigger the dirty flag or did I have to send an action event to the server in any case? And if so, which event should I send in case just a property of a element was updated?

[rsoika]

Finally I managed to integrate jsonforms into my UIExtension implementing a SelectionListener:

	selectionChanged(root: Readonly<SModelRoot>, selectedElements: string[]): void {
		console.log('selection change  received:', root, selectedElements);
		if (this.selectionService.isSingleSelection()) {
			const element = root.index.getById(selectedElements[0]);
			..........
			............
			if (element instanceof EventNode) {
				console.log('...Event Node selected....');
				const event: EventNode = element;
				this.currentEventNode=event;
				ReactDOM.render(
					<JsonForms
						data={event.propetriesData}
						cells={vanillaCells}
						renderers={vanillaRenderers}
						onChange={({ errors, data }) => this.updateEventNode({data})}
					/>,
					this.bodyDiv
				);
			}
		}
	}
	
	// update the event node....??
	updateEventNode(_newData: any): void {
		console.log('...new event data= ' + _newData.data.name);
		// how to set the new name : _newData.data.name;
		.....
	}

A form with the current data of my model element is renderd and I can react onChange events to receive the new value (e.g. the name of the element) in my method updateEventNode().

Of course I can't manipulate the selected element directly as it is Readonly - which makes sense to me.

But the question now is: How can I send an updated version of my selected Element back to the server? I expect that through some kind of action event the new value (name of the element) will automatically update also in the diagram pane and the dirty-flag will be set to true.

How should I do this? Is my assumption with a action event sending to the server the correct approach? Can someone provide a code snipped how to send such an event?

Thanks for help.

[rsoika]

How to update a property of an element is described here