Default Editor Views

Here is an overview of the default property views you can use out of the box. Some of these require additional configuration before they can be used correctly.

Checkbox

Renders a single checkbox

[UIOMaticField(Description = "Example checkbox property",
    View= UIOMatic.Constants.FieldEditors.Checkbox)]
public bool CheckBox { get; set; }

Checkboxlist

Renders a list of checkboxes

Config

The checkboxlist requires additional configuration.

[UIOMaticField(Description = "Example checkboxlist property", View = UIOMatic.Constants.FieldEditors.CheckboxList)]
public string Checkboxlist { get; set; }

  • The alias of the type that will be used to populate the dropdown

  • The column used for the value of the item

  • The template used for the text of the item

  • The column used for sorting

  • The delimiter you want to use

      [UIOMaticField(Description = "Example checkboxlist property", View = UIOMatic.Constants.FieldEditors.CheckboxList,
      Config = "{'typeAlias': 'person, 'valueColumn': 'Id', 'textTemplate' : '{{FirstName}} {{LastName}}', 'sortColumn' : 'FirstName', 'delimiter' : ';'}")]
  public string Checkboxlist { get; set; }

Content Picker

Renders a Umbraco content picker (will store the id of the selected content item)

[UIOMaticField(Description =  "Example content picker property",
    View = UIOMatic.Constants.FieldEditors.PickerContent)]
public int ContentPicker { get; set; }

Date

Renders a date picker

[UIOMaticField(Description =  "Example date property",
    View = UIOMatic.Constants.FieldEditors.Date)]
public DateTime Date { get; set; }

Datetime

Renders a datetime picker

[UIOMaticField(Description =  "Example datetime property",
    View = UIOMatic.Constants.FieldEditors.DateTime)]
public DateTime DateTime { get; set; }

DateTime Offset

Renders a datetime picker and handles the offset behind the scenes. It doesn't allow to change the offset.

[UIOMaticField(Description =  "Example datetimeoffset property",
    View = UIOMatic.Constants.FieldEditors.DateTimeOffset)]
public DateTimeOffset DateTimeOffset { get; set; }

DateTime Utc

Renders a utc datetime picker.

[UIOMaticField(Description =  "Example datetimeutc property",
    View = UIOMatic.Constants.FieldEditors.DateTimeUtc)]
public DateTime DateTimeUtc { get; set; }

Dropdown

Renders a dropdown (usefull for foreign keys)

[UIOMaticField(Description =  "Example dropdown property",
    View = UIOMatic.Constants.FieldEditors.Dropdown)]
public string Dropdown { get; set; }

Config

The dropdown requires additional configuration.

  • The alias of the type that will be used to populate the dropdown

  • The column used for the value of the item

  • The template used for the text of the item

  • The column used for sorting

    [UIOMaticField(Description = "Select the owner of the dog", View = UIOMatic.Constants.FieldEditors.Dropdown,
       Config = "{'typeAlias': 'person', 'valueColumn': 'Id', 'sortColumn': 'FirstName', 'textTemplate' : '{{FirstName}} {{LastName}}'}")]
    public int OwnerId { get; set; }

Create optional cascading or filtered dropbox options

  • foreignKeyColumn : 'PropertyOnRelatedObject'

  • foreignKeyValueAlias : 'PropertyOfCurrentObjectToFilterOn'

      [UIOMaticField(Description = "Select the the dog", View = UIOMatic.Constants.FieldEditors.Dropdown,
     Config = "{'typeAlias': 'dog', 'valueColumn': 'Id', 'sortColumn': 'Name', 'textTemplate' : '{{Name}}'},
     'foreignKeyColumn' : 'OwnerId', 'foreignKeyValueAlias' : 'OwnerId'}")]
  public int DogId { get; set; }

File

Renders a file picker (allows you to select a file from the media library, will store the path to the selected file).

[UIOMaticField("Description =  "Example file property",
    View = UIOMatic.Constants.FieldEditors.File)]
public string File { get; set; }

List

Renders a list view (based on a foreign key)

    [UIOMaticField(View = UIOMatic.Constants.FieldEditors.List,
        Config = "{'typeAlias': 'dog', 'foreignKeyColumn' : 'OwnerId', 'canEdit' : false}")]
    public IEnumerable<Dog> Dogs { get; set; }

Config

The list requires additional configuration

  • The alias of the type that will be used to populate the list

  • The name of the forein key column

  • Wether or not you wish to have edit options (create, delete)

Label

Renders a label, so properties of this view will be readonly

[UIOMaticField(Description = "Example label property",
    View = UIOMatic.Constants.FieldEditors.Label)]
public string Label { get; set; }

Map

Renders a google map

[UIOMaticField(Description = "Example map property",
    View = UIOMatic.Constants.FieldEditors.Map)]
public string Map { get; set; }

Config

The map requires additional configuration.

  • A google maps api key

  • Where the map should center on on init

    [UIOMaticField(Description = "Example map property", View = UIOMatic.Constants.FieldEditors.Map, Config = "{'apiKey' : 'GOOGLEMAPSAPIKEY', 'center', ''}")] public string Map { get; set; }

Link

Renders a URL that can be visited.

Config

The link requires additional configuration.

[UIOMaticField(Description = "Example link property", View = UIOMatic.Constants.FieldEditors.Link)
	Config = "{'URL': 'https://umbraco.com'}")]
public string Link { get; set; }

  • The URL of the link you want to display

Media Picker

Renders an Umbraco media picker (will store the id of the selected media item)

[UIOMaticField(Description = "Example media picker property",
    View = UIOMatic.Constants.FieldEditors.PickerMedia)]
public int MediaPicker { get; set; }

Member Picker

Renders an Umbraco member picker (will store the id of the selected member)

[UIOMaticField(Description = "Example member picker property",
    View = UIOMatic.Constants.FieldEditors.PickerMember)]
public int MemberPicker { get; set; }

Number

Renders a number input

[UIOMaticField(Description = "Example number property",
    View = UIOMatic.Constants.FieldEditors.Number)]
public int Number { get; set; }

Password

Renders a password input

[UIOMaticField(Description = "Example password property",
    View = UIOMatic.Constants.FieldEditors.Password)]
public string Password { get; set; }

Radiobuttonlist

Renders a group of radiobuttons

[UIOMaticField(Description = "Example radiobuttonlist property",
    View = UIOMatic.Constants.FieldEditors.RadioButtonList)]
public string Radiobuttonlist { get; set; }

Config

The radiobuttonlist requires additional configuration.

  • The alias of the type that will be used to populate the dropdown

  • The column used for the value of the item

  • The column used for the text of the item

  • The column used for sorting

  • The template used for the text of the item

    [UIOMaticField(Description = "Select the owner of the dog", View = UIOMatic.Constants.FieldEditors.RadioButtonList,
       Config = "{'typeAlias': 'person', 'valueColumn': 'Id', 'sortColumn': 'FirstName', 'textTemplate' : '{{FirstName}} {{LastName}}'}")]
    public string Radiobuttonlist { get; set; }

Richt Text Editor

Renders a richt text editor

[UIOMaticField(Description = "Rich Text Editor", 
    View = UIOMatic.Constants.FieldEditors.Rte)]
    public string Rte { get; set; }

Textarea

Renders a textarea

[UIOMaticField(Description = "Example textarea property",
    View = UIOMatic.Constants.FieldEditors.Textarea)]
public string Textarea { get; set; }

Textfield

Renders a text input

[UIOMaticField(Description = "Example textfield property",
    View = UIOMatic.Constants.FieldEditors.Textfield)]
public string Textfield { get; set; }

User Picker

Renders a user picker

    [UIOMaticField(Description = "Example user picker", 
        View = UIOMatic.Constants.FieldEditors.PickerUser)]
    public string UserPicker { get; set; }

Multiple User Picker

Renders a multiple user picker

    [UIOMaticField(Description = "Example multiple users picker", 
        View = UIOMatic.Constants.FieldEditors.PickerUsers)]
    public string UsersPicker { get; set; }
PreviousUsageNextCustom Editor Views

Last updated