IPageSettings

The IPageSettings interface allows you to define properties/settings which can be defined for each page on the website. Simply create a class which implements this interface and then add public properties to it, which the user can then define via the page editor in Veva, on the first tab in the right panel, called "Page settings". The ShouldDisplay() method allows you do conditionally hide/show the settings based on the page. You could for example check if the page the user is editing is the front page of the website and if so, return false. That would prevent users from being able to modify the defined settings on the frontpage, but not other pages. If IsOptional is true, the settings need to be toggled on by the user before being set. The DisplayName is the caption which will be shown to the user above the settings.

Interface declaration

public interface IPageSettings
{
	bool ShouldDisplay(Page page);
	bool IsOptional { get; }
	string DisplayName { get; }
}

Example

In this example, we are going to define an IPageSettings implementation which allows users to select a background color for each page. It has one public property marked with the [EditorBrowsable] attribute. The property is of the type ColorProperty which makes sure that the Veva UI renders a nice color picker for the user.

public class PageColorSettings : IPageSettings
{
	public bool IsOptional => false;

	public string DisplayName => "Colors";

	public bool ShouldDisplay(Page page)
	{
		return true;
	}

	[EditorBrowsable]
	public ColorProperty BackgroundColor { get; set; }
}

Registration

This is how the implementation is registered into the DI container in Veva, this should be done in your module config file (The class which implements IModule).

public void ConfigureServices(IServiceCollection services, IConfiguration configuration)
{
	services.AddNamed<IPageSettings, PageColorSettings>(ServiceLifetime.Transient);
}

Usage

Now when users are in the page editor, the "Colors" settings will be shown under page properties in the right hand panel.

Accessing the properties in code

In order to actually use these properties, your theme must be able to access them somehow, so the values can be used. In this case, we are going to fetch the selected color and make it available as a CSS variable which can then be used as the background color for the body tag. To access the settings in a Layout file (as part of a theme) or in a Razor component, see the following code. You need to have access to the PageRequest, which is accepted as a cascading parameter. Then read from the Settings collection on the PageRequest and find the settings which match the type of your settings implementation. Also make sure to change the return type of the method accordingly, and also the type of the default instance which is returned if no saved settings are found.

[CascadingParameter(Name = "PageRequest")]
public PageRequest PageRequest { get; set; }

private PageColorSettings PageColorSettings
{
    get
    {
        var result = PageRequest.Settings.FirstOrDefault(settings => settings.GetType() == typeof(PageColorSettings)) as PageColorSettings;

        if (result == null)
        {
            result = new PageColorSettings();
        }

        return result;
    }
}

PageRequest extension

Another more simple aproach is to use the PageRequest extensions

@using Veva.Core.Application.BlazorComponents.Extensions;

[CascadingParameter(Name = "PageRequest")]
public PageRequest PageRequest { get; set; }

private PageColorSettings PageColorSettings
{
    get
    {
      return  PageRequest.GetPageSettings<PageColorSettings>() ?? new PageColorSettings();
    }
}

Then you can simply access the properties on the object in your code. In this example, we are writing out a style tag which contains a custom CSS property applied to the root, with the selected background color.

<style>
    :root {
        --background-color: @PageColorSettings.BackgroundColor.ToHtmlColor();
    }
</style>