1

What I want to achieve:

Step-1: when publishing, add embedded component in rich-text field to (JSON) output.

Step-2: href (tcm) should be replaced by field from embedded component.

note: embedded component is not/never on any page published.

Step-1.

What is already done and works.

From DXA 2.2 framework there is an option to add embedded component to rich-text field.

Example paragraaf.Text

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
see website <a title="Lorem Ipsum" href="tcm:98-421996">Lorem Ipsum</a>

The hyperlink (href) added is type schema/class ExterneLink.

After adding line with 'schemasToEmbedInRichText' in 'Render Page Content' located ..\Building Blocks\Framework\Developer\Templates\DXA.R2 it is embedded in paragraaf.Text (defined as rich-text).

<CompoundTemplate xmlns="http://www.tridion.com/ContentManager/5.3/CompoundTemplate"> 
  <TemplateInvocation>
    <Template xlink:href="tcm:105-416409-2048" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:title="Generate DXA R2 Page Model" />
    <TemplateParameters>
      <Parameters xmlns="http://www.sdl.com/web/schemas/dynamicpage">
        <schemasToEmbedInRichText>ExterneLink</schemasToEmbedInRichText>
        <expandLinkDepth xmlns="http://www.sdl.com/web/schemas/dynamicpage">3</expandLinkDepth>
        <modelBuilderTypeNames>DefaultModelBuilder;DefaultPageMetaModelBuilder;EclModelBuilder;ContextExpressionsModelBuilder</modelBuilderTypeNames>
      </Parameters>
    </TemplateParameters>
  </TemplateInvocation>
</CompoundTemplate>

Step-2.

Problem occurred while rendering this section

Unable to map field 'item' to property Artikel.Items of type 'System.Collections.Generic.List`1[[Uwv.eDv.Web.Modules.Core.Models.Paragraaf, Uwv.eDv.Web.Modules.Core, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]]'. Unable to map field 'text' to property Paragraaf.Text of type 'Sdl.Web.Common.Models.RichText'. No semantic mapping found between Schema 418386 (http://www.sdl.com/web/schemas/core:ExterneLink) and model type 'Sdl.Web.Common.Models.EntityModel'

Our models:

public class Artikel : EntityModel
{
   [SemanticProperty("item")]
   public List<Paragraaf> Items { get; set; }
   ...
   public string Title { get; set; }
   public Afbeelding Afbeelding { get; set; }
}

public class Paragraaf : EntityModel
{
    // field below contains hyperlink(s) of type component (type ExterneLink)
    public RichText Text { get; set; }
    ...
}

public class ExterneLink : EntityModel, ISyndicationFeedItemProvider
{
    [SemanticProperty("externalLink")]
    public string Url { get; set; }
}

Below shows the JSON after step-1 (with content explorer preview/source). The embed component is present, mapping for this must be set.

How to get value "https://www.lipsum.com/" as href from Text field here. Content is here ExterneLink.Url property is here 'externalLink'.

"Content": {"externalLink": "https://www.lipsum.com/"

...
 "Regions": [
    {
      "Name": "Main",
      "Entities": [
        {
          "Id": "421995",
          "Namespace": "tcm",
          "ComponentTemplate": {
            "Id": "418420",
            "Namespace": "tcm",
            "Title": "Artikel",
            "RevisionDate": "2021-04-08T08:36:05.207",
            "OutputFormat": "HTML Fragment",
            "Metadata": {
              "view": "Artikel",
              "htmlClasses": "art_"
            }
          },
          "Folder": {
            "Id": "85214",
            "Title": "Artikel"
          },
          "Content": {
            "title": "Besluit op bezwaar over Wob-verzoek herbeoordelingen WB3000 dossiers",
            "afbeelding": {
              "$type": "EntityModelData",
              "Id": "418473",
              "Namespace": "tcm",
              "ComponentTemplate": {
                "Id": "416497",
                "Namespace": "tcm",
                "RevisionDate": "0001-01-01T00:00:00"
              },
              "Folder": {
                "Id": "85044",
                "Title": "Afbeelding"
              },
              "BinaryContent": {
                "Url": "/Preview/imagesdxa/visual-header-artikel_tcm102-418473.webp",
                "FileName": "visual-header-artikel.webp",
                "FileSize": 53454,
                "MimeType": "image/webp"
              },
              "Metadata": {
                "altText": "Automonteur"
              },
              "SchemaId": "418389"
            },
            "item": {
              "$type": "ContentModelData",
              "text": {
                "$type": "RichTextData",
                "Fragments": [
                  "<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>\nsee website ",
                  {
                    "$type": "EntityModelData",
                    "Id": "421996",
                    "Namespace": "tcm",
                    "Folder": {
                      "Id": "84939",
                      "Title": "Links"
                    },
                    "Content": {
                      "externalLink": "https://www.lipsum.com/"
                    },
                    "Metadata": {
                      "html-title": "Lorem Ipsum",
                      "html-innerText": "Lorem Ipsum"
                    },
                    "SchemaId": "418386"
                  }
                ]
              }
            }
          },
...
6
  • Can you check this link tridion.stackexchange.com/questions/20092/…
    – Anand N S
    Feb 15 at 13:56
  • @anand DXA Model Service works in step-1. The generated Json contains each embedded component (ExterneLink) in the paragraaf field of type rich-text field, In step-2 the dxa model should be changed so that rich-text field fields can be extacted from that embedded component. My dxa model needs a change the structure so that mapping can be done. because embedded is a feature, it should be possible? Maybe CreateSyndicationItem involved? Feb 15 at 16:18
  • Refer to the github.com/RWS/dxa-modules/blob/develop/webapp-net/Core/Models/… , may be you need to define SyndicationItem
    – Anand N S
    Feb 15 at 17:53
  • @anand thanks for that. Not knowing what that does, I got this to work. See answer. Will make the formatting even better with a title Feb 15 at 22:42
  • Out of curiosity, how do editors link to the Components? Is that a DXA-specific feature or the out-of-the-box Component linking in the rich text format are?
    – Alvin Reyes
    Feb 16 at 0:14

1 Answer 1

1

step-2 Went on with that. Get good results.

class ExterneLink changes

  • added ISyndicationFeedItemProvider as interface to implement

  • added method ExtractSyndicationFeedItems

  • added method public override string ToHtml()

      /// <summary>
      /// Extracts syndication feed items.
      /// </summary>
      /// <param name="localization">The context <see cref="Localization"/>.</param>
      /// <returns>A single syndication feed item containing information extracted from this <see cref="ExterneLink"/>.</returns>
      public IEnumerable<SyndicationItem> ExtractSyndicationFeedItems(Localization localization)
      {
          return new[] { CreateSyndicationItem(Url, DeepLink, null, null, localization) };
      }
    

the view did redering to html fragments

<bgl-rich-text>
    @Html.Raw(@paragraaf.Text)
</bgl-rich-text>

enter image description here

that @Html.Raw(@paragraaf.Text) results in

System.NotSupportedException: 'Direct rendering of View Model type 'Uwv.eDv.Web.Modules.Core.Models.ExterneLink' to HTML is not supported. Consider using View Model property of type RichText in combination with @Html.DxaRichText() in view code to avoid direct rendering to HTML. Alternatively, override method Uwv.eDv.Web.Modules.Core.Models.ExterneLink.ToHtml().'

because of that the ToHtml method was added (to be improved with title).

public override string ToHtml()
    {
        if (string.IsNullOrEmpty(Url))
            return string.Empty;

        return $@"<a href=""{this.Url}"">linktitle to site</a>";
    }

Example text with 2 ExterneLinks e.g.

 <p>Lorem Ipsum is simply dummy text of the printing and typesetting
 industry.</p>  goto lipsum.com website <a title="mylipsum.com"
 href="tcm:98-421996">Lorem Ipsum</a> <p>and a second ExterneLink to <a
 title="mylipsum2.com" href="tcm:98-418474">Lorem Ipsum</a></p>

This is correct solved with method ToHtml(). enter image description here

note: anchor open and close with title in original text is removed.

2
  • if there is another way to do it, post it Feb 15 at 23:32
  • webapp ExterneLink was done, it must also be registered (in area,even if you don't have a view) otherwise it gives mapping fault. Mar 24 at 8:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.