JSS Question about itemlink field type

Question

For a fresh installed Vue-JSS application, we have some examples in the /Styleguide route. One of them is SharedItemLink.

From /data/routes/styleguide, we can see that sharedItemlink is a field of Styleguide-FieldUsage-ItemLink component. From the definition in the /sitecore/definitions/component folder, I can see that sharedItemLink is of type CommonFieldtypes.ItemLink.

Now, I do a experiment about the children property of sharedItemlink: First, I add a new Item 3 under path data\content\Styleguide\ItemLinkField\Item1. under Item 3, I create a en.yml file which is very similar to en.yml under Item 1 (the name is slightly different)

In disconnected mode, I open src\components\Styleguide\Styleguide-FieldUsage-ItemLink.vue and add code below:

computed: {    
    sharedItemLink() {    
      console.log(this.fields.sharedItemLink.children);
      return this.fields.sharedItemLink;
    }
},

Then I start the jss app and observe the browser console, I can see the children property of sharedItemLink, it just point to the Item 3 we created.

However, if you try connected or integration mode, then you can't find the children property of SharedLinkItem at all. It just disappears.

So here are my questions:

1. In the Styleguide Example, I can only use children property of SharedItemLink in the disconnect mode, what is the reason?
2. May I ask how we initialize and set properties for these CommonFieldTypes?

Answer 1

Note: these answers are relevant for Vue, React, and Angular - they are not specific to Vue.

Question 1

The ItemLink field type is synonymous with a DropTree field in Sitecore. I am able to reproduce the fact that you can add children to an item referenced by an ItemLink field in disconnected mode. And that the children items will even be imported into Sitecore. Unfortunately, however, that appears to be a mistake or oversight because Layout Service will not serialize the children by default.

When Layout Service is serializing the item that is referenced by the ItemLink/DropTree field, it does not serialize any children (or descendants) of the item. This is by design in order to prevent serializing deeply nested item trees (and thus leading to performance issues in Layout Service).

You can implement your own field serializer in order to serialize ItemLink/DropTree children by extending (or replacing) the Sitecore.LayoutService.Serialization.FieldSerializers.InternalLinkFieldSerializer. Then you will need to extend the Sitecore.LayoutService.Serialization.Pipelines.GetFieldSerializer.GetInternalLinkFieldSerializer to return your custom field serializer depending on whatever conditions you specify. Note: the GetInternalLinkFieldSerializer is shared amongst all Layout Service configurations, so it is recommended to scope your serializer appropriately.

Also, I'll make a note that we (the JSS team) should either document the non-usage of ItemLink children or implement more validation during the manifest process to prevent ItemLink children from appearing in the manifest and being imported.

Question 2

The manifest API documentation has information about field declarations for manifest definitions: https://jss.sitecore.com/docs/techniques/working-disconnected/manifest-api#field

Beyond that, the sample apps serve as reference implementations / examples for the various field types you can use in a JSS app. If you have specific questions about field type usage feel free to post questions here on Stack Exchange or on the Sitecore community Slack site, in the #JSS channel.