Blog Detail

Hi Guys,

As you all know that Episerver provide GroupName attribute to categorizing the content based on the tabs.

It’s works well till we have limited property in a particular tab.

But in some cases, we have lots of properties in a single tab and it’s very difficult to manage these properties so we can categorize these properties in that tab using the below method.

To categorizing the properties you need to follow below steps-

Step 1 –

Create a new Episerver Block and define the properties that you want in a particular category.

                                            
using System;
using System.ComponentModel.DataAnnotations;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;

namespace Alloy.Models.Blocks
{
    [ContentType(DisplayName = "PersonalInformationBlock", GUID = "12be79d1-e6cf-4614-b7a9-72d00f3d8ab8", Description = "", AvailableInEditMode = false)]
    public class PersonalInformationBlock : BlockData
    {

        [CultureSpecific]
        [Display(
            Name = "User Name",
            Description = "User Name field's description",
            GroupName = SystemTabNames.Content,
            Order = 10)]
        public virtual string UserName { get; set; }

        [CultureSpecific]
        [Display(
            Name = "Email",
            Description = "Email field's description",
            GroupName = SystemTabNames.Content,
            Order = 20)]
        public virtual string Email { get; set; }

        [CultureSpecific]
        [Display(
            Name = "First Name",
            Description = "First Name field's description",
            GroupName = SystemTabNames.Content,
            Order = 30)]
        public virtual string FirstName { get; set; }

        [CultureSpecific]
        [Display(
            Name = "Last Name",
            Description = "Last Name field's description",
            GroupName = SystemTabNames.Content,
            Order = 40)]
        public virtual string LastName { get; set; }

    }
}
                                                

Make sure you add AvailableInEditMode = false attribute on the block class to disable this in Available Content type while creating a new block item instance because we don’t want to give the ability to content author to create an instance of this block directly in CMS.

I am adding one more block so that I can show you how it will look in the CMS

using System;
using System.ComponentModel.DataAnnotations;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;

namespace Alloy.Models.Blocks
{
    [ContentType(DisplayName = "Professional Information Block", GUID = "ee25483c-69fe-4fce-a1e8-bdb67b9891a3", Description = "", AvailableInEditMode = false)]
    public class ProfessionalInformationBlock : BlockData
    {

        [CultureSpecific]
        [Display(
            Name = "Company",
            Description = "Company field's description",
            GroupName = SystemTabNames.Content,
            Order = 10)]
        public virtual string Company { get; set; }

        [CultureSpecific]
        [Display(
            Name = "Role",
            Description = "Role field's description",
            GroupName = SystemTabNames.Content,
            Order = 20)]
        public virtual string Role { get; set; }

        [CultureSpecific]
        [Display(
            Name = "Experience",
            Description = "Experience field's description",
            GroupName = SystemTabNames.Content,
            Order = 30)]
        public virtual string Experience { get; set; }

    }
}

Step 2 –

Now its time to use these two blocks on the page item so just add two new properties on the page using these block type class.

[Display(
            Name = "Personal Information",
            Description = "User Personal Information",
            GroupName = SystemTabNames.Content,
            Order = 10)]
        public virtual PersonalInformationBlock PersonalInformation { get; set; }

        [Display(
            Name = "Professional Information",
            Description = "User Personal Information",
            GroupName = SystemTabNames.Content,
            Order = 20)]
        public virtual ProfessionalInformationBlock ProfessionalInformation { get; set; }

Once you add these properties on your page type you can see these in CMS when you create an instance of your page.

That’s all from the categorizing point now you can render it like you render a normal property.

@Html.PropertyFor(x => x.CurrentPage.PersonalInformation.UserName)
@Html.PropertyFor(x => x.CurrentPage.PersonalInformation.Email)
@Html.PropertyFor(x => x.CurrentPage.PersonalInformation.FirstName)
@Html.PropertyFor(x => x.CurrentPage.PersonalInformation.LastName)

@Html.PropertyFor(x => x.CurrentPage.ProfessionalInformation.Company)
@Html.PropertyFor(x => x.CurrentPage.ProfessionalInformation.Role)
@Html.PropertyFor(x => x.CurrentPage.ProfessionalInformation.Experience)

Thanks for reading this blog post I hope it helps

Thanks and regards

Ravindra S. Rathore