Creating custom components

Developers can easily extend the functionality of the page editor in Veva by writing custom components which users can use to build content.

Developers can easily extend the functionality of the page editor in Veva by writing custom components which users can use to build content.

A custom component in Veva is a (Blazor) Razor component which is decorated with the [LisaComponent] attribute which is used to specify a unique ID for the component.

To create a new custom component, you'll need to have VS 2019 (or VS code) up and running with a web application project with Veva installed. In this tutorial we assume that you've already followed the "Getting started" section and you have a Visual studio solution ready.

Where do I place my custom components?

Like any other extension which is written for Veva, a custom component needs to be a part of a module. A module is just a class which implements the IModule interface in Veva, and can register services (and custom components!) into the Veva dependency injection system.

How you organize your components is entirely up to you, you could just place them into the main project in the VS solution (the startup project), you could make them a part of your theme project, which can actually make a lot of sense. If the components are specific for the theme, it would make sense to include them in the theme project. If the components are general purpose and might be used in different projects, you could just create a new class library project for them which could then be reused later.

In all cases, there needs to be a class implementing the IModule interface which then uses the ConfigureComponents() method to register your custom components

void IModule.ConfigureComponents(IComponentService componentService, IComponentViewService componentViewService)
{
// TODO: Component registration
}

A basic component

Add a new Razor component file to your project by right-clicking and choose "Add -> Razor component...". If you don't see that option, then your project probably does not have the correct SDK. In that case, click the project file and make sure that the Sdk attribute of the <Project> node has a value of "Microsoft.NET.Sdk.Razor" - it should look like this:

<Project Sdk="Microsoft.NET.Sdk.Razor">

In this example, we are placing the Razor component file in a folder called "Components" which is under our theme project.

Once you've created the Razor component file, you only need to add two lines to it, to make it work with Veva. Start by adding the using statement at the top, and then add the [LisaComponent] attribute with a unique GUID. You can use the Create GUID tool in VS (Tools -> Create GUID) to generate a new GUID.

Here's how the component looks after adding the using statement and the [LisaComponent] attribute:

@using Lisa.Core.Domain.Components;

@attribute [LisaComponent("{70D9FB01-5EAB-425D-9E7D-423BF8C078FE}")]
@code {
// TODO: Add something ...
}

MyCustomComponent

That's it! This component is not particularly exciting - it has no configurable properties and only outputs hard-coded markup.

To be able to use this component, you'll have to register it so Veva knows about it.

Open your module file (Module.cs) and add the ConfigureComponents() method to it. That's a method which is a part of the IModule interface, but it has a default implementation so you do not have to provide an implementation, unless you are registering custom components.

void IModule.ConfigureComponents(IComponentService componentService, IComponentViewService componentViewService)
{
// Register your custom component
componentService.RegisterComponent();
}

If VS complains about IComponentService and IComponentViewService, you will have to add this using statement at the top of the Module.cs file:

using Lisa.Core.Domain.Components;

You'll also need to import the namespace of your MyCustomComponent component so it will be recognized. In this example the using statement we need to add is:

using Lisa7Website.SimpleTheme.Components;

The component should now be ready to use! Run the web application and log-in to the Veva backend. Now bring up the "Add Content" dialog and search for your component.

Click it and it should be added to the page. Notice in the panel on the left, that Veva reports that the component has no configurable properties, which is absolutely true.