SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Budget Tracker Sample

The budget tracker sample demonstrates how to use view formatting to format lists and display views of the lists inside connected web parts. This provides the ability to view the budget items associated with individual projects on a single page.

Get this format View on GitHub

Shared by Todd Baginski
Updated Jan 29, 2020

Budget Tracker Sample formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

2 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",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "text-align": "left",
      "font-family": "Segoe UI",
      "width": "95.2%",
      "padding": "16px 16px 0px 16px",
      "background-color": "#f3f2f1"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "width": "100%",
          "padding-bottom": "16px",
          "border-bottom": "solid 1px #e1dfdd"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "font-size": "16px",
              "color": "#323130",
              "line-height": "21px",
              "font-weight": "600"
            },
            "txtContent": "[$Milestone]"
          },
          {
            "elmType": "span",
            "style": {
              "font-size": "14px",
              "color": "#323130",
              "font-weight": "normal",
              "line-height": "20px"
            },
            "txtContent": "='Vendor: '+[$Vendor.lookupValue]"
          },
          {
            "elmType": "div",
            "style": {
              "font-size": "14px",
              "color": "=if([$Complete],'#107c10','#a80000')",
              "font-weight": "600",
              "line-height": "20px"
            },
            "txtContent": "=if([$Complete],'Completed','Incomplete')"
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "font-size": "14px",
                  "color": "#606e5c",
                  "font-weight": "600",
                  "line-height": "20px",
                  "flex": "1"
                },
                "txtContent": "Amount"
              },
              {
                "elmType": "div",
                "style": {
                  "font-size": "16px",
                  "color": "#323130",
                  "font-weight": "600",
                  "line-height": "20px"
                },
                "txtContent": "='$'+[$AmountCal]"
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "font-size": "14px",
                  "color": "#606e5c",
                  "font-weight": "600",
                  "line-height": "20px",
                  "flex": "1"
                },
                "txtContent": "Balance remaining"
              },
              {
                "elmType": "div",
                "style": {
                  "font-size": "16px",
                  "color": "#323130",
                  "font-weight": "600",
                  "line-height": "20px"
                },
                "txtContent": "='$'+[$Balance_x0020_Remaining]"
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionbudget-tracker-activity-milestone.json

From the contributor

How to use this sample

Summary

The budget tracker sample demonstrates how to use view formatting to format lists and display views of the lists inside connected web parts. This provides the ability to view the budget items associated with individual projects on a single page.

screenshot of the sample

View requirements

This solution is comprised of a library, 3 lookup lists, and 2 primary lists. This is a complicated setup. Fortunately, you can also have all lists (including sample data) setup for you by using the provisioning instructions below.

Provisioning

Assets are provided in the provisioning folder to demonstrate how to deploy this sample (5 lists, a library, an image file, and a page). The template and related assets are all included here and can be done with PowerShell.

Prerequisites

Install PnP PowerShell modules

  • To install PnP PowerShell modules, open PowerShell as an administrator and run the following command:

    Install-Module SharePointPnPPowerShellOnline -AllowClobber

Installation

  1. Open PowerShell as an administrator and go to the folder where the script is located. Then run the following command:

    .\BudgetTracker.ps1

    Notes:

    • Please make sure all files are downloaded (from the provisioning folder), including the folder "images".

    • Before the script will run, the following "Security Warning" may appear, type R to allow the script to run:

    security warning

    • After entering the adminUPN you will be asked for the user password in a pop up window.

    upn popup

  2. Please refer to the below table to enter the parameters:

Name Value Description
orgName <orgName> The name of the tenant. For example: If your SharePoint URL is http://contoso.sharepoint.com then your orgName is contoso.
adminUPN <user>@<orgName>.onmicrosoft.com The site administrator account.
fileNameOfPnPTemplate BudgetTrackerPNP The file name of the PnP Provisioning Template.
  1. Please choose if you would like to apply the PnP Template to existing site or a new site.
Name Value Description
Input new site title <Site Title> The title for the new site.
Input existing site url <Existing Site URL> The url of existing site.

After the script has successfully run you will see the following screen.

script result

  1. Copy the [Budget Tracker] URL.

  2. Open a web browser and navigate to the URL.

  3. Select the first item in the Projects list and verify the page appears like this:

screenshot on a page

Sample

Solution Author(s)
budget-tracker.json Todd Baginski, Chris McNulty, Chad Liu, Damian Gibbs, Randy Wang
budget-tracker-activity-milestone.json Todd Baginski, Chris McNulty, Chad Liu, Damian Gibbs, Randy Wang

Version history

Version Date Comments
1.0 January 29, 2020 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