SharePoint List Formatting
Back to form formats
Form formattingSharePoint Online

Welcome Header

This sample demonstrates how to display Welcome message depending on time of day, display user profile image in Forms Header.

Get this format View on GitHub

Shared by André Lage
Updated Mar 14, 2023

Welcome Header formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 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.

Form header
Download JSON
{
  "elmType": "div",
  "style": {
    "border": "1px solid ",
    "padding": "10px"
  },
  "attributes": {
    "class": "sp-css-color-themePrimary sp-css-backgroundColor-themeLight"
  },
  "children": [
    {
      "elmType": "div",
      "txtContent": "=if(if(indexOf(toLocaleTimeString(@now)+';',';')==7,'0'+toLocaleTimeString(@now),toLocaleTimeString(@now))>'05:00:00' && if(indexOf(toLocaleTimeString(@now)+';',';')==7,'0'+toLocaleTimeString(@now),toLocaleTimeString(@now)) <'11:59:59' ,'Good morning, ',if(if(indexOf(toLocaleTimeString(@now)+';',';')==7,'0'+toLocaleTimeString(@now),toLocaleTimeString(@now))>'12:00:00' && if(indexOf(toLocaleTimeString(@now)+';',';')==7,'0'+toLocaleTimeString(@now),toLocaleTimeString(@now))<'20:00:00' ,'Good afternoon, ',if(if(indexOf(toLocaleTimeString(@now)+';',';')==7,'0'+toLocaleTimeString(@now),toLocaleTimeString(@now))>'20:00:00' ,'Good night, ','')))",
      "attributes": {
        "class": "ms-fontSize-24 ms-fontWeight-semibold"
      }
    },
    {
      "elmType": "img",
      "style": {
        "border-radius": "50%"
      },
      "attributes": {
        "src": "=getUserImage(@me, 's')"
      }
    },
    {
      "elmType": "div",
      "style": {
        "border-radius": "50%",
        "padding": "0 5px"
      },
      "txtContent": "=substring(replaceAll(@me,'.',' '),0,indexOf(replaceAll(@me,'.',' '),'@'))",
      "attributes": {
        "class": "ms-fontSize-12 ms-fontWeight-semibold"
      }
    }
  ]
}
View sourceLink to this definitionwelcome-header-24hours.json

From the contributor

How to use this sample

Summary

This sample demonstrates how to display Welcome message depending on time of day, display user profile image and display user name if formated in mail address (sample: user.1@[domain].com).

screenshot of the sample

Form requirements

Time format (12 Hours or 24 Hours)

Identify what regional settings are being used in site.

  • Normally the default configuration can be accessed on to Top right icon > Site informations > View all site settings > Regional Settings or Time format is managed by M365 administrator.

screenshot of the time format

How to implement

Access to list where customization will be apply, edit item, access top right options and select "Configure layout" and implement json for Header.

screenshot of the list form configuration

This information is important to use sample, since 12 hours uses 12:00:00 AM and 12:00:00 PM and 24 hours uses 0:00:00 to 24:00:00.

  • Based on this information (12 Hours/24 Hours) you can use sample json for testing.

Sample

Solution Author(s)
welcome-header.json Andre Lage
welcome-header-24hours.json Andre Lage

Version history

Version Date Comments
1.0 March 14, 2023 Initial release

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.