Configuration

    • Navigate to
    • Right click and create a new data type.
    • Select Archetype from the dropdown.
    • Name your fieldset
    • Give your fieldset an alias (or accept the default)
    • Add one or more properties
    • Each property needs a name, an alias and a data type

    That is all that is required.

    Tick the Toggle Advanced Options box to expose advanced options.

    Once configured, navigate to Settings->Document Types and add the new data type to a document type.

    Multiple Fieldsets

    You can enable multiple fieldsets in a single Archetype by going into the advanced options and ticking Enable Multiple Fieldsets?.

    This will expose a hidden plus sign that allows that you’ll need to click to add another fieldset type. It also allows you to choose an installed icon to separate the two types visually once added to a document type.

    You can nest Archetypes within Archetypes; they can even reference themselves (supposing you also start with the add button to avoid infinite nesting).

    Cross-Archetype Dragging

    To allow for Archetype fieldsets to be dragged between Umbraco properties and into/out of nested Archetypes, check the “Enabled Cross-Archetype Dragging” configuration option.

    Cross-Archetype Dragging Example Animation

    You can configure Archetype to show a value from inside your Archetype to be shown on the collapsed fieldset title.

    Typically you would use this syntax in the Label Template box: {{propertyName}}.

    You can pass in a custom function into the label with the following syntax {{myFunction(propertyName)}}.

    You can pass args to your label template too, please keep reading thru the examples if interested.

    Make sure your function is available to Umbraco by adding your custom code to a package manifest.

    Starting with Archetype 1.16.0, you can create label template functions that return promises and that support injection of AngularJS dependencies. This comes in handy for more advanced scenarios, such as when you need to perform asynchronous operations like getting data from the web server.

    In most instances where you would use a promise, you will also want to inject an AngularJS dependency that has a function that returns a promise. So, you’ll first want to know how to have dependencies injected. You can do so like this:

    Taking this example further, you could then return a promise from the function:

    1. function archetypeGetNodeUrl(value) {
    2.     return function (contentResource) {
    3.         if (!value) {
    4.             return "Unknown URL";
    5.         }
    6.         return contentResource.getById(value)
    7.             .then(function (response) {
    8.                 return response.urls[0] || "Unknown URL";
    9.             });
    10.     };
    11. }

    You will likely want to add some caching so subsequent requests to your function don’t initiate server-side calls every time it is called. Here’s an example of how you might go about that:

    The above code can also be rewritten like so and it would function the same way, though perhaps slightly faster:

    1. function archetypeGetNodeUrl(value) {
    2.     if (!value) {
    3.         return "Unknown URL";
    4.     }
    5.     archetypeGetNodeUrl.cache = archetypeGetNodeUrl.cache || {};
    6.     if (archetypeGetNodeUrl.cache[value]) {
    7.     }
    8.     return function (contentResource) {
    9.         return contentResource.getById(value)
    10.             .then(function (response) {
    12.                 return archetypeGetNodeUrl.cache[value];
    13.             });
    14.     };
    15. }

    This demonstrates that you can return different types of objects from your function at different times. In the case of a cache hit, this will return a string. In the case of a cache miss, this will return a function that will return a promise that will resolve to a string.

    Here is a heavily commented version of the above function, which should help you to understand what each line is doing:

    1. //create a namespace (optional)
    2. var ArchetypeSampleLabelHelpers = {};
    4. //create a function
    5. //you will add it to your label template field as `{{ArchetypeSampleLabelHelpers.testPromise(someArchetypePropertyAlias)}}`
    6. ArchetypeSampleLabelHelpers.testPromise = function(value) {   
    7.     //you can inject services
    8.     return function ($timeout, archetypeCacheService) {        
    9.         //best to return a promise
    10.         //NOTE: $timeout returns a promise
    11.         return $timeout(function () {
    12.             return "As Promised: " + value;
    13.         }, 1000);
    14.     }
    15. }
    17. ArchetypeSampleLabelHelpers.testEntityPromise = function(value, scope, args) {
    18.     //hey look, args!
    19.     //{{ArchetypeSampleLabelHelpers.testEntityPromise(someArchetypePropertyAlias, {foo: 1})}}
    20.     console.log(args);
    22.     return function ($q, entityResource) {    
    23.         var deferred = $q.defer();
    25.         entityResource.getById(args.foo, 'document').then(function(entity) {
    27.             deferred.resolve(entity.name);
    28.         });
    30.         return deferred.promise;
    31.     }
    32. }
    34. ArchetypeSampleLabelHelpers.testEntityPromise2 = function(value, scope, args) {  
    35.     //hey look, args but we're also using the built-in archetypeCacheService
    36.     //{{ArchetypeSampleLabelHelpers.testEntityPromise(someArchetypePropertyAlias, {foo: 1234})}}
    37.     console.log(args);        
    39.     return function ($q, archetypeCacheService) {    
    40.         var deferred = $q.defer();
    42.         archetypeCacheService.getEntityById(args.foo, 'document').then(function(entity) {
    43.             console.log("Hello from testEntityPromise2");
    44.             console.log(entity);
    45.             deferred.resolve(entity.name);
    46.         });
    48.         return deferred.promise;
    49.     }
    50. }

    Change the Style of Archetype in the Backoffice

    Archetype allows you to do the following to customize the backoffice experience for your editors:

    • Modify the view globally
    • Modify the view per Archetype data type instance
    • Modify the CSS globally
    • Modify the CSS per Archetype data type instance
    • Add a JS script globally
    • Add a class name to an Archetype

    To make global changes, simply edit any of these files:

    • Any file located in: ~/App_Plugins/Archetype/views/
    • ~/App_Plugins/Archetype/css/archetype.css
    • You can completely swap out the default view with another one. Navigate to Developer>Data Types and select your Archetype. Update the configuration property View File with a path to your new view file. v7.3+ users will find this under the Custom Style/Script Options. It’s easiest to start with a copy of the ~/App_Plugins/Archetype/Views/archetype.default.html file, make your changes and save it as a new view. Just remember to point your Archetype to the new view.
    • Lastly, you can also quickly add a class to an Archetype for styling or JS purposes by specifying the Custom Wrapper Class field in the configuration. This can be used in conjunction with either the JS or CSS file options.

    Note that these changes are resistant to upgrades of Archetype and will be kept without any worries unlike the global changes in the previous section.