Widget extension - how to dynamically add EVENTS to a widget

[AlessandroN]

Hi all,

i'm trying to create a widget that has to deal with N inputs.

Each input needs an EVENT, that will be fired if the binded input its selected.

The problem arises here, in Thingworx you can't add dynamically properties, but you can declare them in the "widgetProperties" function with "isVisible" attribute, and set/unset it. (and it worst as expected) :

mdfork.ide.js

this.widgetProperties = function () {
		var properties = {
			'name': 'mdfork',
			'description': '',
			'category': ['Common', 'MD-Components'],
			'defaultBindingTargetProperty': 'Value',
			'properties':{
				'icon':{
					'defaultValue': 'share',
					'isEditable': true,
					'baseType': 'STRING'
				},
				'comparablesNumber': {
                                        'description': 'Aumenta questo valore per aggiungere altri slot di comparazione',
					'baseType': 'NUMBER',
					'defaultValue': this.prevComparablesNumber,
                                        'isBindingTarget': true,
					'isVisible': true
				},
				'CustomClass': {
                                        'description': '',
                                        'baseType': 'STRING',
                                        'isLocalizable': false,
                                        'isBindingSource': true,
                                        'isBindingTarget': true,
                                        'isVisible': false
				},
				'visible':{
					'defaultValue': 'block',
					'isEditable': true,
					'baseType': 'STRING'
				},
				'Disabled': {
					'baseType': 'BOOLEAN',
					'defaultValue': false,
					'isBindingTarget': true
				}
			}
		}

		for(var i=1; i<=MAX_COMPARABLES_NUMBER; i++){
			properties.properties['compareValue_' + i] = {
				'description': 'Valore di input, da confrontare con i compareValues',
				'baseType': 'STRING',
				'isBindingTarget': true,
				'defaultValue': '',
				'isEditable': true,
				'isVisible': false
			};
		}

		return properties;
	};

In the same way, I tried to do with Events, but Events doesn't expose a "isVisible"  attribute, so if i change the number of inputs, the events number doesn't scale as expected.

How can I achieve this?
Thanks!

[slangley]

Hi @AlessandroN.

Apologies for the delay.

If I'm understanding correctly, you can simply add a property as binding source, which can indicate which property has a change as event source.  In that way, you only need to keep one event.

Regards.

--Sharon

[slangley]

Hi @AlessandroN.

If you feel your issue was resolved satisfactorily, please mark the appropriate solution (even if it's yours) as the Accepted Solution for the benefit of others on the community.

Regards.

--Sharon

[bmihaiciuc]

You can change the available properties, events and services of a widget after it has been added; some of the built-in widgets also do this, like the collection and the charts.

To do this, you can get a reference to the current property definitions like in the snippet below. Note that properties in this case refers to properties, events and services:

const properties = this.allWidgetProperties().properties

You can then directly add new keys to that object to create new properties. The values are objects with the same keys as regular properties with the addition of a special type key that identifies whether the property is a property, event or service:

properties.MyDynamicEvent = {
    name: 'MyDynamicEvent',
    type: 'event', // Indicates that this property represents an event
    description: 'This is my dynamically created event.',
    isVisible: true
}

After you have finished modifying this object, you need to instruct Thingworx to update the properties panel for the widget:

this.updatedProperties()

Finally, note that the changes are reset when you close and reopen the mashup. Ideally you should have a way to derive these dynamic properties from the values of the static properties you have defined for your widget, their binding state or some other mechanism (a hidden property is often used to keep this state). To recreate these dynamic properties whenever the mashup is opened, implement the afterLoad method and recreate them there using the same method.

Ideally, for events and services you should also make sure that the widgetEvents and widgetServices methods also return the updated list; these are invoked to obtain the list of bindings when dropping something on the widget element.

[AlessandroN · Accepted solution]

Thank you for the answer, btw i resolved declaring all the events in the usual "events" section, and just set their visibility on the base of my needs.