Show hide fields in CMS

Cool, good to know, it would be a pretty good feature and enable some nice UX in the CMS

Major +1 - i've been doing this with JS on the Gallery and Blog app UIs but it's much more effort to manipulate Content region fields because each field and label is preceded by an ID, making selection tricky e.g. (input id="perch_23_item").

Below is a Blog post example that controls the UI for featured posts (sale or exhibit), obviously the fields need to change for each selection. There's also some fallback live validation happening because these fields even though technically 'required' in their respective circumstances cannot be marked as such using traditional perch required="required" or we'd block the entire post action.

post.html

<perch:blog id="featured" type="select" label="Featured post" options="Sale, Exhibit" allowempty="true" suppress="true" help="WARNING: Switching will remove all related values!" divider-before="Featured post" />

<perch:if exists="sale">
<h2><perch:blog id="sale" type="text" label="SALE" size="m" help="e.g. Christmas Sale" /></h2>
  <h3><perch:blog id="percentage" type="text" label="SALE discount" size="xs" chars="2" help="WARNING: only enter a number (e.g. 50) - limited to 2 characters" />% OFF</h3>
</perch:if>

<perch:if exists="exhibit">
<h2><perch:blog id="exhibit" type="text" label="EXHIBIT" size="m" help="e.g. Easter Exhibition" /></h2>
  <h3><span class="icon-location small"></span> <perch:blog id="location" type="text" label="EXHIBIT location" size="m" help="e.g. Venue name, Town/City" /><br><span class="meta"><span class="icon-clock small"></span> <perch:blog id="date" type="date" time="true" format="%a %e %B %Y @ %l %p" label="EXHIBIT date + time" divider-after="Related artist" /></span></h3>
</perch:if>

/addons/plugins/ui/custom.js (included alongside jQuery in _config.inc)

//validate blog post type function
function validatepost(){
  var ptype = $('#perch_featured').val(); // get the sale/exhibit status
  var sale = ptype === "Sale"; // check if sale
  var exhibit = ptype === "Exhibit"; // check if exhibit
  var stitle = $('#perch_sale').val().length > 0; // check if sale title entered
  var sdiscount = $('#perch_percentage').val().length > 0; // check if sale discount entered
  var xtitle = $('#perch_exhibit').val().length > 0; // check if exhibit title entered
  var xloc = $('#perch_location').val().length > 0; // check if exhibit location entered
  var xday = $('#perch_date_day').val().length > 0; // check if exhibit date present

  // if empty
  if (ptype === "") {
    $("input[type=submit]").prop("disabled", false);
  }
  // otherwise lockdown!
  else {
    $("input[type=submit]").prop("disabled", true);
  }

  // if sale is chosen
  if (sale) {
    // and if both title and discount are entered - all good
    if (stitle && sdiscount) {
      $("input[type=submit]").prop("disabled", false);
    }
    // otherwise lockdown!
    else {
      $("input[type=submit]").prop("disabled", true);
    }
  }
  // if exhibit is chosen
  if (exhibit) {
    // and if title, location and date are entered - all good
    if (xtitle && xloc && xday) {
      $("input[type=submit]").prop("disabled", false);
    }
    // otherwise lock-down!
    else {
      $("input[type=submit]").prop("disabled", true);
    }
  }
}

$(document).ready(function() {
var bID = document.getElementById('blog-edit');
if (bID) {
  // function hides unused fields until certain conditions are true
  var ptype = $('#perch_featured').val(); // get the sale/exhibit status
  var sfields = $('#perch_sale, #perch_percentage').closest('.field');  // find the sale fields
  var xfields = $('#perch_exhibit, #perch_location, #perch_date_day').closest('.field');  // find the exhibit fields

  if (ptype === "") {
    $(sfields).hide();
    $(sfields).find("input[type=text]").val("");
    $(xfields).hide();
    $(xfields).find("input[type=text]").val("");
  }
  // if sale is chosen - hide the exhibit fields
  else if (ptype === "Sale") {
    $(sfields).show();
    $(xfields).hide();
  }
  // otherwise type is exhibit so hide the sale fields
  else {
    $(sfields).hide();
    $(xfields).show();
  }

...

I realise this is rudimentary but it does work with some effort and creates a situation of flexibility and idiot proof advanced editing which my client really appreciates!

The output of this can usually be found on the homepage here: https://edenbaneart.com/

For reference I was prompted to the possibility of this from here: https://docs.grabaperch.com/docs/customizing-perch/ui-customizations/

Hi Drew, looks like it was something to do with the Author template, as I've taken that out of the Blog template and now I can save a blog post and it'll show up properly. The Slug is showing as "/2015-2015-06-11-11-paul-test-15" now though.

Have you ever seen the date repeat like that? In settings it's the slug is set to:

%Y-%F-%d-{postTitle}