0

INFO/OVERVIEW

Using Sharepoint Online 2013/Classic view. The library name is SourcesLibrary

On the *SourcesLibrary** Edit Form, there are (3) columns:

  • The dropdown column is called Document, which has the following choices available:

    • BackgroundReport
    • PermitRequest
  • The text column is called PeopleId (this field is ONLY visible when the Document field's value is BackgroundReport)

  • The other text column is called contentTypeText (upon creation of a new document, a workflow in SPD sets the value of this field to whatever the Content Type is -- in this case, the value of the contentTypeText field can either be empty, BackgroundReport, or PermitRequest

MY REQUEST

I want a button on the Edit Form that re-populates the value of the dropdown in the Document field. Here's a use case:

  1. I open an Edit Form for a Background Report in the SourcesLibrary document library
  2. The Document field is set to BackgroundReport
  3. I click the button, and the Document dropdown field is re-set to the value BackgroundReport, because the contentTypeText field has the value BackgroundReport
  4. As a result, the fields conditionally hidden onLoad are no longer hidden, BUT the value of the Document dropdown field remains BackgroundReport

Below is the show/hide script:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.01/jquery.SPServices.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.2/jquery.SPServices-0.7.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// alert('onload');
// Hides Field on load
$("nobr:contains('Document')").parent('h3').parent('td').parent('tr').show();
$("nobr:contains('contentTypeText')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('PeopleId')").parent('h3').parent('td').parent('tr').hide();
//Show/hide columns based on Choice Field Selection
$("select[title='Document']").change(function () {
if ($("select[title='Document']").val() == "BackgroundReport") {
// If Document dropdown YES equals Background Report
$('nobr:contains("Document")').closest('tr').show();
$('nobr:contains("contentTypeText")').closest('tr').hide();
$('nobr:contains("PeopleId")').closest('tr').show();
} else {
// If Document dropdown NO equals Background Report
$("nobr:contains('Document')").parent('h3').parent('td').parent('tr').show();
$("nobr:contains('contentTypeText')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('PeopleId')").parent('h3').parent('td').parent('tr').hide();
}
});
});
</script>

Thanks in advance, and let me know if there's anything I can add to add clarity.

1 Answer 1

1

We can use the code below to achieve it.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    //add button after dropdown
    $("select[title='Document']").after("<input id='resetBtn' type='button' value='Reset'/>");  
    $("#resetBtn").click(function(){
        $("select[title='Document']").val($("input[title='contentTypeText']").val());
        HideFields($("select[title='Document']").val());
    });
    // Hides Field on load    
    HideFields($("select[title='Document']").val());
    //Show/hide columns based on Choice Field Selection
    $("select[title='Document']").change(function () {
        HideFields($(this).val());      
    });
});
function HideFields(value){
    if (value == "BackgroundReport") {
        // If Document dropdown YES equals Background Report    
        $('nobr:contains("contentTypeText")').closest('tr').hide();
        $('nobr:contains("PeopleId")').closest('tr').show();
    }else{
        // If Document dropdown NO equals Background Report 
        $("nobr:contains('contentTypeText')").closest('tr').hide();
        $("nobr:contains('PeopleId')").closest('tr').hide();
    }
}
</script>

enter image description here

4
  • Thank you a lot. I appreciate this. The code works for when the Document field equals "BackgroundReport". Could this code still work if there are 4 options in the Document dropdown (PermitRequest is one of them). Ideally, I was hoping that the Reset button could set the Document dropdown menu to match the value of the contentTypeText column. I make this request, because in the event we add new values to the Document dropdown field, I won't have to keep updating the code. Does that make sense?
    – TheJDScott
    May 7, 2019 at 15:24
  • I also noticed that you removed the SPServices + the other jQuery refs and the script still works! Just curious how you knew to do that.
    – TheJDScott
    May 7, 2019 at 15:29
  • 1
    I modify the code in the reply above, to set the Document dropdown menu to match the value of the contentTypeText column. And the code only use jQuery library, we don't need add other js libraries.
    – LZ_MSFT
    May 8, 2019 at 1:17
  • Thank you SO much. Wow. Really helped me out.
    – TheJDScott
    May 8, 2019 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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