If statement with multiple conditions in Handlebars

Question

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.

Answer 1

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}}