View on GitHub


An Umbraco 7 Property Editor Wrapper

Download this project as a .zip file Download this project as a tar.gz file

Archetype is an Umbraco 7 property editor that wraps other installed property editors. By wrapping the other properties, Archetype allows for custom and repeatable fieldset mashups.

Checkout some videos of Archetype in action here:


Install the latest package through the Umbraco package installer or via NuGet.

Basic Configuration

After installation, visit the developer section and create a new data type with ‘Archetype’ as the selected property editor.

At this point you should now see several input boxes to set up your Archetype fieldset:

Label - A label for your fieldset (i.e. person, car, etc)

Alias (required) - Pick a machine safe (A-Z 0-9 _- no spaces) name for your archetype that will be used for tracking this fieldset.

Label Template

This template will be used in the data editor and will display when the fieldset is collapsed. Ideally you can select static text or a property alias. If you choose to use a property value, you must use the following syntax:

{{firstName}} - Where ‘firstName’ is the alias of a property.

Tooltip - Appears when hovering overing over a fieldset in the data editor. This is only applicable when multiple fieldsets are enabled.

Properties - Properties represent the actual input controls that your Archetype will encapsulate.

Advanced Configuration

Advanced options can be exposed by ticking the ‘Toggle Advanced Options’ box.

Max Fieldsets - When blank, the Archetype will allow an infinite number of repeated fieldsets. Placing an integer in this box will limit the number to the amount entered.

Enable Multiple Fieldsets - By ticking this box, a developer may add more than one type of fieldset to the Archetype. When there are multiple fieldsets configured, a toolbar will display on the data editor to allow the editor to select the different fieldsets.

Custom Wrapper Class - If you need to inject a custom class to your Archetype wrapper, this is the place to do it.

CSS File - If you would like to alter the appearance of the default Archetype styles, simply include a file path to your CSS file here.

JS File - If you would like to inject some JavaScript on the page, simply include a file path to your JS file here.

Toggle Developer Mode - Tick this box to enable verbose debugging to the console. This also expose the data model on the data editor page which can be live edited.

Config Model - Import/Export your Archetype between installs by copy/pasting this code. You can also live edit your Archetype config by alter these values. Caution should be used when doing so.


To use your new Archetype, simply add it to any document type.

To integrate your own property editor:

  1. Ensure your property editor is installed into Umbraco.
  2. Edit the /App_Plugins/Archetype/js/propertyEditors.views.js file.
  3. Add a JSON object that defines your custom property editor.

How to use it on a template you ask?: Get the gist here.

Known Issues

Umbraco Caching

If you decide to extend this project locally, you'll want to set the <compilation> debug property in your web.config to true:

<compilation defaultLanguage="c#" debug="true" batch="false" targetFramework="4.5">

This is in order to circumvent the minification and caching of the JavaScript files.

Prevalue Character Limit

If you get an error during saving that says the value will be truncated in the database, it is because you config has exceeded the 2500 character limit imposed by Umbraco. You can get around this by upping the limit in your DB. Please backup your DB first.

Other Issues

There is also a list here.