Jump to:

5542 Posts in 1739 Topics by 1225 members

Customising the CMS

SilverStripe Forums » Customising the CMS » Displaying Child Objects in a categorized and tabbed format?

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1065 Views
  • jdi
    Community Member
    34 Posts

    Displaying Child Objects in a categorized and tabbed format? Link to this post

    Hey Guys,

    This forum is fantastic, I am learning so much from reading and following all the great support that goes on here.

    I have a question - I'm sorry if this has been asked before - about going a step onward from the starter tutorial and adding some categorization to the article holder page which I have created following the tutorials instruction.


    Here is my object class for the child pages (the articles):

    class ArticlePage extends Page {
    static $db = array(
    'Date' => 'Date',
    'Author' => 'Text',
    'Introduction' => 'Text',
    'ArticleThumb' => 'Varchar',
    'ArticleHead' => 'Varchar',
    'ArticleType' => 'Text'
    static $has_one = array(
    function getCMSFields() {
    $fields = parent::getCMSFields();

    $fields->addFieldToTab('Root.Content.Main', new CalendarDateField('Date'), 'Content');
    $fields->addFieldToTab('Root.Content.Main', new TextField('Author'), 'Content');
    $fields->addFieldToTab('Root.Content.Main', new TextField('Introduction'), 'Content');
    $fields->addFieldToTab('Root.Content.Main', new TextField('ArticleThumb'), 'Content');
    $fields->addFieldToTab('Root.Content.Main', new TextField('ArticleHead'), 'Content');
    $fields->addFieldToTab("Root.Content.Main", new DropdownField('ArticleType', 'ArticleType', array(
    'article' => 'Article',
    'interview' => 'Interview',
    'hot event' => 'Hot Event',
    'competition' => 'Competition',
    )), 'Content');

    return $fields;

    class ArticlePage_Controller extends Page_Controller {



    Here is my ArticleHolder.php page:

    <div id="Content" class="typography">
    <% control Children %>
    <div class="articleInt">

    <div class="articleIntHolder">
    <div class="articleIntThumb"><a href="$Link" title="Read more on &quot;{$Title}&quot;"><img src="$ArticleThumb" alt="$Title" /></a></$
    <div class="articleIntro">
    <h5><span class="typeType">$ArticleType :</span> $Title</h5>
    <p class="articleDate">$Date.Nice</p>
    <p class="articleText">$Introduction</p>
    <a href="$Link" title="Read more on &quot;{$Title}&quot;">Read The Full Article</a>
    <div class="articleIntFoot"></div>
    <% end_control %>


    You can view the page here:


    As you can see all I am able to do is display the articles in a simply list. But unfortunately the bulk of the content is making the page a scroll-fest so I'm hoping to do the following:

    1. Within each tab, limit the number of currently displayed articles to 20 or less. Then create a link path at the bottom to display the rest of the un-listed articles e.g (Page: 1 | 2 | 3 | 4 ...)
    2. Display the articles in a tabbed format, categorized by their 'ArticleType'.

    At the moment achieving the first change would be great, I was hoping someone could assist me with some information on how to handle this?

    If any of you feel inclined to help me understand how I can pass my list into tabs this would be fantastic. I understand that there may be some javascript and cookie work involved so I would appreciate even a simple description to help me handle the values needed?

    Any help is appreciated and thanks so much for your time when reading this thread

  • zenmonkey
    Community Member
    528 Posts

    Re: Displaying Child Objects in a categorized and tabbed format? Link to this post

    For the Tabs I'd just use jQuery and one of the many tabbed interface plugins.Personally I like semantic tabs plug-in because its semantic and gives your Javascript-less visitors a logical display. And just do an <% if ArticleType = x %> for each article type in your Children control.

    As for paginating your results take a look at the way search results are rendered in Page_results.ss and the following recipe


  • jdi
    Community Member
    34 Posts

    Re: Displaying Child Objects in a categorized and tabbed format? Link to this post

    Just did the Pagination. Worked a treat! You can always check it out with the link in my first post.

    I'm confident I understand you completely with the tabs also. I'll give it a crack at some point. I'm now starting to grasp how the handlers and scripts work in .ss files so your advice is near priceless in value. Cheers

Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.