Skip to Content
Releases1.18.0POST Deployment

POST Deployment v1.18.0

Update the suggested content cards in Search

MANDATORY

To display the new suggested content in the “All” search results correctly, update the designs of the four suggestion cards: Suggestion Community, Suggestion Content, Suggestion People and Suggestion External.

To update each design, follow these steps:

  1. Access Syntphony Settings (previously called TOGO Settings).
  2. Access the This Tenant menu.
  3. Access the Search section.
  4. In the Designs list, open the design of each card and replace its content with the corresponding code below.
  5. Click the arrow ← to return to the Designs list, and click Save.

Community card

Show design 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
				}
			  }
			]
		  }
		]
	  }
	]
  }

Content List

Show design 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}"
						}
					  }
					]
				  }
				]
			  }
			]
		  }
		]
	  }
	]
  }

Person Card

Show design 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)"
				}
			  }
			]
		  }
		]
	  }
	]
  }

External Card

Show design 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"
						}
					  }
					]
				  }
				]
			  }
			]
		  }
		]
	  }
	]
  }

NOTE: APPLY THIS SAME PROCEDURE TO ALL SUGGESTION CARD DESIGNS RELATED TO THIS FEATURE.

1.18.01.17.0