The Search with tabs web-part 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 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, perfectly rearranged into the tabs chosen by you.
How to deploy the Search with tabs web-part
Currently, to add our Search with tabs web-part, the only way is through Powell Manager, it's not available directly from your Intranet yet.
See a step-by-step guide on "how to add Search with tabs" below.
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.
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".
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.
We can now pursue the edition of the page where you want to add the Search with tabs web-part. You can either "Create a new page" or edit one that's already been created.
This feature is a simple web part to add to your page, so it can be integrated as a new element to your page.
Either if you decide to create a new page or edit one, you'll be redirected to the page edition.
From the bottom of this page, you have the page components shown depending on how you've decided to add some rows and elements.
You have to click on "Add a web part" depending on the place where you will want to have your Search with tabs web-part.
- Tabs configuration,
- Query builder,
- Query options,
- and Miscellaneous.
Tabs configuration :
This first section is made to configure the basic elements of your tab :
- In the tab "Title", 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 add a desired translation in the field displayed.
- and the "Tab icon". You can choose from a large range of icon options by clicking on the pencil button (which is the "edit" button) next to the icon, 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 on the "delete" button next to the "edit" button.
Query builder :
The query builder configuration section is where you're going to indicate the elements you want in your web part.
The "Search query template" field will be auto-filled each time you'll be adding a filter. You'll just have to select the desired elements in the drop-down and, when you have the option, decide if you want to include or exclude it. Once you're done, click on the button "Add filter" to add your filter to the search query.
You can :
- Select a "Search Query" from your own or from the ones available by 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 certain 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 certain path to fetch the elements into it.
Query options :
From this section, you can configure more query options 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 to specify a managed property that is sortable, you can decide to sort every property ascending or descending.
- 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
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 :
- "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, …)
- 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.
- 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, 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.
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.
The miscellaneous section is where you're going to set diverse behaviors of your web part.
- "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.
Once you're done with your tab configuration, you can click on 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.