Conditionally alter column width in template admin view (?)

[LimeWub]

Ok, so I'm probably asking for too much here...

but is there any way to specify different column widths for a field in the admin, depending on other field's values?

 

For example:

Imagine a dropdown field in our template in the admin with values:

• 1 column
• 2 columns

When "1 column" is selected a text area field below has 100% width.

When "2 columns" is selected, the same text area field becomes a 50% width field (and a second text area field 50% appears)

 

This is not really necessary but it will make things a bit clearer to the end user for a site I'm building, so I thought I'd ask, just in case there's a way.

[owzim]

Yes it's possible with Field Dependencies.

Set the visibility of the second field to yourDropdownFieldname=valueOfSecondSelect. The first field will take up the remaining space, if the second one is hidden.

Edit: If your dropdown is a Page Field, the value should be the page ID of the selected item, not sure if it also works with the Select Options Field .. it should. If so, then it's the value you specified.

[LimeWub]

Ah nice! This actually somehow works!

(Actually it works perfectly with my example!!)

However, in the real case scenario I have some more options unfortunately (so it doesn't exactly do what I want...)

In the real scenario I have:

• 1 text area, 1 column
• 2 text areas, 2 columns (everything works awesome up to this, thanks)
• 3 text areas, 3 columns
• 3 text areas, 2 columns (1 wide column above two 50% ones)
• 3 text areas, 2 columns (1 wide column under two 50% ones)

So basically everything works great up to 2 areas, then for the 3 area options things look dodgy.

 

However, I got a bit of an idea to counter that  (but I also don't know if I can do that)

Is there some way to link fields, so that when the user fills out one, another field just gets the same text in it (copy)? (or maybe instead of copying just creating a link to say for example: Field A value is the same as Field C?)

[owzim]

Should not look dodgy, I just tested it with 3 columns as well. Works. Field widths are 33%, 34%, 33% to make 100%.

Edit: Ah now I know what you mean, yeah ... well.

Quote

Is there some way to link fields, so that when the user fills out one, another field just gets the same text in it (copy)?

Not out of the box, you might want to inject some custom JS to take care of that. Or you populate the second empty field on page save with a hook:

// not tested, off the top of my head
$pages->addHookAfter('save', null, function($event) {
  $page = $event->arguments(0);

  if (!$page->secondField) {
  	$page->secondField = $page->firstField;
  	$page->save("secondField");
  }
});

Don't know about the second thing.

[LimeWub]

Ah I see  Will look into these options ^^ Thanks a lot for the help! 

[Robin S]

8 hours ago, LimeWub said:

In the real scenario I have:

• 1 text area, 1 column
• 2 text areas, 2 columns (everything works awesome up to this, thanks)
• 3 text areas, 3 columns
• 3 text areas, 2 columns (1 wide column above two 50% ones)
• 3 text areas, 2 columns (1 wide column under two 50% ones)

Sounds like a job for Repeater Matrix.

[LimeWub]

11 hours ago, Robin S said:

Sounds like a job for Repeater Matrix.

Had a read through that page but not sure how (?) 

Would I be creating the following repeater items(?):

• 1 col
• 2 col
• 3 col

and then the user can add them as they want?

This would actually be awesome to give the user flexibility to add as much text as they want but I've dealt with it a bit differently for now

 

The way I solved this for now is:

I completely removed the 3-column option and I just created a page/block with these text areas:

text1: 100%

text2: 50% - text3: 50%

text4: 100%

I then have a switch to show or hide text3 (for 1 column/2 column effect). If text1 or text 4 are empty they'll be ignored. So this should now work fine with a few 'if' statements on the front end :3

 

Thank y'all! I'm starting to quite like PW's flexibility

[Robin S]

11 hours ago, LimeWub said:

Had a read through that page but not sure how (?) 

Would I be creating the following repeater items(?):

• 1 col
• 2 col
• 3 col

and then the user can add them as they want?

Yes, that's right. Repeater Matrix can be useful when you want to structure your page as a series of blocks of different types that the editor can add and sort as needed.