Verbetering van website channel properties

Door Nele Debrouwer, 25-10-2024

Inleiding

Een veelvoorkomend en essentieel concept in webdesign is het opdelen van een webpagina in meerdere secties, vaak met behulp van de -tag binnen de -tag. Deze aanpak helpt bij het organiseren van inhoud in duidelijke gebieden. Om dit concept verder te optimaliseren, is het aanbieden van configureerbare opties voor deze secties een belangrijke strategie in contentbeheer. Dit kan onder meer achtergrondkleuren, tussenruimte, eenvoudige tekstvelden voor CSS-klassen of volledig nieuwe innerlijke structuren omvatten.

In moderne Digital Experience Platforms (DXP's), waar meerdere websites of channels (niet alleen websites) worden beheerd, is het van belang om rijke tekst los te maken van het ontwerp. Door basisontwerpprincipes in te stellen in uw Content Management System (CMS), biedt u contentauteurs en webmasters enorme flexibiliteit.

In Xperience by Kentico zijn "sectie-eigenschappen" een krachtig hulpmiddel voor dit doel. Ze bieden een uitgebreide reeks configuraties om de inhoud, het uiterlijk, het gedrag en de toegankelijkheid van verschillende secties over website channels heen te beheren.

Wanneer u deze sectie-eigenschappen met verschillende waarden wilt hergebruiken over meerdere website channels, moet u een eigen 'Visibility condition' schrijven. Houd er rekening mee dat als uw staging- en productie-omgevingen zijn ingesteld om te implementeren zonder de admin-interface om veiligheidsredenen, u de 'Visibility condition' in een apart admin-project moet aanmaken.

Visibility Condition

Het VisibilityConditionAttribute-type bevindt zich in de Kentico.Xperience.Admin.Base.Shared-assembly, een speciale assembly die wordt gedeeld tussen Kentico.Xperience.WebApp en Kentico.Xperience.Admin. Deze assembly is niet beschikbaar als een aparte NuGet package en moet worden geopend via Kentico.Xperience.WebApp of Kentico.Xperience.Admin.

Daarom moeten de VisibilityCondition- en VisibilityConditionProperties-klassen worden geplaatst in een apart ".NET admin-project" dat alleen tijdens administratieve implementaties wordt opgenomen.

Door een "gedeeld" Admin-project te maken dat verwijst naar de Kentico.Xperience.WebApp NuGet package en wordt gerefereerd door zowel je ASP.NET Core-project als je ".NET admin-project", kan je nu profiteren van de VisibilityConditionAttribute-klasse.

Gedeeld .NET Project

Dit project verwijst naar de Kentico.Xperience.WebApp NuGet package.

public class ChannelVisibilityConditionAttribute(string channelName) 
    : VisibilityConditionAttribute 
{ 
    public string ChannelName { get; set; } = channelName ?? ""; 
}

ASP.NET Core Project

Dit project verwijst naar de Kentico.Xperience.WebApp NuGet package en het gedeelde project.

public class SectionProperties : ISectionProperties 
{ 
    [ChannelVisibilityCondition("Channel1")] 
    [DropDownComponent(
        Label = "Channel 2 Section Shape",  
        Options =  
            "bg-shape triangles-bottom-right;Triangles bottom right\n" + 
            "bg-shape triangles-left;Triangles left\n" + 
            "bg-shape triangle-right;Triangle right\n" 
    )]  
    public string SectionShape { get; set; } = ""; 
}

Admin .NET Project

Dit project verwijst naar het gedeelde project en de Kentico.Xperience.Admin NuGet package. Door het gedeelde project te refereren, kan de ChannelVisibilityConditionAttribute worden toegewezen aan de ChannelVisibilityCondition-klasse en deze integreren met de administratie/Page Builder UI.

[VisibilityConditionAttribute(typeof(ChannelVisibilityConditionAttribute))] 
public class ChannelIsEqualToVisibilityCondition(IPageBuilderUtilityContextRetriever websiteChannelContext)  
    : VisibilityCondition<ChannelVisibilityConditionProperties> 
{ 
    private readonly IPageBuilderUtilityContextRetriever websiteChannelContext = websiteChannelContext; 

    public override bool Evaluate(IFormFieldValueProvider formFieldValueProvider) 
    { 
        var channel = websiteChannelContext.Retrieve().Result; 
        return string.Equals(
            channel?.WebsiteChannelName, 
            Properties.ChannelName,  
            StringComparison.OrdinalIgnoreCase
        ); 
    } 
}

Page Builder Context

Tijdens de ontwikkeling stuitten we op een probleem bij het wisselen tussen de website channels: de website channel name werd niet correct opgehaald. Na contact met de Kentico-community via hun Q&A gaf Sean Wright ons een oplossing.

“I also acknowledge we have a gap in the product right now. You can't use IWebsiteChannelContext or IPageBuilderDataContextRetriever in Page Builder UI Form Components or related types (visibility conditions, custom options providers). We have some internal services to access this context, but they aren't available for you to use. We'll look at exposing this information in the future. In the meantime, here's a ... "workaround" that you can use:”

public interface IPageBuilderUtilityContextRetriever 
{ 
    Task<PageBuilderUtilityContext> Retrieve(); 
}

public record PageBuilderUtilityContext( 
    string WebsiteChannelName,  
    int WebsiteChannelID,  
    IWebPageFieldsSource Webpage
);

public class PageBuilderUtilityContextRetriever( 
    IHttpContextAccessor contextAccessor, 
    IInfoProvider<ChannelInfo> channelInfoProvider, 
    IContentQueryExecutor queryExecutor
) : IPageBuilderUtilityContextRetriever 
{ 
    private readonly IHttpContextAccessor contextAccessor = contextAccessor; 
    private readonly IInfoProvider<ChannelInfo> channelInfoProvider = channelInfoProvider; 
    private readonly IContentQueryExecutor queryExecutor = queryExecutor; 
    private PageBuilderUtilityContext? context = null; 

    public async Task<PageBuilderUtilityContext> Retrieve() 
    { 
        if (context is not null)
        { 
			return context;
        }
		
        int websiteChannelID = 0;
        int webPageID = 0;
        var httpContext = contextAccessor.HttpContext; 
        string path = httpContext.Request.Form["path"].FirstOrDefault() ?? "";
        string pattern = @"webpages-(\d+)/([^_/]+)_(\d+)";
        var match = Regex.Match(path, pattern);
		
        if (match.Success)
        {
            websiteChannelID = int.TryParse(match.Groups[1].Value, out int channelID) ? channelID : 0;
			webPageID = int.TryParse(match.Groups[3].Value, out int pageID) ? pageID : 0;
        }
		
        var channels = await channelInfoProvider.Get()
            .Source(s => s.Join(nameof(ChannelInfo.ChannelID), nameof(WebsiteChannelInfo.WebsiteChannelChannelID)))
            .Where(w => w.WhereEquals(nameof(WebsiteChannelInfo.WebsiteChannelID), websiteChannelID))
            .Columns(nameof(ChannelInfo.ChannelName))
            .GetEnumerableTypedResultAsync(); 

        string websiteChannelName = channels
            .Select(s => s.ChannelName)
            .FirstOrDefault() ?? "";  

        var query = new ContentItemQueryBuilder()
            .ForContentTypes(q => q.ForWebsite([webPageID], false)); 

        var pages = await queryExecutor.GetMappedWebPageResult(query); 
        var webPage = pages.FirstOrDefault(); 
        context = new(websiteChannelName, websiteChannelID, webPage); 
        return context; 
    }
}

Na het registreren van de service en het injecteren ervan in onze Visibility condition-klasse, gebruikten we dezelfde sectie-eigenschappen maar met verschillende waarden tussen onze website channels.

Door deze stappen te volgen, kan je sectie-eigenschappen effectief beheren over meerdere website channels in Xperience by Kentico, waarmee content-beheerders en webmasters de flexibiliteit hebben die ze nodig hebben, terwijl een consistent design framework behouden blijft.