How to Customize the Search Box Design Element

NOTEThis Design Element is still in development and will be released soon.

This article will showcase how to customize the Search Box Design Element and detail all its features.

TABLE OF CONTENTS

• Prerequisites
• What Is a Search Box?
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Insert the Icon Boxes Design Element
  • Step 3: Choose a Search Box Style
  • Step 4: Customize the Content
  • Step 5: Customize the Design
  • Step 6: Save
• Search Box Features
  • A. Style Tab
  • B. Content Tab
  • C. Design Tab
  • D. Advanced Tab
  • E. Custom CSS Tab

Prerequisites

• You must have the ShortPoint SPFx version 8.6.0.0 or later installed in your SharePoint environment.
• You must be a ShortPoint Designer with an active license.

What Is a Search Box?

The Search Box Design Element is the new addition to ShortPoint's library of Design Elements, starting from ShortPoint SPFx version 8.6.0.0 or later. This Design Element lets your users search for any content, file, or information within your SharePoint Site Collection.

With the Search Box Design Element, you can create a personalized experience for your users. You can easily customize the content inside and the URL path of the search.

And to make it even more amazing, you can curate the look of the search box to follow the unique branding of your organization.

Interactive Tutorial

Click Get Started to learn how to customize the Search Box Design Element:

NOTETo learn more about the features you can customize for Search Box, check out Search Box Features.

Step-by-step Tutorial

Follow the detailed guide below to start using Search Box:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit.

• Close the Toolbox:

• Click the Edit properties icon:

Step 2: Insert the Icon Boxes Design Element

• Choose where you want to add the Search Box and click the plus icon:

• Use the search box to look for Search Box and click it:

Step 3: Choose a Search Box Style

• In the Style tab, choose the style of the Search Box you prefer.

Step 4: Customize the Content

• Go to the Content tab.
• Customize the content of the Search Box according to your preferences.

NOTETo learn more about the features you can customize for Search Box, check out Search Box Features.

Step 5: Customize the Design

• Go to the Design tab.
• Customize the look of the Search Box according to your preferences.
• Once satisfied, click the green check mark.

NOTETo learn more about the features you can customize for Search Box, check out Search Box Features.

Step 6: Save

• Click the eye icon to see your page in real-time:

• Save your changes:

That's it! You now have a Search Box on your SharePoint page. 

Search Box Features

Below are the options you can find in the Search Box Settings window 

A. Style Tab

The Style tab allows you to choose the style of the Search Box.

B. Content Tab

The Content tab allows you to edit the content of the Search Box. It has the following options:

	Icon	allows you to choose the icon inside the Search Box.
	Search URL	allows you to modify the URL to use for searching. Remember to add %s for the search term.
	Placeholder	allows you to change the placeholder text inside the Search Box. By default, it is set to 'Search...'
	Show Button	when enabled, the Search button will be shown.
	Button Text	allows you to change the text inside the Search button. By default, it is set to 'Search.'
	Button Icon	allows you to add an icon inside the Search button.

C. Design Tab

The Design tab allows you to customize how the Search Box will look. It has the following options:

SETTINGS

	Size	allows you to choose the size of the Search Box.
	Color	allows you to modify the primary color of the Search Box. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Background Color	allows you to modify the background color of the Search Box. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Text Color	allows you to modify the color of the text inside the Search Box. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Button Text Color	allows you to modify the color of the text inside the button. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Border Color	allows you to modify the border color of the Search Box. You can change the color by [1] adding a hex code, [2] using the drop-down, or [3] using the color picker.
	Alignment	allows you to choose the alignment of the Search Box. You can choose from left, right, or center.

D. Advanced Tab

The Advanced tab allows you to customize the margin values around the Search Box Design Element. It has the following options:

	Margin Top	allows you to adjust the top margin of the Search Box in px, %, or em.
	Margin Right	allows you to adjust the right margin of the Search Box in px, %, or em.
	Margin Bottom	allows you to adjust the bottom margin of the Search Box in px, %, or em.
	Margin Left	allows you to adjust the left margin of the Search Box in px, %, or em.

E. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and JavaScript code to customize the Search Box Design Element. 

NOTECheck out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.

NOTEThe Connect and Visibility tabs are currently unavailable in Live Mode.

Related articles:

• How to Customize the Abbreviation Design Element
• How to Customize the Lead Design Element
• How to Customize the Small Design Element
• How to Customize the Icon Boxes Design Element