-1

The below code is JavaScript to show and hide fields. What I would like to clean up is and include fields in an array instead of individual if else statements(all Internal Fields - All External Fields). I am also wanting to include a hide on load of all the internal and external fields.

<script src="~/SiteAssets/jquery-1.10.2-min.js"></script>
<script src="~/SiteAssets/sputility.js"></script>

<script>
    // wait for the window to load
    $(document).ready(function () {
        // Get a single select dropdown field
        var IntExtField = SPUtility.GetSPField('Internal_External');

        // create a function to show or hide Internal External based on select value
        var showOrHideField = function() {
            var IntExtFieldValue = IntExtField.GetValue();

            //Show/Hide Internal Fields       
            if(IntExtFieldValue === 'Internal') {
                SPUtility.HideSPField('Contact_Name');
            }
            else {
                SPUtility.ShowSPField('Contact_Name');
            }
            if(IntExtFieldValue === 'Internal') {
                SPUtility.HideSPField('Organisation_Name');
            }
            else {
                SPUtility.ShowSPField('Organisation_Name');
            }

            //Show/Hide Exteranl Fields
            if(IntExtFieldValue === 'External') {
                SPUtility.HideSPField('User_Name');
            }
            else {
                SPUtility.ShowSPField('User_Name');
            }
            if(IntExtFieldValue === 'External') {
                SPUtility.HideSPField('Department');
            }
            else {
                SPUtility.ShowSPField('Department');
            }
            if(IntExtFieldValue === 'External') {
                SPUtility.HideSPField('Room_User_Ext');
            }
            else {
                SPUtility.ShowSPField('Room_User_Ext');
            }
            if(IntExtFieldValue === 'External') {
                SPUtility.HideSPField('Department_Contact');
            }
            else {
                SPUtility.ShowSPField('Department_Contact');
            }
            if(IntExtFieldValue === 'External') {
                SPUtility.HideSPField('Room_Booker_Ext');
            }
            else {
                SPUtility.ShowSPField('Room_Booker_Ext');
            }       
        };

        // run at startup (for edit form)
        showOrHideField();
        $(IntExtField.Dropdown).on('change', showOrHideField);
    });
</script>
2

From your description I think below code is what you are looking for

<script src="~/SiteAssets/jquery-1.10.2-min.js"></script>
<script src="~/SiteAssets/sputility.js"></script>

<script>
    function showAllFields() {
        SPUtility.ShowSPField('Contact_Name');
        SPUtility.ShowSPField('Organisation_Name');
        SPUtility.ShowSPField('User_Name');
        SPUtility.ShowSPField('Department');
        SPUtility.ShowSPField('Room_User_Ext');
        SPUtility.ShowSPField('Department_Contact');
        SPUtility.ShowSPField('Room_Booker_Ext');
    }
    function hideAllFields() {
        SPUtility.HideSPField('Contact_Name');
        SPUtility.HideSPField('Organisation_Name');
        SPUtility.HideSPField('User_Name');
        SPUtility.HideSPField('Department');
        SPUtility.HideSPField('Room_User_Ext');
        SPUtility.HideSPField('Department_Contact');
        SPUtility.HideSPField('Room_Booker_Ext');
    }

    function showOrHideField() {
        showAllFields();
        // Get a single select dropdown field
        var IntExtFieldValue = IntExtField.GetValue();          
        SPUtility.HideSPField(IntExtFieldValue);
    }

    // wait for the window to load
    var IntExtField;
    $(document).ready(function () {
        IntExtField = SPUtility.GetSPField('Internal_External');
        // run at startup (for edit form)
        hideAllFields();
        $(IntExtField.Dropdown).on('change', showOrHideField);
    });
</script>
  • Hi Amal - this code hides all the fields - I have a droplist with an internal and Eternal choice - the fields that need to appear according to the selection - this hides all the fields - I am not able to see either. By default Internal is selected – garvon-77 Jul 7 '16 at 23:27
  • Try my updated code – Amal Hashim Jul 8 '16 at 0:13
  • Amal - this still does not work. It hides all fields once which is not what I am trying to achieve in the code - it is supposed to hide some fields while showing others - depending on the choice field - my code works. – garvon-77 Jul 11 '16 at 2:34
0

If you want to show/hide fields on a new item form, you can manage that through SharePoint Manager. Just download this software which is freely available. Connect it to you site, List and then column. There you will find an option of true false from which you can easily manage to show/hide the column which you want.

Hope this helps. This is something which is easily achievable, using the OOTB feature without coding much. You can play with properties and manage such thing.

Again i want to clear, because you have not mentioned in your question where you want to show or hide the field, i'm assuming its is SharePoint form to add and edit the data.

Hope this Helps!

0

I have modified my code which gives me what I need - and workable in my environment.

$(document).ready(function () {
// Get a single select dropdown field
var IntExtField = SPUtility.GetSPField('Internal_External');

// create a function to show or hide Internal External based on select value
var showOrHideField = function() {
    var IntExtFieldValue = IntExtField.GetValue();

if(IntExtFieldValue === 'Internal') {

    SPUtility.ShowSPField('User_Name');
    SPUtility.ShowSPField('Department');
    SPUtility.ShowSPField('Room_User_Ext');
        SPUtility.ShowSPField('Department_Contact');
    SPUtility.ShowSPField('Room_Booker_Ext');
    SPUtility.HideSPField('Contact_Name');
    SPUtility.HideSPField('Organisation_Name');
}

    if(IntExtFieldValue === 'External') {
    SPUtility.ShowSPField('Contact_Name');
    SPUtility.ShowSPField('Organisation_Name');            

    SPUtility.HideSPField('User_Name');       
        SPUtility.HideSPField('Department');       
        SPUtility.HideSPField('Room_User_Ext');        
        SPUtility.HideSPField('Department_Contact');        
        SPUtility.HideSPField('Room_Booker_Ext'); 
  }


};

    // run at startup (for edit form)
     showOrHideField();

// make sure if the user changes the value we handle it
$(IntExtField.Dropdown).on('change', showOrHideField);

});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.