#SUGCON LONDON 2019 RECAP

This was my first #SUGCON EU. Even though it was only few days, it was an excellent event. This year SUGCON Europe took place in London, capital of Great Britain. I travelled from Houston, Texas. 9 hour flight with United Airlines, arrived a day before the Conference, took few photos of the city.

London Bridge, SUGCONEU Sitecore
London Bridge

It all started with Registration and Sitecore Certifications Exam.

Sitecore SUGCON EU 2019 LONDON
Sitecore SUGCON EU 2019 LONDON

First day was opened by Mark Frost the CEO of Sitecore, with a #sitecoreSelfie

Mark Frost – Sitecore CEO

Opening Keynote was by Donovan Brown from Microsoft. He talked about DevOps. Showed how easy it is to use Azure Boards, as well as Azure Pipelines and Azure Repos and Azure Artifacts, to get started you can visit azure.com/devops

There were many great Sessions at the #SUGCON, but the ones that caught my attention were the #JSS Sessions.

Anastasiya Flynn

JSS Immersion Session by Sitecore Front End Evangelist Anastasiya Flynn was really interesting. She went into the details about creating an event search page and shared some interesting and popular React Libraries.

She showed how you can debug your Sitecore JSS application in VS Code

GraphQL – Lessons Learned

React Libraries that were shared on this presentation:

Another Interesting Session was by Adam Lamarre. Fun with Sitecore JSS: Exploring GraphQL

Adam Lamarre

He showed a lot of cool demos with GraphQL and Sitecore JSS.

  • Item Query
  • Multiple Queries
  • Activity Log
  • Chat Room

I was really inspired by Activity log and Chat Room

Another session on JSS and Sitecore Commerce was by Pramila Soni & Saurabh Sachdeva

Really cool session was by Jeff L’Heureux – 16 Tools for your Sitecore Tool Belt

He shared 17 tools for your Sitecore faster working experience. You can find all the links on his blog.

Also not to forget to mention SFF Tribute

Of course everyone was waiting for Adam and Kam to get on the stage and show was they had been working on and how they were improving the JSS.

Adam Weber and Kam Figy from Sitecore

What was announced in their session? Sneak peak of JSS 9.2

  • JSS and SXA – Manage JSS apps with SXA
  • JSS support for Sitecore Forms
  • JSS Rendering Host

Now you will be able to create a JSS Tenant and JSS Site.

JSS Integrates with SXA, but retains JSS architecture, if you have been working with JSS, and FE technologies, and you are familiar with SXA the below bulleted list would make sense to you.

  • SXA component library not supported
  • Traditional Experience Editor (no toolbox)
  • Theming/Creative Exchange not supported
  • SXA Layout features won’t work in Disconnected Mode
  • Yes all the awesome features of JSS!

JSS Rendering Host was introduced

Sitecore JSS Rendering Host, you will be able to hear about it much more during the Sitecore Symposium Orlando 2019

Congratulations to all the MVP Award Winners!

Great Sense of Humor from the organizers

Thank you to all the Organizers of the SUGCON Europe 2019 in London, it was a great event.

You can find all the presentations and videos from the conference at the following link

Sitecore Hackathon 2019 – Sitecore Social Assitant

This is the second year that I have participated in Sitecore Hackathon.

I got a great pleasure working with Dylan Young and Christopher Williams this year.

So our team was “The-Poutineers

Category: Best enhancement to the Sitecore Admin (XP) UI for Content Editors & Marketers

So the idea of this solution is to make the life of a Marketer much easier, whenever the Content Author is creating an article and new content on the page, without opening a new page, you can just work in Experience Editor and pull up a Twitter Feed, and see what is trending now.

Github: https://github.com/Sitecore-Hackathon/2019-The-Poutineers/tree/master/documentation

Social Assistant Button

 

 

What is new in Sitecore JSS in Sitecore 9.1

With Sitecore 9.1 Sitecore JSS will no longer be in Technical Preview.

JSS is a complete SDK for JavaScript developers allowing to build full-fledged modern solutions using Sitecore and JavaScript and being completely disconnected development and deploy to any platform.

By Using JSS you get to keep Full Experience Platform capabilities such as:

  • Experience Editor
  • Personalization and Testing
  • Tracking and Analytics

JSS currently supports OOTB, Angular, React and Vue.JS, who knows what will be coming next, it seems to be that more front end developers are interested to learn JSS because it gives them freedom.

Sitecore JSS requires a different License. Partners will need to regenerate a license in SPN.

Development Updates:
– JSS 9 with React requires React 16.3 or later, because of new Context API in React.
– JSS 9 with Angular requires Angular 6.x , anybody on Angular 5 can continue on JSS 8 npm packages.
– Layout Service will no longer return ‘editable’ value for fields, unless Sitecore is actually in Experience Editor.
– Sitecore.Ship is replaced with manifest package deployment system. What does that mean, a shared secret known to the deployer and server is used to deploy signed package HMAC.
– Completely refactored React, Angular and Vue apps. There is no more Basic or Advanced App. The content of Sample App has been refactored to JSS Specific Style-guides.
– Sample Apps have been heavily documented for ease of learning.
– All Sample apps now support GraphQL.

A new scaffold has been added that will automatically scaffold a JSS component.

jss-component-scaffold.png

The following instructions is done in Disconnected mode and in ReactJS

Once you add it, you will need to modify few areas:

routes:

sitecore-jss-component.png

Sitecore Component itself, to reflect the changes, that you have made in the route.

This is the area where the component is added automatically when you are running the command (jss scaffold <componentName>)

sitecore-jss-component-breadcrumb.png

And for the changes to the component in the index.js see the screenshot below:

sitecore-jss-component-and-data.png

And this is what it will look like:

Data.png

As you can see on the right side, this is how you will be able to identify that I did not hard code the text 🙂

Go ahead start experimenting with JSS, and look a the sample content that comes with initial creation of an app.

OOTB-components.png

If you have any questions, do not hesitate to reach out to me, on twitter or Sitecore community, on slack on specific #JSS channel.

Reference:

https://jss.sitecore.net/release-notes 

How to Disable PhantomJS on Sitecore CD

If you get a requirement to disable PhantomJS on your Content Delivery environments, this trick will do it.

How PhantomJS is implemented with Sitecore:

Content Testing in Sitecore uses the Phantom JS tool for generation of the screenshot image files. In case you didn’t know, Sitecore has had screenshot generation features for quite some time. We use it to generate icons for items that you’ll be listing in the UI like renderings. These icon generation features are based on the System.Windows.Forms.WebBrowser control built into .net. So why did we not use the existing screenshot features for Content Testing? In early testing we found discrepancies with the WebBrowser control. WebBrowser uses Internet Explorer installed on the server where Sitecore is running. But the specific version that it uses isn’t always the latest. There are registry updates one can make to force the appropriate IE version, but this seemed like a big ask of users. This was one of the reasons we chose to use Phantom JS instead.

All you have to do, is create a patch file that will disable getScreenshotForUrl

Copy the above code into the configuration file and name it whatever you want and it into App_Config\Include\zzz

Reference:

Sitecore Active Directory on Premises and on Azure

It has been quite some time since I have blogged, there is just way too much work, and that is great, I am not even complaining.

I just wanted to take a little break from work and write a blog, and try to illustrate and help with getting started with Active Directory integration. This should be one of the essential components when starting any Sitecore architectural planning.

In this blog I will cover both Active Directory integration on premises as well as Azure Active Directory.

At first this seems to be a very completed to me, but then after reading the official documentation is made much more sense. Obviously after you set it up yourself you will have an understanding, on how to get it accomplished.

Reference for On-Premises integration:

Active Directory on premises integration

So let’s get to it.

First you will need to create yourself or request to have a OU (Organization Unit) created for you and add all the users that you are want to be able to access Sitecore.

While the IT Department is setting that up, in some companies it takes quite some time. Let’s go to Sitecore and install the package.

You can download the latest package from official Sitecore dev web site.

Once you download it, go to Desktop > Development Tools > Installation Wizardsitecore-launchpad.png

and install the Sitecore Package that you have downloaded.

Next Step we will be modifying Configuration files, that will plug it in with your current AD infrastructure.

  • ConnectionStrings.config
  • Domains.config
  • Web.Config
ConnectionStrings.config

<connectionStrings>
<add name=”ManagersConnString”
connectionString=”LDAP://testsrv/OU=Managers,DC=testdomain,DC=sitecore,DC=net” />
</connectionStrings>

Domains.config
<domain name=”ad” ensureAnonymousUser=”false”/>
Web.config

<add name=”ad”
type=”LightLDAP.SitecoreADMembershipProvider”
connectionStringName=”ManagersConnString”
applicationName=”sitecore”
minRequiredPasswordLength=”1″
minRequiredNonalphanumericCharacters=”0″
requiresQuestionAndAnswer=”false”
requiresUniqueEmail=”false”
connectionUsername=”[put the username here]”
connectionPassword=”[put the password here]”
connectionProtection=”Secure”
attributeMapUsername=”sAMAccountName”
enableSearchMethods=”true”
/>

More details on each available parameter can be found from the official documentation, link provided above in the references.
The only that you need to remember to map your users to specific roles within Sitecore.
Once you map everything to the appropriate roles, you will have no problem logging into the Sitecore.

Azure Active Directory integration

So this is a much easier process IMHO.

For this approach you will need to use Federated Authentication.

Reference from official web site:

I would really recommend to read this blog by Bas Lijten as well, it has a lot of useful information.

So lets proceed:

At this point I imagine that you have Federated Authentication set up and you have read the links provided above and you have AZURE AD, and you are setting this up for a client. So you already have Azure Active Directory set up.

In my case my organization is TONY 🙂

sitecore-active-directory.png

So you will need to access App Registrations and create your own application:

sitecore-active-directory-app-registration.png

As you can see by the name of my app I am integrating with Sitecore 9.

Once is registered you will go ahead and use the application ID and add it to your configuration file.

Make sure to specify the reply-url:
sitecore-reply-urls.png
<settings>
<setting name=”ClientId” value=”application ID when you register your application into Azure through APP registration” />
<setting name=”AADInstance” value=”https://login.microsoftonline.com/{0}” />
<setting name=”Tenant” value=”your azure active directory e.g. Test.onmicrosoft.com” />
<setting name=”PostLogoutRedirectURI” value=”https://sc9.local/sitecore/login&#8221; />
<setting name=”RedirectURI” value=”https://sc9.local/sitecore&#8221; />
</settings>

Also you will need to edit the Manifest and change the groupMembershipClaims
"groupMembershipClaims": "SecurityGroup",
Once you plug it all in you will be able to access Sitecore and you login window would look like this:
sitecore-azure-ad-login.png
You might have a question how to map AD groups to Sitecore groups, here is a configuration for it:
<transformation name="devRole" type="Sitecore.Owin.Authentication.Services.DefaultTransformation, Sitecore.Owin.Authentication">
<sources hint="raw:AddSource">
<claim name="groups" value="AZURE AD GROUP ID" />
</sources>
<targets hint="raw:AddTarget">
<claim name="http://schemas.microsoft.com/ws/2008/06/identity/claims/role" value="sitecore\{ROLE}" />
</targets>
<keepSource>true</keepSource>
</transformation>
If you have any question comment here, or reach out to me on twitter @tmamedbekov
You can also ask a question on Sitecore Slack, we have the best community.

How to Install Sitecore 9

It has been a while since I blogged, I would like with you guys the process of installing Sitecore 9. It is a different process there is no SIM, most of the steps are manual.

So what have I installed prior to proceeding with the installation process:

  • Windows 10 machine
  • IIS
  • .NET
  • .NET Core 2.0
  • SQL
  • SQL Management Studio

Also you need to adjust some security settings on your Windows Machine

net user administrator /active:yes
net user guest /active:yes
net user administrator *

Before we jump into the next step, lets download the source files. So what you will need:

Also you will need to add some stuff to the IIS, if you dont have it already:

  • Web Deploy 3.6 for Hosting Servers
  • URL Rewrite

We are going to run all of this in the Windows Power Shell.

First step will be to register the repository:

Register-PSRepository -Name SitecoreGallery -SourceLocation https://sitecore.myget.org/F/sc-powershell/api/v2

Next we will install the Sitecore Installation Framework

Install-Module SitecoreInstallFramework

Next we will install Fundamentals

Install-Module SitecoreFundamentals

After that we will move onto installing Solr

From your Power-shell run the files that you have downloaded Lazy-Solr.

Make all your configuration changes, as needed. Pay attention to the JAVA_HOME path, make sure everything is reflected correctly.

Solr should run automatically once installation is completed. https://solr.8983/solr/#/

image001 (1).png

Once that is completed and everything looks good, lets move on to the next step, the Sif-less step.

Extract SIFless.zip and run as administrator the SIFLess.exe

Fill out all the necessary parameters: Should look something like this.

image001.png

After you click on to the Generate Files, it will generate Powershell scripts in the same directory where SIFLess.exe is. You will go ahead and run that ps1 script. Once you run the script and installation is successful, you should be to access it, from the browser at the following URL:

http://xp0.sc

If you have any questions, do not hesitate to comment below.

There are lots of different tutorials out there, how to get started with Sitecore 9. This tutorial is really fast and easy to follow.

This is very similar to Chris Auer’s video, if you don’t like to read, and you like videos more. Here’s the link to the video.

What is Sitecore JSS and how do I start with it?

Sitecore JSS was announced last year at the Sitecore Symposium in Las Vegas.

IMG_1649

What is JSS and why do you even need it?

Sitecore introduced JSS (JavaScript Services) last year, and not a lot of people are understanding or knowing what it is for and why it is needed, or some don’t even know that it exists. I waited till there is an updated, and all the bugs will be covered, to write a blog post.

Well what is JSS, and how can you utilize it in your project? First great thing about JSS that I really like is that you do not need to have a Sitecore instance installed on your local machine. There are few way that you can implement JSS.

JSS is a complete SDK for JavaScript developers allowing to build full-fledged modern solutions using Sitecore and JavaScript and being completely disconnected during development and deploy to any platform in a headless configuration with full Experience Platform capability preserved.

read more at the official web site https://jss.sitecore.net/

If you have any questions, ask them on Slack

Enough of introduction, lets get to the development, to some interesting stuff.

First you need to go to https://jss.sitecore.net/ and familiarize yourself with the the SDK.

Pre-requisites are the following:

  • Sitecore XP 9.0
  • Node.JS 6.9 and above
  • NPM 5 and above

Once you have all of this installed, then we can proceed.

First you need to make sure you have Layout Service enabled. What does Layout Service give you? Well Layout Service is a Presentation layer via API (JSON). It give you Personalization, MV Texting, tracking and analytics. It is included in JSS and SXA.

How do you test Layout Service on your instance?

http://sitecore.local/sitecore/layoutsvc/render/jss?item=/

jss-1

Okay if everything looks good at this time, we can move on and start exploring JSS.

Now we can see how it looks in the Content Editor.

jss-2

And the site looks good, we can now move on and go to JSS

jss-3.png

At this point we have proved that Layout Service is enabled and we can continue with JSS implementation.

What is a Layout Service?

Provides nested JSON rendering of item layout, including serialized datasource contents and reflecting any configured personalization rules and content testing.

These are the commands that we will be using on the package that you can find on JSS official web site https://github.com/sitecore/jss

  • Npm run prod:build
  • Npm run manifest:generate
  • Npm run package:generate
  • Npm run package:deploy

We will start with the basic JSS App that runs React.Js

jss-4

First open scjssconfig.json and modify it to your needs, see screenshot above.

Or you can just run the setup by typing npm run setup

To Deploy we will be using Sitecore Ship. Sitecore Ship – an open source web service that can be used to remotely install Sitecore update packages. (https://github.com/kevinobee/Sitecore.Ship)

Once code is deployed you will be able to see content of the JssBasicApp in the Content Editor.

jss-5

In the next tutorial, we will be adding a component and modifying content from JSS, without accessing Sitecore.

If you have any question, please do not hesitate to reach out to me, comment here or connect with me on Twitter @tmamedbekov