SettingsFeaturesSearch ExperienceSearch configurationVertical configurationSuggested content designs
Suggested content designs
ℹ️
Audience: This article is intended for Syntphony admins
Suggested content designs allow Syntphony admins to create and customize design templates specifically for displaying suggested content sections within the search experience. These designs enhance the visual appeal and usability of suggested content, making it easier for users to discover relevant information.
Examples of suggested content designs
Here are some examples of suggested content designs that can be created:
News
preview
json
{
"type": "Card",
"onClick": {
"type": "OpenUrlNewTab",
"url": "@eval({urls.interactivePreviewUrl} || {urls.detailUrl})",
"setView": "@eval({contentType} === 'TogoDocuments' || {contentType} === 'TogoApplications')"
},
"style": {
"width": "100%",
"background": "none",
"padding": "8px 16px",
"border": "@eval('1px solid ' + window?.__themeState__?.theme?.neutralQuaternary)",
"borderRadius": "4px",
"minWidth": "156px",
"maxWidth": "337px",
"height": "56px",
"justifyContent": "center",
"&:hover": {
"boxShadow": "0px 6.4px 14.4px 0px #00000021"
}
},
"verticalSeparatorWidth": "12px",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "ColumnSet",
"style": {
"alignItems": "center"
},
"columns": [
{
"type": "Column",
"horizontalSeparator": false,
"items": [
{
"type": "Icon",
"visible": "@eval({contentTypeBase} === 'Document' || !{urls.previewUrl})",
"fileExtension": "{fileExtension}",
"name": "@eval({fileExtension} === 'aspx' ? 'News' : {contentTypeBase} === 'Community' ? 'Group' : {contentTypeBase} === 'Application' ? 'OEM' : {contentTypeBase} === 'Folder' ? 'Folder' : {contentTypeBase} === 'Announcement' && 'Megaphone')",
"horizontalSeparator": false,
"style": {
"color": "@eval(window?.__themeState__?.theme?.themePrimary)",
"fontSize": "32px",
"width": "32px",
"height": "32px"
}
},
{
"type": "Image",
"url": "{urls.previewUrl}",
"visible": "@eval({urls.previewUrl} && {contentTypeBase} !== 'Document')",
"fallbackImageUrl": "",
"resolution": 1,
"horizontalSeparator": false,
"style": {
"width": "32px",
"height": "32px",
"objectFit": "cover",
"borderRadius": "20px",
"border": "@eval('1px solid ' + window?.__themeState__?.theme?.neutralQuaternaryAlt)"
}
}
]
},
{
"type": "Column",
"style": {
"flex": 1,
"gap": 2
},
"items": [
{
"type": "TextBlock",
"horizontalSeparator": false,
"text": "@eval({contentTypeBase} != 'Document' ? {title} : ({fileName} || {title}))",
"maxLines": 1,
"style": {
"fontSize": "14px",
"fontWeight": 700
}
},
{
"type": "TextBlock",
"horizontalSeparator": false,
"maxLines": 1,
"text": "{siteTitle}",
"style": {
"color": "@eval(window?.__themeState__?.theme?.neutralSecondary)",
"fontSize": "12px"
},
"visible": "{siteTitle}",
"onClick": {
"type": "OpenUrlNewTab",
"url": "{urls.siteUrl}"
}
}
]
}
]
}
]
}
]
}
]
}sample data
{
"uniqueId": "966814af-f588-4d2a-b379-655ddbcef916",
"contentType": "TogoNews",
"contentTypeBase": "Page",
"title": "Innovation Newsletter",
"modifiedDate": "2025-06-30T15:25:28",
"siteTitle": "Global",
"siteId": "126db9f8-961b-410c-9bec-7b36a2dc48cc",
"fileExtension": "aspx",
"urls": {
"siteUrl": "https://everistogopre.sharepoint.com/sites/global",
"detailUrl": "https://everistogopre.sharepoint.com/sites/global/SitePages/InnovationNewsletter.aspx",
"previewUrl": "",
"interactivePreviewUrl": "",
"downloadUrl": "https://everistogopre.sharepoint.com/sites/global/SitePages/InnovationNewsletter.aspx",
"contentPageUrl": "",
"fileLocation": "",
"fileDirectories": "",
"relativeListUrl": "",
"siteLogoUrl": ""
}
}Document
preview
json
{
"type": "Card",
"onClick": {
"type": "OpenUrlNewTab",
"url": "@eval({urls.interactivePreviewUrl} || {urls.detailUrl})",
"setView": "@eval({contentType} === 'TogoDocuments' || {contentType} === 'TogoApplications')"
},
"style": {
"width": "100%",
"background": "none",
"padding": "8px 16px",
"border": "@eval('1px solid ' + window?.__themeState__?.theme?.neutralQuaternary)",
"borderRadius": "4px",
"minWidth": "156px",
"maxWidth": "337px",
"height": "56px",
"justifyContent": "center",
"&:hover": {
"boxShadow": "0px 6.4px 14.4px 0px #00000021"
}
},
"verticalSeparatorWidth": "12px",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "ColumnSet",
"style": {
"alignItems": "center"
},
"columns": [
{
"type": "Column",
"horizontalSeparator": false,
"items": [
{
"type": "Icon",
"visible": "@eval({contentTypeBase} === 'Document' || !{urls.previewUrl})",
"fileExtension": "{fileExtension}",
"name": "@eval({fileExtension} === 'aspx' ? 'News' : {contentTypeBase} === 'Community' ? 'Group' : {contentTypeBase} === 'Application' ? 'OEM' : {contentTypeBase} === 'Folder' ? 'Folder' : {contentTypeBase} === 'Announcement' && 'Megaphone')",
"horizontalSeparator": false,
"style": {
"color": "@eval(window?.__themeState__?.theme?.themePrimary)",
"fontSize": "32px",
"width": "32px",
"height": "32px"
}
},
{
"type": "Image",
"url": "{urls.previewUrl}",
"visible": "@eval({urls.previewUrl} && {contentTypeBase} !== 'Document')",
"fallbackImageUrl": "",
"resolution": 1,
"horizontalSeparator": false,
"style": {
"width": "32px",
"height": "32px",
"objectFit": "cover",
"borderRadius": "20px",
"border": "@eval('1px solid ' + window?.__themeState__?.theme?.neutralQuaternaryAlt)"
}
}
]
},
{
"type": "Column",
"style": {
"flex": 1,
"gap": 2
},
"items": [
{
"type": "TextBlock",
"horizontalSeparator": false,
"text": "@eval({contentTypeBase} != 'Document' ? {title} : ({fileName} || {title}))",
"maxLines": 1,
"style": {
"fontSize": "14px",
"fontWeight": 700
}
},
{
"type": "TextBlock",
"horizontalSeparator": false,
"maxLines": 1,
"text": "{siteTitle}",
"style": {
"color": "@eval(window?.__themeState__?.theme?.neutralSecondary)",
"fontSize": "12px"
},
"visible": "{siteTitle}",
"onClick": {
"type": "OpenUrlNewTab",
"url": "{urls.siteUrl}"
}
}
]
}
]
}
]
}
]
}
]
}sample data
{
"uniqueId": "966814af-f588-4d2a-b379-655ddbcef917",
"contentType": "TogoDocuments",
"contentTypeBase": "Document",
"title": "Operational Model",
"modifiedDate": "2025-05-30T15:25:28",
"siteTitle": "Syntphony",
"siteId": "126db9f8-961b-410c-9bec-7b36a2dc48cb",
"fileExtension": "pptx",
"urls": {
"siteUrl": "https://everistogopre.sharepoint.com/sites/global",
"detailUrl": "https://everistogopre.sharepoint.com/sites/global/SitePages/InnovationNewsletter.aspx",
"previewUrl": "",
"interactivePreviewUrl": "https://everistogopre.sharepoint.com/Sites/AlexG/_layouts/15/Doc.aspx?sourcedoc=%7Bf5610427-9d9d-47a3-aa72-82313d746e6c%7D&action=view",
"downloadUrl": "https://everistogopre.sharepoint.com/sites/global/SitePages/InnovationNewsletter.aspx",
"contentPageUrl": "",
"fileLocation": "",
"fileDirectories": "",
"relativeListUrl": "",
"siteLogoUrl": ""
}
}Application
preview
json
{
"type": "Card",
"onClick": {
"type": "OpenUrlNewTab",
"url": "@eval({urls.interactivePreviewUrl} || {urls.detailUrl})",
"setView": "@eval({contentType} === 'TogoDocuments' || {contentType} === 'TogoApplications')"
},
"style": {
"width": "100%",
"background": "none",
"padding": "8px 16px",
"border": "@eval('1px solid ' + window?.__themeState__?.theme?.neutralQuaternary)",
"borderRadius": "4px",
"minWidth": "156px",
"maxWidth": "337px",
"height": "56px",
"justifyContent": "center",
"&:hover": {
"boxShadow": "0px 6.4px 14.4px 0px #00000021"
}
},
"verticalSeparatorWidth": "12px",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "ColumnSet",
"style": {
"alignItems": "center"
},
"columns": [
{
"type": "Column",
"horizontalSeparator": false,
"items": [
{
"type": "Icon",
"visible": "@eval({contentTypeBase} === 'Document' || !{urls.previewUrl})",
"fileExtension": "{fileExtension}",
"name": "@eval({fileExtension} === 'aspx' ? 'News' : {contentTypeBase} === 'Community' ? 'Group' : {contentTypeBase} === 'Application' ? 'OEM' : {contentTypeBase} === 'Folder' ? 'Folder' : {contentTypeBase} === 'Announcement' && 'Megaphone')",
"horizontalSeparator": false,
"style": {
"color": "@eval(window?.__themeState__?.theme?.themePrimary)",
"fontSize": "32px",
"width": "32px",
"height": "32px"
}
},
{
"type": "Image",
"url": "{urls.previewUrl}",
"visible": "@eval({urls.previewUrl} && {contentTypeBase} !== 'Document')",
"fallbackImageUrl": "",
"resolution": 1,
"horizontalSeparator": false,
"style": {
"width": "32px",
"height": "32px",
"objectFit": "cover",
"borderRadius": "20px",
"border": "@eval('1px solid ' + window?.__themeState__?.theme?.neutralQuaternaryAlt)"
}
}
]
},
{
"type": "Column",
"style": {
"flex": 1,
"gap": 2
},
"items": [
{
"type": "TextBlock",
"horizontalSeparator": false,
"text": "@eval({contentTypeBase} != 'Document' ? {title} : ({fileName} || {title}))",
"maxLines": 1,
"style": {
"fontSize": "14px",
"fontWeight": 700
}
},
{
"type": "TextBlock",
"horizontalSeparator": false,
"maxLines": 1,
"text": "{siteTitle}",
"style": {
"color": "@eval(window?.__themeState__?.theme?.neutralSecondary)",
"fontSize": "12px"
},
"visible": "{siteTitle}",
"onClick": {
"type": "OpenUrlNewTab",
"url": "{urls.siteUrl}"
}
}
]
}
]
}
]
}
]
}
]
}sample data
{
"uniqueId": "966814af-f588-4d2a-b379-655ddbcef918",
"contentType": "TogoApplications",
"contentTypeBase": "Application",
"title": "Help Desk",
"modifiedDate": "2025-05-10T15:25:28",
"siteTitle": "Support",
"siteId": "126db9f8-961b-410c-9bec-7b36a2dc46cb",
"fileExtension": "",
"urls": {
"siteUrl": "https://everistogopre.sharepoint.com/sites/global",
"detailUrl": "https://everistogopre.sharepoint.com/sites/global/SitePages/InnovationNewsletter.aspx",
"previewUrl": "",
"interactivePreviewUrl": "",
"downloadUrl": "https://everistogopre.sharepoint.com/sites/global/SitePages/InnovationNewsletter.aspx",
"contentPageUrl": "",
"fileLocation": "",
"fileDirectories": "",
"relativeListUrl": "",
"siteLogoUrl": ""
}
}Community
preview
json
{
"type": "Card",
"onClick": {
"type": "OpenUrlNewTab",
"url": "{urls.detailUrl}"
},
"style": {
"width": "100%",
"background": "white",
"padding": "16px",
"border": "@eval('1px solid ' + window?.__themeState__?.theme?.neutralQuaternary)",
"borderRadius": "4px",
"minWidth": "156px",
"maxWidth": "337px",
"height": "95px",
"justifyContent": "center",
"&:hover": {
"boxShadow": "0px 6.4px 14.4px 0px #00000021"
}
},
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "{urls.previewUrl}",
"fallbackImageUrl": "",
"resolution": 1,
"style": {
"width": "36px",
"height": "36px",
"objectFit": "cover",
"borderRadius": "20px",
"border": "@eval('1px solid ' + window?.__themeState__?.theme?.neutralQuaternaryAlt)"
}
},
{
"type": "TextBlock",
"text": "{title}",
"maxLines": 1,
"style": {
"fontSize": "14px",
"fontWeight": 700
}
}
]
}
]
}
]
}sample data
{
"uniqueId": "966814af-f588-4d2a-b379-655ddbcef318",
"contentType": "TogoCommunities",
"contentTypeBase": "Community",
"title": "Syntphony",
"modifiedDate": "2025-05-13T15:25:28",
"description": "",
"fileExtension": "",
"urls": {
"siteUrl": "https://everistogopre.sharepoint.com/sites/global",
"detailUrl": "https://everistogopre.sharepoint.com/sites/global/SitePages/InnovationNewsletter.aspx",
"previewUrl": "https://everistogopre.sharepoint.com/sites/global/_api/siteiconmanager/getsitelogo",
"interactivePreviewUrl": "",
"downloadUrl": "https://everistogopre.sharepoint.com/sites/global/SitePages/InnovationNewsletter.aspx",
"contentPageUrl": "",
"fileLocation": "",
"fileDirectories": "",
"relativeListUrl": "",
"siteLogoUrl": ""
}
}People
preview
json
{
"type": "Card",
"onClick": {
"type": "OpenUrlNewTab",
"url": "{pageDetailUrl}"
},
"style": {
"width": "100%",
"background": "white",
"padding": "8px 16px",
"border": "@eval('1px solid ' + window?.__themeState__?.theme?.neutralQuaternary)",
"borderRadius": "4px",
"minWidth": "156px",
"maxWidth": "337px",
"height": "95px",
"justifyContent": "center",
"&:hover": {
"boxShadow": "0px 6.4px 14.4px 0px #00000021"
}
},
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"url": "{picture}",
"fallbackImageUrl": "",
"resolution": 1,
"livePersonaCard": {
"displayName": "{name}",
"email": "{email}",
"loginName": "{loginName}"
},
"style": {
"width": "36px",
"height": "36px",
"objectFit": "cover",
"borderRadius": "20px",
"border": "@eval('1px solid ' + window?.__themeState__?.theme?.neutralQuaternaryAlt)"
}
},
{
"type": "TextBlock",
"horizontalSeparator": false,
"text": "{name}",
"maxLines": 1,
"style": {
"fontSize": "14px",
"fontWeight": 700
}
},
{
"type": "TextBlock",
"horizontalSeparator": false,
"text": "{department}",
"maxLines": 1,
"style": {
"fontSize": "12px",
"color": "@eval(window?.__themeState__?.theme?.neutralSecondary)"
}
}
]
}
]
}
]
}sample data
{
"uniqueId": "5a8a14db-ac89-4926-a555-a3af8d53bb20",
"account": "xavier.delgado.anglada@emeal.nttdata.com",
"loginName": "xavier.delgado.anglada@emeal.nttdata.com",
"picture": "/_layouts/15/userphoto.aspx?size=M&accountname=xavier.delgado.anglada@emeal.nttdata.com",
"name": "Xavier Delgado Anglada",
"email": "xavier.delgado.anglada@emeal.nttdata.com",
"entityType": "user",
"pageDetailUrl": "/sites/togo/SitePages/PersonDetail.aspx?accountname=xavier.delgado.anglada@emeal.nttdata.com",
"department": "Products",
"jobTitle": "",
"location": "",
"audienceDepartment": "",
"audienceLocation": "",
"mobile": "",
"phone": "",
"applications": "",
"follow": false,
"fields": {
"DNI": null,
"dni": null,
"UserDNI": null,
"dniUser": null
}
}External
preview
json
{
"type": "Card",
"onClick": {
"type": "OpenUrlNewTab",
"url": "{fields.url}"
},
"style": {
"width": "100%",
"background": "none",
"padding": "8px 16px",
"border": "@eval('1px solid ' + window?.__themeState__?.theme?.neutralQuaternary)",
"borderRadius": "4px",
"minWidth": "156px",
"maxWidth": "337px",
"height": "56px",
"justifyContent": "center",
"&:hover": {
"boxShadow": "0px 6.4px 14.4px 0px #00000021"
}
},
"verticalSeparatorWidth": "12px",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "ColumnSet",
"style": {
"alignItems": "center"
},
"columns": [
{
"type": "Column",
"horizontalSeparator": false,
"items": [
{
"type": "Icon",
"visible": "@eval(!{fields.imageUrl})",
"name": "Globe",
"horizontalSeparator": false,
"style": {
"color": "@eval(window?.__themeState__?.theme?.themePrimary)",
"fontSize": "32px"
}
},
{
"type": "Image",
"url": "{fields.imageUrl}",
"visible": "{fields.imageUrl}",
"fallbackImageUrl": "",
"resolution": 1,
"horizontalSeparator": false,
"style": {
"width": "32px",
"height": "32px",
"objectFit": "cover",
"borderRadius": "20px",
"border": "@eval('1px solid ' + window?.__themeState__?.theme?.neutralQuaternaryAlt)"
}
}
]
},
{
"type": "Column",
"style": {
"flex": 1,
"gap": 2
},
"items": [
{
"type": "TextBlock",
"horizontalSeparator": false,
"text": "{fields.title}",
"maxLines": 1,
"style": {
"fontSize": "14px",
"fontWeight": 700
}
},
{
"type": "TextBlock",
"visible": "{fields.excerpt}",
"horizontalSeparator": false,
"maxLines": 1,
"text": "{fields.excerpt}",
"style": {
"color": "@eval(window?.__themeState__?.theme?.neutralSecondary)",
"fontSize": "12px"
}
}
]
}
]
}
]
}
]
}
]
}sample data
{
"fields": {
"uniqueID": "9690d3e5-5f78-e5ad-bb89-a85374d2df3b",
"title": "Build your first Microsoft 365 app using SPFx",
"excerpt": "Learn how to build your first Microsoft 365 app using the SharePoint Framework (SPFx) and deploy it to your SharePoint Online environment.",
"date": "10/31/2022 7:44:59 AM",
"url": "https://blog.mastykarz.nl/build-first-microsoft-365-app-using-spfx",
"imageUrl": ""
}
}Last updated on