web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Automate / JSON to stagger left/r...
Power Automate
Unanswered

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:
I have the same question (0)
  • Verified answer
    trice602 Profile Picture
    15,402 Super User 2025 Season 2 on at

    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"
     }
     ]
     }
     ]
     }
     ]
    }
  • NPA_User Profile Picture
    13 on at

    Hi @trice602,

     

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

  • trice602 Profile Picture
    15,402 Super User 2025 Season 2 on at

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

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

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Power Automate

#1
Michael E. Gernaey Profile Picture

Michael E. Gernaey 522 Super User 2025 Season 2

#2
Tomac Profile Picture

Tomac 364 Moderator

#3
abm abm Profile Picture

abm abm 243 Most Valuable Professional

Last 30 days Overall leaderboard