Blog

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

Sitecore Trial License

Try developing on Sitecore for free

Request access to the Developer Trial Program and receive a 60-day trial license, access to our software, and information on how to get started. Learn about:

  • Working with Sitecore APIs and the Helix framework
  • Sitecore development recommended practices
  • Implementation and extensibility of the Sitecore platform

Follow the link here, scroll to the bottom of the page and request a free trial.

Day 1 Sitecore Symposium 2017 Las Vegas

What have we learned in the first day of attendance the Sitecore Symposium. Well first of all the main and the most interesting announcement is the Sitecore Experience Platform 9.

IMG_1641

Well what does it offer us:

IMG_1657 (1)

  • JSS – Headless Javascript services
  • Purpose-build Forms for digital marketers
  • Federated Automation
  • Sitecore xConnect
  • Expanded xDB database support for Microsoft SQL Server 2016 and Azure SQL
  • New Marketing Automation build on xConnect with specific support for Personalization Commerce
  • Greater privacy measures around PII data and GDPR
  • Security features, with support for encryption at ret and in motion
  • Streamlined Upgrades, Migration & Conversion tools
  • Machine Learning algorithms “Sitecore Cortex”

Big Announcement was about the machine-learning. When Sitecore introduced Cortex

IMG_1645

The next great thing was related to the xConnect. Now you will be able to import any data into Sitecore.

IMG_1643

Of Course the Headless, something that I was very excited about. But unfortunately it supports react.js. It should support all the other frameworks soon. But the demo with react.js was simply great.

IMG_1649

And of course there was information about the Agile and development and plugin approach.

IMG_1656

IMG_1655

Sitecore Experience Cloud was also discussed.

IMG_1642

How about Sitecore and .NET core. It is all about the freedom.

IMG_1653

I would like to say that overall I am very excited about Sitecore 9.0. It is already available on the (https://dev.sitecore.net/). Go get your copy.

If you have any questions, do not hesitate to ask or reach out to me on slack @tmam and twitter @tmamedbekov.

Sitecore HTML Helper Methods – Part 1

Here is my cheat-sheet for all the html helper methods that I use all the time, and there are some that I find every day, and I just get excited about what Sitecore can give us.

Current Item

@Html.Sitecore().CurrentItem

Current Field

@Html.Sitecore().Field("Title")

Field with different source

@Html.Sitecore().Field("Title", Sitecore.Context.Database.GetItem("{858FAD09-070A-45BA-BA29-446940A3EC4F}"));

Create a image with a url that can be edited in Experience Editor

@Html.Sitecore().Field("link", new { text = @Html.Sitecore().Field("Image") })

 Placeholder

 @Html.Sitecore().Placeholder("main")

Image Field with class

@Html.Sitecore().Field("Image", new { @class = "img-responsive" })

Field that will allow you disable the web editing feature in Experience Editor

@Html.Sitecore().Field("Heading", new { DisableWebEdit = true })
This will list the Children of the Current Item you are in.
@foreach (Sitecore.Data.Items.Item item in Html.Sitecore().CurrentItem.GetChildren())
 {
@Html.Sitecore().Field("Heading", item)
@Html.Sitecore().Field("Preview", item)
}
Visitor Identification
@Html.Sitecore().VisitorIdentification()

More stuff coming soon…

How to create a user in Sitecore and give them special access to Sitecore Content

So today, I will demonstrate how to create a user that will have access only to a specific Content Item in Content Editor.

Requirement:

Create a user that will only have access to edit one specific item in Content Editor

Execution Steps:

In this tutorial we will be using  the following Sitecore tools:

  • User Manager
  • Role Manager
  • Security Editor

First lets create a user and name him Author:

user-1

Go to Sitecore LaunchPad and select User Manager. Click New and enter the values, depending on your requirements should look something like this:

user-2

Click Next and Close.

Next Step lets make user “author” member of “sitecore\Author” role.

Select the user and click Edit button on the ribbon.

user-3

Switch to the tab “Member Of” and click “Edit”

user-4

From the list of Roles select “sitecore\Author” and add it and then click OK.

The reason I am using this Role, because this OOTB role created by Sitecore, and it disables a lot of administrative functionality.

user-5

Now lets give this user access to edit only one specific item.

 

Select the user “author” from the list and click “Security Editor” on the ribbon.

user-3

In the next window you will make the following changes.

Make sure that the user “author” is selected. Then Allow to Write to the Item “Configurations” and Deny “FXM” to Read. Everything under Configurations will inherit the permissions.

user-6.PNG

Everything is in effect immediate, there is no Save or Okay buttons. So be careful what you are doing. You can make mistakes very easy.

This is what you should see when you login with Author credentials.

user-7

Sitecore recommended practice is to create roles that have special permissions, and then assign those roles to users. In this example I would not create a Role for the user because I only have a requirement for one user to touch one item, and this will never change.

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

Sitecore Experience Editor with Angular JS Integration

I have been challenged to integrate Angular web-application with Sitecore, I needed to create an ability for Content Authors to edit content that is coming from Angular Application.

So lets think for a second, I have an angular application that has all of my design and all of my logic and templates and controllers and so on. Sitecore is serving as a database. Customer would like to edit content in Experience Editor, not in the Content Editor, they would like to edit everything on the web page, the only way to do it, is to build the web site in Sitecore recommended way, by using the the MVC way. Create Layouts, Controllers, Models and so on. But we don’t want to rebuild it all. We would like to do this faster without rebuilding it.

First thing is to figure out how to inject MVC into the Angular Template, within the Sitecore Layout. After my research has been done I stopped on an article by Sitecore MVP Alexander Smagin (Using Angular Directives in Sitecore Edit Mode).

In this tutorial I will show, how you can get going really fast without rebuilding everything in Sitecore.

What we will need to have in our project:

  1. Sitecore Layout (Layout.cshtml)
  2. Sitecore Controller (AngularController.cs)
  3. Angular Template (index.html)
  4. Angular Module (myangular.js)
  5. Sitecore Template
  6. Sitecore Layout
  7. Sitecore Item

So lets begin!!!

Step 1: Lets Create a Sitecore Template

If you do not know how to create a Sitecore Template , here is a quick tutorial (How to create a Sitecore Template?)

  • Content
    • Title – Single-Line Text
    • Text – Rich-Text Editor
    • Image – Image

Create a template

Save your work and add __Standard Values.  You result should look something like this.

Sitecore Tree View

Step 2: Lets Create a Sitecore Layout (Layout.cshtml)

Lets go ahead and open Visual Studio and create a Layout. Right click on Views folder and a View and name is angularLayout.cshtml  and paste the following code in the angularLayout.cshtml:

We will add Controller and Angular Module next.

Step 3: Lets Create a Sitecore Controller (AngularController.cs)

Go to Controllers folder and add new Controller and name it AngularController.cs and paste the following code in there:

Step 4: Lets Create an Angular Module (myangular.js)

Go ahead and create myangular.js under the Scripts folder, and paste the following code in there:

Make sure to change your templateUrl.

And finally you can either add your own template or use this one for the learning purposes. This is just a sample, use your imagination how you can go about it.

Step 5: Lets Create an Angular Template (index.html)

This is just a simple angular template that uses Bootstrap, and it will bind the content with the Sitecore (@Html.Sitecore().Field) method.

Now since we have done all the work in Visual Studio. Lets go ahead and build it, and Publish it to Sitecore.

Once Everything is Published we will go ahead and connect all of the code that we have done to our template, and start creating items, based on this template.

Step 6: Lets Create a Sitecore Layout in Content Editor.

You should have something similar to this:

layout_tree

And your Data information for this Layout will look like this:

layout_data.PNG

How we will have to go back to our __Standard Values and add this Layout to the Template that we have created.

So go and select __Standard Values and select Presentation Details

standard-values.PNG

Select the appropriate Layout and you are good to go.

Create and item and you open in Experience Editor, and this item renders the layout that comes from the .html page with angular directive, you can edit everything, that you see on the page.

final-product.PNG

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

Thank you Alexander Smagin for his great post Using Angular Directives in Sitecore Edit Mode