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

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

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.

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:

Process Advisor

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

Quick Links

Leaderboard > Power Automate - General Discussion