Re-ordering Fields

One of Perch’s great features is it can use a single template for the edit form and output. That is you define your content schema telling Perch what fields you want to be available in the control panel as well as what to output to your front-end (typically HTML).

A simple template for a link:

<a href="<perch:content id="link" type="text" label="Link URL">">
    <perch:content id="link_text" type="text" label="Link Text">
</a>

This gives you 2 fields in the control panel. The fields are displayed in the order they appear in your template. So the first field on your edit form is going to be the link field and the second is the link_text field.

It feels more natural to me from when entering a link to enter the link text first, then enter the link URL. So whenever I had a template for a link like the above, I’d mistakenly enter the text in the URL field and the URL in the text field.

This is where the order attribute is useful. It allows you to reoder the fields in the control panel without you having to change the order of the your Perch tags in the template.

So if I want to have the link_text to appear first on the edit form, I can use order="1":

<perch:content id="link_text" type="text" label="Link Text" order="1">

Repeaters and Blocks

You can also use the order attribute to reorder fields within a Repeaters and Blocks.

So if I had a Repeater for links within a larger template, I can still reorder the link Text and URL fields. The fields outside of the Repeater won’t be affected:

<div class="container">
    <h2><perch:content id="heading" type="text" label="Heading"></h2>

    <perch:repeater id="links" label="Links">
        <perch:before><ul></perch:before>
            <li>
                <a href="<perch:content id="link" type="text" label="Link URL">">
                    <perch:content id="link_text" type="text" label="Link Text" order="1">
                </a>
            </li>
        <perch:after></ul></perch:after>
    </perch:repeater>
</div>

And the same applies to Blocks:

<perch:blocks>
    <perch:block type="c2a" label="Call to Action" icon="megaphone">
        <a href="<perch:content id="link" type="text" label="Link URL">" class="button">
            <perch:content id="link_text" type="text" label="Link Text" order="1">
        </a>
    </perch:block>
</perch:blocks>