0

I've built a custom search result page using the PnP Modern Search web parts (v4). I've managed to apply a different file icon based on whether a particular string is in a managed property. I did this using the following code:

{{#if @root.properties.layoutProperties.showFileIcon}}
{{#contains 'String1' (slot item @root.slots.Summary)}}
     <pnp-iconfile class="template--listItem--icon" data-extension="{{slot item @root.slots.FileType}}" data-is-container="{{slot item @root.slots.IsFolder}}" data-image-url="https://test.sharepoint.com/sites/GDTest/Shared%20Documents/file1.ico" data-size="32" data-theme-variant="{{JSONstringify @root.theme}}"></pnp-iconfile> 
{{else}}
     <pnp-iconfile class="template--listItem--icon" data-extension="{{slot item @root.slots.FileType}}" data-is-container="{{slot item @root.slots.IsFolder}}" data-image-url="https://test.sharepoint.com/sites/GDTest/Shared%20Documents/file2.ico" data-size="32" data-theme-variant="{{JSONstringify @root.theme}}"></pnp-iconfile>
{{/contains}}
{{/if}}

What I'm trying to do now, is use a different file icon, based on the string in the managed property. There will always be 1 of 3 strings. I've attempted the following:

{{#if @root.properties.layoutProperties.showFileIcon}}
{{#contains 'APSM Content' (slot item @root.slots.ArticleType)}}
      <pnp-iconfile class="template--listItem--icon" data-extension="{{slot item @root.slots.FileType}}" data-is-container="{{slot item @root.slots.IsFolder}}" data-image-url="https://qantas.sharepoint.com/sites/CSKB/Shared%20Documents/Icon_Black.jpg" data-size="32" data-theme-variant="{{JSONstringify @root.theme}}"></pnp-iconfile>    
{{else contains 'News' (slot item @root.slots.ArticleType)}}
      <pnp-iconfile class="template--listItem--icon" data-extension="{{slot item @root.slots.FileType}}" data-is-container="{{slot item @root.slots.IsFolder}}" data-image-rul="https://qantas.sharepoint.com/sites/CSKB/Shared%20Documents/Icon_Blue.jpg" data-size="32" data-theme-variant="{{JSONstringify @root.theme}}"></pnp-iconfile>
{{else contains 'Airport Brief' (slot item @root.slots.ArticleType)}}
      <pnp-iconfile class="template--listItem--icon" data-extension="{{slot item @root.slots.FileType}}" data-is-container="{{slot item @root.slots.IsFolder}}" data-image-rul="https://qantas.sharepoint.com/sites/CSKB/Shared%20Documents/Icon_Red.jpg" data-size="32" data-theme-variant="{{JSONstringify @root.theme}}"></pnp-iconfile>
{{/contains}}
{{/if}}

The above code works for the first {{#contains}} condition but not the following 2. I've also tried nesting IF statements, e.g.

{{#if A}}
{{#contains 'string1'}}
display icon 1
{{else}}
   {{#if B}}
   {{#contains 'string2'}}
    display icon 2
   {{else}}
     {{#if C}}
     {{#contains 'string3'}}
     display icon 3
     {{/contains}}
     {{/contains}}
     {{/contains}}
     {{/if}}
   {{/if}}
{{/if}}

But the above code caused the web part to display no results / blank.

According to https://stackoverflow.com/questions/15497794/handlebars-if-value-contains-x I may need to register a helper, but I'm not sure where I would be placing this in the web part template.

1 Answer 1

0

I resolved this using the following:

{{#if @root.properties.layoutProperties.showFileIcon}}
{{#contains 'String1' (slot item @root.slots.Summary)}}
      <pnp-iconfile class="template--listItem--icon" data-extension="{{slot item @root.slots.FileType}}" data-is-container="{{slot item @root.slots.IsFolder}}" data-image-url="https://qantasgrouptest.sharepoint.com/sites/GDTest/Shared%20Documents/Icon_black.jpg" data-size="32" data-theme-variant="{{JSONstringify @root.theme}}"></pnp-iconfile> 
{{else contains 'String2' (slot item @root.slots.Summary)}}
          <pnp-iconfile class="template--listItem--icon" data-extension="{{slot item @root.slots.FileType}}" data-is-container="{{slot item @root.slots.IsFolder}}" data-image-url="https://qantasgrouptest.sharepoint.com/sites/GDTest/Shared%20Documents/Icon_red.jpg" data-size="32" data-theme-variant="{{JSONstringify @root.theme}}"></pnp-iconfile>
{{else contains 'String3' (slot item @root.slots.Summary)}}
          <pnp-iconfile class="template--listItem--icon" data-extension="{{slot item @root.slots.FileType}}" data-is-container="{{slot item @root.slots.IsFolder}}" data-image-url="https://qantasgrouptest.sharepoint.com/sites/GDTest/Shared%20Documents/Icon_blue.jpg" data-size="32" data-theme-variant="{{JSONstringify @root.theme}}"></pnp-iconfile>
{{/contains}}
{{/if}}
0

Your Answer

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

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