IPropertyEditorResolver

The IPropertyEditorResolver interface is used by Veva to determine which UI editor component is shown to the user for each type of property in the system. This applies everywhere in the system where the user is managing settings for things, such as components, website settings, page settings and so forth. Veva includes standard property editor resolvers which take care of all basic types such as strings, integers, booleans etc. and also some advanced types such as enums, and even various complex objects.

If you have a special use case, where you have a property which you'd like to create your own UI editor component for, you can implement your own IPropertyEditorResolver.

Interface declaration

public interface IPropertyEditorResolver
{
	PropertyEditor ResolvePropertyEditor(PropertyInfo propertyInfo);
}

Example

Let's take the Asset system as an example. The Image component in the asset system allows users to select an asset to show, in various ways. To do that, the Image component has a property called Asset which is of the type AssetProperty. The following IPropertyEditorResolver maps properties which have that type (AssetProperty) to a Vue component called "asset-property-editor" which the Asset system also defines. As you can see, it handles single AssetProperty types and IEnumerable<AssetProperty> types a bit differently. If the type is an IEnumerable, the Multiple attribute of the asset-property-editor is set to true.

public class PropertyEditorResolver : IPropertyEditorResolver
{
	public PropertyEditor ResolvePropertyEditor(PropertyInfo propertyInfo)
	{
		if (typeof(IEnumerable<AssetProperty>).IsAssignableFrom(propertyInfo.PropertyType))
		{
			return new PropertyEditor() { VueComponent = "asset-property-editor", DisplayComponent = "asset-formatter", Props = new { Multiple = true } };
		}

		if (typeof(AssetProperty).IsAssignableFrom(propertyInfo.PropertyType))
		{
			return new PropertyEditor() { VueComponent = "asset-property-editor", DisplayComponent = "asset-formatter", Props = new { Multiple = false } };
		}
}

Registration

This is how the implementation is registered into the DI container in Veva, this should be done in your module config file (The class which implements IModule).

public void ConfigureServices(IServiceCollection services, IConfiguration configuration)
{
	services.AddSingleton<IPropertyEditorResolver, PropertyEditorResolver>();
}

Image component

This is the Asset property as it's defined in the image component.

[EditorBrowsable]
[Category("General")]
[Description("The asset to display")]
[DisplayName("Asset")]
[Parameter]
public AssetProperty Asset { get; set; }

This is how the AssetProperty class is defined:

public class AssetProperty
{
	[JsonProperty(PropertyName = "assetId")]
	public Guid AssetId { get; set; }
}