CategoriesMicrosoft 365SharePointSharePoint Online

SharePoint – Team Site without Microsoft 365 Group

Hello, here really simple post to explain how to create a SharePoint site without Microsoft 365 group associated.

Create Site

Follow there instructions:

Clicck on App Launcher and then on “Admin”. Then click on “Expand all” , SharePoint and “Active sites”

Then we can create site:

Click on Create and “Other options”:

Now we can create our site:

Considerations

Why we should create site with no M365 group? If we don’t need Outlook, planner or Teams associated but just need a SharePoint Team Site. Just to remind…to do that, we should be are SharePoint Administrator.

Contact me for questions! Have a nice day!

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!

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