Reuse Properties From Another Existing Component

This page explains how to reuse the ModelProperties classes in another ModelProperties.

Reusing ModelProperties allows you to share properties between components without duplicating their definition.

Extracting Values from the Current Object Using Another ModelProperties

The SameLevelPropertiesToNestedPropertiesConverter class reads the same fields as the current ModelProperties, but serializes the sub model into its own dictionary.

You have an item template containing the following fields:

  • Name: TV

  • Color: red

  • Size: 80%

Your ModelProperties contains the following code:

public class StylingModelProperties : IModelProperties {
     [SitecoreProperty("Color")]
     public string Color { get; set; }
 
     [SitecoreProperty("Size")]
     public string SizeInPercent { get; set; }
}
 
public class SimpleModelProperties : IModelProperties {
    [SitecoreProperty("Name")]
    public string Name { get; set; }
 
    [SitecoreProperty("Styling", PropertyConverter = typeof(SameLevelPropertiesToNestedPropertiesConverter<StylingModelProperties>))
    public IDictionary<string, string> StylingProperties { get; set; }
}

Therefore, your SimpleModelProperties should have the following two properties:

  • Name = "TV"

  • StylingProperties = {"Color": "red", "SizeInPercent": "80%" }

If you would rather have a full Model, with Properties and RawProperties, you can use the SameLevelPropertiesToSubModelConverter class instead:

public class SimpleModelProperties : IModelProperties {
    [SitecoreProperty("Name")]
    public string Name { get; set; }
 
    [SitecoreProperty("Styling", PropertyConverter = typeof(SameLevelPropertiesToSubModelConverter <StylingModelProperties>))
    public SubModelProperties<SameLevelPropertiesToSubModelConverter> StylingModel { get; set; }
}

In this scenario, SimpleModelProperties has a StylingModel with two properties:

  • Properties, which matches the Properties attribute like in a standard model

  • RawProperties, which matches the RawProperties attribute like in a standard model

This allows for the ModelProperties classes to be segmented and reused.

Extracting Values from a Referenced Item ID

In Sitecore, there are many fields that store an item ID as a reference.

The Coveo for Sitecore Hive framework also provides a way to extract properties using a different data source, defined as an ID in a field.

You have an item template containing the following fields:

  • Name: "TV"

  • StylingReference: "{110D559F-DEA5-42EA-9C1C-8A5DF7E70EF9}"

Given this other data source with a matching ID:

  • ID: "{110D559F-DEA5-42EA-9C1C-8A5DF7E70EF9}"

  • Color: "red"

  • Size: "80%"

Your ModelProperties contains the following code:

public class StylingModelProperties : IModelProperties {
     [SitecoreProperty("Color")]
     public string Color { get; set; }
 
     [SitecoreProperty("Size")]
     public string SizeInPercent { get; set; }
}
 
public class SimpleModelProperties : IModelProperties {
    [SitecoreProperty("StylingReference", PropertyConverter = typeof(NestedItemToModelPropertiesConverter<StylingModelProperties>))
    public StylingModelProperties StylingProperties { get; set; }
}

This sets the StylingProperties value to a serialized ModelProperties read from the referenced ID containing the following values:

  • Color = "Red"

  • Size = "80%"

This allows you to use a single Data Source as a reference and read its properties.

Writing the Nested Properties into a JSON Object

When using nested properties, you might want to output its values to the Coveo JavaScript Search Framework.

By using the NestedWritableModelSerializer class, you can serialize another ModelProperties into a JSON string.

You have the following ModelProperties:

public class StylingModelProperties : IModelProperties {
    [SitecoreProperty("Color")]
    [SearchUiProperty]
    public string Color { get; set; }
}
 
public class SimpleModelProperties : IModelProperties {
    [SearchUiProperty(PropertySerializer = typeof(NestedWritableModelSerializer<StylingModelProperties>)]
    public StylingModelProperties Styling { get; set; }
}

The computed attribute for Styling in the RawProperties will be:

  • styling: '{ "color": "red" }'

If you want to apply those values to the current element, you can use the unfoldDictionaryToAttributes prebinding helper method (see About Prebinding Helpers in Coveo for Sitecore Hive).

public class SimpleModelProperties : IModelProperties {
    [SearchUiProperty(Prebind = Prebind.DICTIONARY_UNFOLD, PropertySerializer = typeof(NestedWritableModelSerializer<StylingModelProperties>)]
    public StylingModelProperties Styling { get; set; }
}

Using the previous example, you use the unfoldDictionaryToAttributes.

Therefore, the attributes computed from Styling in the RawProperties become:

  • styling: '{ "color": "red" }'

  • prebind-styling: "unfoldDictionaryToAttributes"

When evaluating this prebinding method, the markup will look like:

<div data-color='red' data-styling='{"color": "red" }' data-prebind-styling='unfoldDictionaryToAttributes'></div>
What's Next for Me?