Skip to content

Latest commit

 

History

History
94 lines (57 loc) · 5.86 KB

index-v7.md

File metadata and controls

94 lines (57 loc) · 5.86 KB
versionFrom
7.0.0

Articles Parent and Article Items - A Parent Page with Infinite Children

Having an Articles Parent page, and a number of associated child articles which the editors can add to freely, provides a good example page of the power of Umbraco. We'll assume our fictional company, Widgets Ltd, write about ten articles a month and want the articles page to act like a blog (e.g. you could use this functionality for a blog or news and events pages).

Create two new Document Types "Articles Main" and "Articles Item" Document Types Settings > Document Types (hover) > ... > + Create. Remember to use the option that creates the template for you.

Create the following Tabs and Data Properties:

Articles Main

Tab = Intro "Articles Title" - Type = Textbox "Articles Body Text" - type = Rich Text Editor**

Articles Main Document Type Data Properties

Figure 38 - Articles Main Document Type Data Properties.

Articles Item

Tab = Contents "Article Title" - Type = Textstring "Article Contents" - type = Rich Text Editor**

Article Item Document Type Data Properties

Figure 39 - Article Item Document Type Data Properties.

Now go to the Settings > Document Types >Articles Main node > Permissions screen > Allowed child nodetypes and add Articles Item. This allows us to create items under the main (which acts as a parent container).

We also need to allow the Articles Main node to be created under the Homepage node. Do this in the Settings > Document Types > Homepage node > Permissions screen > Allowed child node types. Don't add the Articles Item, only the main should be allowed at this level.

Now go to Content > Homepage node (hover)> ... and create a node called "Articles" of type Articles Main (if you don't have this option go back and check your allowed child nodes - did you forget to click Save)? Give the Articles node some content and a title and then create a couple of article item content nodes under this node (Content > Homepage node > Articles node (hover) > ...

Now you should have a content tree that looks like the image below (using your own page node names). Let's go update our templates we created (automatically when we created the Document Types). First, update them to use the Master as a parent Settings > Templates > Articles Main node > Properties tab > Master template dropdown = "Master" - do the same for the Articles Item remembering to click Save.

Content Tree With Articles

Figure 40 - Content Tree With Articles.

Copy the template content from the Simple Content Page template and paste this into both the Articles Item and Articles Main (you may need to refresh the nodes again to see these. Set the Master template to be "Master" and then replace the Page field tags with the relevant properties e.g. articlesTitle and articlesBodyText for the Articles Main and the articleTitle and articleContents for Article Item.

Take care when copying not to overwrite the first line @inherits Umbraco.Web.Mvc.UmbracoTemplatePage<ContentModels.ArticlesMain> - if get an exception when loading the page about not being able to bind to source ensure the last part in < > brackets matches your Document Type Alias.

If we now go and check our Articles Main page in the browser we should see our content. We'd like to list the child article items under the intro content so that our visitors can see a list of our articles. Umbraco makes this possible for us, we need to use a bit of Razor.

Click on the Developer menu from the left-hand side menu and then hover over the Partial View Macros Files node to get the more menu ... then click + Create. Name this "listArticles" and select the "List Child Pages Ordered By Date" in the Choose a snippet field and click Create.

Now all we have to do is wire up the Articles main page to list our child articles. Edit the Articles Main template Settings > Templates node > Master node > Articles Main node > Template tab. Under the articlesBodyText tag enter a carriage return and then click the Insert Macro button, choose the ListArticles macro we created and then click Save.

Template for Articles Parent with the Macro Code

Figure 41 - Template for Articles Parent with the Macro Code.

Check what we have on our Articles page now - we're really getting somewhere! Let's make it a bit more real world. I'll leave the understanding of this to Razor lessons / The Umbraco videos but it will finish our site off nicely. Edit the Partial you created, Developer > Partial View Macro Files > listArticles.cshtml and change the content to be:

@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{
    var selection = CurrentPage.Children.Where("Visible").OrderBy("CreateDate desc");
    @* OrderBy() takes the property to sort by and optionally order desc/asc *@
}

@foreach (var item in selection)
{
<div class="article">
        <div class="articletitle"><a href="@item.Url">@item.Name</a></div>
        <div class="articlepreview">@(Umbraco.Truncate(item.GetPropertyValue<string>("articleContents"), 100)) <a href="@item.Url">Read More..</a></div>
    </div>
    <hr/>
}

Figure 42 - Improved Macro for listArticles.

Now check this in the browser!

Finished Articles Page

Figure 43 - Finished Articles Page.

Next - Conclusions and Where Next?

By this point you'll have a basic working site - where next? You've barely scratched the surface of the power of Umbraco!