Training on Umbraco CMS

Prepared by Shaishav Karnani

Agenda for Day - 1

Introduction Umbraco Set Up Document Types Templates & Stylesheet Content Organisation Macros Razors Packages

Goals of Day 1
Overview of Umbraco Complete foundation blocks of Umbraco to assist basic website development. Understanding of integration between front-end and Umbraco CMS

Introduction
Umbraco Background Evolution of Umbraco CMS Features Features for Content Editors Future of Umbraco CMS

Umbraco Background
Developed in 2005 by Niels Hartvig
More than 125,000 installations worldwide ASP.NET, Heinz, Peugeot, Tesco, Wired, FOX and Vogue Magazine run Umbraco WTiN, Carbonclix, ACTT, Autotechcouncil, Altfield my Umbraco sites Designed to run within the Microsoft stack And best of all.its 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 CodeGarden Umbraco 5.0 (discountinued - 2012) Umbraco 6.0 (2013) Engine Upgraded

Features
Umbraco is powerful & flexible All Markups are controlled by Front-end team. Its extensible Supports Multi Language Its Open Source Umbraco has a community and plugins

Features for Content Editors

Content Creation & Editing Media Library Recycle bin Scheduled Publishing Preview of site Full control over markup Separation of Content & Layout Search Built in approval workflow

Future of Umbraco CMS

Umbraco 7 (2014) Belle Project (Angular JS)

Umbraco as a SAAS

Umbraco Set Up
Install Umbraco using Web Matrix & Web Platform Installer (WPI) Visual Studio 2012 & NuGet [Install-Package UmbracoCms] Web Forms & MVC Manual Installation Demo

Umbraco Site Blocks

Document Type Properties Web Page
AJAX (Optional) Web API / Web Service /Base

Template Web Form / MVC Views HTML + Place Holders Macros Razor/Partial Views/ User Controls/XSLT

Umbraco Navigation
Umbraco Tree Structure Separate content and structure Umbraco Content tree and Building Blocks Umbraco Admin Panel and Sections

Document Types
How do we organize site using Document Types? Meet the data design needs of the specific content SQL Table If 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 (contd)

What are document type properties? SQL Columns bodyText umbracoNaviHide umbracoRedirect A nodeid (contentPicker) Umbraco will redirect to the selected page
umbracoInternalRedirectId A nodeid (contentPicker) Umbraco will load the selected pages content transparently; no url change

Document Types (contd)

umbracoUrlName A textstring Override the pages 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 (contd)

What are Data Types? Building Blocks Standard Data Types [Show samples as an example] TextString, DateTime, TextMultiple Content & Media Picker Related Links Tags Prevalues [Checkbox, dropdownlist, radio] Repository Its a Document Type They are part of template and dont have their own template Slide Slow, List Items

Umbraco Framework
Database

Creating, Editing etc

XML Cache

Publishing

XSLT, NodeFactory, Linq2Umbraco, Content Service

Your Website

Document Types (contd)

Document Types (contd)

Templates & Stylesheet

Create and Separate HTML markup for use in Umbraco Templates Templates created by designer Use Styles and Scripts Apply Front-end Validation for forms Add JSON/JQUERY where required Make it SEO Friendly and Validate Markup

Templates & Stylesheet (contd)

Master & Multiple Templates Master Home Inner o Text Template o List Template o Form Template Inject Content using Umbraco Tags Different 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 (contd)

Templates Nested Templates Umbraco.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 (contd)

@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 visitors expectations Urls are created from the content tree structure Easier to remember urls Helps with SEO Keep detailed information in sub-nodesand render the result on the parent container with a macro Ex: Job postings, Events, Slider Examples of different ways of building content: TrampCarbon ACTT.edu.au Avcover.com.au Wtin.com

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

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

Razor(contd)
Accessing Property Data @Model (Slides) Example [Id, Name, Url, bodyText, umbracoNaviHide]

Accessing Macro Parameters Example [Edit Properties and add Name from Parameter to Hello World example] @Parameter.who

Razor(contd)
Listing Items Show Sub Pages Add 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/re ference/code-snippets/razorsnippets

XSLT Macros

Packages
Install Useful Packages ImageGen DAMP UComponents