Wednesday, August 9, 2017

Sitecore and React – simple integration

I’ve just developed simple application that allow using Sitecore Fields and Data in native React Application with all benefits of Expirience Editor. You can download the source code here

Example of usage:

1) In your Rendering View cshtml file use SitecoreReact helper to register fields and data that you are going to use, in my example: Title, Product Description and some List of data:

2) In react Application add SitecoreReact.js file from js folder and do
 $ npm install html-react-parser

3) Now you can use Field and Data components in you react Application:

It works in Expirience Editor too:

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

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:

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