{"id":530,"date":"2024-03-08T15:59:10","date_gmt":"2024-03-08T14:59:10","guid":{"rendered":"https:\/\/www.paalolav.no\/?p=530"},"modified":"2024-03-11T10:46:25","modified_gmt":"2024-03-11T09:46:25","slug":"pretty-little-faq","status":"publish","type":"post","link":"https:\/\/www.paalolav.no\/?p=530","title":{"rendered":"Pretty little FAQ"},"content":{"rendered":"\n

Many of my clients have the need for an FAQ on their intranet.<\/p>\n\n\n\n

The traditional way is still the way: using lists. But let’s make this more user friendly.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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:<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n
\"\"<\/a><\/figure>\n\n\n\n

Handlebar template:<\/p>\n\n\n\n

<<\/span>style<\/span>><\/span>
  .listevisning<\/span> {<\/div>
    display:<\/span> block<\/span>;<\/div>
    background-color:<\/span> #F0F9Fb<\/span>;<\/div>
    position:<\/span> relative<\/span>;<\/div>
    margin-bottom:<\/span> 10px<\/span>;<\/div>
    padding-bottom:<\/span> 10px<\/span>;<\/div>
    padding:<\/span> 10px<\/span>;<\/div>
    border-radius:<\/span> .375rem<\/span>;<\/div>
    color:<\/span> #000000<\/span>;<\/div>
  }<\/div>
  .FAQ-visning<\/span> {<\/div>
      padding-inline-start:<\/span> 0px<\/span>;<\/div>
  }<\/div>
<\/<\/span>style<\/span>><\/span>  <\/div>
      <<\/span>ul<\/span> class<\/span>=<\/span>\"FAQ-visning\"<\/span>><\/span><\/div>
          {{#each data.items as |item|}}<\/div>
              <<\/span>pnp-select<\/span>><\/span><\/div>
                      {{#> resultTypes item=item}}<\/div>
<<\/span>pnp-panel<\/span>   <\/div>
    data-is-open<\/span>=<\/span>\"false\"<\/span> <\/div>
    data-is-light-dismiss<\/span>=<\/span>\"true\"<\/span><\/div>
    data-is-blocking<\/span>=<\/span>\"true\"<\/span><\/div>
    data-size<\/span>=<\/span>\"3\"<\/span><\/div>
    data-panel-header-text<\/span>=<\/span>\"{{Title}}\"<\/span>><\/span><\/div>
    <<\/span>template<\/span> id<\/span>=<\/span>\"panel-open\"<\/span>><\/span><\/div>
        <<\/span>div<\/span> class<\/span>=<\/span>\"listevisning\"<\/span>><\/span>{{Title}}<\/<\/span>div<\/span>><\/span><\/div>
    <\/<\/span>template<\/span>><\/span><\/div>
    <<\/span>template<\/span> id<\/span>=<\/span>\"panel-content\"<\/span>><\/span><\/div>
        <<\/span>div<\/span> class<\/span>=<\/span>\"kategori\"<\/span> style<\/span>=<\/span>\"margin:10px;\"<\/span>><\/span><\/div>
          <<\/span>b<\/span>><\/span>Kategori:<\/<\/span>b<\/span>><\/span> {{FAQKategori}}<\/<\/span>div<\/span>><\/span><\/div>
        <<\/span>div<\/span> class<\/span>=<\/span>\"innhold\"<\/span> style<\/span>=<\/span>\"margin:10px;\"<\/span>><\/span><\/div>
          {{{FAQAnswer}}} <\/<\/span>div<\/span>><\/span><\/div>
    <\/<\/span>template<\/span>><\/span><\/div>
<\/<\/span>pnp-panel<\/span>><\/span><\/div>
      {{\/resultTypes}}<\/div>
              <\/<\/span>pnp-select<\/span>><\/span><\/div>
          {{\/each}}<\/div>
        {{#if @root.properties.paging.showPaging}}<\/div>
            {{#gt @root.data.totalItemsCount @root.properties.paging.itemsCountPerPage}}<\/div>
            <\/div>
                <<\/span>pnp-pagination<\/span> <\/div>
                    data-total-items<\/span>=<\/span>\"{{@root.data.totalItemsCount}}\"<\/span> <\/div>
                    data-hide-first-last-pages<\/span>=<\/span>\"{{@root.properties.paging.hideFirstLastPages}}\"<\/span><\/div>
                    data-hide-disabled<\/span>=<\/span>\"{{@root.properties.paging.hideDisabled}}\"<\/span><\/div>
                    data-hide-navigation<\/span>=<\/span>\"{{@root.properties.paging.hideNavigation}}\"<\/span><\/div>
                    data-range<\/span>=<\/span>\"{{@root.properties.paging.pagingRange}}\"<\/span> <\/div>
                    data-items-count-per-page<\/span>=<\/span>\"{{@root.properties.paging.itemsCountPerPage}}\"<\/span> <\/div>
                    data-current-page-number<\/span>=<\/span>\"{{@root.paging.currentPageNumber}}\"<\/span><\/div>
                    data-theme-variant<\/span>=<\/span>\"{{JSONstringify @root.theme}}\"<\/span><\/div>
                ><\/span><\/div>
                <\/<\/span>pnp-pagination<\/span>><\/span><\/div>
            {{\/gt}}<\/div>
            <\/div>
        {{\/if}}<\/div>
<\/<\/span>content<\/span>><\/span><\/div><\/div><\/code><\/pre>\n\n\n\n
Go ahead and take it for a spin. Make that FAQ pop for your clients!<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":2,"featured_media":535,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[70,67,87],"tags":[97,99,98,100],"class_list":["post-530","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-intranet","category-sharepoint","category-pnp-modern-search","tag-faq","tag-handy","tag-intranet","tag-nice-to-have"],"_links":{"self":[{"href":"https:\/\/www.paalolav.no\/index.php?rest_route=\/wp\/v2\/posts\/530"}],"collection":[{"href":"https:\/\/www.paalolav.no\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.paalolav.no\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.paalolav.no\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.paalolav.no\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=530"}],"version-history":[{"count":2,"href":"https:\/\/www.paalolav.no\/index.php?rest_route=\/wp\/v2\/posts\/530\/revisions"}],"predecessor-version":[{"id":537,"href":"https:\/\/www.paalolav.no\/index.php?rest_route=\/wp\/v2\/posts\/530\/revisions\/537"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.paalolav.no\/index.php?rest_route=\/wp\/v2\/media\/535"}],"wp:attachment":[{"href":"https:\/\/www.paalolav.no\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=530"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.paalolav.no\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=530"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.paalolav.no\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=530"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}