> For the complete documentation index, see [llms.txt](https://aptitude.gitbook.io/zaubercms/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aptitude.gitbook.io/zaubercms/extending-zaubercms/custom-content-property.md).

# Custom Content Property

You can easily create your own Content Properties, you just need to implement IContentProperty for the content property and use IContentPropertySettings for the settings.

```csharp
public interface IContentProperty
{
    // The freindly name shown in the CMS 
    string Name { get; }
    
    // The alias used in the CMS and on the content types
    string Alias { get; }
    
    // Description explaining what your property does
    string Description { get;}
    
    // Icon that is shown in CMS (https://fonts.google.com/icons)
    string Icon { get; }
    
    // Optional: Your settings component if you 
    public Type? SettingsComponent { get; set; }

    // The value that is saved
    string? Value { get; set; }
    
    // Must be called to save any changes to Value and send back to content type
    EventCallback<string> ValueChanged { get; set; }
    
    // Optional: The saved settings (Serialised)
    string? Settings { get; set; }
    
    // The content this property is on
    Models.Content? Content { get; set; }
    
    // Optional: Allows you to call a modal within the property
    IModalService? ModalService { get; set; }
    
    // Optional: Add any custom JS files your property needs here
    List<string> Scripts { get; set; }
    
    // Optional: Add any custom CSS files your property needs here
    List<string> Styles { get; set; }
    
}
```

```csharp
public interface IContentPropertySettings<T>
{
    // Must be called to send serialised settings back to content type
    EventCallback<string> ValueChanged { get; set; }

    // Your settings (Serialised)
    public string? SettingsModel { get; set; }

    // The Type of your settings
    public T Settings { get; set; }
}
```

### Simple Custom Content Property

The code below is probably the simplest version of a property. It's just a text box, that someone can enter text in. We just make use of the ValueChanged event on the text box, to call our ValueChanged and store the text Value in our Value property.

```csharp
@implements ZauberCMS.Core.Content.Interfaces.IContentProperty

<RadzenTextBox Value="@Value" ValueChanged="@((string value) => ValueChanged.InvokeAsync(value))"
               ValueExpression="@(() => Value)" class="form-control" />


@code {
    [Parameter] public string? Value { get; set; } = string.Empty;
    [Parameter] public string? Settings { get; set; } = string.Empty;
    [Parameter] public Content? Content { get; set; }
    [Parameter] public EventCallback<string> ValueChanged { get; set; }
    [CascadingParameter] public IModalService? ModalService { get; set; }
    public List<string> Scripts { get; set; } = [];
    public List<string> Styles { get; set; } = [];
    
    public string Name { get; set; } = "Textbox";
    public string Alias { get; set; } = "ZauberCMS.Textbox";
    public string Icon { get; set; } = "border_color";
    public string Description { get; set; } = "Standard text box";
    public Type? SettingsComponent { get; set; }
}
```

### Further Example

The two videos below show me building a rating content property, and also adding some settings. In addition all the [content properties are listed here so you can see all the code](https://github.com/YodasMyDad/ZauberCMS/tree/master/ZauberCMS.Components/Editors).

{% embed url="<https://www.youtube.com/watch?v=yrfCNYImOQo>" %}

{% embed url="<https://www.youtube.com/watch?v=s2UjnmFTs54>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://aptitude.gitbook.io/zaubercms/extending-zaubercms/custom-content-property.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.