Best way to create user editable complex lists?

[photoman355]

I'm trying to figure out the best way of turning the below code into something easy for the user to edit without screwing up the source.  Would this be best accomplished with php or customising the text editors?  

<ul class="list1 span6">
<li class="list_title"><span class="bold">Summer</span><span class="pull-right"></span></li>
<li><span class="bold">Monday</span><span class="pull-right">10am - 3.45pm</span></li>
<li><span class="bold">Tuesday</span><span class="pull-right">10am - 3.45pm</span></li>
<li><span class="bold">Wednesday</span><span class="pull-right">10am - 3.45pm</span></li>
<li><span class="bold">Thursday</span><span class="pull-right">10am - 3.45pm</span></li>
<li><span class="bold">Friday</span><span class="pull-right">10am - 3.45pm</span></li>
<li><span class="bold">Saturday</span><span class="pull-right">10am - 3.45pm</span></li>
<li><span class="bold">Sunday</span><span class="pull-right">10am - 3.45pm</span></li>
</ul>
<ul class="list2 span6">
<li class="list_title"><span class="bold">Winter</span><span class="pull-right"></span></li>
<li><span class="bold">Monday</span><span class="pull-right">8:30pm - 10pm</span></li>
<li><span class="bold">Tuesday</span><span class="pull-right">8:30pm - 10pm</span></li>
<li><span class="bold">Wednesday</span><span class="pull-right">8:30pm - 10pm</span></li>
<li><span class="bold">Thursday</span><span class="pull-right">8:30pm - 10pm</span></li>
<li><span class="bold">Friday</span><span class="pull-right">8:30pm - 10pm</span></li>
<li><span class="bold">Saturday</span><span class="pull-right">8:30pm - 12am</span></li>
<li><span class="bold">Sunday</span><span class="pull-right">8:30pm - 12am</span></li>
</ul>

[MarcC]

You might be able to pull this off in the text editor, but it'd be pretty volatile. I have no idea what purpose that data serves, or who would update it and how often, but all that aside it looks like the sort of thing I would do with PHP using the API. 

[photoman355]

I know, it looks like code overkill.  It's for a responsive design where I need the lists to stack as the screen size shrinks.  This is not something I'd expect the client to update very often but I use similar code for price lists so need to come up with a solution.  

It may be that the easiest way around it is to split each column into it's own list and use each lists parent class to target the styling rather than wrapping the classes in a span.  The 2 sides of each list could then be wrapped in a div creating a similar structure.  Doing it this way would use less fields.  Other than that I'd have to go down the repeater field option which may not be the most logical from the client editing side.  I'll have to experiment.

Is there a standard method for handling multi field lists like this?

[Joss]

Unless I have missed something , you could start with a repeater field.

For instance it could have two fields - Field A and Field B (or however many fields make up each line of information).

You can then loop through the fields with a foreach

foreach($page->myrepeaterfield as $listitem){
   echo "<li>{$listitem->field_A}</li>";
}

That would get you one long list.

However, if you wanted to get it into two columns, you could count how many items there are in the repeater field and divide that by two to get a number (making sure there are no decimals). You could then get the first X number of records and loop through them in one UL, and then get the rest of the records and loop through them to do the second UL.

I am not totally sure how to do that, but I doubt it is very complicated.

[photoman355]

Thanks Joss.  I didn't see your post till now but did manage to set this up as a repeater field.  Code below. List 2 is just the same but with slightly different field references.

<ul class="list1 span6">
   <li class="list_title"><span class="bold"><?=$page->title_left?></span><span class="pull-right"><?=$page->title_right?>    </span></li>
<?php foreach($page->list as $list) {
   echo "<li><span class='bold'></span>{$list->item_left}<span class='pull-right'>{$list->item_right}</span></li>";
}?>
</ul>

 It's not too bad from a user point of view, the only thing I would like to do is limit the number of repeated items a user can create.  Any idea how to do this?

[ryan]

 It's not too bad from a user point of view, the only thing I would like to do is limit the number of repeated items a user can create.  Any idea how to do this?

Repeater fields don't have this as a configuration option at present. So enforce your limit from the API side. Here are two ways you could do it (the first would technically be a little more efficient): 

foreach($page->list->slice(0,3) as $item) { ... }

foreach($page->list->find("limit=3") as $item) { ... }

[photoman355]

As always the solution is nice and simple.  Many thanks Ryan.  

[Joss]

The nice thing about doing it through the template is that you can allow any number of repeats(?) in the repeater field, but tell your clients it will only use the top three, perhaps.

Since they can re-order by dragging and dropping, they can just move the ones they want to display to the top of the list.

In some circumstances that is quite a powerful way of managing the data.