How to add pages, controls, templates, renderings to Sitecore

Scenario 1:

Adding a control to a page using a view rendering:

1. In the Sitecore CMS, first of all lets select a location where we want to add a page – E.g. let’s go to “/sitecore/content/MyProject/Home/Training” and create a page “Exercise 1”

2. Now that the page is defined we need to create the required control(s) to be shown on this page, we will use “View rendering” to create a control.

3. Now let’s go to “/sitecore/layout/Renderings” and select a path where we can create our rendering. E.g. let’s use – “/sitecore/layout/Renderings//Content”

4. Add a “view rendering” named “Static page”  with a path – “/Views/eCommerce/Renderings/Content/StaticPage.cshtml”

2. Now let’s go to Visual Studio and add a “view” named “Staticpage.cshtml” in project/path – “MyProject\Views\Renderings\Content” and add some content to the page.

3. Save and publish the view.

4. Now, go back to Sitecore CMS and add this view rendering “Static page” in the Presentation Details of Exercise 1 page.

4. See how to add this view rendering “Static page” in the Presentation Details of the Exercise 1 page:

• The output is as follows:

 

Scenario 2:

Adding a control to a page using a view rendering with Model:

1. In the Sitecore CMS, first of all lets select a location where we want to add a page – E.g. let’s go to “/sitecore/content/MyProject/Home/Training” and create a page “Exercise 2”

2. Now that the page is defined we need to create the required control(s) to be shown on this page, we will use “View rendering” to create a control.

3. Now let’s go to “/sitecore/layout/Renderings” and select a path where we can create our rendering. E.g. let’s use – “/sitecore/layout/Renderings//Content”

4. Add a “view rendering” named “Static page With Model”  with a path – “/Views/eCommerce/Renderings/Content/StaticPageWithModel.cshtml”

5. Please see the change in this view rendering that we have also defined a path to a model – “/sitecore/layout/Models//Objects/Static Page With Model”
6. The model is as below. Please see that we have define the ‘Model Type’ as ‘MyProject.Models.ObjectTemplates.StaticPageWithModel,MyProject.Models’

7. Now as the type is defined, we need to create the actual template to represent that type. So here is the template named ‘Static Page With Model’ which has few fields/properties as shown in the builder.

8. Now as you have created the required rendering, the model and the template, don’t forget to do these 3 things:
   • Sync all these newly created Sitecore items to your project.
   • Build and deploy the ‘MyProject.TDS.Models’ project.

9. Now let’s go to Visual Studio and add a “view” named “StaticpageWithModel.cshtml” in project/path – “MyProject\Views\Renderings\Content” and add model based content to the page. Please note that this model can be populated/hydrated from any controller e.g. an Angular Controller or a MVC controller or just by inline hydration as shown below.

10. Save and publish the view in Visual Studio.

11. Now, go back to Sitecore CMS and add this view rendering “Static page with Model” in the Presentation Details of Exercise 2 page.

12. See how to add this view rendering “Static page with Model” in the Presentation Details of the Exercise 1 page:

• The output is as follows:

 

Scenario 3:

Adding a control to a page using a view rendering with Controller:

5. In the Sitecore CMS, first of all lets select a location where we want to add a page – E.g. let’s go to “/sitecore/content/MyProject/Home/Training” and create a page “Exercise 3”

6. Now that the page is defined we need to create the required control(s) to be shown on this page, we will use “Controller rendering” to create a control.

7. Now let’s go to “/sitecore/layout/Renderings” and select a path where we can create our rendering. E.g. let’s use – “/sitecore/layout/Renderings//Content”

8. So let’s create a controller rendering as below.

9. Now that we have created a placeholder control, we will use create required models, controllers and views.
10. First of all lets go to “/sitecore/templates/MyProject/Object Templates/” to create a template which will define what data we need to show( something like a class). Let’s create a template named ‘StaticPageData’ derived from standard template and we will add fields to it. We added 3 firlds ‘HeaderLine’, ‘SubHeaderLine’ and ‘MessageLine’ to the template.

11. Now we will add a content item derived from the ‘StaticPageData’ template ( something like object of a class). Let’s go to ‘/sitecore/content/MyProject/Reusable Content’ and follow step 1 to 8 as in the snapshot below to create ‘StaticPageData’ content and populate the 3 fields

12. Now you are ready to sync your changes from Sitecore CMS into your Visual Studio models project.

13. “Re-Generate” code for all items as shown above.

14. Now add a model named ‘StaticPageModel’ to the “Models” folder of project “MyProject”.

15. Then also add a controller named ‘StaticPageController’ to the “controllers” folder of project “MyProject”.

16. Now let’s go to Visual Studio and add a “view” named “StaticpageWithController.cshtml” in project/path – “MyProject\Views\Renderings\Content” and add some content to the page.

17. Now build the projects and deploy (better to build deploy whole solution and models)
18. Now, go back to Sitecore CMS and add the controller rendering “Static page with controller” in the Presentation Details of Exercise 3 page.

19. See how to add this view rendering “Static page with controller” in the Presentation Details of the Exercise 3 page:

• The output is as follows:

How to fix the following rendering errors on saving an item

How to fix the following rendering errors on saving an item

• “The item contains broken links in these fields: – _Renderings
• or “The item contains broken links in these fields: – _Final Renderings

Source of error:

• The error happens because in the presentation details of the item some control has an invalid data-source or has a missing place holder settings
• Especially if you are not watching the item in Raw Mode and still you see a Raw GUID for the data source or place holder then that is exactly the issue.

How to fix it:

• First of all open the item’s presentation details by clicking the “presentation” tab on the ribbon and then click on “Details” button to open the layout details.
• Click the shared/final layout as the case may be and then “edit” link to edit the layout.

• Now select controls one by one and press “edit” to check if which control has a messed up data source or placeholder setting.

• See, that for the header control, the field Order Link is showing a GUID data source although we are not viewing it in raw mode. Simply press “Clear” and use “Insert Link” or other options there to update the link and save . You are good to go.