You are on page 1of 12

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

Document Types are made up of Properties. Structure and Info.  The Tabs tab is where you specify the tabs that will show up when you create a web page based on this Document Type.  The Structure tab sets which child Document Types can be created under this Document Type.  The Info tab sets certain details of the Document Type such as the Document Type name and which templates it can use.Page | 2 DOCUMENT TYPES What is a Document Type? Document Type is an important element of Umbraco. Go to Sections -> Settings .  The Generic Properties tab is where you specify what kind of content can go on web pages that are based on this Document Type. Tabs. Creating Document Types 1. It defines the fields that can be edited on a page. After you create a tab. you can assign Properties to it in the Properties tab. These Properties determine which fields and controls can appear on your web page.

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

The newly added property will be displayed under the tab to which it is added. A page can be created by selecting the new Document Type. Go to ‘Content’ -> Select a node -> Right-click -> Select ‘Create’ . These selected child nodes (Document Types) can be selected from the dropdown while creating a page. 4.Page | 4 Save the changes. Hierarchies for a Document Type can be created by selecting its Child nodes in the ‘structure’ tab.

Working with Document Types Add references to the following namespaces at the top of your . 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 .cms.Page | 5 Select the page to edit its content.businesslogic.BusinessLogic. using umbraco.cs file using umbraco.web.

Remember to add the cms. businesslogic.dll and umbraco. //create a document with a name. //Tell umbraco to publish the document umbraco. author. // Get the properties you wish to modify by it's alias and set their value // the value is saved in the database instantly! doc. use the id -1 Document doc = Document. //after creating the document.UpdateDocumentCache(doc.Id). 1018). WEB PAGES . // After modifying the document.UpdateDocumentCache(doc. a type.Page | 6 DocumentType dt = DocumentType. //To create a document at the root of umbraco. doc.getProperty("articleDate").Publish(author). doc. and the ID of the document's parent page.Now. prepare it for publishing User author = User.GetUser(0).dll.GetUser(0).MakeNew("My new document". prepare it for publishing doc.Value = DateTime.getProperty("bodyText").Publish(author).GetByAlias("Textpage").library. an umbraco user. // Tell umbraco to publish the document so the updated properties are visible on website umbraco. dt. 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).Id).library.Value = "<p>Your body text</p>".dll to the project. User author = User.

5. you must edit the Document Template which is used by the page. 4.combined with umbraco tags (elements). by entering content in the tabs in the main panel. Copy & Paste the required HTML codes from the project. go to the Properties tab for that page.usually (X)Html . click the “save and publish” button in the tool bar. create one by right-clicking on Content and choosing Create. TEMPLATES What is a template? Templates define the layout and presentation of a web page. To see which Document Type the page uses. 2. 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. If you do not yet have any web pages. it will be better if we could create a document type before adding the page. then click the "Link to Document" URL at the bottom of the tab. you will see the tabs that allow you to set the content that will appear on the page. In the right panel. The page will show up under the Content folder (refresh your browser page if you need to). When you’re done. Enter the content for the page. Go to Sections panel > Content. An umbraco template is basically text . Click on your new page. Creating a new template 1. . To see how your page looks in Umbraco. Web pages will appear as nodes in the Content panel.Page | 7 Web pages in Umbraco are based on Document Types. 2. 3. Enter a name for the page and click Create. Therefore. If you want your page to contain more types of content than are allowed here. Go to Settings -> Right click on ‘Templates’ folder -> select ‘Create’. While creating a new Document Type. Open the newly created template. 7. go to the Properties tab for the web page. 6. Create a Web Page 1.

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

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

. Publish and run the website.P a g e | 10 5. 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. The template of the page must be modified to the Master Template. 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/>".

Select the file or control which must be associated with the macro. 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. 3. and provides a simple interface to be able to modify the macro based on our requirements. Each macro encompasses a piece of functionality. 2. Go to ‘Developer’ -> Right-click Macros -> select ‘Create’.P a g e | 11 MACROS What is a Macro? In Umbraco. Creating a Macro 1. 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. Sample Macro . macros are small building blocks of functionality that can be dropped into an editor.

GetPropertyValue<string>("additionalContent").Raw to stop the HTML encoding @Html. @using Lifetime.Extensions.org/wiki/reference/templates/umbracomacro-element .com/follow-us/blog-archive/2007. @using Lifetime.Cms.MacroEngines. while (CurrentNode.Domain. @{ INode CurrentNode = Node. // gets the value as a string var content = Node. @using umbraco.GetPropertyValue<bool>("contentVisible"). @using umbraco.GetPropertyValue<bool>("inheritFromParent")) { CurrentNode = CurrentNode.GetPropertyValue<bool>("contentVisible").DynamicNodeContext @using umbraco. } } <div> @if(isVisible) { // need to do Html.Raw(content) } </div> USEFUL REFERENCES http://our.Parent.Cms.org/wiki/reference/api-cheatsheet http://umbraco.interfaces.P a g e | 12 @inherits umbraco.umbraco.Domain. var isVisible = Node. isVisible = CurrentNode.NodeFactory. } if (isVisible) { content = CurrentNode.umbraco.GetPropertyValue<string>("additionalContent").aspx http://our.