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.

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; }
    
}

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.

@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.