There are a few places in Cofoundry that auto-generate data entry forms from annotated POCO data models, such as Page Block Types and Custom Entities.
Primitive Types
Primitive types such as string
and int
will be displayed with a basic editor that corresponds with their type. The basic editor can be overridden by adding a data annotation, for example a string
property automatically generates a single line text input, but you can use the [MultiLineText]
attribute to turn this into a textarea.
.NET DataAnnotations
Most of the standard .Net DataAnnotations data annotations like [Required]
, [MaxLength(10)]
and [Display(Name="Title")]
should work as expected.
Models are always validated on the server, and most of these annotations will have client-side validation equivalents
Built-in Cofoundry Attributes
Cofoundry has a range of built in data annotations that either enhance existing types or compliment Cofoundry entities like images and documents.
UI/Validation Attributes
- CheckboxList: Use this to decorate a collection property to indicate it should be rendered as a list of checkbox inputs in the admin UI. Specify an option source to describe the items to display in the list.
- Color: Use this to decorate a string property and provide a UI hint to the admin interface to display an html editor field. Toolbar options can be specified in the constructor and the CustomToolbar property can be used to show a completely custom toolbar.
- CustomEntity: Use this to decorate an integer property and indicate that it should be the id for a custom entity of a specific type.
- CustomEntityCollection: Allows a user to pick multiple custom entities of a specific type, which can optionally have 'drag and drop' ordering. Designed to be applied to an
ICollection<int>
property. - CustomEntityMultiTypeCollection: Use this to decorate a collection of
CustomEntityIdentity
objects, indicating the property represents a set of custom entities of mixed types. Optional parameters indicate whether the collection is sortable. - Date: Use this to decorate a DateTime field and provide a UI hint to the admin interface to display a date picker field
- Document: Use with an (optionally nullable) integer to indicate this is for the id of a document asset.
- DocumentCollection: This data annotation can be used to decorate a collection of integers, indicating the property represents a set of document asset ids. The editor allows for sorting and you can set filters for restricting file types.
- Html: Use this to decorate a string property and provide a UI hint to the admin interface to display an html editor field. Toolbar options can be specified in the constructor and the CustomToolbar property can be used to show a completely custom toolbar.
- Image: Use with an (optionally nullable) integer to indicate this is for the id of an ImageAsset. A non-null integer indicates this is a required field. Optional parameters allow the search filter to be restricted e.g. width/height etc
- ImageCollection: Use this to decorate an integer array of ImageAssetIds and indicate that it should be a collection of image assets. The editor allows for sorting of linked assets and you can set filters for restricting image sizes.
- MultiLineText: Use this to decorate a string property and provide a UI hint to the admin interface to display a text area field
- NestedDataModelCollection: Use this to decorate a collection of
INestedDataModel
objects, allowing them to be edited in the admin UI. - Number: Use this to decorate a numeric property and provide a UI hint to the admin interface to display an html5 number field. The step property can be used to specify the precision of the number e.g. 2 decimal places
- Placeholder: Use this to provide a UI hint to the admin interface to add a placeholder attribute to an html input field.
- PreviewTitle: Indicates the property of a model that can be used as a title, name or short textual identifier. Typically this is used in a grid of items to identify the row.
- PreviewImage: Indicates the property of a model that can be used as the main image when displaying the model. Typically this is used in a grid of items to show an image representation of the row.
- PreviewDescription: Indicates the property of a model that can be used as a description field. Typically this is used in a grid of items to describe the item.
- RadioListList: Use this to decorate a collection property to indicate it should be rendered as a radio input list in the admin UI. Specify an option source to describe the items to display in the list.
- SelectListList: Use this to decorate a collection property to indicate it should be rendered as a select list (drop down list) in the admin UI. Specify an option source to describe the items to display in the list.
Special Behavior Attributes
- EntityDependency: This can be used to decorate an integer id property that links to another entity. The entity must have a definition that implements
IDependableEntityDefinition
. Defining relations allow the system to detect and prevent entities used in required fields from being removed. - EntityDependencyCollection: This can be used to decorate an integer id array property that links to a set of entities. The entity must have a definition that implements
IDependableEntityDefinition
. Defining relations allow the system to detect and prevent entities used in required fields from being removed. - CustomEntityRouteData: Use this to mark up a property in a custom entity data model, this property will be extracted and added to the cached
CustomEntityRoute
object and therefore make the property available for routing operations without having to re-query the db. E.g. for a blog post custom entity you could mark up a category Id and then use this in anICustomEntityRoutingRule
to create a /category/blog-post URL route
Creating Your Own Attributes
You can create your own attributes, but to get UI integration you'll need to to be familiar with Angular.js. We're not quite ready to document the Angular UI process just yet, but if you're interested you can see some examples of UI components on github
TODO: Document admin UI development
When creating your annotations you should implement IMetadataAttribute
and add any additional data you want to send to the angular client to the AdditionalValues
collection. These will be rendered into your control with the 'cms-' prefix.
The TemplateHint
property can be used to customize the tag name that is output.
You can also add additional metadata to an existing attribute by creating an attribute class that implements IModelMetaDataDecorator