#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

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

How to create a Sitecore Template?

Open your Experience Editor. Right click on the desired folder and Insert > New Template

template_1.PNG

Provide a name for your Template, click Next and then Next and then Close

template_2.PNG

And finally you should see something similar to this:

template_3.PNG

Now on the right side you build out the structure of the Sitecore Template.

builder.PNG

You can have multiple sections, multiple names and type according to the design requirements.

When you build and Item in the Content tree based on this Template you will see something similar to this:

content.PNG

Enjoy!!! If you have any question do not hesitate to comment and ask questions!

Move Items between folders on specified day in Sitecore Content Editor

Lets imagine for a second that you have a lot of content Authors, and they are creating new items every day. At some point in the future, these items need to be moved to an Archive. Out of the box Sitecore has a functionality of Archiving Items, but it all goes into the Archive Application that you can access from Desktop > All Applications > Archive

I would like to achieve something different, I would like to move items from News folder to News Archive folder, illustrated below:

Auto Archive in Sitecore

In order to achieve this, you will need to create a News Template with certain fields, see the screenshot below:

Template

So then you will create a News item based on the News Template you just created.

You should see something similar to the screenshot below:

news-item

After you have all the items created in Sitecore Content Editor, now lets go to the Visual Studio and write some code:

After you build and deploy the code, you will need to add some custom Configurations. So go ahead into the folder Website>App_Config>Include>Project>ItemMoving.config and insert the code below, this will patch the actual Sitecore.config

So this agent will execute every minute, and search for the Expiration Date within the items, that are in the News (Source Folder) and move the expired files to the News Archive (Destination folder). If you have any questions do not hesitate to ask.

Acknowledgement:
Richard Seal –¬†https://sitecore.stackexchange.com/users/70/richard-seal
Dannon Gruver – https://www.linkedin.com/in/dannongruver
This blog post is based on the post from Stack Exchange:
https://sitecore.stackexchange.com/questions/5974/move-items-between-folders-programmatically
Note that this blog post has no intention to claim anybodies work as my own. This blog post is for informative purposes only.