Skip to content

Results options

  • Results per page - controls how many results appear on each page. Disabling the paging feature will disable this option.

  • Result profile image - controls whether or not the profile image is shown on each result card.

  • Result details - controls whether or not a person's details is shown on each result card.

  • Result icons - controls whether or not a row of icons is shown on each result card.

Result card size

This determines how many details appear on the result cards.

  • Compact - 1 detail
  • Standard - 3 details
  • Detailed - 6 details
  • Custom - Use the custom result settings

Custom result card options

Here you can define a custom template model for the result card.

For example:

{
  "details": [
    {
      "content": "{displayName}",
      "href": "",
      "showEmptyProperties": true,
      "className": "detailPrimary"
    },
    {
      "content": "{jobTitle}",
      "href": "",
      "showEmptyProperties": true,
      "className": "detailSecondary"
    },
    {
      "content": "Office location: {officeLocation}",
      "href": "",
      "showEmptyProperties": true,
      "className": "detailSecondary"
    }
  ],
    "icons": [
    {
      "href": "mailto:{mail}",
      "hoverText": "Send email",
      "imageSource": "",
      "uiFabricIconName": "Mail",
      "showEmptyProperties": true,
      "className": "mailIcon"
    },
    {
      "href": "https://teams.microsoft.com/l/chat/0/0?users={mail}",
      "hoverText": "Start Teams chat",
      "imageSource": "https://iconstore.com/coolicon.svg",
      "uiFabricIconName": "",
      "showEmptyProperties": true,
      "className": "chatIcon"
    }
  ]
}

Note

Result card options must be configured using this structure.

Details

Details are lines of text on the result card which usually include information about the person.

Each object in the array represents a single detail. To add a detail to the card, insert a new detail object into the "details" array.

Detail object:

{
  "content": "{displayName}",
  "href": "",
  "showEmptyProperties": true,
  "className": "detailPrimary"
}

User properties can be accessed by surrounding the property name with brackets:

{displayName}

The following properties are accessible:

  • displayName
  • jobTitle
  • department
  • mail (email address)
  • phone
  • officeLocation

Options:

  • content - the content to display in the detail.

  • href - a link that opens when the detail is clicked.

  • showEmptyProperties - when set to true, details containing content where the user property has missing data will appear empty on the result card. When set to false, details with missing user data are removed from the card.

  • className - the name of a custom CSS class which is defined in Custom result card styles.

Icons

Icons are a row of clickable icons on the result card which usually link to an external resource such as Teams.

Each object in the array represents a single icon. To add a new icon to the card, insert a new icon object into the "icons" array.

Icon object:

{
  "href": "",
  "hoverText": "",
  "imageSource": "",
  "uiFabricIconName": "",
  "showEmptyProperties": true,
  "className": ""
}

User properties can be accessed the same method as in the details.

Options:

  • href - a link that opens when the icon is clicked.

  • hoverText - text that appears when the mouse hovers over the icon.

  • imageSource - the URL of the icon image.

  • uiFabricIconName - the name of an Office UI Fabric icon to use as an alternative to an image URL. The UI Fabric icons can be found here.

  • showEmptyProperties - when set to true, icons containing a link where the user property has missing data will appear on the result card. When set to false, icons with missing user data are removed from the card.

  • className - the name of a custom CSS class which is defined in Custom result card styles.

Note

When using the imageSource option, the icon height and width must be specified in a custom CSS class.

Custom result card styles

Here you can define CSS classes to apply to the details and icons in the result card.

For example:

.detailPrimary {
    margin: 0;
    font-size: 18px;
    color: rgb(50, 49, 48);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

The class is applied with the className option in Custom result card options:

"className": "detailPrimary"

Media queries can be applied as below:

@media screen and (min-width: 600px) {
  .detailPrimary {
    font-size: 20px;
  }
}

Web fonts can be imported and applied as below:

@import url('https://fonts.googleapis.com/css?family=Roboto');

.detailPrimary {
  font-family: 'Roboto';
}