How to Set Default Values for the Filter Widget of the Search and Filter Toolbar

When you first add the Filter widget to a Design Element, there is no option to set a default value. As a result, the Design Element displays all content until you use the filter widget to refine the view.

This article shows how to set a default value for the Filter widget with JavaScript. When you refresh your page, the Filter widget will display your preset default value:

NOTEThis solution is most useful for connected Design Elements where you retrieve a large amount of data from a source you want to filter. However, you can also use this for static Design Elements.

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Part 1: Activate the Filter Widget & Assign Class Name
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Edit the Design Element
    • Step 3: Activate Filter
    • Step 4: Add a Class Name
  • Part 2: Add JavaScript Code
    • Step 1: Copy and Prepare the JavaScript Code
    • Step 2: Insert the Code Design Element
    • Step 3: Paste the JavaScript Code
    • Step 4: Disable Sandbox Mode
    • Step 5: Save

Prerequisites

• You must have ShortPoint SPFx version 8.5.0.0 or later installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have a connected Design Element that allows you to use the Search & Filter Toolbar. The Search & Filter Toolbar is currently only available for these Design Elements: Date List, File List, Icon List, Image List, Events, Image Titles, Simple List, and Tiles.

Step-by-step Tutorial

The steps have been divided into two parts. Follow them closely to learn how to set default Filter values.

Part 1: Activate the Filter Widget & Assign Class Name

Part 1 will focus on activating the filter widget and assigning a class name.

Step 1: Edit the ShortPoint Web Part

Go to the SharePoint page you want to use and click Edit:

Close the Toolbox:

Edit the ShortPoint web part:

Step 2: Edit the Design Element

NOTEBefore proceeding, you must already have a connected Design Element that allows you to use the Search & Filter Toolbar. The Search & Filter Toolbar is currently only available for these Design Elements: Date List, File List, Icon List, Image List, Events, Image Titles, Simple List, and Tiles. 

We recommend using this solution for connected Design Elements where you retrieve a large amount of data. We will be referring to a connected Image List Design Element in our example. However, this solution can also be used for static Design Elements.

Click the Easypass tag of the connected Design Element. For this guide, we will use the Image List Design Element:

Select the cogwheel icon:

Step 3: Activate Filter

Switch to the Toolbar tab:

Select Filter:

Click the cogwheel icon:

Add a Filter Title and remove the default content inside Filter In:

NOTEMake sure to take note of the Filter Title. You will need it for Part 2.

Select the Design Element property you want to target for the Filter. In our case, we want to filter by department, so we used the Department property:

NOTEYou can only see the properties in green if you have a connected Design Element. The Image List we are using is connected to People Search.

Click Save:

Then, click Activate:

Step 4: Add a Class Name

Click the next icon:

Select the Custom CSS tab:

In the Class field, assign a class name. You can assign any name you want. Just make sure to take note of it for Part 2. In our case, we will use ‘apply-default-filter-1’:

Finally, apply your changes:

You can now proceed to Part 2 of this tutorial.

Part 2: Add JavaScript Code

This part will focus on preparing and adding the JavaScript code to your page.

Step 1: Copy and Prepare the JavaScript Code

Copy the code below:

setTimeout(() => {
    /* CONFIGURE BELOW 3 LINES ONLY */    
    const filterTitle = "FilterTitle";
    const defaultValue = "DesignElementProperty";
    const filteredElement = "Class Name";
    /* CONFIGURE ABOVE 3 LINES ONLY */
  
    const targetedToolbar = `div:has(> .${filteredElement}) > .sp-smartoolbar`;
    document.querySelector(`${targetedToolbar} [data-test="sp-toolbar-filter-btn"]`)?.click();
    document.querySelector(`${targetedToolbar} [data-test="sp-filter-clear-btn`)?.click();
    document.querySelector(`${targetedToolbar} [data-test="sp-toolbar-select-input"]:has(label[title="${filterTitle}"]`)?.click();
    document.querySelector(`${targetedToolbar} [data-test="sp-toolbar-options-wrapper"]`)?.click();
    document.querySelector(`${targetedToolbar} [data-test="sp-toolbar-options"][data-sp-value="${defaultValue}"]`)?.click();
    document.querySelector(`${targetedToolbar}`).click();
}, 1500);

• FilterTitle - replace with the title of your filter;
• DesignElementProperty- replace with the design element property you set in Part 1;
• ClassName - replace with the Class name you assigned in Part 1.

In our case, our FilterTitle is Department, our DesignElementProperty is Marketing, and our ClassName is apply-default-filter-1. As a result, our code now looks like this:

setTimeout(() => {
    /* CONFIGURE BELOW 3 LINES ONLY */    
    const filterTitle = "Department";
    const defaultValue = "Marketing";
    const filteredElement = "apply-default-filter-1";
    /* CONFIGURE ABOVE 3 LINES ONLY */
  
    const targetedToolbar = `div:has(> .${filteredElement}) > .sp-smartoolbar`;
    document.querySelector(`${targetedToolbar} [data-test="sp-toolbar-filter-btn"]`)?.click();
    document.querySelector(`${targetedToolbar} [data-test="sp-filter-clear-btn`)?.click();
    document.querySelector(`${targetedToolbar} [data-test="sp-toolbar-select-input"]:has(label[title="${filterTitle}"]`)?.click();
    document.querySelector(`${targetedToolbar} [data-test="sp-toolbar-options-wrapper"]`)?.click();
    document.querySelector(`${targetedToolbar} [data-test="sp-toolbar-options"][data-sp-value="${defaultValue}"]`)?.click();
    document.querySelector(`${targetedToolbar}`).click();
}, 1500);

Use the search bar to look for Code and select it:

Step 3: Paste the JavaScript Code

Paste your prepared JavaScript Code in the JavaScript field:

Step 4: Disable Sandbox Mode

Switch to the Design tab:

Make sure to disable Sandbox Mode:

Click apply:

Step 5: Save

You will notice that the default value has already been applied. Once satisfied, click Save:

That’s it! You have successfully set a default filter value. Every time you visit the page, this default value will automatically be shown.

NOTEYour users can still use the filter widget to narrow down other properties. The default value will be shown again when you reload the page.

Related articles:

• Getting Started: The Basics of the Search & Filter Toolbar
• Search & Filter Toolbar: How to Use the Search Widget
• Search & Filter Toolbar: How to Use the Sort Widget
• Search & Filter Toolbar: How to Use the Filter Widget
• How to Activate Multiple Search & Filter Toolbar Widgets
• How to Deactivate Active Search & Filter Toolbar Widgets