Hero Tiles¶
The Hero Tiles web part allows user's to set up an arrangement of tiles that can contain an image, (with a caption & link) video or news articles.
Configuration¶
Webpart configuration is controlled through the main web part property panel.
Individual tiles can be configured by clicking the 'Configure' button or through the edit icon on each tile.
Layout Options¶
1 Tile¶
2 Tiles¶
3 Tiles¶
4 Tiles¶
5 Tiles¶
7 Tiles¶
News Options¶
News tiles are used to display news articles from a source, clicking a tile will navigate the user to the news article. The tile can display news data: Title, Auhtor, Modified Date and Views.
Users are able to pin an article to a tile, meaning only the pinned article will display in that tile.
News Tile Configuration¶
| Option | Description | Required |
|---|---|---|
| Select a News Article to pin | Clicking 'Select Article' will open a panel and present a list of news that can be pinned. | No |
Seach Text¶
Allows a user to search for news articles based on the value entered.
Sources¶
- All News - Searches across all news on the tenant.
- Hub - Searches across all news on the current hub.
- Site - Searches acress all news on the current site.
- Result Source - Proving a result source ID will search using the result source.
Managed Properties for Tags¶
List of Managed Properties, once selected items will display as tags on news tiles.
Information to Display¶
Select which news information to display on news tiles.
Sorting¶
Sort articles by MercuryArticleDate, Created Date, Modified Date.
When sorting by MercuryArticleDate user's will need to ensure that the property is mapped in the search schema.
To do this go to the SharePoint Admin center, under More Features go to Search and Manage Search Schema.
Search for refinableDate and find a property that has not been mapped to any other property. Edit the property and add a mapping.
Search for the property ows_MercuryArticleDate and add this mapping to the property.
Ensure the alias has been set up to be MercuryArticleDate.
Note
This mapping could take up to 24 hours to occur.
Sort Direction¶
Select the sort direction of returned news.
Limit Results¶
Limit the number of articles returned by search.
Auto Play¶
Toggle to enable auto play, by setting the speed of the auto play the news articles will page through after the number of seconds set.
New Flag¶
Checkbox that enables news items to display a flag in the top corner if the item is "new".
Friendly Date¶
Toggle to display news dates as friendly (todays date will display as 'Today').
Image Options¶
The Image tile is used to display a background image with a link provided by the user. The image tile will display information as: Title and By Line.
Image Tile Configuration¶
| Option | Description | Required |
|---|---|---|
| Image | An image picker used to display a background image. | Yes |
| Title | A title to be displayed on the tile. | No |
| By Line | A by line to be display on the tile below the title. | No |
| Link | A link to be used when clicking the tile. | No |
| Background Gradient | Controls the opacity of the overlay. | No |
Style Configuration¶
Design Mode¶
Toggle to display 1, 2, 3 and 5 in a more modern view.
Height¶
A slider to set the height of the web part.
Margin¶
A slider to set the margin between tiles.
Paging¶
When tiles have been configured as news the paging will be enabled and tiles that are set as news will be able to scrolled through using the previous and next arrows.
Source¶
Sets when clicking a tile the browser opens a new tab.
Text Position¶
Positions the information display on a tile at the top or bottom of a tile.
Background Gradient¶
Use this slider to choose the darkness of the background gradient overlayed on all News tiles.
Arrow Style¶
Select a theme or custom colours for the arrow and arrow background colour.
Accessibility¶
Accessibility Box¶
Toggle to display text on tiles in a accessibility box.
Accessibility Colour¶
Sets the colour of the background of the accessibility box and the font colour.
Config Repository¶
This web part supports use of the config repository, to allow users to save and load configurations of web parts with ease.
Loading a config file will populate the web part properties with properties from the incoming file.
SharePoint¶
Saving to SharePoint allows collaboration between users in a tenant.
The path the file is saved to is tenant-name/Site Assets/Mercury Assets/webpart-name.json.
Permissions¶
To save a file to SharePoint, edit permissions are required on the root Site Assets library.
To load a file from SharePoint, read permissions are required on the root Site Assets library.
OneDrive¶
Saving to OneDrive allows a user to save a file locally, this is the best option when a user does not have the required permissions to save to SharePoint.
The path the file is saved to is Mercury Assets/webpartname.json.