SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Roll Dice

This sample format provides a simulation of a game where a random number (between 1 and 6) is generated and displayed as a die. The value makes the progress bar advance with the associated emoji until the value 0 is reached and the winner emoji appears.

Get this format View on GitHub

Shared by André Lage
Updated Jan 21, 2022

Roll Dice 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",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "children": [
      {
        "elmType": "div",
        "style": {
          "padding": "30px",
          "border": "1px solid #ccc",
          "box-shadow": "0 0 5px #ccc"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "padding": "10px"
            },
            "children": [
              {
                "elmType": "div",
                "txtContent": "NEW GAME",
                "style": {
                  "padding": "10px",
                  "cursor": "pointer",
                  "width": "120px",
                  "border-radius": "10px"
                },
                "attributes": {
                  "class": "ms-fontSize-20 sp-css-backgroundColor-red ms-fontColor-white"
                },
                "customRowAction": {
                  "action": "setValue",
                  "actionInput": {
                    "Value": "10",
                    "Value2": "10",
                    "Dice": "10",
                    "Dice2": "10",
                    "Position": ""
                  }
                }
              }
            ]
          },
          {
            "elmType": "div",
            "children": [
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "width": "300px",
                  "padding-left": "150px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "padding": "5px 5px",
                      "border-left": "5px solid #e81123",
                      "border-top": "5px solid #e81123",
                      "border-radius": "50% 0% 0% 0%"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "1",
                        "style": {
                          "width": "20px",
                          "height": "20px",
                          "text-align": "center",
                          "border-radius": "25px 25px 25px 25px",
                          "visibility": "=if([$Position]=='Race2',if(([$Dice2]-[$Value2])==4 || ([$Dice2]-[$Value2])==5 || ([$Dice2]-[$Value2])==6, 'visible','hidden'),if(([$Dice]-[$Value])==4 || ([$Dice]-[$Value])==5 || ([$Dice]-[$Value])==6, 'visible','hidden')"
                        },
                        "attributes": {
                          "class": "ms-bgColor-red ms-fontColor-red  ms-fontWeight-semibold ms-fontSize-10"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "padding": "5px 5px",
                      "border-top": "5px solid #e81123"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "width": "20px",
                          "height": "20px",
                          "text-align": "center",
                          "border-radius": "25px 25px 25px 25px"
                        },
                        "attributes": {
                          "class": "ms-fontWeight-semibold ms-fontSize-10"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "padding": "5px 5px",
                      "border-right": "5px solid #e81123",
                      "border-top": "5px solid #e81123",
                      "border-radius": "0% 50% 0% 0%"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "3",
                        "style": {
                          "width": "20px",
                          "height": "20px",
                          "text-align": "center",
                          "border-radius": "25px 25px 25px 25px",
                          "visibility": "=if([$Position]=='Race2',if(([$Dice2]-[$Value2])==2 || ([$Dice2]-[$Value2])==3 || ([$Dice2]-[$Value2])==4 || ([$Dice2]-[$Value2])==6 || ([$Dice2]-[$Value2])==5, 'visible','hidden'),if(([$Dice]-[$Value])==2 || ([$Dice]-[$Value])==3 || ([$Dice]-[$Value])==4 || ([$Dice]-[$Value])==6 || ([$Dice]-[$Value])==5, 'visible','hidden')"
                        },
                        "attributes": {
                          "class": "ms-bgColor-red ms-fontColor-red  ms-fontWeight-semibold ms-fontSize-10"
                        }
                      }
                    ]
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "width": "300px",
                  "padding-left": "150px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "padding": "5px 5px",
                      "border-left": "5px solid #e81123"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "4",
                        "style": {
                          "width": "20px",
                          "height": "20px",
                          "text-align": "center",
                          "border-radius": "25px 25px 25px 25px",
                          "visibility": "=if([$Position]=='Race2',if(([$Dice2]-[$Value2])==6 , 'visible','hidden'),if(([$Dice]-[$Value])==6 , 'visible','hidden')"
                        },
                        "attributes": {
                          "class": "ms-bgColor-red ms-fontColor-red ms-fontWeight-semibold ms-fontSize-10"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "padding": "5px 5px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "5",
                        "style": {
                          "width": "20px",
                          "height": "20px",
                          "text-align": "center",
                          "border-radius": "25px 25px 25px 25px",
                          "visibility": "=if([$Position]=='Race2',if(([$Dice2]-[$Value2])==5 || ([$Dice2]-[$Value2])==3 || ([$Dice2]-[$Value2])==1, 'visible','hidden'),if(([$Dice]-[$Value])==5 || ([$Dice]-[$Value])==3 || ([$Dice]-[$Value])==1, 'visible','hidden')"
                        },
                        "attributes": {
                          "class": "ms-bgColor-red ms-fontColor-red  ms-fontWeight-semibold ms-fontSize-10"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "padding": "5px 5px",
                      "border-right": "5px solid #e81123"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "6",
                        "style": {
                          "width": "20px",
                          "height": "20px",
                          "text-align": "center",
                          "border-radius": "25px 25px 25px 25px",
                          "visibility": "=if([$Position]=='Race2',if(([$Dice2]-[$Value2])==6, 'visible','hidden'),if(([$Dice]-[$Value])==6, 'visible','hidden')"
                        },
                        "attributes": {
                          "class": "ms-bgColor-red ms-fontColor-red ms-fontWeight-semibold ms-fontSize-10"
                        }
                      }
                    ]
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "display": "flex",
                  "width": "300px",
                  "padding-left": "150px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "padding": "5px 5px",
                      "border-left": "5px solid #e81123",
                      "border-bottom": "5px solid #e81123",
                      "border-radius": "0% 0% 0% 50%"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "7",
                        "style": {
                          "width": "20px",
                          "height": "20px",
                          "text-align": "center",
                          "border-radius": "25px 25px 25px 25px",
                          "visibility": "=if([$Position]=='Race2',if(([$Dice2]-[$Value2])==6 || ([$Dice2]-[$Value2])==2 || ([$Dice2]-[$Value2])==3 || ([$Dice2]-[$Value2])==4 || ([$Dice2]-[$Value2])==5, 'visible','hidden'),if(([$Dice]-[$Value])==6 || ([$Dice]-[$Value])==2 || ([$Dice]-[$Value])==3 || ([$Dice]-[$Value])==4 || ([$Dice]-[$Value])==5, 'visible','hidden')"
                        },
                        "attributes": {
                          "class": "ms-bgColor-red ms-fontColor-red  ms-fontWeight-semibold ms-fontSize-10"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "padding": "5px 5px",
                      "border-bottom": "5px solid #e81123"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "width": "20px",
                          "height": "20px",
                          "text-align": "center",
                          "border-radius": "25px 25px 25px 25px"
                        },
                        "attributes": {
                          "class": "ms-fontWeight-semibold ms-fontSize-10"
                        }
                      }
                    ]
                  },
                  {
                    "elmType": "div",
                    "style": {
                      "display": "flex",
                      "padding": "5px 5px",
                      "border-bottom": "5px solid #e81123",
                      "border-right": "5px solid #e81123",
                      "border-radius": "0% 0% 50% 0%"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "txtContent": "9",
                        "style": {
                          "width": "20px",
                          "height": "20px",
                          "text-align": "center",
                          "border-radius": "25px 25px 25px 25px",
                          "visibility": "=if([$Position]=='Race2',if(([$Dice2]-[$Value2])==4 || ([$Dice2]-[$Value2])==5 || ([$Dice2]-[$Value2])==6, 'visible','hidden'),if(([$Dice]-[$Value])==4 || ([$Dice]-[$Value])==5 || ([$Dice]-[$Value])==6, 'visible','hidden')"
                        },
                        "attributes": {
                          "class": "ms-bgColor-red ms-fontColor-red  ms-fontWeight-semibold ms-fontSize-10"
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "padding": "10px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "padding-left": "130px"
                },
                "children": [
                  {
                    "elmType": "div",
                    "txtContent": "ROLL DICE",
                    "style": {
                      "padding": "10px",
                      "cursor": "pointer",
                      "width": "100px",
                      "border-radius": "10px"
                    },
                    "attributes": {
                      "class": "ms-fontSize-20 sp-css-backgroundColor-red ms-fontColor-white"
                    },
                    "customRowAction": {
                      "action": "setValue",
                      "actionInput": {
                        "Position": "=if(length([$Position])==0 || [$Position]=='Race2','Race1','Race2')",
                        "Value": "=if(length([$Position])==0 || [$Position]=='Race2',if(([$Value]-if(Number(@now)%7==0,1,if(Number(@now)%7==1,2,if(Number(@now)%7==2,3,if(Number(@now)%7==3,4,if(Number(@now)%7==4,5,6))))))<0,0,([$Value]-if(Number(@now)%7==0,1,if(Number(@now)%7==1,2,if(Number(@now)%7==2,3,if(Number(@now)%7==3,4,if(Number(@now)%7==4,5,6))))))),[$Value])",
                        "Value2": "=if([$Position]=='Race1',if(([$Value2]-if(Number(@now)%7==0,1,if(Number(@now)%7==1,2,if(Number(@now)%7==2,3,if(Number(@now)%7==3,4,if(Number(@now)%7==4,5,6))))))<0,0,([$Value2]-if(Number(@now)%7==0,1,if(Number(@now)%7==1,2,if(Number(@now)%7==2,3,if(Number(@now)%7==3,4,if(Number(@now)%7==4,5,6))))))),[$Value2])",
                        "Dice": "=if(length([$Position])==0 || [$Position]=='Race2',[$Value],[$Dice])",
                        "Dice2": "=if(length([$Position])==0 || [$Position]=='Race2',[$Value2],[$Dice2])"
                      }
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontSize-32"
                },
                "txtContent": "=if([$Value] ==0 && [$Value2]>0,'🥇',if([$Value2] ==0 && [$Value]>0,'🥈','🏁'))"
              },
              {
                "elmType": "div",
                "style": {
                  "padding-left": "20px",
                  "display": "flex",
                  "justify-content": "center",
                  "align-items": "center"
                },
                "children": [
                  {
                    "elmType": "div",
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "background-color": "#eee",
                          "border-radius": "25px",
                          "width": "320px",
                          "display": "table"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "style": {
                              "display": "table-cell",
                              "background-color": "=if([$Value]==0,'#FF2C05',if([$Value]==1,'#FD6104',if([$Value]==2,'#FD9A01',if([$Value]==3,'#FFCE03',if([$Value]==4,'#FEF001','Orange'))))",
                              "width": "=if(length([$Value])==0 || [$Value]==0 ,'0px',if([$Value]==1 ,'100px',if([$Value]==2 ,'190px',if([$Value]==3 ,'280px',if([$Value]==4 ,'380px','0px')))))",
                              "height": "13px",
                              "padding-left": "5px",
                              "border-radius": "25px",
                              "vertical-align": "middle",
                              "text-align": "left"
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if(length([$Value])==0 || [$Value]==0 ,'none','inline-block')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "cursor": "pointer"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value]>=1,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value]>=2 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if(Number([$Value]>=3) ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value]>=4 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value]>=5 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value]>=6 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value]>=7 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value]>=8 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value]>=9 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value]>=10 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "font-size": "25px",
                                  "position": "absolute",
                                  "border": "2px solid #eee",
                                  "display": "inline-block",
                                  "background-color": "white",
                                  "border-radius": "50%",
                                  "height": "40px",
                                  "width": "40px",
                                  "box-shadow": "0 0 5px #eee",
                                  "margin-left": "=if([$Value]==0,'-20px','-23px')",
                                  "margin-top": "=if([$Value]==0,'-23px','-15px')"
                                },
                                "children": [
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "padding-left": "5px"
                                    },
                                    "inlineEditField": "[$Character1]",
                                    "txtContent": "[$Character1]"
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "display": "flex"
            },
            "children": [
              {
                "elmType": "div",
                "attributes": {
                  "class": "ms-fontSize-32"
                },
                "txtContent": "=if([$Value2] ==0 && [$Value]>0,'🥇',if([$Value] ==0 && [$Value2]>0,'🥈','🏁'))"
              },
              {
                "elmType": "div",
                "style": {
                  "padding-left": "20px",
                  "display": "flex",
                  "justify-content": "center",
                  "align-items": "center"
                },
                "children": [
                  {
                    "elmType": "div",
                    "children": [
                      {
                        "elmType": "div",
                        "style": {
                          "background-color": "#eee",
                          "border-radius": "25px",
                          "width": "320px",
                          "display": "table"
                        },
                        "children": [
                          {
                            "elmType": "div",
                            "style": {
                              "display": "table-cell",
                              "background-color": "=if([$Value2]==0,'#FF2C05',if([$Value2]==1,'#FD6104',if([$Value2]==2,'#FD9A01',if([$Value2]==3,'#FFCE03',if([$Value2]==4,'#FEF001','Orange'))))",
                              "width": "=if(length([$Value2])==0 || [$Value2]==0 ,'0px',if([$Value2]==1 ,'100px',if([$Value2]==2 ,'190px',if([$Value2]==3 ,'280px',if([$Value2]==4 ,'380px','0px')))))",
                              "height": "13px",
                              "padding-left": "5px",
                              "border-radius": "25px",
                              "vertical-align": "middle",
                              "text-align": "left"
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if(length([$Value2])==0 || [$Value2]==0 ,'none','inline-block')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value2]>=1,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value2]>=2 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if(Number([$Value2]>=3) ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value2]>=4 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value2]>=5 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value2]>=6 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value2]>=7 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value2]>=8 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value2]>=9 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "display": "=if([$Value2]>=10 ,'inline-block' ,'none')",
                                  "background-color": "white",
                                  "border-radius": "5px",
                                  "height": "10px",
                                  "width": "10px",
                                  "margin-left": "20px"
                                }
                              },
                              {
                                "elmType": "div",
                                "style": {
                                  "font-size": "25px",
                                  "position": "absolute",
                                  "border": "2px solid #eee",
                                  "display": "inline-block",
                                  "background-color": "white",
                                  "border-radius": "50%",
                                  "height": "40px",
                                  "width": "40px",
                                  "box-shadow": "0 0 5px #eee",
                                  "margin-left": "=if([$Value2]==0,'-20px','-23px')",
                                  "margin-top": "=if([$Value2]==0,'-23px','-15px')"
                                },
                                "children": [
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "padding-left": "5px"
                                    },
                                    "inlineEditField": "[$Character2]",
                                    "txtContent": "[$Character2]"
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitionroll-dice.json

From the contributor

How to use this sample

Summary

This sample format provides a simulation of a game where a random number (between 1 and 6) is generated and displayed as a die. The value makes the progress bar advance with the associated emoji until the value 0 is reached and the winner emoji appears.

screenshot of the sample

View requirements

  • The format expects the following fields:
Field Type
Title Single line of text
Value Number
Value2 Number
Dice Number
Dice2 Number
Position Single line of text
Character1 Single line of text - Include emoji of runner "🏃‍♀️"
Character2 Single line of text - Include emoji of runner "🏃"

Sample

Solution Author(s)
roll-dice.json André Lage

Version history

Version Date Comments
1.0 January 21, 2022 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.

Keep exploring

More formats like this

Picture Link Tiles Doc Lib

Creates a card-style tile view in a SharePoint Document Library with file previews, badges, titles, and a footer with actions.

Explore format

Book Template Card Formatter

This SharePoint JSON view formatting sample transforms your list items into visually rich book cards.

Explore format

Employee Recognition Card

This sample acts as a digital shout-out board for your team, built right into SharePoint. It gives employees an easy way to recognize and appreciate each other's hard work. Colleagues can show their support by clicking on emojis to cast their votes.

Explore format