0

I am using PnP Modern Search Results (v4) to get Local People Results (LocalPeopleResults) in sharepoint. I want to customize "Edit results template". I want to customize it with Fluent UI. Is it possible to do? If yes, how can i achieve it?

Your valuable support is much appriciated.

Greetings

1 Answer 1

1

I'm not sure if you can customize search result using Microsoft Fluent UI.

Microsoft Fluent UI is used for creating the controls in web, desktop and team app.

Modern Search web part support Handlebars to render the search result.

I would recommend to use handlebars to customize search result. You can customize the way you want.

  • Handlebars is a simple templating language.

  • To get started with handlebars use below link.

  • Handlebars Introduction

  • Once you have you handlebars template ready, you can apply in modern search web part.

  • Refer below article - to check how to apply handlebars template in modern search web part.

  • create-your-first-custom-template

  • Below are sample code for handlebars template.

<content id="data-content">
  <style>
    /* Insert your CSS overrides here */
    .example-themePrimary a {
      color: {
         {
          @root.theme.palette.themeprimary
        }
      }
    }

    .myfirstcss{
        font-size: 30px;
        font-weight: 600;
    }

    .icon {
      width: 20px;
      height: 16px;
    }

    ul {
      list-style: none;
      display: flex;
      flex-wrap: wrap;
    }

    ul li {
      display: flex;
      padding: 8px;

      flex: 1 1 100%;
    }
  </style>

  <div class="template">
    {{#if @root.properties.showSelectedFilters}}
    <pnp-selectedfilters
      data-filters="{{JSONstringify filters.selectedFilters 2}}"
      data-filters-configuration="{{JSONstringify filters.filtersConfiguration 2}}"
      data-instance-id="{{filters.instanceId}}"
      data-operator="{{filters.filterOperator}}"
      data-theme-variant="{{JSONstringify @root.theme}}"
    ></pnp-selectedfilters>
    {{/if}} {{#if @root.properties.showResultsCount}}
    <div class="template--resultCount">
      <label class="ms-fontWeight-semibold"
        >{{getCountMessage @root.data.totalItemsCount
        @root.inputQueryText}}</label
      >
    </div>
    {{/if}}

    <ul class="template--custom">
      {{!-- This div below can be deleted. it is just for showing that is is
      your first template.--}}
      <div class="myfirstcss">This is my custom template!!!!</div>

      {{#each data.items as |item|}} {{#> resultTypes item=item}} {{!-- The
      block below will be used as default item template if no result types
      matched --}}

      <li>
        <pnp-iconfile
          class="icon"
          data-extension="{{slot item @root.slots.FileType}}"
          data-theme-variant="{{JSONstringify @root.theme}}"
        ></pnp-iconfile>
        <span class="example-themePrimary"
          ><a href="{{slot item @root.slots.Path}}"
            >{{slot item @root.slots.Title}}</a
          ></span
        >
      </li>

      {{/resultTypes}} {{/each}}
    </ul>
  </div>
</content>

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.