You might want the user to be able to change some aspects of your theme, without using the page/template editor to actually edit content. Let's say that your theme had a header with the name of the company and a logo.

You might want the user to be able to change some aspects of your theme, without using the page/template editor to actually edit content. Let's say that your theme had a header with the name of the company and a logo.

Let's start by changing the markup in the DefaultLayout.razor file and adding a header element with an empty (for now) logo image and a static header text:

@inherits LayoutComponentBase
@using Lisa.Core.Application.BlazorComponents.Components;

@code {

}

My Theme

Then add the appropriate CSS to the styles.css file:

header {
display: flex;
flex-direction: row;
background: silver;
align-items: center;
min-height: 50px;
}

header h1 {
color: #333;
margin: 0;
padding: 0;
}

header img {
margin: 0 10px;
}

Now run the project and you should get this:

Adding public properties to the theme

The first thing we need to do is to add public properties to the Theme class. Veva will expose these properties via reflection and show the appropriate UI to the user, when in template mode.

Open the Theme.cs file where your theme is declared. Add these two public properties, just above the CssClasses property for example.

[EditorBrowsable]
[Description("Logo image")]
[DisplayName("Logo")]
public AssetProperty LogoImage { get; set; }

[EditorBrowsable]
[Description("Logo text - if there's no logo image present")]
[DisplayName("Logo text")]
public string LogoText { get; set; }

You will see that the attributes we are using on those properties will generate errors, To fix those issues, add this using statement at the top:

using System.ComponentModel;

The [EditorBrowsable], [Description] and [DisplayName] attributes are all standard .NET attributes which are defined in System.ComponentModel.
Only one of them is required, the [EditorBrowsable] attribute - since Veva will only expose public properties which are marked as "Editor browsable". The other two attributes are optional, just to give the property a more friendly name and a helpful description in the UI. There are other attributes available as well, like the [Category] attribute which is also standard, and can be used to group similar properties together.

The AssetProperty is a class which is a part of the Assets module in Veva and you'll see that it will generate an error - it's not defined.
You will have to install the Lisa.Modules.Assets.Domain.Model Nuget package to the theme project and then add this using statement at the top:

using Lisa.Modules.Assets.Domain.Model;

Now the Theme.cs file should be error free.

Modifying the DefaultLayout.razor file

The next step is to modify the DefaultLayout.razor file to actually read the data from these two public properties we just created and output it in the correct way into our markup.

Start by opening the DefaultLayout.razor file and add this using statement at the top, below any other using statements which are already present:

@using Lisa.Core.Domain.Pages;

Then add these two public properties to the @code block, so it will look like this:

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

public Theme Theme { get { return PageRequest.Theme as Theme; } }

}

What we are doing here is that we are giving the DefaultLayout.razor file access to the current PageRequest object, which gets passed in as a Cascading parameter, which is a Blazor concept.

Then we add a Theme property which gives us access to the Theme property of the PageRequest and casts it to our Theme class. This is just for convenience, so we don't have to write (PageRequest.Theme as Theme) everytime we need to access the public properties of the Theme class.

Next we'll add two more properties for convenience, which are read-only (Only have a getter). They will access the LogoImage and LogoText properties of the theme respectively and also provide null checks and default values if the user has not specified anything yet.

public string LogoImage
{
get
{
return (Theme.LogoImage != null) ? "/library/?itemid=" + Theme.LogoImage.AssetId.ToString() : "";
}
}

public string LogoText
{
get
{
return !string.IsNullOrEmpty(Theme.LogoText) ? Theme.LogoText : "Default Header Text";
}
}

Finally we need to access the values from these two properties and place them in our markup:

That's it! Now save everything and run the project. You should see the header now has the default text we specified, "Default Header Text" and no logo. Log in to the Veva backend, and click the "Template" in the top-right corner of the window to enter template mode. In the panel to the left, make sure to select the "Template" tab and if everything works as expected, you should now see these two properties exposed to the user:

As you'll see, the user will get a nice asset-selection editor to choose an image. That's because Veva will show the appropriate UI element based on the type of the public property. Since the LogoImage property was of the type AssetProperty, Veva will show the asset-selection editor. The LogoText property was just a string, so it will just show up as a basic string input editor.

Try typing something into the Logo Text field and selecting an image to use as a logo.

Now you should be familiar with how to add user configurable properties to a theme in Veva.