Render Sitecore Rich-Text Fields for Proper Linking

For a current project, we are using AngularJS and needed to develop a “carousel”.  That led us to a pretty strong library, angular-carousel.  We ran into one snag in that the module, at least out of the box and with minimal configuration, struggled with creating a carousel out of markup and seemed to prefer to have the slides and their related information defined in the model and output via an ng-repeat.

        <ul rn-carousel rn-carousel-controls rn-carousel-index="index">
            <li class="walkthrough__slide" ng-repeat="slide in slides track by" id="walkthrough__slide_{{$index}}">
                <div class="walkthrough__image" ng-bind-html="slide.image"></div>

                <div class="walkthrough__panel desk-pv desk-ph++ desk-mb portable--mt+ portable-mh- portable-p- portable-pb+">
                    <h2 class="walkthrough__heading mt0 mb--">{{slide.heading}}</h2>
                    <div class="walkthrough__body" ng-bind-html="slide.body"></div>
                    <div class="walkthrough__link mt" ng-show=" != ''"><a ng-click="incrementIndex()" ng-bind-html=""></a></div>

That’s not a major issue, I just had to transfer the Sitecore fields into business objects and then render them as JSON.  If you saw my previous post about the Newtonsoft JSON library, that’s also not a mighty task.  Each property would just be a case of pulling the related field.

            public string Heading {
                    return item["Walkthrough Slide Heading"];

Yes, I know I could be using an ORM like Glass Mapper.  I’ll save that for another post but, in short, I don’t really like them.

One snag I noticed was any of my rich-text fields that contained a link to another piece of content, the link was output with “link.aspx?id=XXX” as the href.  Those links actually work and display a page.  However, that breaks some SEO rules because now I have two URLs that achieve the same content.  Even worse if the content in question is on another site since the domain won’t change.

Turns out you actually need to “render” the field.  Of course John West already has a post about it.  It boils down to a static method you can call.  I wrote a helper wrapper.

            private string RenderField(Item i, string fieldName)
                return global::Sitecore.Web.UI.WebControls.FieldRenderer.Render(i, fieldName);

I was already aware of that method as it applies to Image and Link fields, but now I know it should apply to rich-text fields as well.  If you’re seeing some strangeness about your rich-text fields in the output to the browser, consider that they’ve haven’t been properly “processed”.

Leave a Reply