locked
How to hide display lines in custom Display Template RRS feed

  • Question

  • Apologies if this is not in the correct forum topic, but I put it here as it was in relation to customising Search.

    I have a custom Display Template with custom Managed Properties etc.

    I have been requested to hide any lines in the Display that may have no result.  Currently, in the template an example would show as...

     <div id="_#= $htmlEncode(itemId) =#_" name="Item" data-displaytemplate="WordItem" class="ms-srch-item" onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_">
    				<a href="_#= ctx.CurrentItem.Path =#_ "><b>_#= ctx.CurrentItem. Entity0OWSTEXT =#_ </b></a><br>
    				<div style='color:#062456; display:inline'>Prepared By:&nbsp;&nbsp;&nbsp;</div>_#= ctx.CurrentItem. PrecedentAuthor =#_ <br>
    				<div style='color:#062456; display:inline'>Type of Request(s):&nbsp;&nbsp;&nbsp;</div>_#= ctx.CurrentItem. TypeOfRequest =#_ <br>
    				<p>
    				</p>
                    <div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>
    	</div>

    So, if I wanted to hide the "Type of Request" Display line if the managed property was empty, how would I do that?  Apologies, my CSS/HTML skills are minimal.


    • Edited by kelsnz Tuesday, June 23, 2020 7:19 AM
    Monday, June 22, 2020 3:04 AM

Answers

  • Hi kelsnz,

    Add a conditional check to ctx.CurrentItem.TypeOfRequest:

    <div id="_#= $htmlEncode(itemId) =#_" name="Item" data-displaytemplate="WordItem" class="ms-srch-item" onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_">
    				<a href="_#= ctx.CurrentItem.Path =#_ "><b>_#= ctx.CurrentItem. Entity0OWSTEXT =#_ </b></a><br>
    				<div style='color:#062456; display:inline'>Prepared By:&nbsp;&nbsp;&nbsp;</div>_#= ctx.CurrentItem. PrecedentAuthor =#_ <br><div>
    				<!--#_
    				if(ctx.CurrentItem.TypeOfRequest)
    					{
    				_#-->
    
    				<div style='color:#062456; display:inline'>Type of Request(s):&nbsp;&nbsp;&nbsp;</div>_#= ctx.CurrentItem. TypeOfRequest =#_ <br></div>
    				<!--#_
    				}
    				_#--> 
    				<p>
    				</p>
                    <div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>
    </div> 
    	

    if(ctx.CurrentItem.TypeOfRequest) will check and make sure it have valid value, then display the related div.

    Reference:

    Conditional formatting in display template in sharepoint 2013

    Introduction to SharePoint 2013 Display Templates

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by kelsnz Tuesday, June 23, 2020 7:29 AM
    Tuesday, June 23, 2020 5:44 AM

All replies

  • Hi kelsnz,

    Add a conditional check to ctx.CurrentItem.TypeOfRequest:

    <div id="_#= $htmlEncode(itemId) =#_" name="Item" data-displaytemplate="WordItem" class="ms-srch-item" onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_">
    				<a href="_#= ctx.CurrentItem.Path =#_ "><b>_#= ctx.CurrentItem. Entity0OWSTEXT =#_ </b></a><br>
    				<div style='color:#062456; display:inline'>Prepared By:&nbsp;&nbsp;&nbsp;</div>_#= ctx.CurrentItem. PrecedentAuthor =#_ <br><div>
    				<!--#_
    				if(ctx.CurrentItem.TypeOfRequest)
    					{
    				_#-->
    
    				<div style='color:#062456; display:inline'>Type of Request(s):&nbsp;&nbsp;&nbsp;</div>_#= ctx.CurrentItem. TypeOfRequest =#_ <br></div>
    				<!--#_
    				}
    				_#--> 
    				<p>
    				</p>
                    <div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div>
    </div> 
    	

    if(ctx.CurrentItem.TypeOfRequest) will check and make sure it have valid value, then display the related div.

    Reference:

    Conditional formatting in display template in sharepoint 2013

    Introduction to SharePoint 2013 Display Templates

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by kelsnz Tuesday, June 23, 2020 7:29 AM
    Tuesday, June 23, 2020 5:44 AM
  • Worked perfectly! Thanks.
    Tuesday, June 23, 2020 7:29 AM