User interface design and implementation

Progress recommends using PnP Modern Search web parts to build search interfaces and topic pages in SharePoint Online (SPO). These web parts provide a modern search experience that leverages Semaphore tagging. Progress has also developed several SharePoint Framework (SPFx) web parts and extensions that integrate with PnP Modern Search and can help you build these interfaces.

PnP Modern Search web parts

• PnP - Search Box
• PnP - Search Filters
• PnP - Search Results
• PnP - Search Verticals

The PnP Modern Search web parts are a collection of open source web parts available to download and use in your SPO tenant.

The configuration of the PnP Modern Search web parts can be found in the GitHub documentation.

Semaphore web parts and extensions

The Semaphore components include:

• Semaphore Topic Page Title (web part)
• Semaphore A-To-Z Menu (extension)

Use of standard SharePoint columns

PnP Modern Search web parts can use standard SharePoint columns. However, to take full advantage of Semaphore tagging and provide more accurate search results, use Managed Metadata columns whenever possible. For example, Enterprise Keywords or the Managed Metadata column type. Populating other column types with Semaphore Intelligent Metadata results in less accurate search results because those fields store only the labels of the concepts.

Standard SharePoint searches are unaffected by Semaphore functionality. Continue to search for information in SharePoint as you would in a standard, non-Semaphore integration.

Install the Semaphore web parts and extensions in your SPO tenant

To install the Semaphore web parts/extensions in your SharePoint Online tenant:

1. Download the latest release of Smartlogic.Semaphore.Spo.Components.sppkg from the Semaphore Customer Portal.
2. Add the Smartlogic.Semaphore.Spo.Components.sppkg to your tenant app catalog or a site collection app catalog.

Add a Semaphore web part to a page

To add a Semaphore web part to a page:

1. From the page, click Edit from the command bar.
2. In the desired section of the page, click the circle plus button to show the list of available web parts.
3. In the search field, type Semaphore to filter the list and show the available Semaphore web parts.
4. Select the web part you want to add to the page. For example, Semaphore Topic Page Title.

Install the PnP search web parts in your SPO tenant

To install the PnP search web parts in your SharePoint Online tenant:

1. Download the latest release from GitHub.
2. Follow the installation instructions in the GitHub documentation.

Add a PnP Search web part to a page

To add a PnP Search web part to a page:

1. From the page, click Edit from the command bar.
2. In the desired section of the page, click the circle plus button to show the list of available web parts.
3. In the search field, type pnp to show the available PnP Search web parts.
4. Select the web part to add to the page. For example, PnP - Search Results.

Sample topic page

This sample topic page shows how Semaphore and PnP Modern Search web parts and extensions work together:

1. Add and configure the Semaphore A-To-Z menu extension—This provides a clickable menu of concepts from the model that drives search results.

2. Add the Semaphore Topic Page Title web part—When a concept is selected from the Semaphore A-To-Z menu extension, this displays the primary label of the topic on the page.

3. Add the PnP - Search Verticals web part—When a concept is selected from the Semaphore A-To-Z menu extension, this web part is configured to show specific categories of content returned from SharePoint search.

4. Add the PnP - Search Results web part—When a concept is selected from the Semaphore A-To-Z menu extension, documents tagged with the concept are returned based on the selected search vertical.

   Configure this web part to use a search query template or custom search result source to specify what content should be returned. In this example, the web part is configured with this query template:

   Copy

   owstaxIdTopic:{searchTerms} AND owsDocumentType:"Info"
   

   • owstaxIdTopic and owsDocumentType are managed properties defined in the SharePoint search schema and map to the crawled properties for the applicable columns in the SharePoint document library.
   • In this example, Topic in the managed property owstaxIdTopic is the name of a specific column, so you would typically use the managed property owstaxId<COLUMNNAME>.
   • Info for owsDocumentType is a custom value applied in a choice field.
   • Use these criteria to filter the content accordingly.

Configure Web Parts

After you add a web part to the page, keep the page in edit mode and click the pencil icon to the left of the web part to display its properties. The properties pane lets you configure and customize the web part.

The details of Semaphore web part configuration are discussed in the next sections. The configuration of PnP Modern Search web parts can be found in the GitHub documentation.