Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
25 posts Page 1 of 3
Hi,

By default, Couch shows each field in the admin panel in a row of its own.
Sometimes though it is desirable to show related fields together in the same row e.g.
Untitled-1.gif
Untitled-1.gif (6.99 KiB) Viewed 13584 times

While this could be done using <cms:config_form_view> as described at viewtopic.php?f=5&t=10241, I thought it'd be helpful to package everything in a little addon -

addons.zip
(4.56 KiB) Downloaded 1408 times
This addon makes use of Bootstrap's Grid feature -
http://getbootstrap.com/css/#grid

Installation:
Requires the usual steps -
Download and extract the attached zip which will yield a folder named 'bootstrap-grid'.
Place this folder in 'couch/addons' folder and then add the following entry in 'couch/addons/kfunctions.php' file (if this file is not found, rename the kfunctions.example.php file to kfunctions.php) -
Code: Select all
require_once( K_COUCH_DIR.'addons/bootstrap-grid/bootstrap-grid.php' );

Usage
This addon makes available a new editable region of type 'row'.
To create a group of fields in a row, enclose the definitions of those fields within type 'row' as e.g. as shown below -

Code: Select all
<cms:editable name='test_row' type='row' order='1'>
    <cms:editable name='lng' label='Longitude' type='text' class='col-xs-2' />
    <cms:editable name='lat' label='Latitude' type='text' class='col-xs-2' />
</cms:editable>

Please note the use of 'col-xs-2' as class above with the child fields.
If you are familiar with Bootstrap, you'll recognize it is one of predefined classes it uses for 'columns' -
http://getbootstrap.com/css/#grid-example-basic

Use whatever class suits your use-case with the child fields and they'll show up in columns within the 'row' provided by this addon.

We can also nest the 'rows' within type 'group' regions e.g. as follows (the image above displays the results) -

Code: Select all
<cms:editable name='grp_coordinates' label='Coordinates' type='group' >
    <cms:editable name='test_row' type='row' order='1'>
        <cms:editable name='lng' label='Longitude' type='text' class='col-xs-2' />
        <cms:editable name='lat' label='Latitude' type='text' class='col-xs-2' />
    </cms:editable>
   
    <cms:editable name='test_row2' type='row' order='2'>
        <cms:editable name='directions' label='Directions' type='text' class='col-xs-4' />
    </cms:editable>
</cms:editable>

Hope this is useful.
GREAT!!! Thank you
Hi There,

I was just about to start customizing the back-end of a site when I noticed this topic, which does exactly what I'm after - grouping sections together in a more logical manner in the back-end.

I've followed the installation steps, however it doesn't look to be working for me, are there any other steps I need to take?

If I check the source of the admin page, the 'row' and column classes are registered properly, but there don't seem to be any styles defined for 'col-xs-2' e.t.c.

Do I need to manually install bootstrap onto the back-end at all?

Many Thanks,
Nathan
(moderator feel free to merge with my previous post that isn't visible yet)

Hi again,

After some further digging, it seems that grid12.css isn't being loaded for some reason, hence why the styles aren't appearing for me.

I took a look at form_row_row.html and moved the line:
Code: Select all
<cms:admin_load_css "<cms:show k_admin_link />addons/bootstrap-grid/theme/grid12.css" />

outside the IF statement to bypass it and it looks to be working now.

I'll let you know if this breaks anything (or you let me know if I really shouldn't have done this :) )
Hi Nathan,

I checked and it was indeed a bug - the <cms:if> block was checking for type 'group' instead of type 'row'.
The problem would be masked if there was type 'group' present on the page, which is why it escaped my notice.

Thanks for the heads-up. I have updated the addon in the original post above.
Could you please try the modified version and let me know if it works as expected?

Thanks :)
KK wrote: Could you please try the modified version and let me know if it works as expected?


Hi KK,

I've downloaded and tested the new version and it's worked straight away without any modifications.

Thanks a lot for this addon, it makes it extremely easy to modify the layout of back-end fields to match their front-end counterparts which makes it much easier for the user to understand what it is they're editing. :)
Thanks Nathan :)
Amazing, thanks!
maybe possible to create label and description in "row group" ?
for example:

Code: Select all
<cms:editable name='row_contacts_form_error' type='row' label='Form errors' group='group_contacts' order='7'>


Now I use
Code: Select all
<cms:editable name='...' type='message' group='group_contacts'>


code example:

Image

result:

Image

maybe exist another solution how to realize this feature?
Hi,

Actually, type 'row' is just another editable region so you *can* set its 'label' and 'desc' as per usual e.g.
Code: Select all
<cms:editable name='row_contacts_form_error' type='row' label='Form errors' desc='a short desc' >

Those values, however, won't show up in the admin-panel screen because the default template rendering the region chooses to simply ignore these parameters. The template in question is 'couch/addons/bootstrap-grid/theme/form_row_row.html' - please take a look at it to see what it does.

That said, as I am sure you know, with v2.0 if you are unhappy about the way any element renders by default, you can override it and use your code instead. If this point is unclear, please see the docs on 'theming' - viewtopic.php?f=5&t=10241

As explained in the mentioned docs, copy the core 'form_row_row.html' snippet and drop it into 'couch/theme/sample' folder.
Couch will now begin to use this template so you may change its markup as you like.

As an example, I added to it the code highlighted below -
<cms:if k_field_no_wrapper>
<cms:show k_field_content />
<cms:else />
<div id="<cms:show k_field_input_id />" class="row k_<cms:show k_field_type /> <cms:show k_field_class />" <cms:if k_field_hidden>style="display:none;"</cms:if>>

<cms:if k_field_label != k_field_name >
<h3><cms:show k_field_label /></h3>
</cms:if>

<cms:admin_form_fields childof=k_field_name depth='1'>
<cms:render 'form_row' />
</cms:admin_form_fields>
</div>
</cms:if>

<cms:if k_add_js_for_field_row >
<cms:admin_load_css "<cms:show k_admin_link />addons/bootstrap-grid/theme/grid12.css" />
</cms:if>

I have used only the 'k_field_label' variable; you may use the 'k_field_desc' as well (temporarily place a <cms:dump_all /> in the snippet to see what variables are available to you - the last block would be the most useful, I think).

Coming to my code, now the label set in cms:editable tag shows up above the enclosed fields - albeit in a very ugly way. You'll need to style it to suit you.

Please share your code here once you are satisfied.

Hope it helps.
25 posts Page 1 of 3