Detailed Members Widget enhancement

This Detailed Members Widget enhancement allows you to customize the Members widget to display additional information. Any or all of the following information can be changed in a Members widget in any layout other than thumbnail.

• Add job title
• Add work phone number and/or extension (with or without an icon)
• Add email address (with or without an icon)
• Hide status message

The additional information can be added to every widget globally, to only widgets on a specific page or page section, or individual widgets.

Sections in this article:

• Considerations
• Set up the enhancement
• Use the enhancement

Considerations

Keep in mind the following when using this enhancement: 

• Putting too much info in a small layout can clutter a widget.
• In the Tile view, since each entry has a fixed height that does not expand to fit the content, only one piece of extra information should be added, or at most two if the status message is also hidden.
• Only the fields listed above can be added; if phone numbers or job titles are stored in a non-default field, they will not appear in the Members widget.
• If more than 200 users are loaded on a page, only the first 200 will have the extra fields displayed. (Though the status will still be hidden if applicable.)
• A search API endpoint is called every time a page loads with an enhanced Members widget, which can result in skewed search reports. If the data from these searches needs to be filtered out of reports, the affected calls will always search for a comma-separated list of namespaces, making them relatively identifiable.

Set up the enhancement

To enable the enhancement for the first time, follow the steps below. To request this enhancement to be enabled on your site by our Professional Services team, complete and submit an Enhancement Request Form.

Add enhancement code to the digital workplace header

Add the following code to the header of your digital workplace:

<script src="https://enhancementsprod.blob.core.windows.net/enhancements/detailed-members-widget/detailed-members-widget.js"></script>

For instructions on how to navigate to your header, see Accessing the Header page.

Use the enhancement

Once the enhancement has been enabled, you can add the custom details to Members widgets by applying the classes below. Remove the corresponding classes from the affected widgets or rows to remove the custom information.

How you apply these classes depends on what scope you want them to have:

• Individual Members widgets: Place classes in the provided field on the widget's appearance tab. For more information on how to do this, see Applying custom CSS to widgets.
• Members widgets within a page section: Place classes in the provided field at the top of a page row. For more information on how to do this, see Applying custom CSS to page rows.
• All Members widgets on a page: Add the code snippet below to the JavaScript section of a page's Advanced page and replace the example classes ("add-work-phone", "with-icons") with the ones that you want.
• All Members widgets in the digital workplace: Add the code snippet below to the digital workplaces header (Accessing the Header page) and replace the example classes ("add-work-phone","with-icons") with the ones that you want.

Use and modify this code snippet when you want to affect all Members widgets in the digital workplace or all Members widgets on a page:

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
    var contentInner = document.getElementById('content-inner');
    contentInner.classList.add("extra-info","add-work-phone","with-icons");  
membersWidgetAddInfo();     
});
</script>