How to let end users change order of fields?

[Vigilante]

I'm not a super pro at PW so go easy on me.

I think PW is great in the way you can simply create all the fields needed for a given template and then go make the template how you wish. 

BUT! The thing that is missing is that it's too dependent on the developer who has to change the template code for every small adjustment to the fields.

For example. Let's say I create a couple custom fields. Both are repeater fields for something like testimonies, and another for 'clients who use us'. The field order in the backend doesn't matter, but when I design the template, I might have testimonies at the top and clients block just above the footer.

But now the client/user decides they want to move the testimonies block down and change the position of clients. In other words, move the custom fields around a little. This cannot be done because where the fields go in the template is essentially hard-coded.

I have to go in the template, change the HTML structure and rebuild the sections and CSS grid and everything to put the fields in their new location and make it look right.

I feel like this is more rigid than it needs to be. If this is a modern site, then most of these "sections" are just full width blocks. So why shouldn't the user be able to stack the blocks however they like?

It seems the only way to give the user more control is to start getting hacky with how the custom fields are set up. Perhaps instead of custom fields, put the content in hanna code so they can move the tags around? Or create another custom field to define a source order and then build a bunch of logic in the template?

Is there a normal method of designing a template that gives the user some control over the position of fields/blocks/sections/content/whatever?

--------

I also got to thinking how can I set up a template and fields to create content that alternates between full-width and column-width content? A client has a page design where they will have limited-width text content blocks followed by full-width images, followed by text again, and then full width, etc. With a CSS grid template set up, I can't simply output the plain contents of a wysiwyg box. Nor can I create 20 custom fields that alternate between limited and full width sections. How would I accomplish this so the user can write some paragraph content that gets put in a CSS grid column, but then alternate with full-width blocks and images that have no container or grid limitations?

There doesn't seem to be a way to logically do this kind of content in a single wysiwyg box, nor by using a bunch of separate fields. Would I require shortcodes or hanna codes or maybe a repeater field? I don't know.

[Robin S]

4 minutes ago, Vigilante said:

Is there a normal method of designing a template that gives the user some control over the position of fields/blocks/sections/content/whatever?

This is a topic that comes up quite commonly on the forums - search for "blocks" and you'll probably find a bunch of topics.

Short answer...

No cost: PageTable

Some cost, but very much worth the investment: Repeater Matrix (in the ProFields bundle)

 

[adrian]

Or just provide an ASM multi-select field with a list of the fields that the client can order as they desire. You could do this manually with an Options fieldtype, or perhaps with this: http://modules.processwire.com/modules/fieldtype-fields/ which lets you limit the listed fields based on a selector.

You could add this field to a separate "Field Order" tab to keep things clean.

Of course then you order the output of the fields in your template file based on the order they have selected.

[abdus]

5 hours ago, Vigilante said:

a normal method of designing a template that gives the user some control over the position

Use Page Reference & Repeater fields. Seriously. They're immensely powerful if you know how to utilize them. There's a blog post that explains how you might use Page Reference fields for toggling states and attributes, but you can also use them for ordering things, as it saves the order of the pages you referenced too. 

What you should do:

• Create 3 dummy templates, "home-block", "container", and "block-type". You can use tags in Advanced tab and put "-home" to hide them away.
• Create the following pages

  /processwire (your admin root page)
  +---tools/ (template: container) (hide this page)
      +-home-blocks/ (template: container)
      |   + hero (template: home-block)
      |   + what-we-do
      |   + our-work
      |   + testimonials
      |   ... other blocks
      |
      +-block-types/ (template: container)
          + full-width (template: block-type)
          + half
          ... other types

   

• Create a Page reference field, set its inputfield to select, limit to single item and only pages with "home-block" template under /tools/home-blocks
• Create another page field, this time set its inputfield to Checkboxes and limit it to "block-types" under /home/block-types
• Create a repeater homeLayout and add these two page fields to it
• Add the repeater field to home template. 
• Add any block you want using the repeater in any order and add any property you want to any container.

 

Using this blog post as your guide, loop over the repeater items and find which block has been selected, render your block (you can put your block codes under templates/block and render them individually with $files->render()) with the options in the order your client/you selected

[Vigilante]

4 hours ago, Robin S said:

This is a topic that comes up quite commonly on the forums - search for "blocks" and you'll probably find a bunch of topics.

Short answer...

No cost: PageTable

Some cost, but very much worth the investment: Repeater Matrix (in the ProFields bundle)

 

 

Both of those seem to hint at this kind of arrangement. I would only fear that I'm hiding a lot of the page layout and content within these repeater fields that the client has to navigate and click in to see any content. A small price to pay I guess. Versus having all the content in top level standalone fields.

[Vigilante]

4 hours ago, adrian said:

Or just provide an ASM multi-select field with a list of the fields that the client can order as they desire. You could do this manually with an Options fieldtype, or perhaps with this: http://modules.processwire.com/modules/fieldtype-fields/ which lets you limit the listed fields based on a selector.

You could add this field to a separate "Field Order" tab to keep things clean.

Of course then you order the output of the fields in your template file based on the order they have selected.

This could work as long as I only include fields that are actually sortable. For example the page title itself isn't sortable, only particular wysiwyg or other fields would be included in the sort feature.

And then in the template I guess I could just read this one sort list, and as I parse the values, those values would have names corresponding exactly to the other fields? In other words, I just loop the sort list values and immediately invoke each field referenced?

I'll have to play with this idea. Because the concept of sorting fields feels more valid than trying to do a kind of page-based repeater field thing. It's not really something repeating, it could be totally different sets of content! Sorting feels more correct.