I'm looking for some help / guidance on how you would recommend building a news / search page.
In the backoffice I am using nested content and I can select 3 different news article types. News, Videos, Download.
I'm thinking I can create my news page with the help of Examine. But that's as far as I have managed to get.
I need to show the top 5 featured articles, which are set by a tick box on each article. The first featured article shows a hero image then the following 4 articles only show the article title and a short summary.
Below all of this, I'll list all the articles in date order with two drop down lists to allow for filtering the articles by type and/or category.
I started working on this but I was putting all my logic in the view but I think I should be moving stuff out to a controller. But I'm not clear on how to do this.
I'm using Models Builder too.
I know there is a lot of things to cover here but I'd appreciate any help.
Let me try to start things up, although I won't cover 100% of your questions.
Personally, I'd favor an MNTP on the root news page which would be used to select the featured articles than having to check boxes (which I could easily lose count of).
I agree with you - a controller would be a good way to offload logic from the view. I would create a controller that would populate a collection of custom objects- the ViewModel, if you will, which would have only the properties that would need to be displayed, along with an enum showing what actual type of item it is (video/download/article). On the view, I would see what the enum is and act accordingly. Setting the hero image would also be easy that way if you used ImageCropper either on the view's side or by setting some special property in the viewmodel.
The two drop down lists are tricky - best way to implement those in my opinion is to populate them via controller actions (and cache the result sets) and then use ajax to call the controller that will render a view underneath. I could find some samples if you need some.
Finally, don't forget paging! (Or endless load!)
I know this is too little, but I hope it'll be a starting point for more.
I'm keeping the feature checkbox because I don't need to keep track of them. I will only show the latest 5 for example.
The key word there for me to look in to is ViewModel. I've been struggling to work out how I get the data from my controller to the view and I'm thinking this might be key.
Thanks for the Controller link David, I have used this and it's got me part of the way I think.
I think I'll start one bit at a time, getting the top 5 features articles out of my Nested Content. Then build from there. I might be trying to do everything at once and getting confused.
Any other points are welcome - thanks for the help so far.
Create a class called NewsListingViewModel which inherits from RenderModel<NewsListing> where NewsListing is the model generated for your listing page.
Your Controller would be called NewsListingController and might would return a new instance of NewsListingViewModel. You can then add your own custom properties to NewsListingViewModel such as your list of news articles.
If you set your template to @inherits UmbracoViewPage<NewsListingViewModel> then you'll be able to access your custom properties through Model.MyCustomProperty and your NewsListing through Model.Content.
e.g:
public class NewsListingViewModel : RenderModel<NewsListing>{
public NewsListingViewModel (NewsListing model) : base(model) {}
public IList<IPublishedContent> NewsArticles { get; set; }
}
---View Model
public class NewsListingController : RenderMvcController {
public override ActionResult Index(NewsListing model)
{
var viewModel = new NewsListingViewModel(model){
//GetNewsArticles gets your articles from Examine and the content cache
NewsArticles = GetNewsArticles()
}
// Do some stuff here, then return the base method
return CurrentTemplate(model);
}
}
Have you considered pagination, loading of the rest of the news articles? I assume there could be quite a few?
I’ve built similar this week, actually a blog but same difference. I used Ajax to a surface controller to get a partial view passing in a view model of x records and then using Ajax to append to the bottom of the blog posts div when a user clicks ‘load more’... happy to share what I’ve got tomorrow, it’s still a work in progress but seems to work well.
do I understand it correctly that you need to scan through the all news to get the 5 featured articles? If so, it's definitely not the best approach.
If you're (or any editor is) in the control of the featured articles (they are not e.g. last 5 published articles etc.), the best way would be to set a MNTP in the page where the featured news will be displayed and select / manage them there. You'll have them in a single place, already selected and ready to be rendered.
In terms of listing page and search functionality, you can definitely use Examine for it. It'll be especially helpful when you'll have a lot of articles and be willing to filter them for example. You can use the default search provider and narrow the search by using documenttype filters and create some services / controllers where you'll consume the received data in.
David's explanation of controller's usage is great, you should start from it and scan through those pages to get more feeling about the implementation:
I did a really base implementation of listing page without any controllers and just based on the content tree on my blog too, but this code is nothing what I would be proud of showing :)
I'll rethink the featured articles process and put a Mutlinode Tree picker on instead.
I'll also read all the articles you've suggested. Thanks! All really helpful. Just struggling a bit with this and feeling the pressure to get the job done! :)
How would you build this news page?
I'm looking for some help / guidance on how you would recommend building a news / search page.
In the backoffice I am using nested content and I can select 3 different news article types. News, Videos, Download.
I'm thinking I can create my news page with the help of Examine. But that's as far as I have managed to get.
I need to show the top 5 featured articles, which are set by a tick box on each article. The first featured article shows a hero image then the following 4 articles only show the article title and a short summary.
Below all of this, I'll list all the articles in date order with two drop down lists to allow for filtering the articles by type and/or category.
I started working on this but I was putting all my logic in the view but I think I should be moving stuff out to a controller. But I'm not clear on how to do this.
I'm using Models Builder too.
I know there is a lot of things to cover here but I'd appreciate any help.
Thanks, Owain.
Let me try to start things up, although I won't cover 100% of your questions.
Personally, I'd favor an MNTP on the root news page which would be used to select the featured articles than having to check boxes (which I could easily lose count of).
I agree with you - a controller would be a good way to offload logic from the view. I would create a controller that would populate a collection of custom objects- the ViewModel, if you will, which would have only the properties that would need to be displayed, along with an enum showing what actual type of item it is (video/download/article). On the view, I would see what the enum is and act accordingly. Setting the hero image would also be easy that way if you used ImageCropper either on the view's side or by setting some special property in the viewmodel.
The two drop down lists are tricky - best way to implement those in my opinion is to populate them via controller actions (and cache the result sets) and then use ajax to call the controller that will render a view underneath. I could find some samples if you need some.
Finally, don't forget paging! (Or endless load!)
I know this is too little, but I hope it'll be a starting point for more.
I'd stick with the featured tick box, set via a composition, on the data type.
To get the results I'd do two examine searches. One for featured items, and the other not, de-dupping.
Controllers are easy, just follow the documentation here: https://our.umbraco.com/documentation/reference/routing/custom-controllers
I'm keeping the feature checkbox because I don't need to keep track of them. I will only show the latest 5 for example.
The key word there for me to look in to is ViewModel. I've been struggling to work out how I get the data from my controller to the view and I'm thinking this might be key.
I'll read up about this more tomorrow. I'm thinking this might be a good place to start reading - https://docs.microsoft.com/en-us/aspnet/mvc/overview/older-versions/mvc-music-store/mvc-music-store-part-3
Thanks for the Controller link David, I have used this and it's got me part of the way I think.
I think I'll start one bit at a time, getting the top 5 features articles out of my Nested Content. Then build from there. I might be trying to do everything at once and getting confused.
Any other points are welcome - thanks for the help so far.
O.
Create a class called
NewsListingViewModelwhich inherits fromRenderModel<NewsListing>whereNewsListingis the model generated for your listing page.Your Controller would be called
NewsListingControllerand might would return a new instance ofNewsListingViewModel. You can then add your own custom properties toNewsListingViewModelsuch as your list of news articles.If you set your template to
@inherits UmbracoViewPage<NewsListingViewModel>then you'll be able to access your custom properties throughModel.MyCustomPropertyand yourNewsListingthroughModel.Content.e.g:
---View Model
---Controller
Have you considered pagination, loading of the rest of the news articles? I assume there could be quite a few?
I’ve built similar this week, actually a blog but same difference. I used Ajax to a surface controller to get a partial view passing in a view model of x records and then using Ajax to append to the bottom of the blog posts div when a user clicks ‘load more’... happy to share what I’ve got tomorrow, it’s still a work in progress but seems to work well.
Hey Owain,
do I understand it correctly that you need to scan through the all news to get the 5 featured articles? If so, it's definitely not the best approach.
If you're (or any editor is) in the control of the featured articles (they are not e.g. last 5 published articles etc.), the best way would be to set a MNTP in the page where the featured news will be displayed and select / manage them there. You'll have them in a single place, already selected and ready to be rendered.
In terms of listing page and search functionality, you can definitely use Examine for it. It'll be especially helpful when you'll have a lot of articles and be willing to filter them for example. You can use the default search provider and narrow the search by using documenttype filters and create some services / controllers where you'll consume the received data in.
David's explanation of controller's usage is great, you should start from it and scan through those pages to get more feeling about the implementation:
I did a really base implementation of listing page without any controllers and just based on the content tree on my blog too, but this code is nothing what I would be proud of showing :)
Thanks everyone - lots of great feedback.
I'll rethink the featured articles process and put a Mutlinode Tree picker on instead.
I'll also read all the articles you've suggested. Thanks! All really helpful. Just struggling a bit with this and feeling the pressure to get the job done! :)
O.
is working on a reply...