CategoriesMicrosoft 365SharePoint Online

SPO – JSON form custom formatting

Hello, Today we spoke (write 🙂 )about SharePoint list form customization. Basically, we have two way to customize existing form:

  • JSON Formatting
  • Edit form with Power Apps

We try to Explain how to customize form formatting with Json.

Format Form

Go to your list, and click on New, click on the top right Edit form icon, e click on “Configure layout”.

Basically We can write some JSON to format these sections:

  • Header
  • Body
  • Footer

Header customization

Choose “Header”. How can we customize it?

We can start from official MS Docs , copy header JSON code and try it:

{
    "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]"
                }
            ]
        }
    ]
}

So , now we can see result.

Before:

Before

After:

After

How to edit?

Basically, our JSON going to apply style to these section:

{
    "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"
    },

Element:

 "elmType": "div",
    "attributes": {
        "class": "ms-borderColor-neutralTertiary"
    },

Style

  },
    "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"
    },

Some people asking me, “How can I find witch section I’m modifing? I’m not expert” , an Idea is : Add background color red to style to indentify section:

Before
After

Not beautiful to see, but simple to identify 🙂

Body customization

To customize Body, you should simply define Sections and fields, in my case:

{
    "sections": [
        {
            "displayname": "Basic information",
            "fields": [
                "Title",
                "Description"
            ]
        },
        {
            "displayname": "Worfkflow status",
            "fields": [
                "Step"
            ]
        },
        {
            "displayname": "Other",
            "fields": [
                "Attachments"
            ]
        }
    ]
}

Footer Customization

Now the last part, footer. Similar to header, we can write JSON for a part to customize

{
    "elmType": "div",
    "style": {
        "width": "100%",
        "text-align": "left",
        "overflow": "hidden",
        "border-top-width": "1px"
    },
    "children": [
        {
            "elmType": "div",
            "style": {
                "width": "100%",
                "padding-top": "10px",
                "height": "24px"
            },
            "children": [
                {
                    "elmType": "a",
                    "txtContent": "='This is footer section! ' + [$Title]",
                    "attributes": {
                        "target": "_blank",
                        "href": "='https://aka.ms/contacts?email=' + [$Title]",
                        "class": "ms-fontColor-themePrimary ms-borderColor-themePrimary ms-fontWeight-semibold ms-fontSize-m ms-fontColor-neutralSecondary–hover ms-bgColor-themeLight–hover"
                    }
                }
            ]
        }
    ]
}

As you can see , you can also use field of the record , in our example title: [$Title].

Before

References & info

Syntax

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-syntax-reference

Advanced formatting concepts

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/formatting-advanced

Where you can find icons name

https://developer.microsoft.com/en-us/fluentui#/styles/web/icons

Column formatting

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#creating-custom-json

Considerations

This is one way. Another option is modify form with Power Apps, let me know if you want an article to understand how.

Contact me for questions! Have a nice day!

CategoriesSharePoint Online

SPO Parent/Child relationship

Hi, here’s to know “How can we create relationship” beetwen two SharePoint Online lists.

My idea is create relation with a list of costs rows, to my list “Travel requests”, created for previous tutorial (Build an app in a few minutes), to understand costs details for each travel 🙂

1. Create list “Expense rows”

As a first step, we need a new list to store costs rows, so I add new list to my SPO site.

Then, we should add column to store amount of cost and column to create relationship with travel rows (PS: I use Title column for title of cost row)

Ok now we must create column to create relationship beetwen cost row and travel. To do this, need a LookUp column or for Italian People (“Ricerca”). Please keep mind this kind of column doesnt’t listed on list of common type column (see previous screenshot). One way to create it: click on “Add column” , “More” .

Here we can create lookup column.

Put column name (my case “Travel”) and choose type “Lookup”… (Wait for page reload).

Now you should set “Get information from” field : In this field you must choose another list where get row (or multiple rows) to create relationship.

Set “In this column” field. Here you can set column of other list, used to choose row.

In my case I also checked “Require that this column contains information“, because , in my opinion, when we add cost rows, travel is mandatory 🙂

There are others option, but for this tutorial we can click ok, and come back to our list.

2. Show relationship in SPO Page

First, create some travel rows and cost rows. Now , when we add some cost rows, we must choose “travel” row to associate it 🙂

Adding cost row

Now it simple 🙂 To show relationship beetwen two list, we must edit a SharePoint page, add two “list” webpart:

Select Parent list first:

And then we do same process for expense rows.

Finally we have 2 lists in page:

All lists data in page

Finally, add Dynamic filtering on “Expense row” webpart:

Result:

Thanks and Stay tuned 🙂

My Agile Privacy
This website uses technical and profiling cookies. Clicking on "Accept" authorizes all profiling cookies. Clicking on "Refuse" or the "X" will refuse all profiling cookies. By clicking on "Customize" you can select which profiling cookies to activate.
Warning: some page functionalities could not work due to your privacy choices: