Skip to main content

Notifications

Power Automate - General Discussion
Answered

JSON to stagger left/right alignment on Sharepoint List Form header

(0) ShareShare
ReportReport
Posted on by 13

This isn't a power automate question, per se, but it is the finishing touches on an automate flow that I created (one in which I did post a question on this forum).

 

I have two JSON schemas that I want to combine for my customized List Form header, but I can't figure out the bracket structure.  Each of the JSON schemas do each work on their own.

 

How can I easily combine them for my List Form header from the Configure Layout screen?  For the most part, I’d like the combined JSON output to look like this, with the first two lines left justified and the last two lines right justified.

 

NPA_User_0-1691288580254.png

 

Here are the two JSON schemas:

JSON Schema #1:

{

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

            }

        },

        {

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

                    "attributes": {

                        "iconName": "Airplane",

                        "class": "ms-fontSize-35 ms-fontWeight-bold ms-fontColor-themePrimary",

                        "title": "Details"

                    },

                    "txtContent": "='     ' + [$Title]"

                },

                {

                    "elmType": "div",

                    "txtContent": ""

                },

                {

                    "elmType": "div",

                    "attributes": {

                        "iconName": "Group",

                        "class": "ms-fontSize-21 ms-fontWeight-regular ms-fontColor-themePrimary",

                        "title": "Details"

                    },

                    "txtContent": "='     Code ' + [$Org]"

                }

            ]

        }

    ]

}

 

 

JSON Schema #2:

{

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

            }

        },

        {

            "elmType": "div",

            "attributes": {

                "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"

            },

            "style": {

                "box-sizing": "border-box",

                "width": "100%",

                "text-align": "right",

                "padding": "21px 12px",

                "overflow": "hidden"

            },

            "children": [

                {

                    "elmType": "div",

                    "children": [

                        {

                            "elmType": "a",

                            "txtContent": "📁 View Folder",

                            "style": {

                                "text-decoration": "underline",

                                "color": "inherit",

                                "font-size": "inherit",

                                "font-weight": "inherit"

                            },

                            "attributes": {

                                "class": "sp-field-quickAction sp-field-iconRightAligned",

                                "color": "blue",

                                "target": "_blank",

                                "href": "='dummy url' + [$FolderID] + '&FilterType1=Number'"

                            }

                        },

                        {

                            "elmType": "div",

                            "txtContent": ""

                        },

                        {

                            "elmType": "a",

                            "class": "sp-field-quickActions",

                            "attributes": {

                                "class": "sp-field-quickAction sp-field-iconRightAligned",

                                "iconName": "MailForward",

                                "href": "='mailto:' + 'dummy email' + '?subject='+ 'Due ' + [$Foreign_x0020_Package_x0020_Due] + ' - ' + [$Org] + ' - ' + [$Title] + ' package' + '&body=Hello: \r\n\r\n' + 'Please review the attached Foreign Travel Package, due by ' + [$Foreign_x0020_Package_x0020_Due] + ': \r\n\r\n' + '<dummy url' + [$FolderID] + '%26FilterType1=Number> \r\n\r\n' + ' To access the files, please remember to remove the ID filter after clicking into the folder. \r\n\r\n' + 'Thanks! \r\n' + 'Office \r\n\r\n'"

                            }

                        },

                        {

                            "elmType": "span",

                            "style": {

                                "padding-left": "8px"

                            },

                            "txtContent": "Send to Division"

                        }

                    ]

                }

            ]

        }

    ]

}

 

Categories:
  • trice602 Profile Picture
    trice602 11,698 on at
    Re: JSON to stagger left/right alignment on Sharepoint List Form header

    Nice!  I am glad it worked out for you!  Always glad to help! Tom

  • NPA_User Profile Picture
    NPA_User 13 on at
    Re: JSON to stagger left/right alignment on Sharepoint List Form header

    Hi @trice602,

     

    Thank you so much for your help.  That worked perfectly!

  • Verified answer
    trice602 Profile Picture
    trice602 11,698 on at
    Re: JSON to stagger left/right alignment on Sharepoint List Form header

    Hi @NPA_User ,

     

    Please give this a go and mark as a solution if this was helpful!  Always glad to help! Tom

     

    {
     "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"
     }
     },
     {
     "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",
     "attributes": {
     "iconName": "Airplane",
     "class": "ms-fontSize-35 ms-fontWeight-bold ms-fontColor-themePrimary",
     "title": "Details"
     },
     "txtContent": "=' ' + [$Title]"
     },
     {
     "elmType": "div",
     "txtContent": ""
     },
     {
     "elmType": "div",
     "attributes": {
     "iconName": "Group",
     "class": "ms-fontSize-21 ms-fontWeight-regular ms-fontColor-themePrimary",
     "title": "Details"
     },
     "txtContent": "=' Code ' + [$Org]"
     }
     ]
     },
     {
     "elmType": "div",
     "style": {
     "display": "flex",
     "box-sizing": "border-box",
     "align-items": "center"
     }
     },
     {
     "elmType": "div",
     "attributes": {
     "class": "ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-24"
     },
     "style": {
     "box-sizing": "border-box",
     "width": "100%",
     "text-align": "right",
     "padding": "21px 12px",
     "overflow": "hidden"
     },
     "children": [
     {
     "elmType": "div",
     "children": [
     {
     "elmType": "a",
     "txtContent": ":file_folder: View Folder",
     "style": {
     "text-decoration": "underline",
     "color": "inherit",
     "font-size": "inherit",
     "font-weight": "inherit"
     },
     "attributes": {
     "class": "sp-field-quickAction sp-field-iconRightAligned",
     "color": "blue",
     "target": "_blank",
     "href": "='dummy url' + [$FolderID] + '&FilterType1=Number'"
     }
     },
     {
     "elmType": "div",
     "txtContent": ""
     },
     {
     "elmType": "a",
     "class": "sp-field-quickActions",
     "attributes": {
     "class": "sp-field-quickAction sp-field-iconRightAligned",
     "iconName": "MailForward",
     "href": "='mailto:' + 'dummy email' + '?subject='+ 'Due ' + [$Foreign_x0020_Package_x0020_Due] + ' - ' + [$Org] + ' - ' + [$Title] + ' package' + '&body=Hello: \r\n\r\n' + 'Please review the attached Foreign Travel Package, due by ' + [$Foreign_x0020_Package_x0020_Due] + ': \r\n\r\n' + '<dummy url' + [$FolderID] + '%26FilterType1=Number> \r\n\r\n' + ' To access the files, please remember to remove the ID filter after clicking into the folder. \r\n\r\n' + 'Thanks! \r\n' + 'Office \r\n\r\n'"
     }
     },
     {
     "elmType": "span",
     "style": {
     "padding-left": "8px"
     },
     "txtContent": "Send to Division"
     }
     ]
     }
     ]
     }
     ]
    }

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Microsoft Kickstarter Events…

Register for Microsoft Kickstarter Events…

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Announcing Forum Attachment Improvements!

We're excited to announce that attachments for replies in forums and improved…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 145,475

#2
RandyHayes Profile Picture

RandyHayes 76,287

#3
Pstork1 Profile Picture

Pstork1 64,767

Leaderboard