Overview

The Site Search Tile gives users the ability to search for content in their LiveTiles Cloud site. 

Special Characters

All special characters are removed from the search.

Search Fields

The following fields are searched per result type.

Azure-Hosted Documents:
The document name is searched. At this time, the file's contents are not included in the search.

Enterprise Box Documents:
The document name is searched across all the documents the account has access to. At this time, the file's contents are not included in the search.

Lists: The list name and list item content is searched, returning if the list is used on a page. This includes saved sections that contain tiles using lists, if that section is used on a page.
 
Pages: The page name and Text Tile content is searched. This includes saved section text content on the page.

Spaces: The space name is searched.

Permissions

All search results will be dependent on the end user's access. For example, a user who does not have a permission to a page will not see the page in the results.

Configuring the Tile

Individuals with designer privileges can add and configure the Site Search Tile. The tile can be added to the design canvas by clicking and dragging the Site Search Tile from the Tile Gallery. You will find this tile in the Tile Gallery under the Category "Accessories".

Screenshot of the design canvas and designer menu set to show Tiles > Accessories.

Like all tiles, the tile can be deleted, saved, duplicated, or configured through the context menu that appears when clicking on or tabbing to the tile in the design canvas.

Configure

Screenshot of the context menu Settings icon, which looks like a cog.

Various settings of the tile can be configured by clicking on the Settings icon.  From here you can edit the styling, configure the elements to search, configure the search result behavior, and configure responsive behavior. 

See Tile Settings for more details. 

Duplicate

Screenshot of the context menu Duplicate icon, which looks like two identical overlapping pages.

The tile can be duplicated into the design canvas by clicking the Duplication icon. All current configurations will be copied over to the new tile. 

Save

Screenshot of the context menu Save icon, which looks like a heart.

The tile can be saved into the Tile Gallery by clicking the Save icon. This will save the tile's current configuration into the Tile Gallery under the Saved Tiles category, where it can easily be reused. At this time, saved tiles cannot be edited. 

The tile configuration can also be exported for use in another site by clicking Export Tile.  For more information on the Import/Export process, check this article

Screenshot of the Save Tile dialog, which has the Save Tile fields (name and description), the tile's Preview, and the Export Tile button. 

Delete

Screenshot of the context menu Delete icon, which looks like a trash can.

To remove the tile from the canvas, click the Delete icon or press the delete key while the tile is selected. If this is done in error, the designer menu has an "undo" command.

Tile Settings

Click the Settings icon to open the tile settings. Note: The tile settings may vary depending on your environment and your chosen canvas layout. 

The tile settings categories are as follows:

  • General
  • Text
  • Icon
  • Search
  • Tile Behavior (Responsive Canvas Only)
  • Layout (Fixed Width Canvas Only)
  • Advanced

General

These are display settings which are often common to most tiles, such as height and background color.

Screenshot of the General tab of the tile settings for the Site Search Tile.

Width:
Adjust the width of the tile in pixels. This must be a positive whole number, otherwise the default will be 10 pixels. This is only available on a Fixed Width canvas, which is selected on page creation.

Height: Adjust the height of the tile in pixels. This must be a positive whole number greater than or equal to 40, otherwise the default will be 40 pixels. The height of the search box and button are 40 pixels. 

Tile Background Color: Use the color picker to add or change the overall tile's background, which will apply behind the search box and search button. We recognize transparency settings for the color.

Screenshot of a red Tile Background Color applied to the Site Search.

Search Box Background Color: Use the color picker to add or change the background color of the search box. We recognize transparency settings for the color. 

Screenshot of a light aqua Search Box Background Color applied to the Site Search.

Padding: These settings for Left, Right, Top and Bottom padding in pixels will apply padding to the search contents (search box, search results, and the search button) within the tile.

Screenshot of the General tab scrolled down to show Padding and the collapsed Advanced Styles section.

Screenshot of 20px padding on the left and right, with a black Tile Background Color for contrast.

Advanced Styles: To adjust borders, corner radius, and drop shadows click on 'Advanced Styles' to expand and view the options.

Screenshot of the Advanced Styles expanded options, with Border Width, Corners and Search Box Border width. 

  • Border Width: The default for this tile is no border. To add one select a displayed width. Once a border is chosen an option will appear to select the border color.
  • Corners:  You may choose Square (default), or rounded corners of varying pixel widths. If you select Round for the corners an option will appear to select which corners it will be applied to (all, top, or bottom)
  • Search Box Border Width: The default for this tile is 1px. To change this, select a displayed width. Once a border is chosen an option will appear to select the border color.
  • Search Box Corners: You may choose Square or rounded corners of varying pixel widths (default is 4px round). If you select Round for the corners an option will appear to select which corners it will be applied to (all, top, or bottom)
  • Drop Shadow:  Checking this option will add a soft, semi-transparent drop shadow to the tile.

Text

The Text tab allows you to configure the text and font options for the tile. 

Screenshot of the Text tab of the Site Search Tile Settings, with Placeholder Text and Font options shown.

Placeholder Text: The default placeholder text to display in the search box. Erase the default text to add your own placeholder.

Font Options: This section contains the configuration options for the tile's font.

Screenshot of the Font Options sections, showing Override Page Font, Font Size, Font Color and Highlight Color in their default selections.

  • Override Page Font: To use your own font, select this box. You may choose from fonts available to all LiveTiles platforms or you may choose Custom to enter a font-family already loaded into your page.
  • Font Size: Choose a whole number in pixels for the font size.
  • Font Color:  Use the color picker to change the font color. We recognize transparency on fonts. 
  • Highlight Color: Use the color picker to change the See More link in the search results. By default, only three results are shown for each type of search object, and a See More link is shown if there are more results found. For more information, see How To Search .

Screenshot of search results with both the icon background color and the Highlight color set to royal blue. The See All link on Pages has the highlight color.

  • Font Style: Italicize or underline the text by checking the respective boxes.
  • Font Weight: To change the weight of the font select between Light, Normal, or Bold.

Icon

The Icon tab allows customizing the search button by changing the background color and allowing a custom search icon, as well as setting border settings.



Screenshot of the Icon tab and the default icon path and icon background color settings (blank).

Icon Path: This allows you to enter a path to an image for the search icon. By default, this is blank and the tile's search button icon will be a magnifying glass. To search through your attached media, click the button on this field where it will display your media picker options. We recommend using a SVG or PNG file if this is set.

Icon Background Color: Use the colorpicker to choose a new color for the search button's background. Otherwise, the default teal will be applied. The color picker respects transparency.

Advanced Styles: To adjust borders, corner radius, and drop shadows click on 'Advanced Styles' to expand and view the options.

Screenshot of the advanced styles for the search button, including border width, corners and rounding options. 

  • Icon Border Width: The default for the button is no border. To add one select a displayed width. Once a border is chosen an option will appear to select the border color.
  • Icon Corners: You may choose Square or rounded corners of varying pixel widths (default 4px). If you select Round for the corners an option will appear to select which corners it will be applied to (all, top, right, or bottom).

Search

The Search tab allows configuring the types and sources of data to search in this tile.

Screenshot of the Search tab, with some the Pages results toggled on and Files/Documents and Lists toggled off.

Files/Documents: This includes Documents in the search results.


Screenshot of the Files/Documents setting enabled, showing the data sources Box with a warning and Azure.

  • The search is currently limited to the document's name.
  • The search will display the document's path or scope, and return the document's download link.

If multiple data sources are available, enabling this setting will display the available data sources. Enabling this setting will allow you to choose the link target.

If you would like to expand the search ability, such as searching on additional fields, please use the Ideas Portal.

  • Box: If your environment allows this, you may return documents configured in your Native Box integration. If this is available to your site but not yet configured, a warning icon will appear and the checkbox will be disabled. 
  • Azure: The default data source, this will return documents uploaded in to your Azure site using the Documents Tile
  • Document Target: You may choose the target action of the document link.

    > New Window:
    This will open a new tab or window in your browser (dependent on your browser settings) and trigger the download if available.

    > In Place:
    This will use the current browser window and tab and trigger the download if available.

Lists: This includes Lists in the search results. 

Screenshot of the Lists setting enabled and showing the List Target options.

  • The search will search over the list and list contents for a match.
  • The search will display results that are used on pages, and will link to the page containing the list. If the list is used on multiple pages, it will be listed multiple times.
  • This will also return lists used in saved sections.

Enabling this setting will show the List Target.

If you would like to expand the search ability, such as searching on additional fields, please use the Ideas Portal.

  • List Target: You may choose the target action of the link, which will open the page containing the list.

    > New Window: This will open a new tab or window in your browser (dependent on your browser settings).
    > In Place:
    This will redirect the current tab to the page in question.

Pages: This includes Pages in the search results.

Screenshot of the Page setting enabled and showing the Page Target options.

  • The search will search over the pages in the site using the page title and the Text Tile contents.  This will also return saved section text content on the page.
  • The search will return a link to the pages that match the search query.

Enabling this setting will show the Page Target.

If you would like to expand the search ability, such as searching on additional fields, please use the Ideas Portal.

  • Page Target: You may choose the target action of the link, which will open the page in question.
    > New Window:
    This will open a new tab or window in your browser (dependent on your browser settings).
    > In Place:
    This will redirect the current tab to the page in question.

Spaces: This includes Spaces in the search results.

Screenshot of the Spaces setting enabled and showing the Space Target options.

  • The search will search over the names of the spaces in the site.
  • The search will return a link to the space's home page.

Enabling this setting will show the Space Target.

  • Space Target: You may choose the target action of the link, which will open the space's home page.
    > New Window:
    This will open a new tab or window in your browser (dependent
    > In Place:
    This will redirect the current tab to the page in question.

Tile Behavior

The Tile Behavior tab is only available on the Responsive canvas.

The Tile Behavior tab allows the designer to configure the visibility of the tile depending on the screen width.

Screenshot of the Tile Behavior tab of the tile settings, with all the Show on Device options checked.

Show on Large Devices:
Tile will appear on widths greater than 1200 pixels
Show on Medium Devices:
Tile will appear at widths between 992 and 1200 pixels
Show on Small Devices:
Tile will appear at widths between 768 up to 992 pixels
Show on Extra-Small Devices:
Tile will appear at widths up to 767 pixels.

Layout

The Layout tab is only available on the fixed-width canvas.

The Layout Tab allows the designer to configure the layering of the tile against the other elements on the page.

Screenshot of the Layout tab of the tile settings, showing Foreground layer is selected and No Change for the Reorder Within Layer option.

Layer:
Adjust to choose if the layer is part of the foreground (closest to view), background, or a Custom.
Custom: If this is selected additional configurations will appear.

  • Z-Index:  This will set the CSS z-index property on the tile. By default it is 50 pixels.

Advanced

The Advanced tab will allow a designer to access more complicated settings for the tile. Recommended for experienced users.

Tile Visibility: Currently this setting can only be “Everyone” as it is not yet configured to work with Okta or Active Directory groups.
Lock Tile for Non-Owners: Check this box to only allow space owners or site administrators to modify the tile settings.
Custom CSS Classes: This is recommended only for those with previous coding experience. To use custom code enter custom CSS classes here separated with a space. Do not use lt-, ltc-, or ltd- in your class names.

Did this answer your question?