DFS 10.1.0 - 18 JSS Integration - FAQ - Extend JSS models with custom properties

If you need to add custom properties to Asset, AssetLink or AssetList models you can do it by implementing custom serializers and switching Sitecore to this custom serializers.

First of all in the project you need to add references to the next libraries:

DFS.dll;
Newtonsoft.Json.dll;
Sitecore.Kernel.dll;
Sitecore.LayoutService.dll;

Implement serializers for Asset, AssetLink and AssetList fields.

using DFS.Data.Fields;
using Newtonsoft.Json;
using Sitecore.Data.Fields;
using Sitecore.LayoutService.Serialization;
using Sitecore.LayoutService.Serialization.FieldSerializers;


public class AssetFieldSerializer : BaseFieldSerializer
{
    public AssetFieldSerializer(IFieldRenderer fieldRenderer)
      : base(fieldRenderer)
    {
    }

    protected override void WriteValue(Field field, JsonTextWriter writer)
    {
        AssetField fld = new AssetField(field);

        if (fld == null || fld.AssetMetadata == null)
        {
            return;
        }

        writer.WriteStartObject();
        writer.WritePropertyName("src");
        switch (fld.AssetMetadata.AssetTypeId)
        {
            case 5: // Powerpoint
            case 7: // Text
            case 8: // DOCX
            case 9: // Excel
            case 14: // PDF
            case 16: // Photoshop
            case 17: // Illustrator
            case 10: // Indesign
            case 11: // Zip
            case 15: // Archive
            case 18: // Visio
                writer.WriteValue(fld.AssetMetadata.RawUrl);

                if (!string.IsNullOrWhiteSpace(fld.AssetMetadata.Preview))
                {
                    writer.WritePropertyName("previewUrl");
                    writer.WriteValue(fld.AssetMetadata.Preview);
                }

                break;

            case 1: // Video
            case 2: // Audio 
            case 4: // Image
            default: // etc.
                writer.WriteValue(fld.AssetMetadata.GetMediaUrl(fld.Quality));
                break;
        }

        writer.WritePropertyName("assetTypeName");
        writer.WriteValue(fld.AssetMetadata.AssetTypeName);

        writer.WritePropertyName("assetTypeId");
        writer.WriteValue(fld.AssetMetadata.AssetTypeId);

        writer.WritePropertyName("alt");
        if (fld.AssetItem != null)
        {
            writer.WriteValue(fld.AssetItem.DisplayName);
        }
        else
        {
            writer.WriteValue(fld.AssetMetadata.Name);
        }

        if (!string.IsNullOrEmpty(fld.Width))
        {
            writer.WritePropertyName("width");
            writer.WriteValue(fld.Width);
        }

        if (!string.IsNullOrEmpty(fld.Height))
        {
            writer.WritePropertyName("height");
            writer.WriteValue(fld.Height);
        }

        writer.WriteEndObject();
    }
}

using DFS.Data.Fields;
using Newtonsoft.Json;
using Sitecore.Data.Fields;
using Sitecore.LayoutService.Serialization;
using Sitecore.LayoutService.Serialization.FieldSerializers;

public class AssetLinkFieldSerializer : BaseFieldSerializer
{
    public AssetLinkFieldSerializer(IFieldRenderer fieldRenderer)
      : base(fieldRenderer)
    {
    }

    protected override void WriteValue(Field field, JsonTextWriter writer)
    {
        AssetlinkField fld = new AssetlinkField(field);

        if (fld == null || fld.AssetMetadata == null)
        {
            return;
        }

        writer.WriteStartObject();

        writer.WritePropertyName("href");
        writer.WriteValue(fld.AssetMetadata.GetMediaUrl(fld.Quality));

        writer.WritePropertyName("assetTypeName");
        writer.WriteValue(fld.AssetMetadata.AssetTypeName);

        writer.WritePropertyName("assetTypeId");
        writer.WriteValue(fld.AssetMetadata.AssetTypeId);

        writer.WritePropertyName("text");
        if (fld.AssetItem != null)
        {
            writer.WriteValue(fld.AssetItem.DisplayName);
        }
        else
        {
            writer.WriteValue(fld.AssetMetadata.Name);
        }

        writer.WriteEndObject();
    }
}

using DFS.Data.Fields;
using DFS.Data.Model;
using Newtonsoft.Json;
using Sitecore.Data.Fields;
using Sitecore.LayoutService.Serialization;
using Sitecore.LayoutService.Serialization.FieldSerializers;

public class AssetListFieldSerializer : BaseFieldSerializer
{
    public AssetListFieldSerializer(IFieldRenderer fieldRenderer)
      : base(fieldRenderer)
    {
    }

    protected override void WriteValue(Field field, JsonTextWriter writer)
    {
        AssetlistField fld = new AssetlistField(field);

        if (fld == null)
        {
            return;
        }

        writer.Formatting = Formatting.Indented;

        if (fld.Assets.Count > 0)
        {
            writer.WriteStartArray(); // Write the opening of the "Items" array

            foreach (var item in fld.Assets)
            {
                this.WriteAssetItemValue(item, writer);
            }

            writer.WriteEndArray(); // Write the closing of the "Items" array.
        }
    }

    private void WriteAssetItemValue(AssetListItem item, JsonTextWriter writer)
    {
        if (item.AssetMetadata == null)
        {
            return;
        }

        writer.WriteStartObject();
        writer.WritePropertyName("src");
        switch (item.AssetMetadata.AssetTypeId)
        {
            case 5: // Powerpoint
            case 7: // Text
            case 8: // DOCX
            case 9: // Excel
            case 14: // PDF
            case 16: // Photoshop
            case 17: // Illustrator
            case 10: // Indesign
            case 11: // Zip
            case 15: // Archive
                writer.WriteValue(item.AssetMetadata.RawUrl);

                if (!string.IsNullOrWhiteSpace(item.AssetMetadata.Preview))
                {
                    writer.WritePropertyName("previewUrl");
                    writer.WriteValue(item.AssetMetadata.Preview);
                }

                break;

            case 1: // Video
            case 2: // Audio 
            case 4: // Image
            default: // etc.
                writer.WriteValue(item.AssetMetadata.GetMediaUrl(item.Quality));
                break;
        }

        writer.WritePropertyName("assetTypeName");
        writer.WriteValue(item.AssetMetadata.AssetTypeName);

        writer.WritePropertyName("assetTypeId");
        writer.WriteValue(item.AssetMetadata.AssetTypeId);

        writer.WritePropertyName("alt");
        writer.WriteValue(item.AssetMetadata.Name);

        writer.WriteEndObject();
    }
}

Implement GetFieldSerializer for Asset, AssetLink and AssetList serializers.

using Sitecore.Diagnostics;
using Sitecore.LayoutService.Serialization;
using Sitecore.LayoutService.Serialization.Pipelines.GetFieldSerializer;

public class GetAssetFieldSerializer : BaseGetFieldSerializer
{
    public GetAssetFieldSerializer(IFieldRenderer fieldRenderer)
        : base(fieldRenderer)
    {
    }

    protected override void SetResult(GetFieldSerializerPipelineArgs args)
    {
        Assert.ArgumentNotNull((object)args, nameof(args));
        args.Result = new AssetFieldSerializer(this.FieldRenderer);
    }
}

using Sitecore.Diagnostics;
using Sitecore.LayoutService.Serialization;
using Sitecore.LayoutService.Serialization.Pipelines.GetFieldSerializer;

public class GetAssetLinkFieldSerializer : BaseGetFieldSerializer
{
    public GetAssetLinkFieldSerializer(IFieldRenderer fieldRenderer)
        : base(fieldRenderer)
    {
    }

    protected override void SetResult(GetFieldSerializerPipelineArgs args)
    {
        Assert.ArgumentNotNull((object)args, nameof(args));
        args.Result = new AssetLinkFieldSerializer(this.FieldRenderer);
    }
}

using Sitecore.Diagnostics;
using Sitecore.LayoutService.Serialization;
using Sitecore.LayoutService.Serialization.Pipelines.GetFieldSerializer;

public class GetAssetListFieldSerializer : BaseGetFieldSerializer
{
    public GetAssetListFieldSerializer(IFieldRenderer fieldRenderer)
        : base(fieldRenderer)
    {
    }

    protected override void SetResult(GetFieldSerializerPipelineArgs args)
    {
        Assert.ArgumentNotNull((object)args, nameof(args));
        args.Result = new AssetListFieldSerializer(this.FieldRenderer);
    }
}

Build the project and copy dll to Sitecore bin folder

Open Sitecore website folder (usually C:\inetpub\wwwroot\MySitecoreWebsite) and find \App_Config\Sitecore\LayoutService\Sitecore.LayoutService.Jss.Digizuite.config file.

Open this file in any text editor, and switch processors to just created ones.

...
<processor ... type="MyJSSIntegrationApp.Serializers.GetAssetFieldSerializer, MyJSSIntegrationApp" ...
  <FieldTypes hint="list">
    <fieldType id="1">Asset</fieldType>
  </FieldTypes>
</processor>
<processor ... type="MyJSSIntegrationApp.Serializers.GetAssetLinkFieldSerializer, MyJSSIntegrationApp" ...
  <FieldTypes hint="list">
    <fieldType id="1">Assetlink</fieldType>
  </FieldTypes>
</processor>
<processor ... type="MyJSSIntegrationApp.Serializers.GetAssetListFieldSerializer, MyJSSIntegrationApp" ...
  <FieldTypes hint="list">
    <fieldType id="1">Assetlist</fieldType>
  </FieldTypes>
</processor>
...

Save changes in Sitecore.LayoutService.Jss.Digizuite.config file and reload the page with JSS application.

Documentation

DFS 10.1.0 - 18 JSS Integration - FAQ - Extend JSS models with custom properties

Related content