SharePoint List Formatting
Back to column formats
Column formattingSharePoint Online

Assign to Me

This sample demonstrates the use of the setValue action of customRowAction to set the current logged-in user in the Person column.

Get this format View on GitHub

Shared by Tetsuya Kawahara
Updated Aug 13, 2024

Assign to Me formatting preview
Sample preview · View original animation

Copy. Apply. Make it yours.

Get this format

4 definitions

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "margin-top": "2px",
        "margin-bottom": "2px"
      },
      "children": [
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-wrap": "wrap"
              },
              "children": [
                {
                  "elmType": "div",
                  "forEach": "_person in @currentField",
                  "style": {
                    "display": "=if(@currentField,'flex','none')",
                    "flex-direction": "row",
                    "align-items": "center",
                    "white-space": "nowrap",
                    "border-radius": "14px",
                    "margin": "4px"
                  },
                  "attributes": {
                    "class": "=if([$_person.email]==@me,'ms-bgColor-themeLighter ms-fontColor-themeDarker','ms-bgColor-neutralLight ms-fontColor-neutralPrimary')"
                  },
                  "defaultHoverField": "[$_person]",
                  "children": [
                    {
                      "elmType": "img",
                      "style": {
                        "width": "24px",
                        "height": "24px",
                        "border-radius": "50%"
                      },
                      "attributes": {
                        "src": "=getUserImage([$_person.email],'small')"
                      }
                    },
                    {
                      "elmType": "div",
                      "txtContent": "[$_person.title]",
                      "style": {
                        "padding-left": "6px",
                        "padding-right": "10px"
                      },
                      "attributes": {
                        "class": "ms-fontSize-s"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          "elmType": "div",
          "txtContent": "+ Assign to Me",
          "style": {
            "display": "=if(indexOf(@currentField.email,@me)>-1,'none','flex')",
            "align-items": "center",
            "margin": "3px",
            "cursor": "pointer"
          },
          "attributes": {
            "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
          },
          "customRowAction": {
            "action": "setValue",
            "actionInput": {
              "InternalNameOfPersonColumn": "=appendTo(@currentField.email,@me)"
            }
          }
        }
      ]
    }
  ]
}
View sourceLink to this definitionperson-assign-to-me-highlight-multi.json

From the contributor

How to use this sample

Summary

This sample demonstrates the use of the setValue action of customRowAction to set the current logged-in user in the Person column.

screenshot of the sample

When using person-assign-to-me-highlight-single.json and person-assign-to-me-highlight-multi.json, the current user has different background and text colors than the other users to stand out . This is implemented using @me. The background and text colors use the ms-bgColor-themeLighter and ms-fontColor-themeDarker classes, which change to match the site's theme color.

[!NOTE]
If you use this sample, you need to set the actionInput to the internal name of the Person column to be updated.
screenshot of the json setting

View requirements

  • This format can be applied to a Person column.

Sample

Solution Author(s)
person-assign-to-me.json Tetsuya Kawahara
person-assign-to-me-multi.json Tetsuya Kawahara
person-assign-to-me-highlight-single.json Tetsuya Kawahara
person-assign-to-me-highlight-multi.json Tetsuya Kawahara

Version history

Version Date Comments
1.0 May 11, 2023 Initial release
1.1 April 26, 2024 Added person-assign-to-me-highlight-single.json and person-assign-to-me-highlight-multi.json
1.2 April 28, 2024 Added hover effect
1.3 August 13, 2024 Fixed the size of the user's image

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Keep exploring

More formats like this

Missing Information Callout

The Missing Information Callout column formatter provides a clear, accessible visual indicator when a SharePoint list column contains no value.

Explore format

Publishing Status

Sample contains an example of using the modulo math expression for highlighting 'published', 'published with draft' and 'draft with no published versions' of pages

Explore format

Country Flag

This sample demonstrates displaying the flag of the country selected in the single selection SharePoint choice column.

Explore format