This is a simple displaytemplate (JSLINK) that will hide fields based on a value in a choice.  I use it for pseudo content-types, having the advantage of being able to switch.

It’s not MDS compliant.

In this example “ItemType” is the field name of the Choice field and could be “Standard” or “PopUp”

The array of hideme items are the fields that are hidden when that choice field is selected.

The HiddenItems starts empty and contains the hidden elements to be unhidden on a change of type.

It relies on jQuery being in the masterpage or somewhere on the page.

You store this as a JS file in a doclib or SPfolder or siteassets etc,  edit the form page and point the JSLINK setting to that file.  remember to use the tokens ~site or ~sitecollection as JSlink doesnt like fixed urls.

$(function () {
"use strict";


    var hiddenItems = [];
    var hideMeItems = {
        Standard: ["[id^=PopUpBodyText]","[id^=ReadMoreUrl]","[id^=ReadMoreUrlTarget]"],
        PopUp: ["[id^=Teaser]","[id^=TargetUrl]","[id^=TargetUrlTarget]"]
    };


    $('[id^="ItemType"]').change(hideItems);
    hideItems();

    function hideItems() {
        var selected = ($('[id^="ItemType"]').val());

        $.each(hiddenItems, function () {
            this.show();
        });
        hiddenItems.length = 0;

        $.each(hideMeItems[selected], function () {
            var tr = $(this).closest('tr');
            tr.hide();
            hiddenItems.push(tr);
        });
    }
});
Advertisements