487 Views
7 minute read
Categories
Microsoft 365

How to Display Additional & Custom Properties in MS Office 365 Profile Card?

Introduction:

In this blog, we will take you through ways to make additional attributes visible in Profile card and how to add custom attributes to Profile card using Graph API. Additionally, we will see how to set values of those properties for a particular user, because if the property does not have values, it will not be visible in the Profile Card even if it is made visible using Graph API. 

Profile Card- An Overview 

In Outlook or any Microsoft Office apps and SharePoint and any other services, if you select someone’s name or picture, you can see a card called Profile Card. Sometimes profile card is also referred to as a Contact Card or People Card.  

How to Display Additional & Custom Properties in MS Office 365 Profile Card

This card contains the users’ name, profile picture, contact details, organizational details, LinkedIn profile, etc. If you click the “Show more” link, you can see more details in a larger view. 

How to Display Additional & Custom Properties in MS Office 365 Profile Card

Once you log in with the admin account into the Azure portal, go to Azure Active Directory users and look at the information of a user in the properties section, you can see the same information and even more.  

How to Display Additional & Custom Properties in MS Office 365 Profile Card

You can observe that all the information that is available in the portal is not visible on the Profile card.  

Profile Card with Graph API 

So, you may want to display some additional attributes in the user profile cards like Job title or Company, etc. Or even you may want to display some custom properties like Cost center or Employee Id, etc. in the user profile cards, depending on the requirement of your organization. Both you can do by updating the profileCardProperty resource using Microsoft Graph API or using Microsoft Graph Explorer. 

How to Display Additional & Custom Properties in MS Office 365 Profile Card

In the above image, properties displayed inside the green boxes are existing additional properties that are made visible, and the properties inside the orange box are Custom properties. 

Things to know 

Before you proceed, few things you must know about the process- 

  • You need an account with the tenant administrator or global administrator role as only admins can do these changes. 
  • Changes may take up to 24 to 48 hours to reflect in the profile cards. 
  • Existing properties have specific internal names while custom properties come under “onPremisesExtensionAttributes” as “extensionAttributes.” 
  • There can be a maximum of 15 custom properties, extensionAttributes1 to extensionAttributes15. 
  • Corresponding supported values for the directoryPropertyName property of the profileCardProperty resource are “customAttribute1” to “customAttribute15”. 
  • Additional properties display in the Contact section of the profile card in Microsoft 365. 

Set up Graph Explorer 

Go to: https://developer.microsoft.com/en-us/graph/graph-explorer 

Login with the admin account. 

Provide Microsoft Graph Explorer with the following permissions: 

User.ReadWrite 

User.ReadWriteAll 

Step 1:  Make existing additional attributes visible in the Profile card 

For example, suppose we want to show the “UserPrincipalName” property in the profile card.

URL: https://graph.microsoft.com/beta/organization/<tenant-id>/settings/profileCardProperties 

Version: Beta 

Method: POST 

Request Header: Content-type: application/json 

Request Body: 

{ 

    "directoryPropertyName": "UserPrincipalName" 

} 

For example

How to Display Additional & Custom Properties in MS Office 365 Profile Card
Step 2: Add a custom attribute to the Profile card 

Suppose we want to add a custom attribute named “Workday Employee Id” 

URL: https://graph.microsoft.com/beta/organization/<tenant-id>/settings/profileCardProperties 

Version: Beta 

Method: POST 

Request Header: Content-type: application/json 

Request Body: 

{ 

    "directoryPropertyName": "customAttribute1", 

    "annotations": [ 

        { 

            "displayName": "Workday Employee Id", 

            "localizations": [] 

        } 

    ] 

} 

For example

How to Display Additional & Custom Properties in MS Office 365 Profile Card
Step 3: Check the additional attributes and added custom attributes for a tenant 

URL: https://graph.microsoft.com/beta/organization/<tenant-id>/settings/profileCardProperties 

Version: Beta 

Method: GET 

How to Display Additional & Custom Properties in MS Office 365 Profile Card

From the above example, we can see that one additional property i.e., “UserPrincipalName” is made visible and one custom property i.e., “WorkDay Employee Id” is added to profileCardPropertiess. 

Step 4: Get user ids, displayNames, UserPrincipalNames, jobTitle, onPremisesExtensionAttributes of all users of that tenant 

URL: https://graph.microsoft.com/v1.0/users?$select=id,displayName,UserPrincipalNames, jobTitle,onPremisesExtensionAttributes 

Version: v1.0 

Method: GET 

How to Display Additional & Custom Properties in MS Office 365 Profile Card

Observe the values of the properties and note the id of any user whose profile card property values you want to update. 

Step 5: To update/set the value of the existing properties for a user 

URL: https://graph.microsoft.com/v1.0/users/<user-id> 

Version: v1.0 

Method: PATCH 

Request Header: Content-type: application/json 

Request Body: 

{ 

    "JobTitle": "Engineer" 

} 

For example

How to Display Additional & Custom Properties in MS Office 365 Profile Card

You can see the change in Azure AD (Active Directory) immediately. 

Step 6: To update/set value of custom attribute

URL: https://graph.microsoft.com/v1.0/users/<user-id> 

Version: v1.0 

Method: PATCH 

Request Header: Content-type: application/json 

Request Body: 

{ 

    "onPremisesExtensionAttributes": { 

        "extensionAttribute1": " 0ec2191d-2d1f-4797-99ba-21f46bea8a61" 

    } 

} 

For example

How to Display Additional & Custom Properties in MS Office 365 Profile Card

Conclusion

Now if you check the user properties again as described in step 4, you can see the updated values. 

How to Display Additional & Custom Properties in MS Office 365 Profile Card

You will be able to see the newly added properties along with their values in the Profile card after 24 to 48 hours. 

You can check the updated values of the custom properties from the admin center too. Go to Microsoft admin center. Search the user from Active users and select the user to open its property panel. 

How to Display Additional & Custom Properties in MS Office 365 Profile Card

Then select the ‘Edit Exchange Properties’ link under ’Mail’ tab. The Following view will open in a new window. If you select the ‘More options…’ link, you can see the values of custom properties.

How to Display Additional & Custom Properties in MS Office 365 Profile Card
Useful links: 

https://docs.microsoft.com/en-us/graph/add-properties-profilecard

https://docs.microsoft.com/en-us/graph/extensibility-overview

We hope you found this blog useful in learning how to make additional attributes visible in Profile card & add custom attributes in Profile card using Graph API.  

So far so good I suppose, it is to be able to extend and customise profile card properties. But as always, people would demand more and ask few questions to get more out of it. Look at some of these. 

  1. Is it possible to render one of the custom attributes as a hyperlink instead of just plain text? There may be a use case to send users to an Office mapping and way finding solution to see where someone sits. 
  2. Are the custom attributes seamlessly visible in Outlook Web, local Outlook and in Teams? 
  3. Does Microsoft Search work on the custom attributes?  
  4. Is it possible to add a new tab to the profile card?
  5. Is it possible to change the associated icons with the custom attributes?  

I would be working on to find out more on these lines and please stay tuned. 

Priyanka Sen

About Priyanka Sen

Priyanka is a front-end development specialist. She has a decade of experience in end-to-end web and mobile application development and client management. She has expertise in React JS, React Native, JavaScript, TypeScript, Node JS, SPFx, SharePoint, custom webpart development, SPFx extensions development. She also has sound knowledge of Objective C, Swift, Unity 3D, IOS SDK, Cocoa Pod, MQTT, BLE, Apple Push Notification, In-App Purchase, Crashlytics, CICD, Firebase etc.

Prior to joining Netwoven, she was working with Bit Canny as a senior mobile application developer.

Priyanka did her Masters in Computer Application from Netaji Subhash Engineering College under WBUT in 2012.

Her passion is to learn new tech-skills. She loves to write technical blogs on various programming challenges. During her leisure time, she listens to music and paints.

LinkedinTwitterFacebook

Leave a Reply

Your email address will not be published. Required fields are marked *




Enter Captcha Here :