0

I have a SharePoint 2013 page layout which contains some info in the footer area like so.

enter image description here

As you can see i have no content in the Regions yet the label is still appearing i would like to this to NOT display if there is not content.

I am using the following code in my page layout.

    <div class="tags">
    <strong><SharePointWebControls:FieldProperty FieldName="Regions" PropertyName="Title" runat="server" /> </strong>
    <Taxonomy:TaxonomyFieldControl FieldName="Regions" runat="server"></Taxonomy:TaxonomyFieldControl>      
    </div>
  • You can do this easily using JavaScript/jQuery. – Amal Hashim Dec 9 '14 at 12:54
1

You should be able to hide the elements with javascript or jQuery like so:

function hideProperty(){        
    var x = document.getElementById('Label');   
    var d = document.getElementById('Label').parentNode.parentNode;
    if (x.value != ''){
        d.style.display = 'none';
    }
    else{       
        d.style.display = '';   
    }
}   
| improve this answer | |
  • And if I had several elements on the page I needed to hide? – Stephen Dec 9 '14 at 13:45
  • Use a class selector in such case. – Aveenav Dec 9 '14 at 15:54
0

Thanks for the input, decided to go with Angular method. Works really well and can be applied.

    <PublishingWebControls:EditModePanel PageDisplayMode="Display" ID="EditModePanel5" runat="server" CssClass="edit-mode-panel title-edit">
     <script type="text/javascript">
      angular.module('Empty', []).controller('EmptyController', ['$scope', '$element', function($scope, $element){
       angular.element($element).text().trim() != "" ? angular.element($element).parent().show() : angular.element($element).parent().remove();
      }]);
     </script>
    </PublishingWebControls:EditModePanel>

Then on the field elements themselves

       <div class="tags" data-ng-app="Empty">
                    <div class="qin-label" id="inputFormController">
                        <strong><SharePointWebControls:FieldProperty FieldName="Regions" PropertyName="Title" runat="server" />: </strong>
       </div>
                    <div data-ng-controller="EmptyController">
                        <Taxonomy:TaxonomyFieldControl FieldName="Regions" runat="server"></Taxonomy:TaxonomyFieldControl>  
                    </div>  
       </div>

Works perfectly, big shout out to Cas van Iersel who came up with the solution, full article can be seen here...Hide empty fields on a SharePoint 2013 Page Layout

| improve this answer | |

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.