Custom Name Formatting for Person Component.

[vipulSVJ]

Currently, the Person component in the Microsoft Graph Toolkit displays names in the format lastName, firstName. This feature request proposes adding the ability to customize the display format of names to accommodate different regional or organizational requirements. This customization would allow developers to format names as firstName lastName or other preferred styles.

Rationale The ability to customize name formatting is essential for aligning with various naming conventions used by organizations or regions. Different cultures and systems have different preferences for name display formats. By adding this feature, the toolkit would offer greater flexibility and ensure that applications built with it can meet specific design and cultural needs.

Preferred Solution Feature: Add a nameFormat attribute to the Person component. Description: The nameFormat attribute would allow developers to specify how names should be displayed. Possible Values: firstLast, lastFirst, firstLastInitial (where the initial of the last name is displayed), etc.

Example Usage:

<Person personQuery="user@domain.com" nameFormat="firstLast" />

In this example, the Person component would display the name as John Doe instead of Doe, John.

Design Mockup:

Current Display: Doe, John Proposed Display with nameFormat="firstLast": John Doe Additional Context Use Case: Companies operating in multiple countries or regions may need to display names in a format familiar to their users. This feature would help in providing a localized user experience.

[musale]

@vipulSVJ thank you for raising this issue. I would like to propose current mgt-person features that you can use to achieve this. In the User properties, we don't have the first name and last name. Instead, there is the surname (last name) and givenName (first name) https://learn.microsoft.com/en-us/graph/api/resources/user?view=graph-rest-1.0. With this, you can use mgt-person custom templates https://learn.microsoft.com/en-us/graph/toolkit/components/person?tabs=html#templates to customize the order of the names. For example:

<mgt-person user-id="2804bc07-1e1f-4938-9085-ce6d756a32d2" view="twolines"></mgt-person>

Then you template line 1 which has the name:

<mgt-person user-id="2804bc07-1e1f-4938-9085-ce6d756a32d2" view="twolines">
    <template data-type="line1">
        {{person.surname}}, {{person.givenName}}
    </template>
</mgt-person>

Let me know if this works for you.