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 https://github.com/kosty78/SitecoreReact.git

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

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

Wednesday, October 5, 2016

Sitecore 8.2 Dictionary Fallback

An important topic while working with Sitecore is how to handle different languages for the websites.

For example, we have a website that supports the English and Russian versions, all labels are stored in a local dictionary, also we have a global fallback dictionary that has just English version, so if there are no items in the local dictionary in Russian we going to use the Global Dictionary and render English labels.


First of all, we need to add Russian language and set the “Fallback Language” field in the language definitions.


Now we need to create a Global Domain item (/sitecore/templates/System/Dictionary/Dictionary Domain) and a Global Dictionary Entry(/sitecore/templates/System/Dictionary/Dictionary Entry). Each Dictionary Entry item has two fields: Key and Phrase.  Key is a Shared Field which means that the field is shared across all language and number versions and is not meant to be different across versions.  The Phrase field is a multiline text field and is an Unversioned Field, meaning it can differ across language versions.
Do the same for our local dictionary, but set the ‘Fallback Domain’ field to the Global Dictionary Domain


And create a Russian version of the Dictionary Entry:

Now we need to configure the Sitecore to use the Local Dictionary:


<?xml version="1.0"?>

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">

  <sitecore>

    <sites>

      <site name="website">

        <patch:attribute name="dictionaryDomain">Local Website Dictionary</patch:attribute>

      </site>

    </sites>

  </sitecore>

</configuration>

</configuration>

Below is a simple peace of code, it should show us a Title from the Local Russian dictionary and a Description from the Global English dictionary

<div>@Sitecore.Globalization.Translate.Text("Title")</div>
<div>@Sitecore.Globalization.Translate.Text("Description")</div>

It doesn’t work yet, but here is the trick: we just need to enable 2 options in the Global Dictionary Entry and the option “Enforce Version Presence” works as a trigger, so you can even clear the cache then uncheck it, save and it will work again. For me it’s a bug and probably I will do additional investigation soon.


Below is what we have now:

Monday, July 18, 2016

Setup Angular 2 and Typescript in Sitecore Project





It is detailed instruction on how to setup Angular 2 and Typescript in existing Sitecore project. For this purposes I’ve created a simple Sitecore solution, you can download it from here https://github.com/kosty78/SimpleSc and setup Angular 2 by following my instructions. The solution has TDS and Web projects with simple layout and test control.


Also I’ve checked in solution with configured Angular 2, so you can download it, restore all packages and run https://github.com/kosty78/SimpleScWithAngular2

My Environment:
  • VS 2015 Update 3
  • Sitecore 8.1
  • NodeJS 6.3 https://nodejs.org/en/

First of all, please install the ‘Package Installer’ it will help us to manage JS packages:


·        


     Right click on the Project(SimpleSc.Web) and chose ‘Quick Install package’



Enter ‘angular2’ and click ‘Install’

Use the Quick Installer again and install

  • rxjs
  • es6-shim
  • es6-promise
  • gulp
  • systemjs


Make all folders visible and you will see new folder in the project – ‘node_modules’





Now we need to setup the Typescript - add new folder ‘ts’ and 2 typescript files: boot and component

Add Typescript json configuration file and replace the text:


{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "target": "es5",
    "outDir": "static/scripts/js"
  },
  "compileOnSave": true,
  "watch": true,
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}



Into boot.ts add:


import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './component'

bootstrap(AppComponent);




Into Component.ts add:



/// 
import {Component} from 'angular2/core';

@Component({
    selector: 'angular2',
    template: `{{title}}

`
})

export class AppComponent {
    title: string;

    constructor() {
        this.title = 'Angular 2';
    }
}



Now we need to copy necessary js files to our folder, add Gulp configuration file


And replace the text in the file:




var gulp = require('gulp');

gulp.task('copy:libs', function () {
    return gulp.src([
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/systemjs/dist/system-polyfills.js',
        'node_modules/systemjs/dist/system.src.js'
    ]).pipe(gulp.dest('static/scripts/vendor/ang'))
});

gulp.task('copy:rx', function () {
    return gulp.src([

        'node_modules/rxjs/**/*.js'

    ]).pipe(gulp.dest('static/scripts/vendor/ang/rxjs'))
})

gulp.task('copy:angular', function () {
    return gulp.src([
        'node_modules/angular2/**/*.js',
    ]).pipe(gulp.dest('static/scripts/vendor/ang/angular2'))
});

gulp.task('copy:symbol-observable', function () {
    return gulp.src([
        'node_modules/symbol-observable/**/*.js',
    ]).pipe(gulp.dest('static/scripts/vendor/ang/symbol-observable'))
});


gulp.task("copy", ["copy:libs", 'copy:rx', 'copy:angular', 'copy:symbol-observable']);





Go to the task runner and start the copy task


Now we need to configure system.js, create new javascript file setup.systemjs.js in static/script/js/ and add the text below into the file:



System.config({
 defaultJSExtension: true,
 map: {
  app: 'static/scripts/js',
  rxjs: 'static/scripts/vendor/ang/rxjs',
  angular2: 'static/scripts/vendor/ang/angular2',
  'symbol-observable': 'static/scripts/vendor/ang/symbol-observable'
 },
 packages: {
  app: {
   defaultExtension: 'js',
   format: 'register'
  },
  rxjs: {
   defaultExtension: 'js',
   format: 'cjs'
  }
  ,
  angular2: {
   defaultExtension: 'js',
   format: 'cjs'
  },
  'symbol-observable':
   {
    defaultExtension: 'js',
    main: 'index.js'
   }
 }
});

System.import('app/boot').then(null, console.error.bind(console));






Now we need to add the references in the Layout file : SimpleLayout.cshtml



    <script src="static/scripts/vendor/ang/es6-shim.min.js" type="text"></script>
    <script src="static/scripts/vendor/ang/system-polyfills.js"></script>


    <script src="static/scripts/vendor/ang/angular2/bundles/angular2-polyfills.js"></script>
    <script src="static/scripts/vendor/ang/system.src.js"></script>
    <script src="static/scripts/vendor/ang/rxjs/Rx.js"></script>
    <script src="static/scripts/vendor/ang/angular2/bundles/angular2.dev.js"></script>
    <script src="static/scripts/js/setup.systemjs.js"></script>



Add post build event to copy necessary angular2 files into sitecore web directory
xcopy "$(ProjectDir)Static\scripts\vendor\ang" "c:\Sitecore\Sites\sc8\Website\Static\scripts\vendor\ang" /i /e /y


Now rebuild and run the Sitecore and preview the Test page



Wow, it Works!!! Now you can research Angular 2 features! )

Monday, September 14, 2015

Sitecore, ADAM, Basic API Example

My project uses Sitecore as a Front-End and ADAM as a Photo-Storage, the task is - display a list of specific records(Name, Description and Picture). Because ADAM's documentation is hard to find, I'm going to provide the code :)
First of all we need to create a Template, that will have just one TextFiled with the Record Guids that we need to display.
Now we need to get those records from ADAM:

            var app = new Application();
            if (app.LogOn(Configuration.Settings.Registration, Configuration.Settings.AdamName, Configuration.Settings.AdminPassword) == LogOnStatus.LoggedOn)
            {
                try
                {
                    foreach (var assetId in AssetList.Records.Split(','))
                    {
                        var record = new Record(app);
                        record.Load(new Guid(assetId));
                        Records.Add(record.Files.Master.GetPreview().GetPath(), record.Fields["Name"]);
                    }

                }
                finally
                {
                    app.LogOff();
                }
            }


And just display it in a View:

@{
    if (!Model.Records.Any())
    {
        [No content found. Verify data service is available.]
        return;
    }
}

<ul class="record-list">
        @foreach (var item in Model.Records)
        {
          <li> <img href="@item.Key"></img> </li>
          <li> @item.Value </li>
        }

</ul>


That is it!  Looks very easy! ADAM and Sitecore now are partners and there is a plugin 'ADAM CONNECTOR' in the Sitecore Marketplace. I'm going to research this plugin and probably my next post will be about the plugin.

Thursday, June 11, 2015

Sitecore and GlassMapper - how much a GlassCast<> costs

We are using the GlassMapper on many projects, I just want to know how it affects performance.
I have about 20000 Items for testing (Articles) with about 20 fields, in first code I use the GlassCast to get Titles:


items.Select(item => item.GlassCast<Article>()).Select(art => art.Title).ToList();



In second part I will use the field directly:


items.Select(item => item[Article.TitleFieldName]).ToList();



In first case, when we use the GlassCast average time was 00:00:55.23 In second case average time was 00:00:00.034

It's almost 2000 times faster, so we should use it carefully!

Friday, June 5, 2015

Starting with Sitecore Analytics MongoDB API


I see a lot of questions about how to start using it, so this is a short post about.
For example let's get all Visits data for the last month (last 30 days) for our particular site. First of all we need to get the MongoDB collection named "Interactions" it has all Visits data:

//Connecting to the Analytics DB
var driver = Sitecore.Analytics.Data.DataAccess.MongoDb.MongoDbDriver.FromConnectionString("analytics");

//Building our query
var builder = new QueryBuilder();
var filter = builder.And(builder.GTE(_ => _.StartDateTime, DateTime.Now.AddDays(-30)), builder.EQ(_ => _.SiteName, siteName.ToLower())); 

//Retrieving data from the "Interactions" collection
var interactions = driver.Interactions.FindAs(filter)



In similar way you can get other data.

That is it!