---
title: Enable widgets in the 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).

So far, we have [walked through](https://docs.kentico.com/modules/page-builder/model-template-data.md) the steps of creating a page template that displays structured service data with different styling options.

Next, let's make the template truly flexible by adding the option to dynamically add [Editable areas](https://docs.kentico.com/documentation/developers-and-admins/development/builders/page-builder/create-pages-with-editable-areas.md) to the template based on configurable properties.

## Enable widgets on the template

Let's start by adding a single conditional _editable area_ to the template. This will allow editors to put widgets on the page if a certain checkbox is enabled. Afterward, we can expand the functionality for more flexibility.

### Add a new checkbox to the template properties

1. Add a new boolean property called `UsePageBuilder` to the `ServicePagePageTemplateProperties` class found in the _\~/Features/FinancialServices_ folder.
2. Make it default to `false` so that the template automatically uses the standard service layout.
3. Apply the `CheckBoxComponent` attribute to assign a check box control to the field in the template properties dialog, and set its `Order` to 10 so it appears before the other properties.
   ```csharp title="ServicePagePageTemplateProperties.cs"
   ...
   namespace TrainingGuides.Web.Features.FinancialServices;

   public class ServicePagePageTemplateProperties : IPageTemplateProperties
   {
       [CheckBoxComponent(
           Label = "Use Page Builder",
           ExplanationText = "Check to configure an advanced page builder. Un-check to use the standard service layout.",
           Order = 10)]
       public bool UsePageBuilder { get; set; } = false;
   ...
   ```

### Include an editable area in the template view

1. Open the _ServicePagePageTemplate.cs_ file in the same folder.
2. Cut all of the code within the scope of the first `tg-component-style` tag, and paste it in a text file for later copying.
3. After the first `tg-component-style` tag, add an `if` statement.
4. Check the value of the new `UsePageBuilder` property. If it is true, render an editable area with the identifier `areaMain`.

   > **Info:** 
   >
   > The 
   >
   > `areaMain`
   >
   >  identifier matches other templates used on this site. Using consistent identifiers makes switching templates on a page and transferring Page Builder data easier.

   ```cshtml title="ServicePagePageTemplate.cshtml"
   ...
   <tg-component-style color-scheme="@Model.Properties.ColorScheme" corner-style="@Model.Properties.CornerStyle">
       @if(Model.Properties.UsePageBuilder)
       {
           <editable-area area-identifier="areaMain" />
       }
   </tg-component-style>
   ...
   ```
5. Add an `else` statement, and paste the code from the text file within its scope.
   ```cshtml title="ServicePagePageTemplate.cshtml"
   ...
   else
   {
       <div>
           <div>
               <h3>@templateModel.NameHtml</h3>
               <p>@templateModel.ShortDescriptionHtml</p>
           </div>
           
           @foreach (var asset in templateModel.Media)
           {
               <tg-styled-image src="@asset.FilePath" 
                   alt="@asset.Description" 
                   corner-style="@Model.Properties.CornerStyle" 
                   class="c-product-img object-fit-cover" />
           }

           <tg-component-style color-scheme="@ColorSchemeOption.Light1" corner-style="@Model.Properties.CornerStyle"  class="c-table">
               @foreach (var feature in templateModel.Features)
               {
                   <div>
                       <div>@feature.LabelHtml</div>
                       <div>
                           <tg-service-feature-value feature="@feature"/>
                       </div>
                   </div>
               }
           </tg-component-style>
       </div>
   }
   ...
   ```

The resulting view should look like this:

```cshtml title="ServicePagePageTemplate.cshtml"
@using Microsoft.AspNetCore.Html
@using System.Globalization
@using TrainingGuides.Web.Features.FinancialServices
@using TrainingGuides.Web.Features.FinancialServices.Models
@using TrainingGuides.Web.Features.Shared.OptionProviders.ColorScheme

@model TemplateViewModel<ServicePagePageTemplateProperties>

@{
    var templateModel = Model.GetTemplateModel<ServicePageViewModel>();
}
<tg-component-style color-scheme="@Model.Properties.ColorScheme" corner-style="@Model.Properties.CornerStyle">
    @if(Model.Properties.UsePageBuilder)
    {
        <editable-area area-identifier="areaMain" />
    }
    else
    {
        <div>
            <div>
                <h3>@templateModel.NameHtml</h3>
                <p>@templateModel.ShortDescriptionHtml</p>
            </div>
            
            @foreach (var asset in templateModel.Media)
            {
                <tg-styled-image src="@asset.FilePath" 
                    alt="@asset.Description" 
                    corner-style="@Model.Properties.CornerStyle" 
                    class="c-product-img object-fit-cover" />
            }

            <tg-component-style color-scheme="@ColorSchemeOption.Light1" corner-style="@Model.Properties.CornerStyle"  class="c-table">
                @foreach (var feature in templateModel.Features)
                {
                    <div>
                        <div>@feature.LabelHtml</div>
                        <div>
                            <tg-service-feature-value feature="@feature"/>
                        </div>
                    </div>
                }
            </tg-component-style>
        </div>
    }
</tg-component-style>
```

### Check your progress

Now, if you sign in to the Xperience admin and apply this template to one of the pages under _Store_ in the _Training guides pages_ channel, you'll see a new checkbox in the properties.

![Screenshot of page template properties](https://docs.kentico.com/docsassets/modules/enable-widgets-in-the-template/ScreenshotTemplatePageBuilderCheckbox.png "Screenshot of page template properties")

If you tick the box and click apply, the standard service content should disappear. It will be replaced with an editable area, where you can add and drag widgets.

![Screenshot of page template with editable area](https://docs.kentico.com/docsassets/modules/enable-widgets-in-the-template/ScreenshotTemplatePageBuilderArea.png "Screenshot of page template with editable area")

> **Info:** If you un-tick the property, you may see a warning telling you that any content in the removed editable area will be lost upon saving.