SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Payments

This sample provides a payment list format to register daily expenses, currency, status, rate option, comments and categorization of payment. Solution has 3 formats Desktop, Mobile and Group by Category.

Get this format View on GitHub

Shared by André Lage
Updated Jan 10, 2022

Payments formatting preview
Sample preview · View original animation

Copy. Apply. Make it yours.

Get this format

4 definitions

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideFooter": true,
  "hideColumnHeader": true,
  "hideSelection": true,
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "style": {
        "padding": "5px",
        "border-radius": "35px",
        "width": "100%"
      },
      "attributes": {
        "class": "ms-fontColor-white ms-bgColor-themePrimary"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "padding-left": "10px"
          },
          "attributes": {
            "class": "ms-fontSize-20"
          },
          "txtContent": "@group.columnDisplayName"
        },
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "padding-left": "10px"
          },
          "attributes": {
            "iconName": "@group.fieldData",
            "class": "ms-fontSize-20"
          }
        },
        {
          "elmType": "div",
          "style": {
            "padding": "0px 10px"
          },
          "attributes": {
            "class": "ms-fontSize-20"
          },
          "txtContent": "=@group.count"
        }
      ]
    }
  },
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "padding": "5px"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "display": "flex",
          "align-items": "baseline",
          "justify-content": "center",
          "border": "1px solid #ccc",
          "box-shadow": "0 0 5px #ccc",
          "border-radius": "25px",
          "padding": "10px"
        },
        "attributes": {
          "class": "ms-bgColor-gray10--hover"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "padding": "15px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "padding": "10px",
                  "border-radius": "50%",
                  "width": "40px",
                  "height": "40px",
                  "text-align": "center"
                },
                "inlineEditField": "[$Category]",
                "attributes": {
                  "iconName": "[$Category]",
                  "class": "=if([$Categorize] == 'Red', 'ms-bgColor-red ms-fontColor-white', if([$Categorize] == 'Blue','ms-bgColor-blue ms-fontColor-white',if([$Categorize] == 'Green','ms-bgColor-green ms-fontColor-white',if([$Categorize] == 'Orange','ms-bgColor-orangeLighter ms-fontColor-white',if([$Categorize] == 'Purple','ms-bgColor-purple ms-fontColor-white',if([$Categorize] == 'Yellow','ms-bgColor-sharedYellow10 ms-fontColor-white', 'ms-bgColor-themePrimary ms-fontColor-white'))))))+' ms-fontSize-32 '"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "padding-top": "15px",
              "padding-left": "15px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "width": "500px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "display": "inline-block",
                          "width": "300px",
                          "white-space": "nowrap",
                          "overflow": "hidden",
                          "text-overflow": "ellipsis",
                          "cursor": "pointer"
                        },
                        "attributes": {
                          "class": "ms-fontSize-24 ms-fontColor-gray90",
                          "title": "[$Title]"
                        },
                        "txtContent": "[$Title]",
                        "customCardProps": {
                          "formatter": {
                            "elmType": "div",
                            "style": {
                              "width": "520px"
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "style": {
                                  "width": "500px"
                                },
                                "children": [
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "margin": "10px",
                                      "width": "100%",
                                      "white-space": "nowrap",
                                      "overflow": "hidden",
                                      "text-overflow": "ellipsis"
                                    },
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "attributes": {
                                          "class": "ms-fontSize-24 ms-fontColor-black ms-fontWeight-semibold",
                                          "title": "[$Title]"
                                        },
                                        "txtContent": "[$Title]"
                                      }
                                    ]
                                  },
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "margin": "10px",
                                      "width": "100%"
                                    },
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "style": {
                                          "display": "inline-block",
                                          "width": "50%"
                                        },
                                        "txtContent": "Amount",
                                        "attributes": {
                                          "class": "ms-fontSize-24 ms-fontColor-gray90"
                                        }
                                      },
                                      {
                                        "elmType": "div",
                                        "style": {
                                          "width": "50%",
                                          "cursor": "pointer",
                                          "font-style": "italic",
                                          "display": "inline-block",
                                          "text-align": "right"
                                        },
                                        "attributes": {
                                          "class": "ms-fontSize-24 ms-fontColor-gray90 ms-fontWeight-semibold"
                                        },
                                        "inlineEditField": "[$Payment]",
                                        "txtContent": "=Number([$Payment])+' '+substring([$Currency],0,indexOf([$Currency],'('))"
                                      }
                                    ]
                                  },
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "padding": "10px",
                                      "width": "100%"
                                    },
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "style": {
                                          "display": "inline-block",
                                          "width": "50%"
                                        },
                                        "inlineEditField": "[$OtherCostDescription]",
                                        "txtContent": "=if(length([$OtherCostDescription]) >0,[$OtherCostDescription], 'Other expense, type here')",
                                        "attributes": {
                                          "class": "ms-fontSize-20 ms-fontColor-gray90"
                                        }
                                      },
                                      {
                                        "elmType": "div",
                                        "style": {
                                          "width": "50%",
                                          "cursor": "pointer",
                                          "font-style": "italic",
                                          "display": "inline-block",
                                          "text-align": "right"
                                        },
                                        "attributes": {
                                          "class": "ms-fontSize-24 ms-fontColor-gray90 ms-fontWeight-semibold"
                                        },
                                        "inlineEditField": "[$OtherCosts]",
                                        "txtContent": "=Number([$OtherCosts])+' '+substring([$Currency],0,indexOf([$Currency],'('))"
                                      }
                                    ]
                                  },
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "padding": "10px",
                                      "width": "100%"
                                    },
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "style": {
                                          "padding-top": "10px",
                                          "padding-bottom": "10px",
                                          "border-top": "1px solid #ccc"
                                        },
                                        "children": [
                                          {
                                            "elmType": "div",
                                            "style": {
                                              "display": "inline-block",
                                              "width": "50%"
                                            },
                                            "txtContent": "Total",
                                            "attributes": {
                                              "class": "ms-fontSize-24 ms-fontColor-black ms-fontWeight-semibold"
                                            }
                                          },
                                          {
                                            "elmType": "div",
                                            "style": {
                                              "width": "50%",
                                              "cursor": "pointer",
                                              "display": "inline-block",
                                              "text-align": "right"
                                            },
                                            "attributes": {
                                              "class": "=if(Number([$Payment])+Number([$OtherCosts])<0,'ms-fontColor-red','ms-fontColor-black')+' ms-fontSize-24 ms-fontWeight-semibold '"
                                            },
                                            "txtContent": "=Number([$Payment])+Number([$OtherCosts])+' '+substring([$Currency],0,indexOf([$Currency],'('))"
                                          }
                                        ]
                                      }
                                    ]
                                  },
                                  {
                                    "elmType": "div",
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "forEach": "personIterator in [$Editor]",
                                        "children": [
                                          {
                                            "elmType": "div",
                                            "txtContent": "= 'Last Modified ' + toLocaleDateString([$Modified]) + ' by ' + [$personIterator.title]",
                                            "attributes": {
                                              "class": "ms-fontSize-12 ms-fontColor-gray100"
                                            },
                                            "style": {
                                              "padding": "0px 10px 10px 5px",
                                              "margin-left": "5px",
                                              "display": "inline-block"
                                            }
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          },
                          "openOnEvent": "click",
                          "directionalHint": "topCenter",
                          "isBeakVisible": true
                        }
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "display": "inline-block",
                          "text-align": "right",
                          "width": "200px"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "children": [
                              {
                                "elmType": "div",
                                "style": {
                                  "padding-top": "15px"
                                },
                                "txtContent": "=Number([$Payment])+Number([$OtherCosts])+' '+substring([$Currency],0,indexOf([$Currency],'('))",
                                "attributes": {
                                  "class": "=if(Number([$Payment])+Number([$OtherCosts])<0,'ms-fontColor-red','ms-fontColor-black')+' ms-fontSize-24 ms-fontColor-black ms-fontWeight-bold'"
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "width": "120px"
                    },
                    "attributes": {
                      "class": "ms-fontSize-18 ms-fontColor-black ms-fontWeight-semibold"
                    },
                    "inlineEditField": "[$PaymentDay]",
                    "txtContent": "=if((getMonth(Date([$PaymentDay]))+1)==1,'JAN',if((getMonth(Date([$PaymentDay]))+1)==2,'FEV',if((getMonth(Date([$PaymentDay]))+1)==3,'MAR',if((getMonth(Date([$PaymentDay]))+1)==4,'ABR',if((getMonth(Date([$PaymentDay]))+1)==5,'MAY',if((getMonth(Date([$PaymentDay]))+1)==6,'JUN',if((getMonth(Date([$PaymentDay]))+1)==7,'JUL',if((getMonth(Date([$PaymentDay]))+1)==8,'AUG',if((getMonth(Date([$PaymentDay]))+1)==9,'SEP',if((getMonth(Date([$PaymentDay]))+1)==10,'OCT',if((getMonth(Date([$PaymentDay]))+1)==11,'NOV',if((getMonth(Date([$PaymentDay]))+1)==12,'DEC',''))))))))))))+' '+getDate(Date([$PaymentDay]))+ ', '+getYear(Date([$PaymentDay]))"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding-top": "10px",
                      "display": "=if([$Expand]==false,'none','block')",
                      "border-radius": "5px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "display": "inline-block",
                          "width": "50%"
                        },
                        "txtContent": "Amount",
                        "attributes": {
                          "class": "ms-fontSize-24 ms-fontColor-gray90"
                        }
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "width": "50%",
                          "cursor": "pointer",
                          "font-style": "italic",
                          "display": "inline-block",
                          "text-align": "right"
                        },
                        "attributes": {
                          "class": "ms-fontSize-24 ms-fontColor-gray90 ms-fontWeight-semibold"
                        },
                        "inlineEditField": "[$Payment]",
                        "txtContent": "=Number([$Payment])+' '+substring([$Currency],0,indexOf([$Currency],'('))"
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding-top": "10px",
                      "display": "=if([$Expand]==false,'none','block')"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "display": "inline-block",
                          "width": "50%"
                        },
                        "inlineEditField": "[$OtherCostDescription]",
                        "txtContent": "=if(length([$OtherCostDescription]) >0,[$OtherCostDescription], 'Other expense, type here')",
                        "attributes": {
                          "class": "ms-fontSize-20 ms-fontColor-gray90"
                        }
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "width": "50%",
                          "cursor": "pointer",
                          "font-style": "italic",
                          "display": "inline-block",
                          "text-align": "right"
                        },
                        "attributes": {
                          "class": "ms-fontSize-24 ms-fontColor-gray90 ms-fontWeight-semibold"
                        },
                        "inlineEditField": "[$OtherCosts]",
                        "txtContent": "=Number([$OtherCosts])+' '+substring([$Currency],0,indexOf([$Currency],'('))"
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding-top": "10px",
                      "padding-bottom": "10px",
                      "display": "=if([$Expand]==false,'none','block')",
                      "border-top": "1px solid #ccc"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "display": "inline-block",
                          "width": "50%"
                        },
                        "txtContent": "Total",
                        "attributes": {
                          "class": "ms-fontSize-24 ms-fontColor-black ms-fontWeight-bold"
                        }
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "width": "50%",
                          "cursor": "pointer",
                          "display": "=if([$Expand]==false,'none','inline-block')",
                          "text-align": "right"
                        },
                        "attributes": {
                          "class": "=if(Number([$Payment])+Number([$OtherCosts])<0,'ms-fontColor-red','ms-fontColor-black')+' ms-fontSize-24 ms-fontWeight-semibold'"
                        },
                        "txtContent": "=Number([$Payment])+Number([$OtherCosts])+' '+substring([$Currency],0,indexOf([$Currency],'('))"
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "padding": "15px",
              "cursor": "pointer"
            },
            "attributes": {
              "iconName": "=if([$Expand]==true, 'Blocked2','CirclePlus')",
              "class": "ms-fontSize-18 ms-fontColor-black ms-fontWeight-bold"
            },
            "customRowAction": {
              "action": "setValue",
              "actionInput": {
                "Expand": "=if([$Expand]==true, 0,1)"
              }
            }
          },
          {
            "elmType": "div",
            "style": {
              "position": "relative",
              "width": "150px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "width": "200px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "padding": "10px",
                          "display": "inline",
                          "cursor": "pointer"
                        },
                        "attributes": {
                          "class": "ms-fontSize-32",
                          "title": "=if([$Paid]==true, 'Paid','pending')"
                        },
                        "txtContent": "=if([$Paid]==true, '💸','⌛')",
                        "customRowAction": {
                          "action": "setValue",
                          "actionInput": {
                            "Paid": "=if([$Paid]==true, 0,1)"
                          }
                        }
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "margin-left": "10px",
                          "cursor": "pointer"
                        },
                        "attributes": {
                          "iconName": "Edit",
                          "class": "ms-fontColor-black ms-fontSize-24"
                        },
                        "customRowAction": {
                          "action": "defaultClick"
                        }
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "margin-left": "20px",
                          "cursor": "pointer"
                        },
                        "attributes": {
                          "iconName": "Delete",
                          "class": "ms-fontColor-black ms-fontSize-24"
                        },
                        "customRowAction": {
                          "action": "delete"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "attributes": {
                      "class": "ms-fontSize-16 ms-fontWeight-semibold"
                    },
                    "style": {
                      "padding-left": "10px",
                      "padding-top": "20px",
                      "display": "=if([$Expand]== true,'block','none')"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "padding": "0px 5px 0px 0px"
                        },
                        "txtContent": "Tap to rate"
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "padding-top": "10px",
                      "display": "=if([$Expand]== true,'block','none')"
                    },
                    "attributes": {
                      "class": "ms-fontSize-32"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "inlineEditField": "[$Rate]",
                        "style": {
                          "text-align": "center",
                          "margin-left": "20px",
                          "width": "50px",
                          "height": "50px",
                          "cursor": "pointer",
                          "border-radius": "50%"
                        },
                        "attributes": {
                          "class": "ms-bgColor-themePrimary ms-fontColor-white"
                        },
                        "txtContent": "=if(length([$Rate])>0,[$Rate],0)"
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "=if([$Expand]== true,if(length([$_CommentCount])>0,'inline-block','none'),'none')",
                      "padding-top": "10px"
                    },
                    "attributes": {
                      "class": "ms-fontSize-24"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "display": "inline-block",
                          "border-radius": "10px",
                          "margin": "10px",
                          "cursor": "pointer"
                        },
                        "attributes": {
                          "iconName": "Chat",
                          "class": "ms-fontSize-24 ms-fontWeight-semibold"
                        }
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "padding-left": "10px",
                          "display": "inline-block",
                          "cursor": "pointer"
                        },
                        "txtContent": "[$_CommentCount]"
                      }
                    ],
                    "customRowAction": {
                      "action": "defaultClick"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionpayments-grouped.json

From the contributor

How to use this sample

Summary

This sample provides a payment list format to register daily expenses, currency, status, rate option, Locations, copy file link, comments and categorization of payment. Solution has 4 formats Desktop, Mobile, Group by Category and Timeline.

Format includes icon for type of payment, capability to choose currency, expand collapse to view details, payment status and payment date.

screenshot of the sample

View requirements

  • The format expect the following fields:
Field Type
Title Single line of text
Description Multiple Line of Text
Category Choice - Include the following options "PaymentCard,Bank,Savings,Money,AllCurrency,EatDrink,AirTickets,ShoppingCart,Shop,Home,Health"
Payment Number - define number of decimal places to 2
OtherCosts Number - this field will be used order the clipboards
Currency Choice - Include the following options "CHF(CHF),€(EUR)£(GBP),$(USD),¥(JPY)"
PaymentDay Date & Time
Paid Yes/No - default value "No"
Expand Yes/No - default value "No"
Categorize Choice - "Red, Blue, Green, Orange, Purple, Yellow"
OtherCostDescription Single line of text
Rate Choice - Values from 1 to 5
Location Location - place where is made the payment
Invoice Single line of text - Save copy link from file
  • Replace [replaceUrlPathtoLibrary] with path to SharePoint Library, sample: '/SiteAssets/'

Edit View requirements

  • Edit View where format will be included:
    • Access to "Sort" Area and select column "PaymentDay" and check as ascending order, this option order the images based on changed.
    • Include in View the following additional fields "Created", "Modified" and "Modified By".

Sample

Solution Author(s)
payments.json André Lage
payments-mobile.json André Lage
payments-grouped.json André Lage
payments-format.json André Lage
payments-mobile-format.json André Lage
payments-timeline-format.json André Lage
payments-groupby-format.json André Lage

Version history

Version Date Comments
2.0 June 04, 2022 New features
1.0 January 10, 2022 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Keep exploring

More formats like this

Key Dates Timeline Checklist

A modern horizontal timeline view that displays key dates or milestones as monthly columns.

Explore format

Sports Card

This SharePoint JSON view formatting sample transforms list items into vertical sports trading cards with header bar, country badge, player silhouette, name band, star rating and three stat bars.

Explore format

Credit / Loyalty Card

Transforms list items into realistic credit / loyalty cards with a brand name, tier pill, EMV chip, contactless symbol, embossed card number, cardholder, expiry, and network logo. The card colour is driven by the Tier value.

Explore format