Some components in Veva can contain other components, such as the grid and tab components. What if you want to write your own "container" component? Fortunately, that's really simple to do. Let's create one custom component now which can do just that. We will call it "CustomPanel" and it will allow the user to specify a heading text, a description text and then an area which other components can be added to.

Veva includes some components which can contain other components, such as the grid and tab components. What if you want to write your own "container" component? Fortunately, that's really simple to do. Let's create one custom component now which can do just that. We will call it "CustomPanel" and it will allow the user to specify a heading text, a description text and then an area which other components can be added to.

Open up your solution which has Veva configured. If you do not have any yet, follow the "Getting started" chapter: Developer reference:Getting started:Visual Studio 2022

Create a new Razor component

Add a new Razor component and give it a name, we'll call it CustomPanel.razor. Start by adding the required using statements at the top:

@using Lisa.Core.Domain.Model;
@using Lisa.Core.Domain.Pages;
@using Lisa.Core.Domain.Components;
@using Lisa.Core.Domain.Attributes;
@using System.ComponentModel;
@using Lisa.Core.Application.BlazorComponents.Components;

Next we decorate the component with some attributes:

@attribute [LisaComponent("DD41FC4E-116C-4801-A9B9-54A3FCF53D26") ,DisplayName("Custom Panel"), Description("My first container component"), Category("My Components"), Icon("fa fa-square")]

You can use the GUID above, but we always recommend that you generate a unique GUID for every component you create.

We were also going to allow the user to specify a heading and a description which will be rendered above the area, so we need to define properties for that. Add this below the Content property, within the @code block:

[EditorBrowsable]
[Parameter]
[DisplayName("Heading")]
public string Heading { get; set; }

[EditorBrowsable]
[Parameter]	
[DisplayName("Description")]		
[Description("The text shown below the heading")]
public string Description { get; set; }

Finally, we need to define the output of the component:

This outputs the value of the heading as a H1 tag, and the description as a paragraph, but only of those properties contain something. Then we output an AreaContent Blazor component which is part of Veva. This component will render an area which other components can be dragged into. This component has a name property which needs to be specified.

So, here is our finalized component:

@using Lisa.Core.Domain.Model;
@using Lisa.Core.Domain.Pages;
@using Lisa.Core.Domain.Components;
@using Lisa.Core.Domain.Attributes;
@using System.ComponentModel;
@using Lisa.Core.Application.BlazorComponents.Components;

@attribute [LisaComponent("DD41FC4E-116C-4801-A9B9-54A3FCF53D26") ,DisplayName("Custom Panel"), Description("My first container component"), Category("My Components"), Icon("fa fa-square")]

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

[EditorBrowsable]
[Parameter]	
[DisplayName("Heading")]		
public string Heading { get; set; }

[EditorBrowsable]
[Parameter]	
[DisplayName("Description")]		
[Description("The text shown below the heading")]
public string Description { get; set; }

}

@if (!string.IsNullOrEmpty(Description))
{
	<p>@Description</p>
}

<AreaContent Name="Content" />

Registering the component

Before we can use the component, we need to register it into the dependency injection system in Veva.

Open the module configuration class (module.cs) and locate the ConfigureComponents() method, which you should already have if you have other custom components. If you don't have it already, just add it and then call the RegisterComponent() method on the componentService, like so:

void IModule.ConfigureComponents(IComponentService componentService, IComponentViewService componentViewService)
{
// Other components you might have go here as well

        componentService.RegisterComponent<CustomPanel>();
    }

Using the component

Now, run your solution and log-in to the Veva backend. Try adding the component to a page by clicking the plus button on an empty area or the plus buttons above/below existing components. Search for "Panel" and you should see your component.

If you don't see your component, make sure you registered it correctly into the DI system in Veva and that the solution was built successfully afterwards.

Click the component to add it and you should still see an empty area, but this time it's the area in your component.

Try specifying a heading and a description and see what happens:

Now click the blue plus and add a component to your component! I just added a grid component and then a paragraph into the first column of the grid, and as you can see on the following screenshot, the component now has child content, which is the grid component:

Congratulations, now you know how to create custom Veva components which can host other components!