Training on Umbraco CMSPrepared by Shaishav Karnani

Agenda for Day - 1

IntroductionUmbraco Set UpDocument TypesTemplates & Stylesheet

Content OrganisationMacrosRazors Packages

Goals of Day – 1

Overview of UmbracoComplete foundation blocks of Umbraco to assist

basic website development.Understanding of integration between front-end

and Umbraco CMS

Introduction

Umbraco BackgroundEvolution of Umbraco CMSFeaturesFeatures for Content EditorsFuture of Umbraco CMS

Umbraco Background

Developed in 2005 by Niels HartvigMore than 125,000 installations worldwideASP.NET, Heinz, Peugeot, Tesco, Wired, FOX and

Vogue Magazine run UmbracoWTiN, Carbonclix, ACTT, Autotechcouncil, Altfield –

my Umbraco sitesDesigned to run within the Microsoft stackAnd best of all…….it’s FREE!

Evolution of Umbraco CMS

Umbraco 4.0 is released (2008)Umbraco Concierge - the monitoring tool for

Umbraco is released.Umbraco Courier - the tool to move content and

media between Umbraco environment is released.Umbraco Contour - the form designer for Umbraco

is released.Umbraco CodeGardenUmbraco 5.0 (discountinued - 2012)Umbraco 6.0 (2013) – Engine Upgraded

Features

Umbraco is powerful & flexibleAll Markups are controlled by Front-end team.It’s extensibleSupports Multi LanguageIt’s Open SourceUmbraco has a community and plugins

Features for Content Editors

Content Creation & Editing

Media LibraryRecycle binScheduled

Publishing Preview of site

Full control over markup

Separation of Content & Layout

SearchBuilt in approval

workflow

Future of Umbraco CMS

Umbraco 7 (2014)Belle Project (Angular JS)

Umbraco as a SAAS

Umbraco Set Up

Install Umbraco usingWeb Matrix & Web Platform Installer (WPI)Visual Studio 2012 & NuGet [Install-Package

UmbracoCms]• Web Forms & MVC

Manual InstallationDemo

Umbraco Site Blocks

Document TypeProperties

Template Web Form / MVC ViewsHTML + Place Holders

MacrosRazor/Partial Views/User Controls/XSLT

Web Page

AJAX (Optional)Web API / Web Service /Base

Umbraco Navigation

Umbraco Tree StructureSeparate content and structureUmbraco Content tree and Building BlocksUmbraco Admin Panel and Sections

Document Types

How do we organize site using Document Types?Meet the data design needs of the specific

contentSQL TableIf your design has a unique template (home

page, events, news) you probably want a unique docType as well

Related Topics – Document Property, Data Types, Data Editors

Document Types (cont’d)

What are document type properties?

SQL ColumnsbodyTextumbracoNaviHideumbracoRedirect• A nodeid (contentPicker)• Umbraco will redirect to

the selected page

umbracoInternalRedirectId• A nodeid

(contentPicker)• Umbraco will load the

selected page’s content transparently; no url change

Document Types (cont’d)

umbracoUrlName• A textstring• Override the page’s

default url

umbracoUrlAlias• A textstring• Add additional urls

for the page• Example:

“faq,support/help/answers”• No spaces, no leading

slash, no “.aspx”

Document Types (cont’d)

What are Data Types?• Building Blocks

Standard Data Types [Show samples as an example]

TextString, DateTime, TextMultiple

Content & Media PickerRelated LinksTagsPrevalues [Checkbox,

dropdownlist, radio]

RepositoryIt’s a Document Type They are part of

template and don’t have their own template

Slide Slow, List Items

Umbraco Framework

Database

Creating, Editing etc Publishing

XML CacheXSLT, NodeFactory, Linq2Umbraco, Content Service

Your Website

Document Types (cont’d)

Document Types (cont’d)

Templates & Stylesheet

Create and Separate HTML markup for use in Umbraco TemplatesTemplates created by designerUse Styles and ScriptsApply Front-end Validation for formsAdd JSON/JQUERY where requiredMake it SEO Friendly and Validate Markup

Templates & Stylesheet (cont’d)

Master & Multiple TemplatesMaster

• Home• Inner

o Text Templateo List Templateo Form Template

Inject Content using Umbraco TagsDifferent Umbraco Tags

<umbraco:Item field="googleAnalyticsCode" recursive="true" runat="server" />@Umbraco.Field("googleAnalyticsCode",recursive:true)

Rich Text Editor need to match the design template for editors

Templates & Stylesheet (cont’d)

TemplatesNested TemplatesUmbraco.Web.Mvc.UmbracoTemplatePage All Umbraco views inherit from Umbraco.Web.Mvc.UmbracoTemplatePage which exposes many properties that are available in razor:@Umbraco (of type Umbraco.Web.UmbracoHelper) -> contains many helpful methods, from rendering macros and fields to retreiving content based on an Id and tons of other helpful methods. This is essentially the replacement for the 'library' object in the old codebase.@Html (of type HtmlHelper) -> the same HtmlHelper you know and love from Microsoft but we've added a bunch of handy extension methods like @Html.BeginUmbracoForm

Templates & Stylesheet (cont’d)

@CurrentPage (of type DynamicPublishedContent) -> the dynamic representation of the current page model which allows dynamic access to fields and also dynamic Linq@Model (of type Umbraco.Web.Mvc.RenderModel) -> the model for the view which contains a property called Content which gives you accesss to the typed current page (of type IPublishedContent).@UmbracoContext (of type `Umbraco.Web.UmbracoContext1)@ApplicationContext (of type Umbraco.Core.ApplicationContext)

Content Organisation

Organize content into logical sections according to website visitor’s expectations

Url’s are created from the content tree structureEasier to remember urlsHelps with SEO

Keep detailed information in sub-nodesand render the result on the parent “container” with a macro

Ex: Job postings, Events, SliderExamples of different ways of building content:-

TrampCarbonACTT.edu.auAvcover.com.auWtin.com

Macros

• Razor Macros• .NET User Controls Macros• XSLT Macros• Partial View Macro• Macro Settings

Razor

OverviewHello World ExampleCode Block [@DateTime.Now.Year]Dedicated & Inline ScriptInline Script [Hello Word Example with DateTime]Inline Script [1-InlineScript.txt]DynamicNode and Cheatsheets

Razor(cont’d)

Accessing Property Data@Model (Slides)Example [Id, Name,

Url, bodyText, umbracoNaviHide]

Accessing Macro ParametersExample [Edit Properties and add Name from Parameter to Hello World example]

@Parameter.who

Razor(cont’d)

Listing ItemsShow Sub PagesAdd Where

Clause(“Visible”)Instead of Children add

DocumentType to restrict list to DocumentType.

.AncestorOrSelf(1) – This can be shown when you are inside sub pages and want to show top level node.

Media & Gallery (show from DigitalTextile)

Form (show from DigitalTextile and add to Node)

Reference: http://our.umbraco.org/wiki/reference/code-snippets/razor-snippets

XSLT Macros

Packages

Install Useful PackagesImageGenDAMPUComponents