---
title: Finish the structured data template
---
> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).
## Complete the template
Comparing the current template to the mockup from the start of this series, you'll notice that the Service features table is missing.
Its data is already in the template model, so it should be fairly straightforward to render to the page.
However, if you inspect the _ServiceFeature_ content type, you may notice that its value can come from multiple different places depending on the selected _ServiceFeatureValueType_.
Let's make one last tag helper, so that we don't need to clutter the view with conditionals.
### Add a service feature value tag helper
Since this one is specifically related to Service features, and not general styling, we can put it in the _\~/Features/FinancialServices/TagHelpers_ folder.
1. Create a new self-closing tag helper called `ServiceFeatureValueTagHelper`, with the tag name `tg-service-feature-value`.
2. Add a `ServiceFeatureViewModel` property and a constant for the `span` tag.
3. In the `Process` method, determine the formated value depending on the provided `ServiceFeatureValueType` from the view model and render it.
```csharp title="ServiceFeatureValueTagHelper.cs"
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Razor.TagHelpers;
using TrainingGuides.Web.Features.FinancialServices.Models;
namespace TrainingGuides.Web.Features.FinancialServices.TagHelpers;
///
/// Formats Service feature value based on its type.
///
//This TagStructure allows the helper to be called with a single self-closing tag in razor views.
[HtmlTargetElement("tg-service-feature-value", TagStructure = TagStructure.WithoutEndTag)]
public class ServiceFeatureValueTagHelper : TagHelper
{
public ServiceFeatureViewModel? Feature { get; set; }
private const string SPAN_TAG = "span";
public override void Process(TagHelperContext context, TagHelperOutput output)
{
output.TagName = SPAN_TAG;
// Make sure to set the output's TagMode to StartTagAndEndTag.
// This ensures that even though the tag helper is called with a single tag,
// the rendered output closes the `span` tag that wraps the value.
output.TagMode = TagMode.StartTagAndEndTag;
string? formattedValue = Feature?.ValueType switch
{
ServiceFeatureValueType.Text => Feature.ValueHtml.Value,
ServiceFeatureValueType.Number => "$" + Feature.Price.ToString("n2"),
ServiceFeatureValueType.Boolean => Feature.FeatureIncluded ? "✔" : "-",
_ => string.Empty
};
output.Content.SetHtmlContent(new HtmlString(formattedValue));
}
}
```
### Add the service features list to the template view
1. In the _\~/Features/FinancialServices/ServicePagePageTemplate.cshtml_ folder, add a `foreach` loop to cycle through the service features.
2. Retrieve each feature's `LabelHtml` directly, and use the new tag helper to display its value
3. Wrap the whole thing in the `tg-component-style` tag helper, setting `color-scheme` directly and `corner-style` based on the template properties.
```cshtml title="ServicePagePageTemplate.cshtml"
...
@foreach (var feature in templateModel.Features)
{
@feature.LabelHtml
}
...
```
### Finish styling the template.
Now if you run the site, you'll see all the data, but it's still not formatted in a way that matches the mockup.
Add CSS styles and any necessary elements to make the template more visually appealing.
```cshtml title="ServicePagePageTemplate.cshtml"
@using TrainingGuides.Web.Features.FinancialServices.Models
@using TrainingGuides.Web.Features.FinancialServices
@using TrainingGuides.Web.Features.Shared.OptionProviders.ColorScheme
@model TemplateViewModel
@{
var templateModel = Model.GetTemplateModel();
}
@templateModel.NameHtml
@templateModel.ShortDescriptionHtml
@foreach (var asset in templateModel.Media)
{
}
@foreach (var feature in templateModel.Features)
{
@feature.LabelHtml
}
```
At the end of it all, you should be able to achieve this by configuring your template.
