Decorating the component with optional attributes

When you were adding your custom component to a page, you might have noticed that it showed up under "Uncategorized" and that it's name was just the same as the name of the Razor component file. It also had a very generic cog icon. We can easily change all that by decorating the component using optional attributes, both using standard .NET attributes and some Veva specific ones.

We'll start by giving the component a more friendly name, a description and a category. We use standard .NET attributes to do that, the [DisplayName], [Description] and [Category] attributes. You can just place them below the LisaComponent attribute we already had:

@attribute [LisaComponent("{70D9FB01-5EAB-425D-9E7D-423BF8C078FE}")]
@attribute [DisplayName("My Custom Component")]
@attribute [Description("My first custom component for learning purposes")]
@attribute [Category("My Components")]

You can also apply all the attributes at once, in a single line, separated with a comma:

@attribute [LisaComponent("{70D9FB01-5EAB-425D-9E7D-423BF8C078FE}"), DisplayName("My Custom Component"), Description("My first custom component for learning purposes"), Category("My Components")]

Note: These standard attributes are in the System.ComponentModel namespace so you'll have to add this using statement:

@using System.ComponentModel

To give the component an icon, you need to use the Veva specific [Icon] attribute, which supports the Font Awesome Free icon library (https://fontawesome.com/) and the Google Material Design icons (https://materialdesignicons.com/)

@attribute [Icon("fas fa-car")]

Note: The Icon attribute is in the Lisa.Core.Domain.Attributes namespace so you'll need this using statement:

@using Lisa.Core.Domain.Attributes;

This is how our component looks with these modifications:

@using Lisa.Core.Domain.Components;
@using Lisa.Core.Domain.Attributes;
@using System.ComponentModel;

@attribute [LisaComponent("{70D9FB01-5EAB-425D-9E7D-423BF8C078FE}"), DisplayName("My Custom Component"), Description("My first custom component for learning purposes"), Category("My Components"), Icon("fas fa-car")]

@code {

}

MyCustomComponent

Now run the project again and this time when you bring up the "Add content" dialog and look up your component, you'll see the name, description, category and icon:

Table of contents

Decorating the component with optional attributes

MyCustomComponent