SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Exam Bundle Tracker

This sample transforms your list into an Exam Bundle Tracker.

Get this format View on GitHub

Shared by Hubert Lam
Updated Jul 14, 2023

Exam Bundle Tracker formatting preview
Sample preview · View original animation

Copy. Apply. Make it yours.

Get this format

1 definition

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",
  "commandBarProps": {
    "commands": [
      {
        "key": "new",
        "text": "Create a new exam bundle"
      }
    ]
  },
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "margin-left": "0px"
    },
    "attributes": {
      "class": "='sp-row-card ' + if(indexOf([$CourseYear], 'Adv') != -1,'sp-css-backgroundColor-BgPeach sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-PeachFont',if(indexOf([$CourseYear], 'Ext 1') != -1,'sp-css-backgroundColor-BgMintGreen sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-MintGreenFont',if(indexOf([$CourseYear], 'Ext 2') != -1, 'sp-css-backgroundColor-BgCornflowerBlue  sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-CornflowerBlueFont',if(indexOf([$CourseYear], '10') != -1,'sp-css-backgroundColor-BgCyan sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-CyanFont',if(indexOf([$CourseYear], '09') != -1,'sp-css-backgroundColor-BgDustRose sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-DustRoseFont',if(indexOf([$CourseYear], '08') != -1,'sp-css-backgroundColor-BgCoral sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-CoralFont','sp-css-backgroundColor-BgGold sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-GoldFont'))))))"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left",
          "border-left": "0px",
          "padding-left": "2px",
          "width": "100%"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex-wrap": "wrap",
              "display": "flex",
              "margin-left": "5px"
            },
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "box-sizing": "border-box",
                  "padding": "4px 8px 5px 8px",
                  "overflow": "hidden",
                  "text-overflow": "ellipsis",
                  "display": "flex",
                  "border-radius": "5px",
                  "height": "24px",
                  "align-items": "center",
                  "white-space": "nowrap",
                  "margin": "4px 4px 4px 4px"
                },
                "attributes": {
                  "class": "sp-field-fontSizeSmall sp-css-backgroundColor-neutralBackground sp-css-color-neutralFont"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Calendar"
                    },
                    "style": {
                      "font-size": "medium"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$YearOfTask]",
                    "style": {
                      "margin-left": "4px"
                    },
                    "attributes": {
                      "title": "Academic year of this task"
                    }
                  }
                ]
              },
              {
                "elmType": "span",
                "style": {
                  "box-sizing": "border-box",
                  "padding": "4px 8px 5px 8px",
                  "overflow": "hidden",
                  "text-overflow": "ellipsis",
                  "display": "flex",
                  "border-radius": "5px",
                  "height": "24px",
                  "align-items": "center",
                  "white-space": "nowrap",
                  "margin": "4px 4px 4px 4px"
                },
                "attributes": {
                  "class": "sp-field-fontSizeSmall sp-css-backgroundColor-disabledBackground",
                  "title": "Cohort/Course which this task applies to"
                },
                "txtContent": "='Year ' + [$CourseYear]"
              },
              {
                "elmType": "span",
                "style": {
                  "box-sizing": "border-box",
                  "padding": "4px 8px 5px 8px",
                  "overflow": "hidden",
                  "text-overflow": "ellipsis",
                  "display": "flex",
                  "border-radius": "5px",
                  "height": "24px",
                  "align-items": "center",
                  "white-space": "nowrap",
                  "margin": "4px 4px 4px 4px"
                },
                "attributes": {
                  "class": "sp-field-fontSizeSmall sp-css-backgroundColor-BgLightBlue20",
                  "title": "Task Number"
                },
                "txtContent": "='Assessment Task ' + [$TaskNumber]"
              },
              {
                "elmType": "span",
                "style": {
                  "box-sizing": "border-box",
                  "padding": "4px 8px 5px 8px",
                  "overflow": "hidden",
                  "text-overflow": "ellipsis",
                  "display": "flex",
                  "border-radius": "5px",
                  "height": "24px",
                  "align-items": "center",
                  "white-space": "nowrap",
                  "margin": "4px 4px 4px 4px"
                },
                "attributes": {
                  "class": "sp-field-fontSizeSmall sp-css-backgroundColor-BgDarkPink sp-css-color-WhiteText",
                  "title": "Bundle number"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "TimeEntry"
                    },
                    "style": {
                      "font-size": "medium"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "='Bundle number: ' + [$BundleNumber] + ' of ' + [$TotalBundles]",
                    "style": {
                      "margin-left": "4px"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-title",
              "title": "Bundle information"
            },
            "style": {
              "font-weight": "bold",
              "font-size": "xx-large",
              "margin-left": "10px",
              "margin-top": "10px",
              "display": "flex",
              "flex-wrap": "wrap",
              "vertical-align": "middle"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "iconName": "=if([$InCirculation] == false, 'CompletedSolid','IssueTracking' )",
                  "title": "Bundle information"
                },
                "style": {
                  "vertical-align": "middle",
                  "font-size": "45px"
                }
              },
              {
                "elmType": "div",
                "txtContent": "='Bundle ' + [$BundleNumber] + ' of ' + [$TotalBundles] + ' | ' + length([$Marked]) + ' of ' + toString( length([$NotMarked]) + length([$Marked]) + ' markers completed' + if([$InCirculation] == false,' (Task now archived)','')",
                "style": {
                  "margin-left": "8px",
                  "vertical-align": "middle",
                  "text-decoration": "=if([$InCirculation] == false ,'line-through red 3px','none')"
                },
                "attributes": {
                  "title": "Bundle information"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex",
              "width": "100%",
              "border-top-width": "0px",
              "border-top-style": "solid"
            },
            "attributes": {
              "class": "sp-row-listPadding sp-css-borderRight-warningBorder"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "width": "24%",
                  "border-right-width": "0px",
                  "border-right-style": "solid",
                  "padding-right": "20px"
                },
                "attributes": {
                  "class": "sp-row-listPadding sp-css-borderRight-warningBorder"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "font-weight": "bold",
                      "font-size": "medium",
                      "display": "flex",
                      "flex-wrap": "wrap",
                      "margin-left": "10px",
                      "border-top-width": "0px",
                      "border-top-style": "solid"
                    },
                    "attributes": {
                      "class": "sp-css-borderTop-warningBorder"
                    },
                    "txtContent": "=if(length([$InPossession]) != 0, 'In possession','Bundle location')"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "height": "100px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "display": "=if(length([$InPossession]) != 0, 'none','flex')",
                          "margin-left": "10px"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "style": {
                              "font-size": "large"
                            },
                            "attributes": {
                              "iconName": "CompletedSolid",
                              "class": "sp-css-color-MintGreenFont"
                            }
                          },
                          {
                            "elmType": "div",
                            "style": {
                              "margin-left": "10px",
                              "width": "100%",
                              "font-size": "larger",
                              "display": "flex"
                            },
                            "txtContent": "Inside cupboard"
                          }
                        ]
                      },
                      {
                        "elmType": "div",
                        "style": {
                          "display": "flex",
                          "flex-wrap": "wrap",
                          "height": "28px"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "forEach": "person in [$InPossession]",
                            "style": {
                              "display": "=if(length([$InPossession]) != 0 ,'flex','none')",
                              "flex-direction": "row",
                              "align-items": "center",
                              "white-space": "nowrap",
                              "border-radius": "13px",
                              "margin-left": "10px",
                              "margin-top": "5px"
                            },
                            "attributes": {
                              "class": "ms-bgColor-neutralLight"
                            },
                            "defaultHoverField": "[$person]",
                            "children": [
                              {
                                "elmType": "img",
                                "style": {
                                  "width": "28px",
                                  "height": "28px",
                                  "border-radius": "50%"
                                },
                                "attributes": {
                                  "src": "=getUserImage([$person.email], 'small')"
                                }
                              },
                              {
                                "elmType": "div",
                                "txtContent": "[$person.title]",
                                "style": {
                                  "padding-left": "6px",
                                  "padding-right": "10px"
                                },
                                "attributes": {
                                  "class": "ms-fontColor-neutralPrimary"
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex"
                    },
                    "children": [
                      {
                        "elmType": "button",
                        "customRowAction": {
                          "action": "setValue",
                          "actionInput": {
                            "InPossession": "=if(indexOf([$InPossession.email], @me) == -1, @me, '')",
                            "Updatelog": "=if([$InPossession.email],'📥 Bundle has been returned to the cupboard','📤 Bundle is in possession and being marked')"
                          }
                        },
                        "attributes": {
                          "class": "='sp-row-button ms-fontWeight-semibold ms-fontColor-black ' + if(indexOf([$InPossession.email] , @me) == -1, if(indexOf([$CourseYear],'Ext 1') == -1, 'sp-css-backgroundColor-BgMintGreen  sp-css-backgroundColor-BgMintGreen30--hover', 'sp-css-backgroundColor-BgCyan  sp-css-backgroundColor-BgCyan30--hover'),'ms-bgColor-grey ms-bgColor-neutralQuaternary--hover ms-fontColor-white--hover')"
                        },
                        "style": {
                          "width": "250px",
                          "margin-left": "10px",
                          "margin-top": "8px",
                          "display": "span"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "attributes": {
                              "iconName": "=if(indexOf([$InPossession.email] , @me) == -1,'PageCheckedout','PageCheckedin')",
                              "class": "=if(indexOf([$InPossession.email] , @me) == -1,'','sp-css-color-MintGreenFont')"
                            },
                            "style": {
                              "padding-right": "4px",
                              "font-size": "large",
                              "vertical-align": "text-bottom"
                            }
                          },
                          {
                            "elmType": "span",
                            "txtContent": "=if(indexOf([$InPossession.email] , @me) == -1,'Take possession','Bundle  in possession')",
                            "style": {
                              "word-break": "keep-all"
                            },
                            "attributes": {
                              "class": "=if(indexOf([$InPossession.email] , @me) == -1,'','sp-css-color-MintGreenFont')"
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "width": "38%",
                  "float": "left",
                  "border-left-width": "2px",
                  "border-left-style": "dashed",
                  "padding-left": "10px"
                },
                "attributes": {
                  "class": "=if(indexOf([$CourseYear], 'Adv') != -1,'sp-css-backgroundColor-BgPeach sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-PeachFont',if(indexOf([$CourseYear], 'Ext 1') != -1,'sp-css-backgroundColor-BgMintGreen sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-MintGreenFont',if(indexOf([$CourseYear], 'Ext 2') != -1, 'sp-css-backgroundColor-BgCornflowerBlue  sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-CornflowerBlueFont',if(indexOf([$CourseYear], '10') != -1,'sp-css-backgroundColor-BgCyan sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-CyanFont',if(indexOf([$CourseYear], '09') != -1,'sp-css-backgroundColor-BgDustRose sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-DustRoseFont',if(indexOf([$CourseYear], '08') != -1,'sp-css-backgroundColor-BgCoral sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-CoralFont','sp-css-backgroundColor-BgGold sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-GoldFont'))))))"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "font-weight": "bold",
                      "font-size": "medium",
                      "display": "flex",
                      "flex-wrap": "wrap",
                      "margin-left": "10px",
                      "border-top-width": "0px",
                      "border-top-style": "solid"
                    },
                    "attributes": {
                      "class": "sp-css-borderTop-warningBorder"
                    },
                    "txtContent": "Not marked"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "height": "100px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "display": "flex",
                          "flex-wrap": "wrap",
                          "height": "28px"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "forEach": "person in [$NotMarked]",
                            "style": {
                              "display": "=if([$NotMarked],'flex','none')",
                              "flex-direction": "row",
                              "align-items": "center",
                              "white-space": "nowrap",
                              "border-radius": "13px",
                              "margin": "4px",
                              "margin-left": "10px"
                            },
                            "attributes": {
                              "class": "ms-bgColor-neutralLight"
                            },
                            "defaultHoverField": "[$person]",
                            "children": [
                              {
                                "elmType": "img",
                                "style": {
                                  "width": "28px",
                                  "height": "28px",
                                  "border-radius": "50%"
                                },
                                "attributes": {
                                  "src": "=getUserImage([$person.email], 'small')"
                                }
                              },
                              {
                                "elmType": "div",
                                "txtContent": "[$person.title]",
                                "style": {
                                  "padding-left": "6px",
                                  "padding-right": "10px"
                                },
                                "attributes": {
                                  "class": "ms-fontColor-neutralPrimary"
                                }
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex"
                    },
                    "children": [
                      {
                        "elmType": "button",
                        "customRowAction": {
                          "action": "setValue",
                          "actionInput": {
                            "NotMarked": "=if(indexOf([$NotMarked.email] , @me) > -1, removeFrom([$NotMarked.email] , @me), appendTo([$NotMarked.email] , @me))",
                            "Marked": "=if(indexOf([$Marked.email] , @me) > -1, removeFrom([$Marked.email] , @me), appendTo([$Marked.email] , @me))",
                            "Updatelog": "=if(indexOf([$NotMarked.email] , @me) > -1 ,'✅📝 This bundle has been marked','❌📝 This bundle not yet fully marked')"
                          }
                        },
                        "attributes": {
                          "class": "='sp-row-button ms-fontWeight-semibold ms-fontColor-black ' + if(indexOf([$NotMarked.email] , @me) != -1, if(indexOf([$CourseYear],'Ext 1') == -1, 'sp-css-backgroundColor-BgMintGreen  sp-css-backgroundColor-BgMintGreen30--hover', 'sp-css-backgroundColor-BgCyan  sp-css-backgroundColor-BgCyan30--hover'),'ms-bgColor-grey ms-bgColor-neutralQuaternary--hover ms-fontColor-white--hover')"
                        },
                        "style": {
                          "width": "250px",
                          "margin-left": "10px",
                          "margin-top": "8px",
                          "display": "span"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "attributes": {
                              "iconName": "PenWorkspace"
                            },
                            "style": {
                              "padding-right": "4px",
                              "font-size": "large",
                              "vertical-align": "text-bottom"
                            }
                          },
                          {
                            "elmType": "span",
                            "txtContent": "=if(indexOf([$NotMarked.email] , @me) != -1, 'Click to set as Marked', 'Click to set as Unmarked')",
                            "style": {
                              "word-break": "keep-all"
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "width": "38%",
                  "float": "left",
                  "border-right-width": "0px",
                  "border-right-style": "solid"
                },
                "attributes": {
                  "class": "sp-row-listPadding sp-css-borderRight-warningBorder"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "font-weight": "bold",
                      "font-size": "medium",
                      "display": "flex",
                      "flex-wrap": "wrap",
                      "margin-left": "10px",
                      "border-top-width": "0px",
                      "border-top-style": "solid"
                    },
                    "attributes": {
                      "class": "sp-css-borderTop-warningBorder"
                    },
                    "txtContent": "Marked"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "height": "145px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "display": "flex",
                          "flex-wrap": "wrap",
                          "height": "28px"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "style": {
                              "display": "flex",
                              "flex-wrap": "wrap"
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "forEach": "person in [$Marked]",
                                "style": {
                                  "display": "=if([$Marked],'flex','none')",
                                  "flex-direction": "row",
                                  "align-items": "center",
                                  "white-space": "nowrap",
                                  "border-radius": "13px",
                                  "margin": "4px",
                                  "margin-left": "10px"
                                },
                                "attributes": {
                                  "class": "ms-bgColor-neutralLight"
                                },
                                "defaultHoverField": "[$person]",
                                "children": [
                                  {
                                    "elmType": "img",
                                    "style": {
                                      "width": "28px",
                                      "height": "28px",
                                      "border-radius": "50%"
                                    },
                                    "attributes": {
                                      "src": "=getUserImage([$person.email], 'small')"
                                    }
                                  },
                                  {
                                    "elmType": "div",
                                    "txtContent": "[$person.title]",
                                    "style": {
                                      "padding-left": "6px",
                                      "padding-right": "10px"
                                    },
                                    "attributes": {
                                      "class": "ms-fontColor-neutralPrimary"
                                    }
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "block",
              "margin-top": "0px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "block",
                  "float": "none",
                  "border-top-width": "0px",
                  "border-top-style": "solid"
                },
                "attributes": {
                  "class": "sp-row-listPadding sp-css-borderTop-successBorder"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "display": "inline-flex",
                      "vertical-align": "middle",
                      "font-size": "large",
                      "margin-left": "10px"
                    },
                    "attributes": {
                      "iconName": "SetAction"
                    }
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "font-weight": "bold",
                      "font-size": "medium",
                      "display": "inline-flex",
                      "margin-top": "0px",
                      "margin-left": "10px",
                      "border-top-width": "0px",
                      "border-top-style": "solid"
                    },
                    "attributes": {
                      "class": "='sp-row-listPadding ' + if([$TopicContentSequence] == 0 , 'sp-css-borderTop-warningBorder' 'sp-css-borderTop-successBorder')"
                    },
                    "txtContent": "Actions"
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex"
                    },
                    "children": [
                      {
                        "elmType": "button",
                        "customRowAction": {
                          "action": "setValue",
                          "actionInput": {
                            "InCirculation": "=if([$InCirculation],0, 1)"
                          }
                        },
                        "attributes": {
                          "class": "sp-row-button ms-bgColor-grey ms-bgColor-neutralQuaternary--hover ms-fontColor-white--hover"
                        },
                        "style": {
                          "width": "250px",
                          "margin-left": "10px",
                          "display": "span"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "attributes": {
                              "iconName": "=if([$InCirculation] == true, 'CompletedSolid', 'ArchiveUndo')",
                              "class": "=if([$InCirculation] == true, 'sp-css-color-MintGreenFont', 'sp-css-color-DustRoseFont')"
                            },
                            "style": {
                              "padding-right": "4px",
                              "font-size": "large",
                              "vertical-align": "text-bottom"
                            }
                          },
                          {
                            "elmType": "span",
                            "txtContent": "=if([$InCirculation] == true, 'Click to set bundle as fully marked','Click to set bundle as unmarked')",
                            "style": {
                              "word-break": "keep-all"
                            },
                            "attributes": {
                              "class": "=if([$InCirculation] == true, 'sp-css-color-MintGreenFont','sp-css-color-DustRoseFont')"
                            }
                          }
                        ]
                      },
                      {
                        "elmType": "button",
                        "customRowAction": {
                          "action": "share"
                        },
                        "style": {
                          "width": "250px",
                          "margin-left": "10px",
                          "display": "span"
                        },
                        "attributes": {
                          "class": "sp-row-button ms-bgColor-themeLighter ms-bgColor-themeLight--hover ms-fontColor-white--hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "attributes": {
                              "iconName": "Share"
                            },
                            "style": {
                              "padding-right": "4px",
                              "font-size": "large",
                              "vertical-align": "text-bottom"
                            }
                          },
                          {
                            "elmType": "span",
                            "txtContent": "Share/Copy link",
                            "style": {
                              "word-break": "keep-all"
                            }
                          }
                        ]
                      },
                      {
                        "elmType": "button",
                        "customRowAction": {
                          "action": "editProps"
                        },
                        "style": {
                          "width": "250px",
                          "margin-left": "10px",
                          "display": "span"
                        },
                        "attributes": {
                          "class": "sp-row-button ms-bgColor-themeLighter ms-bgColor-themeLight--hover ms-fontColor-white--hover"
                        },
                        "children": [
                          {
                            "elmType": "span",
                            "attributes": {
                              "iconName": "Info"
                            },
                            "style": {
                              "padding-right": "4px",
                              "font-size": "large",
                              "vertical-align": "text-bottom"
                            }
                          },
                          {
                            "elmType": "span",
                            "txtContent": "View logs or edit bundle info",
                            "style": {
                              "word-break": "keep-all"
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  },
  "additionalRowClass": "=if(indexOf([$CourseYear], 'Adv') != -1,'sp-css-backgroundColor-BgPeach sp-css-color-PeachFont sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-PeachFont',if(indexOf([$CourseYear], 'Ext 1') != -1,'sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-MintGreenFont',if(indexOf([$CourseYear], 'Ext 2') != -1, 'sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-CornflowerBlueFont',if(indexOf([$CourseYear], '10') != -1,'sp-css-backgroundColor-BgCyan sp-css-color-CyanFont sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-CyanFont',if(indexOf([$CourseYear], '09') != -1,'sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-DustRoseFont',if(indexOf([$CourseYear], '08') != -1,'sp-css-backgroundColor-BgCoral sp-css-color-CoralFont sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-CoralFont','sp-css-backgroundColor-BgGold sp-css-color-GoldFont sp-field-borderLeftBold sp-field-borderLeftSolid sp-css-borderLeftColor-GoldFont'))))))",
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "style": {
        "flex-direction": "row"
      },
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "class": "=if(indexOf(@group.fieldData,'Adv') != -1, 'sp-css-backgroundColor-BgPeach sp-css-borderColor-PeachFont sp-css-color-PeachFont', if(indexOf(@group.fieldData,'Ext 1') != -1, 'sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-css-color-MintGreenFont',if(indexOf(@group.fieldData,'Ext 2') != -1, 'sp-css-backgroundColor-BgCornflowerBlue sp-css-borderColor-CornflowerBlueFont sp-css-color-CornflowerBlueFont',if(indexOf(@group.fieldData,'07') != -1, 'sp-css-backgroundColor-BgGold sp-css-color-GoldFont',if(indexOf(@group.fieldData,'08') != -1, 'sp-css-backgroundColor-BgCoral sp-css-color-CoralFont',if(indexOf(@group.fieldData,'09') != -1,'sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont' , 'sp-css-backgroundColor-BgCyan sp-css-color-CyanFont'))))))"
          },
          "style": {
            "display": "inline-flex",
            "height": "25px",
            "border-radius": "15px",
            "padding-left": "8px",
            "padding-top": "5px"
          },
          "children": [
            {
              "elmType": "span",
              "attributes": {
                "iconName": "IssueTracking"
              },
              "style": {
                "padding-right": "6px",
                "padding-top": "2px"
              }
            },
            {
              "elmType": "div",
              "style": {
                "display": "inline-flex",
                "padding-right": "9px"
              },
              "children": [
                {
                  "elmType": "div",
                  "txtContent": "=if(indexOf(@group.fieldData,'11') > -1 || indexOf(@group.fieldData,'12') > -1, 'Year ' + @group.fieldData + ' | ' , 'Task ' + @group.fieldData + ' | ')",
                  "attributes": {
                    "title": "=@group.fieldData",
                    "class": "ms-fontWeight-bold"
                  },
                  "style": {
                    "padding-left": "5px"
                  }
                },
                {
                  "elmType": "div",
                  "style": {
                    "padding-left": "5px"
                  },
                  "attributes": {
                    "class": "ms-fontWeight-bold"
                  },
                  "txtContent": "@group.count"
                },
                {
                  "elmType": "div",
                  "style": {
                    "padding-left": "5px"
                  },
                  "attributes": {
                    "class": "ms-fontWeight-normal"
                  },
                  "txtContent": "= if(@group.count!= 1,'bundles','bundle')"
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
View sourceLink to this definitionexam-bundle-tracker.json
Schema compatibility review notes

This historical definition differs from the pinned Microsoft schema. This may indicate an unsupported pattern or a schema limitation. Check the original requirements and test in your tenant before use.

  • /additionalRowClass must be object

From the contributor

How to use this sample

Summary

Often in certain schools, a system of corporate marking exists where multiple teachers teaching a particular cohort (e.g. Mathematics Extension 1) will mark a section of each student's paper to ensure consistency.

When this occurs, often bundles of papers are divided by class, and each teacher takes a bundle out of a cupboard, but it can be hard to track:

  • Who has possession of a particular bundle
  • Whether I have marked a particular bundle or not (without having to hunt down and check through every bundle!)

This sample transforms your list into an Exam Bundle Tracker which answers the two questions above.

screenshot of the sample

View requirements

The view format expect the following fields.

Internal Name Type Choices Allow Fill in Choice Other notes
Title Single line of text
YearOfTask Choice 2023, 2024, 2025 etc Yes
CourseYear Choice 07, 08, ..., 11 - Adv, 11 - Ext 1, 12 - Adv, 12 - Ext 1, 12 - Ext 2 etc No
BundleNumber Choice 1, 2, ..., 7 No
TotalBundles Number Min: 0
TaskNumber Choice 1, 2, 3, 4 (Yearly/Trial)
InPossession Person
NotMarked Multi Person
Marked Multi Person
UpdateLog Multiple lines of text, append to previous
InCirculation Yes/No

Views to make it work

The following views are needed, with the JSON code applied to the following views:

View name Type Sorting Filtering Group Other notes JSON code to paste
Overview List None InCirculation equal to Yes CourseYear asc exam-bundle-tracker-overview.json
Overview - include out of circulation List YearOfTask desc, BundleNumber asc CourseYear asc exam-bundle-tracker-overview.json

All grouping is initially expanded.

Sample

Solution Author(s)
exam-bundle-tracker.json Hubert Lam

Version history

Version Date Comments
1.0 14 July 2023 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.

Additional notes

Use the default All Items and Edit in Grid view to bulk enter new exam bundles.

Acknowledgements

The Exam Bundle Tracker was inspired by multiple other samples found here in the PnP community, and the author greatly acknowledges their contributions.

Keep exploring

More formats like this

Hide All Buttons on Command Bar

This sample demonstrates hiding all buttons on the command bar.

Explore format

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