🖍 Content management web part - Search results with tabs

This article is associated to the "web parts" category. To understand the fundamental of the web parts, read the introduction article

Table of contents

New to Powell Intranet? Click here for the full product overview. 

Introduction

The "Search with tabs" web part is Powell 365 web part. An example of this web part can be found on Powell Intranet User & Communication focus home page.

The Search with tabs web part is the main asset to customize and control what you want to display in your intranet. This web part permits you to create tabs and arrange elements you wish to display in various categories.

Each tab is personalizable to display the elements you want. You will have a lot of possibilities and displays given for each tab.   

With this web part you can display diverse types of elements: events, news, pages, documents, people, or elements based on a specific content type … All of these, are perfectly rearranged into the tabs chosen by you.

1.png
Example of one usage of the search with tabs web-part int the “User & Communication focus” home page
 

Settings

When you select the "search with tabs" web part in the Powell web parts, you can then start configuring the web-part settings. 

Before starting configuring the web part's main settings, you need to define the first two elements: Tabs display and the web-part icon. 

Screenshot 2022-02-02 at 17.04.00.png

 
 
Tabs configuration: Select a display type. You can choose between vertical and horizontal displays.
Select the icon: You can choose from a large range of icons options by clicking on the + button.
 
Screenshot 2022-02-02 at 17.11.30.png
Then continue configuring the rest of the settings. 
 
Screenshot 2022-02-02 at 17.04.17.png
 

Beta Features

Screenshot 2022-02-02 at 17.33.48.png

You can enable search with Microsoft Graph.

Query Builder

The query builder configuration section is where you're going to indicate the elements you want in your web part.

 

Screenshot 2022-02-02 at 17.13.03.png

In this section, you can configure more query options to display items you want in your web part.

You can decide to :

  • Current tenant/external tenant: Do you want to search the content in your tenant or from an external tenant. 

We offer the capacity to search and display content coming from another tenant(s).

If you select another tenant two settings need to be defined :

-The id of the other tenant :

- The URL of the site collection from where the search will be executed  (your users needs to have at least read access on this site collection to run the query)

Finally, as for a classic search component, choose your view and your mapping to display your external data.

Need AzureManagement.com

  • Search Query:  You can write down your query based on Microsoft Query syntax. View the link below for more information:

https://docs.microsoft.com/en-us/sharepoint/dev/general-development/keyword-query-language-kql-syntax-reference

    • Search people:  If you want to display users in your web part, check this box. 
  • Set a "row limit", to set the number of elements you'll get as the result of your query,
  • Set a "number of elements to skip", to skip a certain number of results you might get from your query,
  • Enable "pagination" to define the number of items per page, 
  • "Trim duplicates",
  • "Deactivate the use of query strings",
  • "Enable audience targeting",
  • "Sort property", where you can decide to sort your query results by : 
    • "Custom Properties": you'll have a board where you can manage your sorting properties by adding or deleting them ("Add sort" button on the bottom of the board, and bin icon on the right of every element in the board). Please be aware to specify a managed property that is sortable,  you can decide to sort every property ascending or descending.
    • "Relevance",
    • Or a "random order"

Display

The display section is where you're going to select how you're going to display your elements in your web part. Powell 365 offers a lot of templates to permit you to have the greatest personalization experience.

You can decide to :

  • Set a custom "class container", in this field, you can add a custom CSS class for the container. It is for you to customize your intranet as you wish. You can refer yourself to our design guide, where you'll find our custom CSS class for our container component, at: https://jolly-forest-0d90fee03.azurestaticapps.net/docs/utilities/media-container.html
     
  • "Select a display type", the templates available in the drop-down list are significant.

    So they are organized to give a user an idea of the purpose of the template, for which presentation it has been designed for, and for which case each template suits the most. (For example Event List, News Slider, People Tiles, …). https://support.powell-software.com/hc/en-us/articles/360019525200--Content-management-web-part-Search-result-displays

  • Set devices configuration. For each device, you can personalize the display of your elements and make the display for each, more relevant. You can select how many items you want per row and (if the template permits it) the height on each device.

Screenshot 2022-02-02 at 17.13.20.png

 

Mapping

The mapping section is where you're going to select how you're going to display your elements in your web part. It's dynamic depending on the view, you can link a refinable property that will be displayed or be used by the web part.  

For each field you'll see below, you'll be able to set their configuration for them to be mapped the way you wish.

 

Miscellaneous

The miscellaneous section is where you're going to set diverse behaviors of your web part.

As :

  • Enabling the "see more" option: Indicate a url under the “see more URL” if you want to redirect users to a specific page, in the drop-down you can select a site or set a custom one by filling the field. You can also customize the "see more" label and add a label of your choice. 
  • "Enabling the cache" and setting the cache duration,
  • "Disabling Yammer integration",
  • Setting the web-part behavior if the query returns "no results",
  • Or "Activating" the user's preferences, and if you do so, you'll be able to configure and "Add" the refiner they'll be able to choose from to filter their content.

Screenshot 2022-02-02 at 17.13.32.png

 

Preview

See the preview of how your web part will look like according to your configurations. 

Was this article helpful?
0 out of 0 found this helpful