Page | 1

UMBRACO BASIC CONCEPTS

INDEX
Contents
DOCUMENT TYPES.................................................................................................... 2
What is a Document Type?....................................................................................2
Creating Document Types..................................................................................... 2
Working with Document Types.............................................................................. 6
WEB PAGES.............................................................................................................. 8
Create a Web Page................................................................................................ 8
TEMPLATES............................................................................................................... 8
What is a template?.............................................................................................. 8
Creating a new template....................................................................................... 8
MACROS................................................................................................................. 12
What is a Macro?................................................................................................. 12
Creating a Macro................................................................................................. 12
Sample Macro..................................................................................................... 13
USEFUL REFERENCES............................................................................................. 14

Page | 2

DOCUMENT TYPES
What is a Document Type?
Document Type is an important element of Umbraco. It defines the fields that can
be edited on a page. Document Types are made up of Properties, Tabs, Structure
and Info.

The Info tab sets certain details of the Document Type such as the
Document Type name and which templates it can use.

The Structure tab sets which child Document Types can be created
under this Document Type.

The Generic Properties tab is where you specify what kind of content
can go on web pages that are based on this Document Type. These
Properties determine which fields and controls can appear on your web
page.

The Tabs tab is where you specify the tabs that will show up when you
create a web page based on this Document Type. After you create a tab,
you can assign Properties to it in the Properties tab.

Creating Document Types

1. Go to Sections -> Settings

Page | 3

2. Right Click the Folder Document Types -> Select Create

3. Go to Tabs tab to add new tabs if required. Now, we can start adding
Properties under these tabs.
A property is very similar to a column in a table, but when while adding
columns to tables we usually think in types of data like "dates", "nvarchar"
etc. However, with properties in umbraco, we should think how an editor
would edit the property - like a "Rich text Editor", "An upload field" or "Date
chooser".

Page | 4

Save the changes. The newly added property will be displayed under the
tab to which it is added.

Hierarchies for a Document Type can be created by selecting its Child nodes
in the structure tab.

These selected child nodes (Document Types) can be selected from the
dropdown while creating a page.
4. A page can be created by selecting the new Document Type. Go to
Content -> Select a node -> Right-click -> Select Create

Page | 5

Select the page to edit its content.

Working with Document Types

Add references to the following namespaces at the top of your .cs file
using umbraco.BusinessLogic;
using umbraco.cms.businesslogic.web;

Perform the creation

//Get the type you would like to use by its alias
//and the user who should be the creator of the document

Page | 6

DocumentType dt = DocumentType.GetByAlias("Textpage");
User author = User.GetUser(0);
//create a document with a name, a type, an umbraco user, and the ID of the
document's parent page.
//To create a document at the root of umbraco, use the id -1
Document doc = Document.MakeNew("My new document", dt, author, 1018);
//after creating the document, prepare it for publishing
doc.Publish(author);
//Tell umbraco to publish the document
umbraco.library.UpdateDocumentCache(doc.Id);

Remember to add the cms.dll, businesslogic.dll and umbraco.dll to the project.

The properties of a Document Type can be modified as below:

Modify the document properties and publish the changes
// Get the document by its ID
Document doc = new Document(1029);
// Get the properties you wish to modify by it's alias and set their value
// the value is saved in the database instantly!
doc.getProperty("bodyText").Value = "<p>Your body text</p>";
doc.getProperty("articleDate").Value = DateTime.Now;
// After modifying the document, prepare it for publishing
User author = User.GetUser(0);
doc.Publish(author);
// Tell umbraco to publish the document so the updated properties are visible on
website
umbraco.library.UpdateDocumentCache(doc.Id);

WEB PAGES

Page | 7
Web pages in Umbraco are based on Document Types. Therefore, it will be better if
we could create a document type before adding the page.

Create a Web Page

1. Go to Sections panel > Content. Web pages will appear as nodes in the Content panel.
2. If you do not yet have any web pages, create one by right-clicking on Content and choosing
Create.
3. Enter a name for the page and click Create. The page will show up under the Content folder
(refresh your browser page if you need to).
4. Click on your new page. In the right panel, you will see the tabs that allow you to set the content
that will appear on the page.
5. Enter the content for the page, by entering content in the tabs in the main panel. If you want
your page to contain more types of content than are allowed here, you must edit the Document
Template which is used by the page. To see which Document Type the page uses, go to the
Properties tab for the web page.
6. When youre done, click the save and publish button in the tool bar.
7. To see how your page looks in Umbraco, go to the Properties tab for that page, then click the
"Link to Document" URL at the bottom of the tab.

TEMPLATES
What is a template?
Templates define the layout and presentation of a web page. An umbraco template
is basically text - usually (X)Html - combined with umbraco tags (elements). While
creating a new Document Type, a matching template for it can be created by
either selecting the checkbox Create Matching Template or by creating a new
template by following the following steps.

Creating a new template

1. Go to Settings -> Right click on Templates folder -> select Create.
2. Open the newly created template.
Copy & Paste the required HTML codes from the project.

Page | 8
3. The page properties of the template can also be accessed by selecting
Insert Umbraco Page field button in the toolbar. Umbraco will now insert
the template markup needed for the title of the page into the template.

Page | 9

4. This template can be assigned to a page by going to its property tab and
selecting the template from the dropdown.

P a g e | 10

5. Publish and run the website. The changes made in the template will reflect
in the page.
6. Master templates can be created in the same way but it also includes the
information about inserting the child templates. In that case, the tag <?
UMBRACO_GETITEM field="bodyText"/> must be replaced with an
instruction to insert a child template instead which is represented as "<?
UMBRACO_TEMPLATE_LOAD_CHILD/>". The template of the page must be
modified to the Master Template.

P a g e | 11

MACROS
What is a Macro?
In Umbraco, macros are small building blocks of functionality that can be dropped
into an editor. Each macro encompasses a piece of functionality, and provides a
simple interface to be able to modify the macro based on our requirements.

Creating a Macro
1. Go to Developer -> Right-click Macros -> select Create.
2. Select the file or control which must be associated with the macro.

3. The Macro can be added to the required template by either selecting the
template and clicking on the Insert Macro button on the tool bar or by
writing the HTML code directly in the editor.
The basic syntax for Macro must look like this:

The page to which this template is assigned will run the macro to achieve the
expected outcome.

Sample Macro

P a g e | 12
@inherits umbraco.MacroEngines.DynamicNodeContext
@using umbraco;
@using umbraco.interfaces;
@using umbraco.NodeFactory;
@using Lifetime.Cms.Domain;
@using Lifetime.Cms.Domain.Extensions;

@{

INode CurrentNode = Node;

var isVisible = Node.GetPropertyValue<bool>("contentVisible");
// gets the value as a string
var content = Node.GetPropertyValue<string>("additionalContent");
while (CurrentNode.GetPropertyValue<bool>("inheritFromParent"))
{
CurrentNode = CurrentNode.Parent;
isVisible = CurrentNode.GetPropertyValue<bool>("contentVisible");

if (isVisible)
{
content = CurrentNode.GetPropertyValue<string>("additionalContent");
}

}
<div>
@if(isVisible)
{
// need to do Html.Raw to stop the HTML encoding
@Html.Raw(content)
}
</div>

USEFUL REFERENCES
http://our.umbraco.org/wiki/reference/api-cheatsheet
http://umbraco.com/follow-us/blog-archive/2007.aspx
http://our.umbraco.org/wiki/reference/templates/umbracomacro-element