Wednesday, January 25, 2017

Sitecore SXA Field Helpers

While exploring OTB SXA Components, I found that those components mostly use the standard Sitecore helpers for rendering. But what about SXA-specific MVC helpers. What do they do?
This is based on Sitecore 8.2 Initial Release Sitecore Experience Accelerator

@Html.Sxa().Field()
I have put 2 fields into the page:

<h1>@Html.Sxa().Field("ButtonTitle",Model.DataSourceItem, false)</h1>
<h1>@Html.Sitecore().Field("ButtonTitle", Model.DataSourceItem)</h1>
They render absolutely the same content:

<h1>
<span class="scChromeData">{Sitecore stuff }</span>
<span id="fld_A55E26E1CE4C4927AEECA0BF6203AFF8_BDC182F2926B43B099D78135AD5DA64B_en_1_78d82c00c05d46e7a1a6f3f6e25cc290_111_edit" sc_parameters="prevent-line-break=true" contenteditable="true" class="scWebEditInput scEnabledChrome" scfieldtype="single-line text" scdefaulttext="[No text in field]" sc-part-of="field">
Test1 Button title
</span>
</h1>
If we go to the code of the SXA method:
public IHtmlString Field(string fieldName, Item item, object parameters)
{
   return (IHtmlString) new SitecoreHelper(this._htmlHelper).Field(fieldName, item, parameters);
}
We can see that almost all SXA methods reuse regular Sitecore methods without any changes.
Also if we open the SXA OTB controls, that we can see usage of both SXA and Sitecore extension helpers and the only difference is a new SXA helper:

public IHtmlString Field(string fieldName, Item item, bool disableWebEditing)
Witch is the same as:
@Html.Sitecore().Field("TestImage", Model.DataSourceItem, new { DisableWebEdit = true })
We can use those methods to disable web editing for the fields.
@Html.RenderingVariants().RenderVariant(variantField, Model.Item, Model.IsControlEditable) 
This helper is using to render a particular variant that you can specify in the component properties:

@foreach (var variantField in Model.VariantFields)
 {
   @Html.RenderingVariants().RenderVariant(variantField, Model.Item, Model.IsControlEditable);
 }
@Html.Sxa().Placeholder("head") 
It replaces the sitecore placeholder to empty space, the only place it used in OTB components - SxaLayout.cshtml, I assume that the sxa engine use it as a metadata placeholder, more investigation needs to be done.
To be continued...

4 comments:

  1. Dear..thank you for nice info.. We are getting below error if we click on home of new sxa site for this placeholder-"No parameterless constructor defined for this object." Line 26: @Html.Sxa().Placeholder("head")


    For your info:

    we are using :
    1. Sitecore 8.1 update 3
    2. powershell 4.6 Full
    3. SXA 1.4

    Any pointer? It would be a great help...

    thanks

    ReplyDelete
  2. Great Article… I love to read your articles because your writing style is too good, its is very very helpful for all of us and I never get bored while reading your article because, they are becomes a more and more interesting from the starting lines until the end.
    rpa training in bangalore
    best rpa training in bangalore
    RPA training in bangalore
    rpa course in bangalore
    rpa training in chennai
    rpa online training

    ReplyDelete
  3. I'm here representing the visitors and readers of your own website say many thanks for many remarkable
    python Training institute in Pune
    python Training institute in Chennai
    python Training institute in Bangalore

    ReplyDelete