In a SharePoint Online list form, how to add a label or text to provide general guidance?

asked 2021-11-09T00:45:39.467+00:00
frob 3,826 Reputation points

Hi there

In a SharePoint Online list form, how to add a label or text on the top of the form, to provide general guidance?

Thanks.

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
5,980 questions
No comments
{count} votes

Accepted answer
  1. answered 2021-11-09T03:18:42.673+00:00
    JoyZ 17,886 Reputation points

    @frob ,

    To provide general guidance, we can configure the list form header as shown below:

    1. Go to the list or library for which you want to configure the form.
    2. Open an item to view the item details in the display form.
    3. At the top of the form, expand Edit Form icon and then select Configure layout:
      147576-image.png
    4. select Header in the Apply formatting to dropdown and paste following json:

    {
    "elmType": "div",
    "attributes": {
    "class": "ms-borderColor-neutralTertiary"
    },
    "style": {
    "width": "99%",
    "border-top-width": "0px",
    "border-bottom-width": "1px",
    "border-left-width": "0px",
    "border-right-width": "0px",
    "border-style": "solid",
    "margin-bottom": "16px"
    },
    "children": [
    {
    "elmType": "div",
    "style": {
    "display": "flex",
    "box-sizing": "border-box",
    "align-items": "center"
    },
    "children": [
    {
    "elmType": "div",
    "attributes": {
    "iconName": "Group",
    "class": "ms-fontSize-42 ms-fontWeight-regular ms-fontColor-themePrimary",
    "title": "Details"
    },
    "style": {
    "flex": "none",
    "padding": "0px",
    "padding-left": "0px",
    "height": "36px"
    }
    }
    ]
    },
    {
    "elmType": "div",
    "attributes": {
    "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
    },
    "style": {
    "box-sizing": "border-box",
    "width": "100%",
    "text-align": "left",
    "padding": "21px 12px",
    "overflow": "hidden"
    },
    "children": [
    {
    "elmType": "div",
    "txtContent": "='Contact details for ' + [$Title]"
    }
    ]
    }
    ]
    }

    1. You can change the value of iconName property and "txtContent" property to meet your requirement, here is my simple test for your reference:
      147557-image.png

    In another way, we can also customize the form in PowerApps and add a label to the form:
    147529-image.png


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



0 additional answers

Sort by: Most helpful