Pretty little FAQ

Many of my clients have the need for an FAQ on their intranet.

The traditional way is still the way: using lists. But let’s make this more user friendly.

As a sort of “UI for the back end” I always add the list as a tab in Microsoft Teams, using the Microsoft Lists app. This helps the customer to punch data in a much more user friendly way.

Using PnP Modern Search for the front end, I wrote a handlebar template for the solution using <PnP-Panel>, which is one of the built in web components. You click (and search if you like) on the FAQ item and it pops up as a panel with the rich content. Anonymised screenshots below:

Handlebar template:

<style>
  .listevisning {
    display: block;
    background-color: #F0F9Fb;
    position: relative;
    margin-bottom: 10px;
    padding-bottom: 10px;
    padding: 10px;
    border-radius: .375rem;
    color: #000000;
  }
  .FAQ-visning {
      padding-inline-start: 0px;
  }
</style>  
      <ul class="FAQ-visning">
          {{#each data.items as |item|}}
              <pnp-select>
                      {{#> resultTypes item=item}}
<pnp-panel   
    data-is-open="false" 
    data-is-light-dismiss="true"
    data-is-blocking="true"
    data-size="3"
    data-panel-header-text="{{Title}}">
    <template id="panel-open">
        <div class="listevisning">{{Title}}</div>
    </template>
    <template id="panel-content">
        <div class="kategori" style="margin:10px;">
          <b>Kategori:</b> {{FAQKategori}}</div>
        <div class="innhold" style="margin:10px;">
          {{{FAQAnswer}}} </div>
    </template>
</pnp-panel>
      {{/resultTypes}}
              </pnp-select>
          {{/each}}
        {{#if @root.properties.paging.showPaging}}
            {{#gt @root.data.totalItemsCount @root.properties.paging.itemsCountPerPage}}
            
                <pnp-pagination 
                    data-total-items="{{@root.data.totalItemsCount}}" 
                    data-hide-first-last-pages="{{@root.properties.paging.hideFirstLastPages}}"
                    data-hide-disabled="{{@root.properties.paging.hideDisabled}}"
                    data-hide-navigation="{{@root.properties.paging.hideNavigation}}"
                    data-range="{{@root.properties.paging.pagingRange}}" 
                    data-items-count-per-page="{{@root.properties.paging.itemsCountPerPage}}" 
                    data-current-page-number="{{@root.paging.currentPageNumber}}"
                    data-theme-variant="{{JSONstringify @root.theme}}"
                >
                </pnp-pagination>
            {{/gt}}
            
        {{/if}}
</content>

Go ahead and take it for a spin. Make that FAQ pop for your clients!