Unleashing Flexibility: Setting Up Multiple Layouts for Sitecore Headless .NET Applications

Photo by Sigmund on Unsplash

Unleashing Flexibility: Setting Up Multiple Layouts for Sitecore Headless .NET Applications

·

4 min read

Welcome to my blog! In this post, I'll guide you through the process of setting up multiple layouts for Sitecore headless .NET applications, allowing you to cater to different content types and meet diverse presentation needs. By implementing multiple layouts, you'll gain the flexibility to create engaging and tailored user experiences that align with your specific content requirements. Join me as we explore the steps to unlock the full potential of Sitecore's headless capabilities and elevate your website's presentation to new heights.

Front-end Requirements:

Blog page

The blog page layout consists of the following elements:

  • Header: Provides branding and navigation options.

  • Footer: Displays copyright information and additional links.

  • Main Body (Left Section): Contains the primary blog content, such as blog posts and articles.

  • Sidebar (Right Section): Offers supplementary information, such as recent posts, categories, or social media links.

Gallery page

The gallery page layout aims to present image thumbnails in a visually appealing grid format. Key elements include:

  • Image Grid: Displays a collection of image thumbnails in a grid layout, allowing users to click on individual images for a larger view or further interactions.

Now that we've outlined the front-end requirements, let's proceed to the step-by-step process of setting up these layouts for your Sitecore headless .NET application.

Let's begin by creating two essential templates: one for the blog page and another for the gallery page:

NameBlog
Parent/sitecore/templates/Project/MyProject
Base Template/sitecore/templates/Foundation/JavaScript Services/Route
IconOffice/32x32/book_open.png
Fields
NameTypeTitle
pageTitleSingle-Line TextPage Title
_Standard Values
pageTitle$name
LayoutLayouts/Project/MyProject/MyProject Layout
NameGallery
Parent/sitecore/templates/Project/MyProject
Base Template/sitecore/templates/Foundation/JavaScript Services/Route
Iconapplications/16x16/photo_portrait.png
Fields
NameTypeTitle
pageTitleSingle-Line TextPage Title
_Standard Values
pageTitle$name
LayoutLayouts/Project/MyProject/MyProject Layout

To ensure your blog and gallery pages are properly rendered, don't forget to choose a layout (MyProject Layout) for your new templates! Neglecting this step may result in errors and your pages won't be displayed as intended.

To enhance the content creation experience for your Sitecore headless .NET application, remember to assign your newly created Blog and Gallery templates as insert options for the App Route template.

In the next step, let's move forward and create new content items using the templates you've just set up. This is where your website's content will come to life!

Let's open up Visual Studio, find the SitecoreController (C:\projects\demo\MyProject\code\MyProject\src\rendering\Controllers\SitecoreController.cs), and inject the provided snippet:

using Microsoft.AspNetCore.Mvc;
using Sitecore.AspNet.RenderingEngine;
using Sitecore.AspNet.RenderingEngine.Filters;
using Sitecore.LayoutService.Client.Exceptions;
using Sitecore.LayoutService.Client.Response.Model;
using System.Diagnostics;
using Microsoft.AspNetCore.Diagnostics;
using System.Net;
using Sitecore.LayoutService.Client.Response;
using Sitecore.AspNet.RenderingEngine.Binding.Attributes;
using Sitecore.LayoutService.Client.Response.Model.Fields;

namespace MyProject.Controllers
{
    public class SitecoreController : Controller
    {
        public IActionResult Index(Route route)
        {
            ViewBag.Title = route.ReadField<TextField>("pageTitle").Value;
            return View(route.TemplateName, route);
        }
    }
}

Simply copy and paste the provided snippet to create a new _BlogLayout (C:\projects\demo\MyProject\code\MyProject\src\rendering\Views\Shared_BlogLayout.cshtml) for your blog content:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
        }

        .container {
            display: flex;
        }

        .main-body {
            flex: 1;
            padding: 20px;
        }

        .sidebar {
            width: 300px;
            background-color: #f2f2f2;
            padding: 20px;
        }

        footer {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <h1>Header</h1>
    </header>

    <div class="container">
        <div class="main-body">
            <h2>Main Body</h2>
            <p>This is the main content of the page.</p>
            @RenderBody()
        </div>
        <div class="sidebar">
            <h2>Sidebar</h2>
            <p>This is the sidebar content.</p>
        </div>
    </div>

    <footer>
        <p>Footer</p>
    </footer>
</body>
</html>

Incorporate a new _GalleryLayout (C:\projects\demo\MyProject\code\MyProject\src\rendering\Views\Shared_GalleryLayout.cshtml) into your application by utilizing the provided snippet:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <style>
        .gallery {
            display: flex;
            flex-wrap: wrap;
        }

        .gallery-item {
            flex-basis: calc(33.33% - 20px);
            margin: 10px;
        }

            .gallery-item img {
                width: 100%;
                height: auto;
            }
    </style>
</head>
<body>
    @RenderBody()
</body>
</html>

Add a new Blog view to use the _BlogLayout (C:\projects\demo\MyProject\code\MyProject\src\rendering\Views\Sitecore\Blog.cshtml):

@{
    Layout = "_BlogLayout";
}

<sc-placeholder name="jss-main"></sc-placeholder>

Add a new Gallery view to use the _GalleryLayout (C:\projects\demo\MyProject\code\MyProject\src\rendering\Views\Sitecore\Gallery.cshtml):

@{
    Layout = "_GalleryLayout";
}

<div class="gallery">
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300" alt="Image 1">
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300" alt="Image 2">
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300" alt="Image 3">
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300" alt="Image 4">
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300" alt="Image 5">
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300" alt="Image 6">
    </div>
</div>

<sc-placeholder name="jss-main"></sc-placeholder>

Finally, run the Rendering Host application and open the Experience Editor to edit and publish the content:

Congratulations on successfully setting up multiple layouts for your Sitecore headless .NET applications! By following the steps outlined in this guide, you've gained the ability to create dynamic and versatile user experiences tailored to different content types and presentation needs. Thank you for joining me on this journey to unlock the full potential of Sitecore's headless capabilities.