What is Mosaic?
Mosaic is a widget in Jive for displaying content and text in a responsive layout. MOSAIC is designed to grab the attention of your users and enhance the look of any overview page in your community.
In Jive Mosaic clickable images are automatically rearranged and cropped to stack perfectly, no matter how wide or narrow the screen. Custom colour theme can also be set to match the jive community theme.
Mosaic in Jive
While migrating contents from Jive to SharePoint, we saw that there is a widget called Mosaic in the home page of Jive sites. This Mosaic widget is used for highlighting useful information with images and links.
Mosaic in SharePoint
The contents of the Mosaic widget of Jive are displayed in the SharePoint home page like this:
Promoted links web part for Mosaic
To display this Mosaic widget contents in SharePoint page we use a custom promoted links web part.
Custom promoted links web part is an SPFX web part which is created to fetch the data from a selected list by REST API and display them with images and links to contents. So before adding this web part we create a custom list named as ‘Mosaic’ and add the following columns.
Names and types of the columns added to the Mosaic list:
- BackgroundImageLocation : Hyperlink or Picture
- Description : Multiple lines of text
- LinkGroup : Single line of text
- LinkLocation : Multiple lines of text
- TileOrder : Number
Adding data to the list fields:
Title:
On the Title field, fill out the title of the list item.
BackgroundImageLocation:
- In the URL part of this hyperlink field specify the location or source of the image which you want to display. The image can reside in anywhere of your SharePoint environment like in any library or you can use an image which resides in an external environment.
- In the display text part of this field put a description or name of the image.
Description:
On the Description field put the description that appears when user hovers over the content in the home page. You can provide any description of what the content is about.
LinkGroup:
This field is used to group the items in different groups. For example, if for first three items we assign this field value as Top1 and next three items as Top2, then when the Top1 is selected in the web part properties the first three items will be displayed.
LinkLocation:
On this field put the URL of the location where the user will be taken when he or she clicks the content. That means this field contains the location where the content is navigated.
TileOrder:
On this field put a numeric value that lists the items in an order from left to right. For example, if 1 is assigned to item-1, 2 is assigned to item-2 then item-1 will appear first and item-2 will appear second from the left in a row of items.
A screenshot of the ‘Mosaic’ list is given below:
How to add the custom promoted links web part in SharePoint home page
- Edit the page where you want to display the mosaic content.
- Add the Promoted links webpart to the page.
- Edit the web part to set the following properties:
- Selected promoted links list: Mosaic
- Show Title: on
- Link Group Name: Top1(whatever group name you have entered in the linkGroup field in the Mosaic list)
- Launch Behavior: In page navigation
- Background image size: cover
- Tile Width: 200px
- If you do not want to attach any image with your mosaic content, then choose a tile background color from the web part property pane to match with your site theme.
- Save and publish the page.
To learn more about Netwoven’s industry-leading Jive to Microsoft 365 Migration solution, read our Datasheet.
For a comprehensive look into Netwoven’s Jive to Microsoft 365 solution, download our Solution Brief.
