Creating a news app with 2SexyContent (2sxc)

I have been using 2sxc as my main module of choice for any website I do because of the variety of apps you can build with it. I use it for any kind of master detail type set-up I need. To show the power of this module I am working on a number of blog posts showing the power of this module starting with this one. By the end you will have a working news module. The setup I used for this was based on Ventrian Newsarticles, so we have a main News module and some helper modules.

For this blog post I do assume you know how this module works as we are not going to go into everything in detail but only discuss certain elements. If you are new to this module download it.

The initial layout is Bootstrap 3 based so it will fit any Bootstrap 3 based theme you use it in.

Setting up the content

This app consist of 2 content types and 2 helper content types. "Dummy" is there so we have content attached to a template for a template that does not need content attached ( this won't be necessary anymore in a future update. "Module" is used for the news module to maintain the module title of that module. ( because 2sxc started as a single item module so the first tile element will be the module title, this allows you to set your own module title so it will not change when you change the title of the first element.

News

The News content type contains a nr of item of basic types likes string date etc. The Category one is of a type called "entity" this means that it is linked to another content type, in this case "e_Category"

e_Category

The category type contains basic info like Title, Image and Description. If I use a content type as an entity for another type that i have the prefix "e_"

Managing the Content

Aside from just adding news we also have a few other things we want to mange like where the news page is, how many item we want to show for the pager and for the recent news display. This is done using the App settings.

We also want to have a prefix for the category title on the category pages and this we can do in the App Resources

Setting up the templates

We have 3 main templates "News", "News_Category", "News_Recent". As you can see 2 of them have the "dummy" content type because these re-use other data and not the data assigned to the module and one of them actually has the news content.

News

This is the main view, it will take care of the news listing, the pager and the detail view. You can check out the templates after you have downloaded them but lets discuss a few of the code parts to understand how it works.

Because aside from the normal news listing we also want to display news by category we need to set this up first using the "RelationshipFilter"

Paging is not directly build in but we are going to create our own paging, this will take care of the display part.

We also use this template to create the detail view, for this we set up an EntityIdFilter so we can pass the id in the querystring and it will show only that data

Now that we have the intial setup done we ar going to use this data to actually display the data. Lets start with the standard news listing.Because its a news listing we order it so that the newest items shows first We use a bit of Linq to only take the items we need

List the items for a specified category

List only the selected news item

Because its much easier to modify the layout if you separate it from the functionality the layout parts are in separate templates as you can see from the code above.

News_Recent

List all the news item and only show the top n number of items sorted by date.

News_Category

List all the categories

See the result

Download