Skip to content

Commit 6f1ecaf

Browse files
z3019494z3019494
authored
Student & Class Learning Tracker & Exam Bundle Tracker (v1) (pnp#687)
* Create README.md * Add files via upload * Update README.md * Create sclt-calendar.json * Create sclt-overview.json * Update README.md * Delete SCLT.gif * Add files via upload Named "SCLT.gif" instead of screenshot.png * Update README.md Acknowledgements added * Update README.md Added Views to Make it Work section * Update README.md * Update README.md Added new column to "Views to make it work" section * Update README.md Additional Power Automate flow buttons described * Create README.md * Create exam-bundle-tracker-overview.json * Update README.md * Add files via upload * Update README.md * Update README.md * Update README.md * Delete Exam Bundle Tracker.gif * Add files via upload * Update README.md * Update README.md * Update exam-bundle-tracker-overview.json Totalbundles column added * Add files via upload Screenshot now has some mosaic over the URL * Delete ExamBundleTracker.gif * Add files via upload Animated GIF with mosaic over the tenant base URL * Delete ExamBundleTracker.gif * Add files via upload * Update README.md * Update exam-bundle-tracker-overview.json Removed references to [$TaskActive], [$LatestQuestionPaper] etc that were from another sample. * Create multi-person-inlineEdit-pill.json JSON code for a multi person, with inline edit pill (similar to the style where the Show profile photos toggle is turned on in a Person field) * Create README.md * multi-person-inlineedit-pill - minor updates * multi-person-inlineedit-pill - updated sample.json * exam-bundle-tracker - minor updates * student-class-learning-tracker - minor updates * exam-bundle-tracker - updated sample.json * exam-bundle-tracker - updated README.md * student-class-learning-tracker - updated README.md * student-class-learning-tracker - updated README.md * exam-bundle-tracker - updated image * student-class-learning-tracker - updated README.md * student-class-learning-tracker - updated image --------- Co-authored-by: Tetsuya Kawahara
1 parent 93ff16d commit 6f1ecaf

14 files changed

+2605
-0
lines changed

‎column-samples/multi-person-inlineedit-pill/README.md

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Multi-Person inline edit pill
2+
3+
## Summary
4+
This sample provides a "pill" style for each person in a multi-select person field, whilst allowing inline edits.
5+
6+
The sample demonstrates the use of the `forEach` property to apply a format for each value of an array (multi-select person fields).
7+
8+
![screenshot of the sample](./assets/screenshot.gif)
9+
10+
## View requirements
11+
- This format can be applied to a Multi-Select Person column
12+
- This format uses operators only available in SharePoint Online and cannot be used in SharePoint 2019
13+
14+
## Sample
15+
16+
Solution|Author(s)
17+
--------|---------
18+
multi-person-inlineedit-pill.json | [Hubert Lam](https://github.com/z3019494) ([@z3019494](https://twitter.com/hubertlam))
19+
20+
## Version history
21+
22+
Version|Date|Comments
23+
-------|----|--------
24+
1.0|August 1, 2023|Initial release
25+
26+
## Disclaimer
27+
**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.**
28+
29+
---
30+
31+
## Additional notes
32+
33+
- [Use column formatting to customize SharePoint](https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting)
34+
35+
<img src="https://pnptelemetry.azurewebsites.net/list-formatting/column-samples/multi-person-inlineedit-pill" />

‎column-samples/multi-person-inlineedit-pill/assets/sample.json

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
[
2+
{
3+
"name": "pnp-list-formatting-multi-person-inlineedit-pill",
4+
"reponame": "multi-person-inlineedit-pill",
5+
"source": "pnp",
6+
"title": "Multi-Person inline edit pill",
7+
"shortDescription": "This sample provides a pill style for each person in a multi-select person field, whilst allowing inline edits.",
8+
"url": "https://github.com/pnp/list-formatting/tree/master/column-samples/multi-person-inlineedit-pill",
9+
"longDescription": [
10+
"This sample provides a pill style for each person in a multi-select person field, whilst allowing inline edits."
11+
],
12+
"creationDateTime": "2023-08-01T00:00:00.000Z",
13+
"updateDateTime": "2023-08-01T00:00:00.000Z",
14+
"products": [
15+
"SharePoint",
16+
"Microsoft Lists"
17+
],
18+
"metadata": [
19+
{
20+
"key": "LIST-SAMPLE-TYPE",
21+
"value": "Column"
22+
},
23+
{
24+
"key": "SHAREPOINT-COMPATIBILITY",
25+
"value": "SharePoint Online"
26+
},
27+
{
28+
"key": "SAMPLE-CATEGORIES",
29+
"value": ""
30+
},
31+
{
32+
"key": "LIST-COLUMN-TYPE",
33+
"value": "Multi-Person"
34+
},
35+
{
36+
"key": "FORMATTING-TOKENS",
37+
"value": ""
38+
},
39+
{
40+
"key": "FORMATTING-OPERATORS",
41+
"value": "getUserImage"
42+
},
43+
{
44+
"key": "FORMATTING-ACTIONS",
45+
"value": ""
46+
},
47+
{
48+
"key": "FORMATTING-FEATURES",
49+
"value": "defaultHoverField, forEach, inlineEditField"
50+
},
51+
{
52+
"key": "CLASSES",
53+
"value": "ms-bgColor-neutralLight, ms-fontColor-neutralPrimary"
54+
}
55+
],
56+
"thumbnails": [
57+
{
58+
"type": "image",
59+
"order": 100,
60+
"url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/column-samples/multi-person-inlineedit-pill/assets/screenshot.gif",
61+
"alt": "screenshot"
62+
}
63+
],
64+
"authors": [
65+
{
66+
"gitHubAccount": "z3019494",
67+
"pictureUrl": "https://github.com/z3019494.png",
68+
"name": "Hubert Lam"
69+
}
70+
],
71+
"references": [
72+
{
73+
"name": "Use column formatting to customize SharePoint",
74+
"description": "You can use column formatting to customize how fields in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when a field is included in a list view, and the styles to be applied to those elements. The column formatting does not change the data in the list item or file; it only changes how it\u2019s displayed to users who browse the list.",
75+
"url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/column-formatting"
76+
}
77+
]
78+
}
79+
]

‎column-samples/multi-person-inlineedit-pill/assets/screenshot.gif

1.24 MB
Loading

‎column-samples/multi-person-inlineedit-pill/multi-person-inlineEdit-pill.json

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
3+
"elmType": "div",
4+
"inlineEditField": "@currentField",
5+
"style": {
6+
"display": "flex",
7+
"flex-wrap": "wrap"
8+
},
9+
"children": [
10+
{
11+
"elmType": "div",
12+
"forEach": "person in @currentField",
13+
"style": {
14+
"display": "=if(@currentField,'flex','none')",
15+
"flex-direction": "row",
16+
"align-items": "center",
17+
"white-space": "nowrap",
18+
"border-radius": "13px",
19+
"margin": "4px",
20+
"margin-left": "10px"
21+
},
22+
"attributes": {
23+
"class": "ms-bgColor-neutralLight"
24+
},
25+
"defaultHoverField": "[$person]",
26+
"children": [
27+
{
28+
"elmType": "img",
29+
"style": {
30+
"width": "28px",
31+
"height": "28px",
32+
"border-radius": "50%"
33+
},
34+
"attributes": {
35+
"src": "=getUserImage([$person.email], 'small')"
36+
}
37+
},
38+
{
39+
"elmType": "div",
40+
"txtContent": "[$person.title]",
41+
"style": {
42+
"padding-left": "6px",
43+
"padding-right": "10px"
44+
},
45+
"attributes": {
46+
"class": "ms-fontColor-neutralPrimary"
47+
}
48+
}
49+
]
50+
}
51+
]
52+
}

‎view-samples/exam-bundle-tracker/README.md

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# Exam Bundle Tracker
2+
3+
## Summary
4+
5+
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.
6+
7+
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:
8+
- Who has possession of a particular bundle
9+
- Whether I have marked a particular bundle or not (without having to hunt down and check through every bundle!)
10+
11+
This sample transforms your list into an Exam Bundle Tracker which answers the two questions above.
12+
13+
![screenshot of the sample](./assets/screenshot.gif)
14+
15+
## View requirements
16+
The view format expect the following fields.
17+
18+
Internal Name |Type | Choices | Allow Fill in Choice | Other notes
19+
--------|---------|--------|---------|---------
20+
Title | Single line of text | |
21+
YearOfTask | Choice | `2023`, `2024`, `2025` etc | Yes | |
22+
CourseYear | Choice | `07`, `08`, ..., `11 - Adv`, `11 - Ext 1`, `12 - Adv`, `12 - Ext 1`, `12 - Ext 2` etc | No |
23+
BundleNumber | Choice | `1`, `2`, ..., `7` | No |
24+
TotalBundles | Number | | | Min: `0`
25+
TaskNumber | Choice | `1`, `2`, `3`, `4 (Yearly/Trial)` |
26+
InPossession | Person | |
27+
NotMarked | Multi Person | |
28+
Marked | Multi Person | |
29+
UpdateLog | Multiple lines of text, append to previous | |
30+
InCirculation | Yes/No | |
31+
32+
### Views to make it work
33+
The following views are needed, with the JSON code applied to the following views:
34+
35+
View name | Type | Sorting | Filtering | Group | Other notes | JSON code to paste
36+
--------|---------|--------|---------|---------|---------|---------
37+
Overview | List | None | `InCirculation` equal to `Yes` | `CourseYear` asc | | exam-bundle-tracker-overview.json
38+
Overview - include out of circulation | List | `YearOfTask` desc, `BundleNumber` asc | | `CourseYear` asc | | exam-bundle-tracker-overview.json
39+
40+
All grouping is initially expanded.
41+
42+
## Sample
43+
44+
Solution| Author
45+
--------|---------
46+
exam-bundle-tracker-overview.json | [Hubert Lam](https://github.com/z3019494) ([Hubert Lam](https://twitter.com/z3019494))
47+
48+
## Version history
49+
50+
Version|Date|Comments
51+
-------|----|--------
52+
1.0|14 July 2023|Initial release
53+
54+
## Disclaimer
55+
56+
**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.**
57+
58+
---
59+
60+
## Additional notes
61+
Use the default **All Items** and **Edit in Grid** view to bulk enter new exam bundles.
62+
63+
## Acknowledgements
64+
The Exam Bundle Tracker was inspired by multiple other samples found here in the PnP community, and the author greatly acknowledges their contributions.
65+
- [Giuliano Del Luca's Video Library view](https://github.com/giuleon/ListViewFormattingVideoLibrary)
66+
- [Tetsuya Kawahara's Assign to Me column formatting](https://github.com/pnp/List-Formatting/tree/master/column-samples/person-assign-to-me)
67+
- [Michel Mendes' Group Header Status Icon and Color group formatting](https://github.com/pnp/list-formatting/tree/master/view-samples/group-header-status-icon-color)
68+
69+
<img src="https://pnptelemetry.azurewebsites.net/list-formatting/view-samples/exam-bundle-tracker" />

‎view-samples/exam-bundle-tracker/assets/sample.json

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
[
2+
{
3+
"name": "pnp-list-formatting-exam-bundle-tracker",
4+
"reponame": "exam-bundle-tracker",
5+
"source": "pnp",
6+
"title": "Exam Bundle Tracker",
7+
"shortDescription": "This sample transforms your list into an Exam Bundle Tracker.",
8+
"url": "https://github.com/pnp/list-formatting/tree/master/view-samples/exam-bundle-tracker",
9+
"longDescription": [
10+
"This sample transforms your list into an Exam Bundle Tracker."
11+
],
12+
"creationDateTime": "2023-07-14T00:00:00.000Z",
13+
"updateDateTime": "2023-07-14T00:00:00.000Z",
14+
"products": [
15+
"SharePoint",
16+
"Microsoft Lists"
17+
],
18+
"metadata": [
19+
{
20+
"key": "LIST-SAMPLE-TYPE",
21+
"value": "View"
22+
},
23+
{
24+
"key": "SHAREPOINT-COMPATIBILITY",
25+
"value": "SharePoint Online"
26+
},
27+
{
28+
"key": "SAMPLE-CATEGORIES",
29+
"value": "Icons"
30+
},
31+
{
32+
"key": "LIST-COLUMN-TYPE",
33+
"value": ""
34+
},
35+
{
36+
"key": "FORMATTING-TOKENS",
37+
"value": "@group.fieldData, @group.count"
38+
},
39+
{
40+
"key": "FORMATTING-OPERATORS",
41+
"value": "indexOf, length, getUserImage"
42+
},
43+
{
44+
"key": "FORMATTING-ACTIONS",
45+
"value": "setValue, share, editProps"
46+
},
47+
{
48+
"key": "FORMATTING-FEATURES",
49+
"value": "hideSelection, hideColumnHeader, rowFormatter, groupProps, headerFormatter, forEach"
50+
},
51+
{
52+
"key": "CLASSES",
53+
"value": "ms-bgColor-grey, ms-bgColor-neutralLight, ms-bgColor-neutralQuaternary--hover, ms-bgColor-themeLighter, ms-bgColor-themeLight--hover, ms-fontColor-black, ms-fontColor-neutralPrimary, ms-fontColor-white--hover, ms-fontWeight-bold, ms-fontWeight-semibold, sp-css-backgroundColor-BgCoral, sp-css-backgroundColor-BgCornflowerBlue, sp-css-backgroundColor-BgCyan, sp-css-backgroundColor-BgCyan, sp-css-backgroundColor-BgCyan30--hover, sp-css-backgroundColor-BgDarkPink, sp-css-backgroundColor-BgDustRose, sp-css-backgroundColor-BgGold, sp-css-backgroundColor-BgLightBlue20, sp-css-backgroundColor-BgMintGreen, sp-css-backgroundColor-BgMintGreen, sp-css-backgroundColor-BgMintGreen30--hover, sp-css-backgroundColor-BgPeach, sp-css-backgroundColor-disabledBackground, sp-css-backgroundColor-neutralBackground, sp-css-borderLeftColor-CoralFont, sp-css-borderLeftColor-CornflowerBlueFont, sp-css-borderLeftColor-CyanFont, sp-css-borderLeftColor-DustRoseFont, sp-css-borderLeftColor-GoldFont, sp-css-borderLeftColor-MintGreenFont, sp-css-borderLeftColor-PeachFont, sp-css-borderRight-warningBorder, sp-css-borderTop-successBorder, sp-css-borderTop-warningBorder, sp-css-color-DustRoseFont, sp-css-color-MintGreenFont, sp-css-color-neutralFont, sp-css-color-WhiteText, sp-field-borderLeftBold, sp-field-borderLeftBold, sp-field-borderLeftSolid, sp-field-borderLeftSolid, sp-field-borderLeftSolid, sp-field-fontSizeSmall, sp-row-button, sp-row-buttonms-bgColor-grey, sp-row-card, sp-row-listPadding, sp-row-listPadding"
54+
}
55+
],
56+
"thumbnails": [
57+
{
58+
"type": "image",
59+
"order": 100,
60+
"url": "https://raw.githubusercontent.com/pnp/List-Formatting/master/view-samples/exam-bundle-tracker/assets/screenshot.gif",
61+
"alt": "screenshot"
62+
}
63+
],
64+
"authors": [
65+
{
66+
"gitHubAccount": "z3019494",
67+
"pictureUrl": "https://github.com/z3019494.png",
68+
"name": "Hubert Lam"
69+
}
70+
],
71+
"references": [
72+
{
73+
"name": "Use view formatting to customize SharePoint",
74+
"description": "You can use view formatting to customize how items in SharePoint lists and libraries are displayed. To do this, you construct a JSON object that describes the elements that are displayed when an item is loaded in a view and any styles to be applied to those elements.",
75+
"url": "https://docs.microsoft.com/sharepoint/dev/declarative-customization/view-formatting"
76+
}
77+
]
78+
}
79+
]

‎view-samples/exam-bundle-tracker/assets/screenshot.gif

577 KB
Loading

0 commit comments

Comments
 (0)