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...

14 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. Excellent post!!!. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it.
    AWS training in chennai

    AWS Training in Bangalore

    ReplyDelete
  3. This blog is the general information for the feature. You got a good work for these blog.We have a developing our creative content of this mind.Thank you for this blog. This for very interesting and useful.
    Data Science course in kalyan nagar
    Data Science course in OMR
    Data Science course in chennai
    Data science course in velachery
    Data science course in jaya nagar
    Data Science interview questions and answers
    Data science course in bangalore

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. The very next time I read a blog, I hope that it does not disappoint me as much as this particular one. I mean, I know it was my choice to read, but I truly thought you would probably have something useful to say. All I hear is a bunch of crying about something that you could possibly fix if you were not too busy searching for attention.
    Selenium Training In Bangalore
    UI Development Training In Marathahalli

    ReplyDelete
  6. 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.
    python training in chennai

    python course in chennai

    python online training in chennai

    python training in bangalore

    python training in hyderabad

    python online training

    python training

    python flask training

    python flask online training

    python training in coimbatore


    ReplyDelete
  7. This post is very simple to read and appreciate without leaving any details out. Great work!
    data science coaching in hyderabad

    ReplyDelete
  8. Bet365 Casino India 2021 Review & Ratings by real people - Mapyro
    Find out about Bet365 Casino India in our 강원도 출장마사지 review and grab 이천 출장안마 a no 광양 출장마사지 deposit bonus code for Indian players. Rating: 8.4/10 · ‎Review by Joe 전라남도 출장마사지 Kizlauskas 안산 출장샵

    ReplyDelete
  9. Download Tableau Desktop today and start visualizing your data. Start a 14-day free trial and discover the power of fast and easy data visualization.Tableau Desktop Latest Version

    ReplyDelete
  10. Bulk Image Downloader 6.17 Crack is an app to download large image galleries with just a single click. A great tool that provides online .Bulk Image Downloader Android

    ReplyDelete