Back

HomeFeed's With Modals

This page demos the use of HomeFeeds to create lists for feeds where the click event open's a modal with the content drawn from a WebPage that was added when the Feed was created.

The Modals contain a simple Title, Lead and Rich Text Area that can be defined individually for each of the different Feeds.


My First Item

My First Item Sub Title

My Second

My Second Sub Title asdf

My Thirddfd

My Third Sub Title

No Four

No Four Sub Title

A Feed Item

A Feed Item Sub Title


The JSON Options

{
  "cFeedType": "MODAL_EX_01",
  "nMaxFeeds": -1,
  "cDataItemType": "",
  "nDataItemId": -1,
  "cListItemCtrl": "Net4orce.Canvas.General.HomeFeeds.List.ModalItem",
  "cItemCSSClass": "col-md-4",
  "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",
  "bEnableWebPages": true,
  "cRootURL": "",
  "cWebPageType": "",
  "cModalType":"inline"
}

The ModalItem

There's a special ListItem for the Modals :

  • Net4orce.Canvas.General.HomeFeeds.List.ModalItem

This allow for the editing of the WebPages content in EDIT mode as well as rendering the modal's for the public.

In order to enable the editing of the WebPage's content you need to include the nessasary attributes to support Mercury & handle the save the writing of the properties to the WebPage too.

Editing the Modal Content

The content of each webpage is loaded into the page and can be edited during "EDIT" mode. The user clicks View Modal and is able to edit the content a'la any other part of the editabe UI.

Here's a screenshot of the modal's content being edied.

Edit modal screen shot

View Full

Back

"cModalType":"inline"