A Structure

This area shows how a structure can be added to the Nav supported Feeds.

Home Feeds Structured Sections

For each Feed we automatically create a number of Pages that all render different layouts, and some even reference Custom DataItems types.


Below is a List of home feeds.

Each feed is going to represent some Race / Event from say the "Mexico F1" race to the "Le Mans 24".

Each event will have some common content. For Example details abot the "Venue" and the "Drivers", the final standing or "Results" maybe a "Gallery" for photos of the event, even a "Race Review" that contains a kind of news article or "Review" of what happened in the race. There could be many more, but each of these area would have special / dedicated pages for that race event.

Given the commonality between the different race events; where for every race that takes place this structure of pages would need to be created by the admin / author; it would be very error prone to expect the administrator to manually create these for each race event.

Plus there might be special layouts, even shared data, say from a common table of Drivers and Venues. This is where the bEnableNavSupport and aNavDefaultPages properties come into play. By filling the aNavDefaultPages array with the names of these common pages that need to exist for each race will automate this process for the Administrator; a Nav and each WebPage will be create and associated. Giving unique links for the corresponding Race Event + Common Page.

How you control the content of these pages is quite simply the same as you would any other section, given the combination of the cRootURL property, the name of the Event being added and then the names of the common pages you can easily define a slugs for sections, be it a single section to match all pages or a number of sections.

These are ACL restricted

The Example Feeds

Test Race One

Test Race One Sub Title

Another Race

Another Race Sub Title


F1 GP Sub Title

Another GP

Another GP Sub Title

The Admin Tools

Here's some screenshots of the admin tools.


Add Event


Extend Event

How To create

Here's a quick overview on how to achive the same.

The JSON used above

Here's some Example JSON that's being used for the Feed listing above.

  "cFeedType": "SECTION_STRUCT",
  "nMaxFeeds": -1,
  "cDataItemType": "",
  "nDataItemId": -1,
  "cListItemCtrl": "Net4orce.Canvas.General.HomeFeeds.List.ListItem",
  "cItemCSSClass": "col-md-3",
  "oImgOptions": {
    "width": "300",
    "height": "200",
    "color": "#333",
    "background": "#aaa",
    "cssClass": ""
  "bEnablePaging": false,
  "cPageParam": "page",
  "nPageSize": 12,
  "cPagerPosition": "both",
  "cPagingType": "normal",
  "cSortOn": "nSort",
  "cPagerControl": "Net4orce.Canvas.General.HomeFeeds.List.Pager",
  "bEnableACL": false,
  "bEnableWebPages": true,
  "cRootURL": "/homefeed/demo/race-event/",
  "cWebPageType": "RACE_EVENT",
  "cModalType": "",
  "bEnableNavSupport": true,
  "aNavDefaultPages": [

The above example will create 2 Common Pages For every race created. For Example if an event named "F1 GP Mexico" was created the following will created :

  • Venue

    This will have the URL : /homefeed/demo/race-event/f1-gp-mexico/venue.html

  • Results

    This will have the URL : /homefeed/demo/race-event/f1-gp-mexico/results.html

Creating Sections & DataSources

Having set the JSON on the control you need to create the sections and datasources.

First of all let's deal with the Top level page and use it as the standard catch-all for other pages that are added to the section.

We could create a Special top-level page for the first page, but for this example we'll share the section.

The Section

Add a section with :

slug = path-to-page/{event-name}/{page-name}.html

use more apropriate var name of event-name to suit your project.

The DataSource

To get the data for these pages we need a data source like this :

Matcher 1 :

  • Match on NAME
  • From URL
  • Param {page-name}

Matcher 2 :

  • Match on TYPE
  • From URL
  • Param {RACE_EVENT-```event-name```}

Where RACE_EVENT is the the value you defined for the WebPageType on the JSON for theHomeFeeds options.