SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Flashcards

This sample creates a set of flashcards from list items. A flashcard is a card bearing information on both sides, which is intended to be used as an aid in memorization. Each flashcard bears a question on one side and an answer on the other. Flashcards are often used to memorize vocabulary, historical dates, formulas or any subject matter that can be learned via a question-and-answer format.

Get this format View on GitHub

Shared by Anand Ragav
Updated Dec 6, 2021

Flashcards 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/tile-formatting.schema.json",
  "height": 305,
  "width": 340,
  "hideSelection": true,
  "fillHorizontally": false,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card sp-card-borderHighlight"
    },
    "style": {
      "width": "340px",
      "height": "305px",
      "border-color": "=if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Teams', '#6264a7',if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'SharePoint', '#036C70', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Forms', '#007F70', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Stream', '#BC1948', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'PowerApps', '#73276C', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Power automate', '#0E41B1', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Power BI', '#EDBF2C', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Power Virtual agents', '#09566A',  if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Microsoft List', '#974A8B',   '#0082f0')",
      "border-style": "solid",
      "border-width": "1.5px",
      "box-shadow": "1px 1px 2px darkgrey",
      "border-radius": "6px",
      "background-color": "=if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Teams', '#6264a7',if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'SharePoint', '#036C70', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Forms', '#007F70', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Stream', '#BC1948', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'PowerApps', '#73276C', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Power automate', '#0E41B1', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Power BI', '#EDBF2C', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Power Virtual agents', '#09566A', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Microsoft List', '#974A8B',  '#0082f0')",
      "white-space": "normal",
      "padding": "4px 4px 4px 4px",
      "font-size": "13px",
      "flex-direction": "column",
      "justify-content": "center",
      "cursor": "pointer"
    },
    "customRowAction": {
      "action": "setValue",
      "actionInput": {
        "Users": "=if(indexOf([$Users.email] , @me) > -1 , removeFrom([$Users.email] , @me) , appendTo([$Users.email] , @me))"
      }
    },
    "children": [
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "justify-content": "center",
              "flex-direction": "row"
            },
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "background-color": "=if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Teams', '#6264a7',if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'SharePoint', '#036C70', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Forms', '#007F70', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Stream', '#BC1948', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'PowerApps', '#73276C', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Power automate', '#0E41B1', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Power BI', '#EDBF2C', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Power Virtual agents', '#09566A', if(indexOf([$Users.email] , @me) > -1 && [$Title] == 'Microsoft List', '#974A8B',   '#0082f0')",
                  "white-space": "normal",
                  "padding": "4px 4px 4px 4px",
                  "font-size": "=if(indexOf([$Users.email] , @me) > -1, '17px', '30px')",
                  "font-weight": "600",
                  "color": "white",
                  "justify-content": "center",
                  "flex-direction": "column",
                  "align-items": "center"
                },
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": "=if(indexOf([$Users.email] , @me) > -1, '[$Description]', '[$Title]')"
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionflashcards.json

From the contributor

How to use this sample

Summary

This sample creates a set of flashcards from list items. A flashcard is a card bearing information on both sides, which is intended to be used as an aid in memorization. Each flashcard bears a question on one side and an answer on the other. Flashcards are often used to memorize vocabulary, historical dates, formulas or any subject matter that can be learned via a question-and-answer format.

When a user clicks on a tile the item is updated to indicate the user's preference. Though the value is stored in the list item, it is unique to the active user. This means that state is maintained across users.

screenshot of the sample

View requirements

Column Name Type
Title Single Line Text
Description Multi Line Text
Users Person or Group (multiple selection allowed)

Sample

Solution Author(s)
flashcards.json Anand Vadivelan

Version history

Version Date Comments
1.0 December 6, 2021 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

Keep exploring

More formats like this

Course Training Tile Cards

Modern tile card layout for displaying training courses with images, badges, and hover previews in SharePoint Gallery view.

Explore format

Picture Link Tiles - Collapsible

Creates a card-style tile view in a SharePoint list with expand and collapse functionality.

Explore format

Icon Link Tiles

This sample uses tileProps element to create tile layout on the view. This layout allow users to see the list as the promoted links app (including the power the security trimming on the items). This sample uses the Icons from the Microsoft UI Fabric. The name of the icon is referenced through an Icon field.

Explore format