Looking to implement one or more Property Editors in your own scenario? The Property Dataset is necessary for a Property Editor to work, so make sure to have that integrated first.
A Property Dataset is a Context API that holds the data for a set of properties.
It is required for the umb-property element to have a Property Dataset provided. It can be provided via JavaScript code or an Element as documented below.
The umb-property-dataset component provides a Property Dataset Context for any properties within. This provides a way to implement such purely via Elements.
In the following example a dataset is implemented by using the umb-property-dataset component together with with two umb-property components:
<umb-property-dataset .value=${this.data} @change=${this.#onDataChange}>
<umb-property
label="Textual input"
description="Example of text editor"
alias="textProperty"
property-editor-ui-alias="Umb.PropertyEditorUi.TextBox"></umb-property>
<umb-property
label="List of options"
description="Example of dropdown editor"
alias="listProperty"
.config=${[
{
alias: 'multiple',
value: false,
},
{
alias: 'items',
value: ['First Option', 'Second Option', 'Third Option'],
},
]}
property-editor-ui-alias="Umb.PropertyEditorUi.Dropdown"></umb-property>
</umb-property-dataset>Since a Property Dataset is a Context any descending code can consume it and utilize the values.
Such a case could be a Workspace View that wants to display the value of a specific property.
The following example shows how to consume the Property Dataset and observe the value of a property with the alias of my-property-alias.
this.consumeContext(UMB_PROPERTY_DATASET_CONTEXT, async (datasetContext) => {
this.observe(await datasetContext?.propertyValueByAlias('my-property-alias'), (value) => {
console.log('the value of `my-property-alias` is', value)
});
});RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4