Overview of Sitecore Horizon

One week ago at 10:00 by ParTech Media - Post a comment

Pick any business today, you cannot deny that web applications play a critical role in its growth. Every business wishes to create powerful web applications and constantly analyze their performance. To fulfill this need of various businesses, the Sitecore Experience Platform introduced Horizon.

Horizon is an all-in-one editor to create and analyze web pages coupled with server-side support. In this post, we will deep dive and understand what is Sitecore Horizon and how it can be used to create and edit websites. Along with this, we look into its architecture along with its key features and advantages.

Table of Content:

  1. What is Sitecore Horizon?
  2. Features of Horizon
  3. Architecture of Horizon
  4. The Horizon Interface
  5. Advantages of Horizon
  6. Wrapping Up

What is Sitecore Horizon?

Sitecore Horizon is one of the most powerful tools released in the Sitecore Experience Platform. It is a next-generation editor which comprises of two tools for creating and editing content. Horizon has been carefully designed to enhance the user experience by allowing users to create content very easily and also publish them effortlessly.

Features of Horizon

There are 4 key features in Horizon –

Editing

Horizon allows users to create and manage web pages. Users can also use page templates and different website designs directly in the editor to reduce the time spent in creating a website.

Simulator

The simulator provided in Horizon allows the users to preview their web pages as to how they would look in different devices such as mobile, laptop, iPad, etc. In short, it helps you to simulate user experiences in the device of your choice.

Insights

Insights enables the users to understand the content in their web pages better. Upon using this feature, users can identify the type of content that works and doesn’t work. This information is considered gold by most users as it helps them to improve the content regularly. This feature also supports experience management with contextual insights.

Deployment

The web pages built using Horizon can be efficiently deployed in minimal steps.

Architecture of Horizon

Horizon is built with Angular 7.2 and uses Node.js for server-side rendering. It uses a GraphQL based API to communicate with the backend. Since Horizon includes content management, it creates an instance even for it. For every content management instance, Horizon deploys an integration module that allows the user to perform the required actions. The instance supports only HTTPS to communicate with the Authoring Host; The Authoring Host is a web application which is the entry point of all authoring applications. To handle User Authentication the developers have provided the Sitecore Identity Service which is mandatory to be set up to use Horizon. Since Horizon is built with Angular 7.2 the web page is divided into components that are termed as contents in Horizon.

Interface of Horizon

Once you have installed Horizon, Horizon can be seen in the Sitecore Launchpad as seen in the image below. We can launch Horizon by clicking on the Horizon icon.

When we launch Horizon on our devices, we get to see the following landing page.

Here are a few important points related to the interface of Horizon:

  1. The left pane shows all the web pages and the different content that has been created by the user.

  2. At the bottom of the left pane, there are two buttons:

    • Create a page – Allows the user to create a new page.
    • Add to Page – Allows the user to modify or add content to an existing web page.
  3. The right pane contains all the page details. This includes the page item name, creator of the page, and several other details. It also displays the workflow.

  4. The top pane shows the simulator which has different preview modes like mobile, laptop, iPad, etc.

  5. The top pane also contains the page editor button which is used to edit the current webpage the user is working on.

  6. The page insights button is also available on the top pane which shows different page insights provided by Sitecore.

  7. The main screen displays the current web page that is being designed by the user.

Editing a webpage in Horizon

Webpages in Horizon editor can be edited directly on the page. It is a WYSIWYG editor where all the visible content items can be edited and modified which include text, images, logos, etc.

To edit a page in the Horizon editor:

  1. Navigate to the webpage that needs to be edited and open it.
  2. Switch to different language versions as per the requirement by the user.
  3. Enter content into the field that needs to be edited. There are various options for fields that include text field, image field, and a rich text field.
  4. Use the simulator to preview your webpage on different devices.

Advantages of Horizon

There are several advantages that a user can experience while using Horizon:

  1. Hassle-free creation of web pages using the drag and drop method.
  2. Web pages can be easily edited since the web pages are divided into different content and moving content becomes quite easy.
  3. The content tree helps to design the workflow of a web page which is otherwise very difficult while coding them.
  4. Easy deployment and publishing of web pages using Horizon.
  5. Horizon architecture allows web applications to respond efficiently.

Wrapping Up

Horizon can be considered as an all in one editor that strives to meet the needs of today’s users. These users wish to create and edit websites with minimum hassles and little to no coding proficiency requirement. Horizon is a perfect option for both beginners and advanced users who wish to create a website. Most importantly, it is backed by the powerful Sitecore platform that adds to its efficiency.