Skip to content
Branch: master
Find file History
aprildunnam and thechriskent Added View Formatting Example for Planner Inspired Task Cards (#172)
* Birthday List Formatting

* Update README.md

Added Links, minor formatting, and added analytics image tag

* Renamed File

Renamed json file and normalized spacing

* Update README.md

Adjusted Link

* Planner Inspired Task Card

This View Formatting created Microsoft Planner-esq cards for task items.

* Update SPPlannerFormat.png

* Twitter Format

Formats a SharePoint list to look like Twitter.  Pulls in Twitter profile image, links to profile, share icon that links to tweet, retweet icon shows # of retweets

* Fixed README and adjusted DueDate field

Fixed Table issue (columns were backwards in view requirements)
Added choice values
Added tracking image
Switched column to use no space internally

* Added animated gif to README

* Simplified format

Removed unused neutral bgColor classes from root
Removed extra icon elements (combined into expression)
Fixed profile picture tooltip
Removed calendar icon when due date not provided

* Adjusted to use all theme colors

Now works in Dark themes

* Minor Corrections to Twitter-Format

Added missing view requirement column
Simplified format
Added Tracking image
Adjusted colors to use themes to support dark themes
Latest commit 566f52e Aug 12, 2019

README.md

Planner Inspired Task Cards

Summary

Formats Task List Items in a Planner Inspired Card View. Uses OfficeUIFabric Icons to designate "In Progress", "Completed" and "Delayed" Statuses. Automatically strikes out text for "Completed" items.

Planner Format

View requirements

All fields below should be part of the view, but only those marked with Required need to have values:

Type Internal Name Required
Single line of text Title Yes
Person AssignedTo Yes
Choice Status No
DateTime DueDate No

The Status column expects the following choice values:

  • In Progress
  • Delayed
  • Completed

Sample

Solution Author(s)
planner-inspired-task-card April Dunnam

Version history

Version Date Comments
1.0 July 26, 2019 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

This format takes advantage of CustomRowActions to enable the defaultClick and delete actions from icon buttons:

Custom Actions in Action

You can’t perform that action at this time.