Tetsuya Kawahara

Column Formatting

0 to 10 Rating Scale

This sample demonstrates the use of the split operator to change the value of a number column to the appearance of a 0 to 10 rating scale.

by Tetsuya Kawahara

View sample details →

View Formatting

Advent Calendar

This sample demonstrates an advent calendar where you can click on the present box of the day to see the presents.

by Tetsuya Kawahara

View sample details →

Column Formatting

Approval Status Icons and Colors

This sample demonstrates how to change icons and colors based on the value in the Approval Status column.

by Tetsuya Kawahara

View sample details →

Column Formatting

Assign to Me

This sample demonstrates the use of the setValue action of customRowAction to set the current logged-in user in the Person column.

by Tetsuya Kawahara

View sample details →

View Formatting

Average Rating Row Class

This sample demonstrates how to change the background color of a row based on Average Rating.

by Tetsuya Kawahara

View sample details →

Column Formatting

Bulleted and Numbered List

This sample demonstrates displaying Multi-Select Choice column values like a bulleted and numbered list.

by Tetsuya Kawahara

View sample details →

View Formatting

Butterfly Chart

This sample formats a SharePoint list view into a butterfly chart.

by Tetsuya Kawahara

View sample details →

Column Formatting

Color Circles

This sample demonstrates displaying a circle of the color of the value of the choices.

by Tetsuya Kawahara

View sample details →

Column Formatting

Count the Number of Clicks on a Link

This sample demonstrates counting the number of clicks on a link.

by Tetsuya Kawahara

View sample details →

View Formatting

Current User Liked Row Class

This sample demonstrates how to change the background color of a row that has been liked by the current user.

by Tetsuya Kawahara

View sample details →

Form Formatting

Dashed Line Header

This sample displays the Title and Description values in the heading and decorates them with dashed lines. If the Description value is empty, it will be hidden.

by Tetsuya Kawahara

View sample details →

Column Formatting

Demote News to Site Page

This sample demonstrates how to use the setValue action to update the value of the Promoted State column to 0 and demote the news to a page.

by Tetsuya Kawahara, Cory Schwartz

View sample details →

View Formatting

Display a User's Photo in Group Header

This is a sample of customizing the group header when grouping by user column. Display the user's picture as well as the user's name in the group header.

by Tetsuya Kawahara

View sample details →

Column Formatting

Display Comment Count

This sample shows the comment count for a list item.

by Tetsuya Kawahara

View sample details →

Column Formatting

Display Count Up and Count Down Buttons

This sample demonstrates a button with a number increasing by one and a button with a number decreasing by one.

by Tetsuya Kawahara

View sample details →

Form Formatting

Display Created and Modified Information in the Footer

This sample demonstrates displaying the values of Created, Created By, Modified, and Modified By in the footer of the form.

by Tetsuya Kawahara

View sample details →

View Formatting

Display Edit in Grid View Button in the Command Bar

In the Document Library, the [Edit in grid view] button is hidden under the [...] button. This sample demonstrates displaying the [Edit in grid view] button on the command bar.

by Tetsuya Kawahara

View sample details →

Column Formatting

Display Hourglass

This sample demonstrates displaying an hourglass.

by Tetsuya Kawahara

View sample details →

Column Formatting

Display icons by repeating

This sample demonstrates the use of the padStart and split operators to repeatedly display icons for the number of values in the number column.

by Tetsuya Kawahara

View sample details →

Column Formatting

Display Link to Google Maps

This sample demonstrates displaying a link to Google Maps. When you open that link, a map of the area around the field value location is displayed.

by Tetsuya Kawahara

View sample details →

Column Formatting

Display QR Code

This sample demonstrates the use of TEC-IT's service to convert column value text into a QR code and display it.

by Tetsuya Kawahara

View sample details →

Column Formatting

Display Tags

This sample demonstrates changing managed metadata values to tag-like appearance.

by Tetsuya Kawahara

View sample details →

Column Formatting

Display URLs in Hyperlink Column

This sample demonstrates displaying a URL in a hyperlink column.

by Watana, Tetsuya Kawahara

View sample details →

Column Formatting

Displaying embedded content using the embed action

This sample demonstrates displaying embedded content using the embed action.

by Tetsuya Kawahara

View sample details →

Column Formatting

Doughnut Chart

Changes the appearance of the values in number columns (percent) to a donut chart.

by Tetsuya Kawahara

View sample details →

Form Formatting

Event Itinerary Header

This sample shows a customized header for the item form used in the "Event itinerary" list template.

by Tetsuya Kawahara

View sample details →

Column Formatting

Field Value Update Button

This sample demonstrates displaying a button to update the fields values of an item.

by Tetsuya Kawahara

View sample details →

Column Formatting

File Preview Callout with the embed Action

This sample demonstrates how to display a file preview from a document library or Site Pages inside a callout using the embed action. This allows users to view file contents without leaving the current page.

by Tetsuya Kawahara

View sample details →

Column Formatting

File Thumbnails

Utilizes the @thumbnail placeholder token to create an inline preview for document libraries.

by Chris Kent, Tetsuya Kawahara

View sample details →

Column Formatting

Gantt Chart

This sample demonstrates the use of the Calculated column to generate a string for displaying a Gantt chart, and then parses the string to display the Gantt chart.

by Tetsuya Kawahara

View sample details →

Column Formatting

Heart in Heart

This sample demonstrates how to change the size of a heart by using the percent value of a numeric column.

by Tetsuya Kawahara

View sample details →

Column Formatting

Heart Shading

This sample demonstrates how to express percentages in terms of the color shading of a heart displayed in SVG.

by Tetsuya Kawahara

View sample details →

View Formatting

Honeycomb Links

Formats links to look like honeycombs!

by Tetsuya Kawahara

View sample details →

Column Formatting

Inline Column Chart

This sample demonstrates displaying a column chart using SVG. It uses the `currentColor` for the fill value of the SVGs which allows us to use a theme class to make the final SVGs fit your site's theme.

by Tetsuya Kawahara

View sample details →

Column Formatting

Like/Dislike Bar

This sample demonstrates displaying a Like/Dislike bar that visualizes the ratio of Like to Dislike users.

by Tetsuya Kawahara

View sample details →

Column Formatting

Liked By Users

This sample demonstrates showing the users who have liked an item.

by Tetsuya Kawahara

View sample details →

View Formatting

Likes Count Row Class

This sample demonstrates how to change the background color of a row depending on the number of likes.

by Tetsuya Kawahara

View sample details →

Column Formatting

Linear Gauge

This sample demonstrates displaying a linear gauge from a regular string set to the split operator.

by Tetsuya Kawahara

View sample details →

View Formatting

Link Collection using Emojis

This sample demonstrates a link collection using Emoji and is a customization of the Gallery layout. Additionally, this sample combines group customization with a tile format.

by Tetsuya Kawahara

View sample details →

View Formatting

Links to Search Page

This sample demonstrates displaying links to the search page. When you open the search page, it displays the search results where the query registered in the Query column of the item has been executed.

by Tetsuya Kawahara

View sample details →

Column Formatting

Managed Metadata Tag Icon

This sample displays a tag icon to the left of the value in the managed metadata column.

by Tetsuya Kawahara

View sample details →

View Formatting

Message Chat Bubbles

This sample formats your SharePoint list view to look like message chat bubbles! If the Author is the current user, the message will be displayed on the right.

by Tetsuya Kawahara

View sample details →

Column Formatting

Monthly Emoji

This sample demonstrates how to display a emoji representing the month of the date to the left of the date.

by Tetsuya Kawahara

View sample details →

View Formatting

Multilingual Quotes

This sample demonstrates the use of the @UIlcid token to change the text displayed based on the site display language.

by Tetsuya Kawahara

View sample details →

Column Formatting

Number Battery

This sample changes the appearance of the values in number columns (percent) to look like a battery.

by Tetsuya Kawahara

View sample details →

Column Formatting

Number Gradation

This sample demonstrates a gradual background color change between the minimum and maximum values.

by Tetsuya Kawahara

View sample details →

Column Formatting

Page-a-day Calendar

This sample customizes a date column to look like a page-a-day calendar. It does this by using the date part functions (`getDate`, `getMonth`, and `getYear`).

by Tetsuya Kawahara, Watana

View sample details →

View Formatting

Piano

This sample formats your SharePoint list view to look like a piano.

by Tetsuya Kawahara

View sample details →

View Formatting

Picture Link Tiles

This sample demonstrates a link collection using picture and is a customization of the Gallery layout. Additionally, this sample combines group customization with a tile format.

by Tetsuya Kawahara, Watana

View sample details →

View Formatting

Praise Cards

This sample demonstrates how to display Praise Cards. By creating a Praise Card, you can express your appreciation and admiration to others for their daily cooperation and actions!

by Tetsuya Kawahara

View sample details →

Column Formatting

Progress bar using text or emoji

This sample demonstrates the use of text symbols and emoji to display a progress bar.

by Tetsuya Kawahara

View sample details →

Column Formatting

Reacting and displaying users who have reacted

This sample demonstrates how to react and display users who have reacted.

by Tetsuya Kawahara

View sample details →

Form Formatting

Ribbon Header

This sample demonstrates displaying a ribbon in the header.

by Tetsuya Kawahara

View sample details →

Column Formatting

Scheduling Dialog Links to MS Teams and Outlook

This sample demonstrates creating deep links to the scheduling dialog in Microsoft Teams and Microsoft Outlook.

by Tetsuya Kawahara

View sample details →

Form Formatting

Send Email to Task owner

This sample demonstrates displaying Email link to send an email to task owner

by Ganesh Sanap, Tetsuya Kawahara

View sample details →

Column Formatting

Shaded Backgrounds

This sample demonstrates how to change the shade of the background color according to the value of the number column.

by Tetsuya Kawahara

View sample details →

Column Formatting

Star Rating

This sample demonstrates changing the value of a number column to a star rating.

by Tetsuya Kawahara

View sample details →

View Formatting

Sticky Notes Board

This sample demonstrates how to display sticky notes in a Board View.

by Tetsuya Kawahara

View sample details →

Column Formatting

Time Schedule

This sample demonstrates a time schedule with a filled background from Start time to End time.

by Tetsuya Kawahara

View sample details →

View Formatting

Timeline

This sample formats your SharePoint list view to look like a timeline.

by Tetsuya Kawahara

View sample details →

Column Formatting

Timeline Format

This sample demonstrates displaying a timeline in a column. If the column value is empty, no circle will be displayed. The content of the column will be shown in a popup when you click on the dot.

by Tetsuya Kawahara

View sample details →

View Formatting

Timeline in Board View

This sample demonstrates displaying timelines in Board View.

by Tetsuya Kawahara

View sample details →

View Formatting

Travel Tweets Board

This sample demonstrates using the board view to display travel tweets in a timeline format. Each tweet supports one image and one map link.

by Tetsuya Kawahara

View sample details →

View Formatting

Vertical Mega Menu

This sample demonstrates the use of multi lines of text column value and the split operator to display a vertical mega menu.

by Tetsuya Kawahara

View sample details →

Form Formatting

Wave Header and Footer

This sample demonstrates how to display waves in the header and footer of a form. Waves are displayed using SVG.

by Tetsuya Kawahara

View sample details →

View Formatting

Wordle

This sample reproduces the popular word puzzle game Wordle with Microsoft Lists.

by Tetsuya Kawahara

View sample details →

Column Formatting

Work Progress Category Pill

This JSON sample demonstrates how you can format the work progress category choices as pills found in the newly released Microsoft Lists Work progress tracker template.

by Ganesh Sanap, Tetsuya Kawahara

View sample details →

Form Formatting

Workflow Progress Header

This sample shows a checkmark for each date field that has a value to help convey when milestones have been hit.

by Tetsuya Kawahara

View sample details →

Column Formatting

World Current Time

This sample demonstrates the side-by-side display and comparison of the current time in different countries around the world.

by Tetsuya Kawahara

View sample details →

Column Formatting

World Time

This sample demonstrates displaying the times of countries and regions of the world for a date column value that includes the time.

by Tetsuya Kawahara

View sample details →

Column Formatting

Yearly Gantt Chart

This sample demonstrates the display of a yearly Gantt chart.

by Tetsuya Kawahara, Alvin Fong, DRVRogo, Chris Kent

View sample details →

Column Formatting

Yes/No Checkbox

This sample uses Fluent UI icons and theme classes to provide a better visualization for Yes/No fields while respecting theme colors.

by Chris Kent, Tetsuya Kawahara

View sample details →

Column Formatting

Yes/No Column Toggle

This sample demonstrates changing the value of the Yes/No column to a toggle. Three different versions of the sample are provided (Toggle, Icon, Emoji).

by Tetsuya Kawahara

View sample details →

Column Formatting

Yes/No Icon Color

This sample demonstrates how to change the color of the icon according to the value of the Yes/No column.

by Tetsuya Kawahara

View sample details →