SOLVED

Customize JSON Microsoft List

Copper Contributor

Hi,

 

Newbie here.

 

I would like to ask how I can custom json in Microsoft List. If a user clicked on New button this will open a new tab redirecting the user to PowerApps form. I have some troubles in allowing user using the form on right side, instead of showing the new blank for it caches the former action of the user.

1 Reply
best response confirmed by ComicSansRival (Copper Contributor)
Solution

@ComicSansRival 

 

Are you trying to add the button in list command bar at the top side of list to open the form in new tab?

 

If yes, unfortunately it is no possible using SharePoint JSON formatting currently as it does not support advanced customization (similar to column/view formatting) in command bar formatting. Command bar formatting only supports basic operations like show/hiding the buttons or changing the title/name of buttons, re-order buttons, etc.

 

You will have to develop the SPFx ListView command set to show the button in command bar and have custom functionality.

 

For your requirements, it will be simple SPFx solution to one button which will open link to new form like below in new tab: 

 

<siteUrl>/Lists/MyList3991275/NewForm.aspx

 

Additional:

If you don't have access to SPFx and want to use JSON formatting only,

 

You can use column formatting JSON like below for showing button BUT it shows button for every list item and your list should have at least one item to see this button:

Button for all items

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "style": {
    "border-radius": "5px",
    "margin": "5px 0px",
    "padding": "0px",
    "border": "none"
  },
  "attributes": {
    "class": "ms-bgColor-themePrimary"
  },
  "children": [
    {
      "elmType": "a",
      "style": {
        "text-decoration": "none",
        "padding": "12px 0px",
        "width": "100%"
      },
      "attributes": {
        "href": "= @currentWeb + '/Lists/MyList3991275/NewForm.aspx?ID=' + [$ID]",
        "target": "_blank",
        "class": "ms-fontColor-white ms-fontSize-m"
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "display": "inline-block",
            "padding": "0 4px"
          },
          "attributes": {
            "iconName": "Link"
          }
        },
        {
          "elmType": "span",
          "txtContent": "Open New Item form"
        }
      ]
    }
  ]
}

 

Output

ganeshsanap_0-1700804235362.pngIf you want to show the button only for one item at the top, use JSON like: 

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "style": {
    "border-radius": "5px",
    "margin": "5px 0px",
    "padding": "0px",
    "border": "none",
    "display": "=if(@rowIndex == 0, 'block' , 'none')"
  },
  "attributes": {
    "class": "ms-bgColor-themePrimary"
  },
  "children": [
    {
      "elmType": "a",
      "style": {
        "text-decoration": "none",
        "padding": "12px 0px",
        "width": "100%"
      },
      "attributes": {
        "href": "= @currentWeb + '/Lists/MyList3991275/NewForm.aspx?ID=' + [$ID]",
        "target": "_blank",
        "class": "ms-fontColor-white ms-fontSize-m"
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "display": "inline-block",
            "padding": "0 4px"
          },
          "attributes": {
            "iconName": "Link"
          }
        },
        {
          "elmType": "span",
          "txtContent": "Open in new tab"
        }
      ]
    }
  ]
}

 

Output

ganeshsanap_1-1700804835108.pngAbove JSON are inspired from these articles: 

  1. Download Image from SharePoint Image column using JSON formatting 
  2. SharePoint Online: Download files using JSON Formatting 

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

1 best response

Accepted Solutions
best response confirmed by ComicSansRival (Copper Contributor)
Solution

@ComicSansRival 

 

Are you trying to add the button in list command bar at the top side of list to open the form in new tab?

 

If yes, unfortunately it is no possible using SharePoint JSON formatting currently as it does not support advanced customization (similar to column/view formatting) in command bar formatting. Command bar formatting only supports basic operations like show/hiding the buttons or changing the title/name of buttons, re-order buttons, etc.

 

You will have to develop the SPFx ListView command set to show the button in command bar and have custom functionality.

 

For your requirements, it will be simple SPFx solution to one button which will open link to new form like below in new tab: 

 

<siteUrl>/Lists/MyList3991275/NewForm.aspx

 

Additional:

If you don't have access to SPFx and want to use JSON formatting only,

 

You can use column formatting JSON like below for showing button BUT it shows button for every list item and your list should have at least one item to see this button:

Button for all items

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "style": {
    "border-radius": "5px",
    "margin": "5px 0px",
    "padding": "0px",
    "border": "none"
  },
  "attributes": {
    "class": "ms-bgColor-themePrimary"
  },
  "children": [
    {
      "elmType": "a",
      "style": {
        "text-decoration": "none",
        "padding": "12px 0px",
        "width": "100%"
      },
      "attributes": {
        "href": "= @currentWeb + '/Lists/MyList3991275/NewForm.aspx?ID=' + [$ID]",
        "target": "_blank",
        "class": "ms-fontColor-white ms-fontSize-m"
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "display": "inline-block",
            "padding": "0 4px"
          },
          "attributes": {
            "iconName": "Link"
          }
        },
        {
          "elmType": "span",
          "txtContent": "Open New Item form"
        }
      ]
    }
  ]
}

 

Output

ganeshsanap_0-1700804235362.pngIf you want to show the button only for one item at the top, use JSON like: 

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "style": {
    "border-radius": "5px",
    "margin": "5px 0px",
    "padding": "0px",
    "border": "none",
    "display": "=if(@rowIndex == 0, 'block' , 'none')"
  },
  "attributes": {
    "class": "ms-bgColor-themePrimary"
  },
  "children": [
    {
      "elmType": "a",
      "style": {
        "text-decoration": "none",
        "padding": "12px 0px",
        "width": "100%"
      },
      "attributes": {
        "href": "= @currentWeb + '/Lists/MyList3991275/NewForm.aspx?ID=' + [$ID]",
        "target": "_blank",
        "class": "ms-fontColor-white ms-fontSize-m"
      },
      "children": [
        {
          "elmType": "span",
          "style": {
            "display": "inline-block",
            "padding": "0 4px"
          },
          "attributes": {
            "iconName": "Link"
          }
        },
        {
          "elmType": "span",
          "txtContent": "Open in new tab"
        }
      ]
    }
  ]
}

 

Output

ganeshsanap_1-1700804835108.pngAbove JSON are inspired from these articles: 

  1. Download Image from SharePoint Image column using JSON formatting 
  2. SharePoint Online: Download files using JSON Formatting 

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

View solution in original post