User interface design and implementation

Progress recommends using PnP Modern Search web parts to design search interfaces and topic pages in SharePoint Online. The web parts provide a modern experience that leverage Semaphore tagging. Progress has developed several SPFx web parts and extensions that work with PnP Modern Search web parts. These web parts can be helpful when building these interfaces.

Semaphore Web Parts

• Semaphore Topic Page Title

Semaphore Extensions

• Semaphore A-To-Z Menu

PnP Modern Search Web Parts

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

Use of standard SharePoint columns

PnP Modern Search web parts can use any type of standard SharePoint column. However, to take full advantage of tags applied by Semaphore, and to provide more accurate results, you should use managed metadata based columns. For example, Enterprise Keywords or Managed Metadata column types. Populating other column types using the Semaphore Intelligent Metadata functionality results in less accurate search results. These types of fields only store 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 is a sample topic page that can be implemented with Semaphore and PnP Modern Search web parts and extensions:

1. Add and configure the Semaphore A-To-Z menu extension - This provides a clickable menu of concepts from a model used to drive 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 from the Semaphore A-To-Z menu extension is selected, 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 from the Semaphore A-To-Z menu extension is selected, 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 have the crawled properties for the applicable columns defined on the SharePoint document library.
   • In this example, Topic in the managed property owstaxIdTopic is a name of a specific column (so typically you would use the managed property owstaxId<COLUMNNAME>), and Info for owsDocumentType is a custom value applied in a choice field.
   • Use criteria to filter the content accordingly.

Configure Web Parts

Once a web part has been added to the page, while still in edit mode, click the pencil icon to the left of the web part to display the web part properties. The properties pane allows configuration and customization of 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.