Editing and Built-in Properties - Optimizely CMS 12

Exam Area: Content Area 1 – Product Knowledge (15%)
Reference: https://docs.developers.optimizely.com/content-management-system/docs/properties

---

1. Built-in Properties

Every content item has the following properties available by default (no declaration needed):

PageData-only Properties:

---

2. Property Types (Built-in)

// Common property types in CMS 12
public class MyPage : PageData
{
    // Text
    public virtual string ShortText { get; set; }
    public virtual XhtmlString RichText { get; set; }     // TinyMCE editor
    
    // Numbers
    public virtual int Number { get; set; }
    public virtual double FloatingPoint { get; set; }
    public virtual long LongNumber { get; set; }
    
    // Boolean
    public virtual bool IsActive { get; set; }
    
    // Date/Time
    public virtual DateTime? PublishDate { get; set; }
    
    // Content References
    public virtual ContentReference Link { get; set; }     // 1 content item
    public virtual ContentArea ContentArea { get; set; }   // Multiple items
    public virtual IList<ContentReference> Items { get; set; } // List
    
    // URL
    public virtual Url ExternalLink { get; set; }
    
    // Media
    public virtual ContentReference Image { get; set; }
    
    // Selection
    [SelectOne(SelectionFactoryType = typeof(MySelectionFactory))]
    public virtual string Status { get; set; }
    
    // Category
    public virtual CategoryList Categories { get; set; }
}

---

3. Display Attribute

[Display(
    Name = "Heading",
    Description = "Main heading of the page",
    GroupName = SystemTabNames.Content,  // Tab
    Order = 10                            // Order within the tab
)]
public virtual string Heading { get; set; }

SystemTabNames:

• SystemTabNames.Content – "Content" tab
• SystemTabNames.Settings – "Settings" tab
• "SEO" – Custom tab

---

4. XhtmlString (Rich Text)

// Declaration
[Display(Name = "Main Body")]
public virtual XhtmlString MainBody { get; set; }

// Render in View (automatically enables TinyMCE)
@Html.PropertyFor(m => m.MainBody)

TinyMCE editor is automatically used for XhtmlString.

---

5. ScaffoldColumn and UIHint

// Hide property from Edit UI
[ScaffoldColumn(false)]
public virtual int InternalField { get; set; }

// Hint the type of editor
[UIHint(UIHint.Image)]
public virtual ContentReference Image { get; set; }

[UIHint(UIHint.Video)]
public virtual ContentReference Video { get; set; }

[UIHint("textarea")]
public virtual string LongText { get; set; }

---

6. Required and Validation

using System.ComponentModel.DataAnnotations;

[Required]
[Display(Name = "Title")]
public virtual string Title { get; set; }

[StringLength(200)]
[Display(Name = "Description")]
public virtual string Description { get; set; }

[Range(1, 100)]
public virtual int Priority { get; set; }

---

7. Editable Regions in Views

@* Enable on-page editing for a property *@
@Html.PropertyFor(m => m.Heading)

@* Or using Tag Helpers (CMS 12) *@
<epi-property name="Heading" model="@Model"></epi-property>

---

8. Accessing Properties in a Controller

public class ArticlePageController : PageController<ArticlePage>
{
    public ActionResult Index(ArticlePage currentPage)
    {
        // currentPage contains all properties
        var heading = currentPage.Heading;
        var body = currentPage.MainBody;
        
        return View(currentPage);
    }
}

---

Review Questions

1. Which property of PageData contains the HTML title? (PageTitle)
2. Which editor does XhtmlString use? (TinyMCE)
3. Which attribute is used to group properties into a tab? ([Display(GroupName = "...")])
4. What is ContentArea used for? (Holds multiple content items/blocks)
5. What does [ScaffoldColumn(false)] do? (Hides the property from the Edit UI)
6. Which namespace does [Required] come from? (System.ComponentModel.DataAnnotations)