How to create, edit, and publish a page with Sitecore Horizon

In a previous post, we went through a quick overview of Sitecore Horizon. In this one, we’ll walk through the step-by-step process of editing pages using Horizon following the scenario below:

We will

1. Create a new page
2. Add a component to the page
3. Manage the content of the component including
   1. Assigning a content item to the component as a data source
   2. Creating a content item to be used as a data source for the component
   3. Editing a content item associated as a data source for the component
4. Publish the page

How to create a new page in Sitecore Horizon

Open Horizon

1. Make sure you’re in the Pages view
2. In the left-hand pane, make sure the Pages tab is selected (the page icon next to the puzzle piece)
3. In the content tree, select the folder of the page under which you want to create the new page
4. You can either click + Create new or click the three dots … and then Create page
5. From the list of available page templates that appears, select the one you need
6. A new page is now created. Give it a name and hit Enter

How to add a component to a page in Sitecore Horizon

1. Make sure you’re in the Pages view
2. 2-In the content tree, select the page you would like to edit
3. At the top of the content tree, go to the Components tab (the puzzle piece icon)
4. From the list of components that are compatible with your page, select the one that you’d like to add and drag it to the place on the page where you want to add it. Note that depending on your page, there are places where you can’t add a component. The cursor changes to a not allowed icon to indicate that
5. Release the mouse button to insert the component where you want it
6. The component is now added to the page

In this screen capture, I added a Sitecore component that I created in 5 minutes without touching code using Kajoo. If you're a marketer with big ideas to implement on Sitecore and long development times keep throwing a wrench into your plans, definitely check it out.   

How to manage the content of a component in Sitecore Horizon

In the previous step, we added a blank component to a page. The component now needs some content. There are two ways to add content to a component in Sitecore Horizon:

1. You may have an existing content item, in that case you only need to assign it to the component
2. If the content you’re looking to add to the component is not already a content item, then you’d need to create a new content item

How to assign a content item to a component as a data source in Sitecore Horizon

1. In the page editor, open the page with the component that you want to assign a content item to and select that said component
2. In the right-hand pane, click Browse
3. In the Assign content item dialog box, select the relevant content item and click Assign

How to create a content item as the data source for a component in Sitecore Horizon

1. In the page editor, open the page with the component that you want to create a data source item for, and select the component
2. In the right-hand pane, click Browse
3. In the Assign content item dialog, in the content tree, select the parent item for the new content item
4. Click Create new
5. Select a template
6. Enter a name for the new content item
7. Click Assign

How to edit the content of a component in Sitecore Horizon

After creating a new content item and assigning it to a component as a data source, you need to add the content you want to display to that content item. You can do that by editing the said content item. The same steps can be followed to edit any content item (regardless of whether you’ve just created it or it is an existing content item). Note, however, that in the later case, any changes you make to the content item will affect other pages that use that content item.

1. In the page editor, open the page with the component whose content you want to edit
2. In the content area, select that component
3. In the right-hand panel, click Edit content item
4. Make the required edits
5. When you’re done, in the ribbon, click Go back

How to publish a page in Sitecore Horizon

If a page belongs to a workflow, you can move the page through the workflow in the Horizon editor. If you have publishing rights, you can publish pages from the editor.

To move the item to the next workflow state:

1. In the lower side of the right-hand panel, click the Workflow button to open the Workflow panel
2. In the Workflow panel, In the Action field, the next default state has been automatically selected. If that’s the state you’d like to move the item to, click the blue button. If the next state is Publish and you have publishing rights, you can publish the page this way

Notes about content editing using Sitecore Horizon

• While editing a page, you can preview how the page will look on different devices using the simulator more which can be accessed by clicking the eye icon

• You can undo and redo changes using the back and forward arrows

• Your work is saved automatically
• Sitecore Horizon supports simultaneous editing