How to deploy the 'Search with tabs' web-part from Powell Manager ?

Table of contents

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

Also, Read a technical review of Powell Manager on our blog here

Introduction

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

The "search with tabs" web part is the main asset that lets you customize and control what you want to display on your intranet. This web part permits creating tabs and arranging elements you want 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 that you choose.

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

 

How to deploy the "Search with tabs" web part

Follow the step-by-step guide below to add our Search with tabs web part through Powell Manager.

 

Note: If you want to deploy it directly from your SharePoint page, please read the guide about content management web-part - Search results with tabs

 

First of all, you'll have to go to the page where you want to add the web part.

To do so, you have to go to your site settings and select (or create) the page where you want to add it.

You can do so by selecting "Powell Intranet" in the Powell Manager navigation bar. Then select the "Design" section, and click "Sites" under the "SharePoint templates" list.

ManagerLoad.png

 

Then you can click the "edit" button of the site, which contains the page where you want to add your web part, or you can create a new one by clicking on the "Create a new site template."

mceclip1.png

 

After this step, you'll be redirected to the following page, where you will be able to manage your site pages by selecting "Pages" in the left navigation.

mceclip2.png

 

We can now edit the page where you want to add the "search with tabs" web part. You can either "Create a new page" or edit the one that's already been created.

This feature is a simple web part added to your page to be integrated as a new element to your page.

mceclip0.png

 

If you decide to create a new page or edit one, you'll be redirected to the page edition.

You have the page components shown from the bottom of this page depending on how you've decided to add some rows and elements. 

You have to click on "Add a web part" depending on where you want to have your Search with tabs web-part.

AddWPKUDO.png

 

A pop-in will be opened in which you will have the list of available widgets.
You have to click the "Powell Intranet" section from the top navigation.
You have two options: you can either search the word "Search" from the search bar on the top of the pop-in, or you can search for it on the "Powell Intranet" section and click on the "+" button.
mceclip1.png
 
A pop-in will be opened in which you will have to opportunity, in the "Edit mode section," to set a few elements to configure this web part before deploying it.
Please check the settings section to see how to configure each field.
 
Once you're finished with your page configuration, you can synchronize it (if you have enough rights to do so) to make it available on your site.
You have to click the "save" button on the top of the page, then click the "sync" button to deploy it.
mceclip5.png
 
A pop-in will show up where you will configure your deployment. And once you're done, click the "save" button at the bottom.
mceclip6.png
 
A warning message will appear for you to validate and make sure you have configured the deployment correctly. 
Please make sure to check it before pursuing it.
mceclip8.png
 
Then, click the "save" button, and the page will be synchronized to your site with your brand new web part.
 

Settings

mceclip2.png
 
First, you'll be able to configure the display type of your web part. It's straightforward. You have to click the "Select a widget view" button and choose your display from the two options proposed to you. 
You can choose between a Horizontal or a Vertical display.
mceclip3.png
 
Then add your tabs by clicking the "+ New tab" butto; oncee you do so, a new form will open letting you to configure your tab entirely.
This form is composed of 6 sections :
  • Tabs configuration,
  • Query builder,
  • Query options,
  • Display,
  • Mapping, 
  • and Miscellaneous.
Each one of them will be explained below.
 

Tabs configuration :

This first section is made to configure the basic elements of your tab :

  • Title: In the "Title" tab, you can choose which title you want to set by default. You can add a language by selecting it in the "Select a language" drop-down list and adding a desired translation in the field displayed.
  • Tab icon: Add the "Tab icon." You can choose your icon from a large range of icon options by clicking the "edit" button. A preview on the left will show you the icon selected. If you don't want any icon for your tab, you can delete it by clicking the "delete" button.

mceclip4.png

 

Query builder :

The query builder configuration section is where you will indicate the elements you want in your web part.

The "Search query template" field will be auto-filled each time you add a filter. You'll have to select the desired elements in the drop-down and decide if you want to include or exclude them when you have the option. Once you're done, click the "Add filter" button to add your filter to the search query.

You can :

  •  Create your own "Search Query" or select the ones available on Powell Intranet
  • "Filter on a content type" to show elements based on their content type
  • "Filter on a site template" to show elements from a specific site template
  • "Filter on an item type" to display certain types of items; it may be listed, people, news, sites…
  • "Filter on a specific path" if you want to fill in a particular path to fetch the elements into it

mceclip5.png

 

Query options : 

You can configure more query options from this section to fully customize your web part.

You can decide to :

  • 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.
  • "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 of specifying a managed property that is sortable; you can decide to sort every property ascending or descending.
    • "Relevance"
    • Or a "random order."
  • 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.
     

Display :

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

You can decide to :

  • "Select a display type": the templates available in the drop-down list are significant.

     They are organized to give users an idea of the template's purpose, for which presentation it has been designed for, and which case each template suits the most. (For example, Event List, News Slider, People Tiles, …)  

  • Set devices configuration: You can personalize the display of your elements and make the display more relevant for each device. You can select how many items you want per row and (if the template permits it) the height on each device.
  • Enable "pagination" to define the number of items per page.
  • Enable the "see more option" to set a see more button. Indicate a url under the "see more URL" if you want to redirect users to a specific page. You can select a site or set a custom one in the drop-down by filling the field. You can also customize the "see more" label and add a label of your choice. 

mceclip0.png

Mapping :

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

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

mceclip2.png

mceclip3.png

 

Miscellaneous :

The miscellaneous section is where you will set the diverse behaviors of your web part.

As :

  • "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.

mceclip1.png

 

Once you're done with your tab configuration, you can click the "save" button below and add others if you wish.

When you're finished creating all your tabs, you can edit, reorder or delete them.

And when you're done, you can save your web part by clicking on the "save" button under your tabs list.

mceclip4.png

You're now done with adding this web part to your site; you can now enjoy our features!
 
Was this article helpful?
0 out of 0 found this helpful