Skip to content

Editor templates

Jump to bottom
Simon Yohannes edited this page Oct 21, 2019 · 25 revisions

built in editor templates

you can find the built in editor templates in the PuckWeb/areas/admin/views/shared/editortemplates folder. there are templates for the common types such as boolean, string, datetime but also an object template. there are also templates for custom types which come with Puck and we'll go into them here. note: while in these examples you'll see the UIHint typed out manually, it's more convenient to use the EditorTemplates class which has string constants you can use rather than typing out the editor template name.

Puck Picker

this template is used with a List<puck.core.Models.PuckPicker> model and is used to select content nodes. it's a content picker. you may add a List<PuckPicker> property to your Homepage ViewModel for example, to select RelatedContent:

public class Homepage:BaseModel
    {
        [Display(Name="Related Content")]
        [UIHint("PuckPicker")]
        [PuckPickerEditorSettings(MaxPick =5)]
        public List<PuckPicker> RelatedContent { get; set; }
    }

the PuckPicker class has some extension methods for querying data in the puck.core.Helpers namespace which allow you to retrieve content. there's a List<T> GetAll<T> method and a T Get<T> method which allow you to retrieve the picked content.

how it works is that PuckPicker has two properties, Id (which is a guid) and Variant (which is the language of the content) and this information is used to query content.

PuckPicker has configurable settings which can be added by using the PuckPickerEditorSettings attribute as in the example above or by going to "Settings -> Editor Parameters" and adding an Puck Picker Editor Settings entry.

List Editor

the ListEditor is very useful for editing List<T> properties. here's an example of using list editor in a ViewModel:

public class Page:BaseModel
    {
        [Display(ShortName ="input",GroupName ="Content")]
        [UIHint("ListEditor")]
        public List<string> Names { get; set; }

        [Display(ShortName = "[name$='Name']",GroupName ="Content")]
        [UIHint("ListEditor")]
        public List<ComplexModel> Test { get; set; }
    }

in the code above, there are two properties which use the ListEditor UIHint, one is editing a list of strings and the other is editing a list of some complex type. the display attribute ShortName option is used to provide a jQuery selector for the row title in the edit screen. the first example uses the selector "input" which means it will grab the row title for a particular row from the value of the first input element of that row. the second example uses the ShortName selector of "[name$='Name']" which means it will get the row title from the first element with the name attribute ending with "Name". this selector is more specific than the previous "input" selector because it's for a list of complex type rather than a list of string - meaning it will contain more than a single input per row which means the selector needs to be more specific. if no ShortName selector is provided, rows will be titled "item 1", "item 2" .. and so on.

the GroupName option specifies which tab this field will be displayed in, on the edit screen. you can also specify tabs for your ViewModel in the settings section of the backoffice but if any GroupName is specified in the ViewModel code, it will take precedence over any tabs you setup using the settings interface.

Puck Image Picker

this editor template works much like Puck Picker but is used to select instances of the ImageVM ViewModel, whereas Puck Picker is used to pick any type of content. unlike Puck Picker, it gives you an image preview while you're selecting. the model for this template is the same as Puck Picker. here's an example of a ViewModel using Puck Image Picker:

public class Homepage:BaseModel
    {
        [Display(Name="Image Gallery")]
        [UIHint(EditorTemplates.PuckImagePicker)]
        [PuckImagePickerEditorSettings(MaxPick = 2)]
        public List<PuckPicker> ImageGallery { get; set; }
    }

PuckImagePicker has configurable settings which can be added by attribute (as in the example above) or by going to "Settings -> Editor Parameters" and adding an Puck Image Picker Editor Settings entry.

also note the use of the EditorTemplates class which contains constants for the editor template names.

Google Longitude Latitude editor

the PuckGoogleLongLat editor is used for picking Longitude and Latitude values from a google map. the model for this editor template is puck.core.Models.GeoPosition and this type is indexed in lucene as a spatial type for geo searches.

Rich text editor

the rte editor template is used for rich text content. the model for this editor template is string and it uses the "tiny mce" plugin.

Tags editor

the tags editor works on a model of List<string> and allows you to enter tags with auto complete/suggestions based on previously entered tags.

you can also use PuckTagsEditorSettings to specify the category of your tags. then you will only get suggestions from other tags in the same category. as with all editors, their settings can either be set as attributes on the ViewModel property, or in the Backoffice on the "Settings->Editor Parameters" page.

Clone this wiki locally