{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideListHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "padding": "8px",
      "margin-bottom": "16px",
      "max-width": "930px",
      "border-radius": "8px",
      "box-shadow": "4px 4px 8px darkgrey"
    },
    "attributes": {
      "class": "ms-bgColor-neutralLighter"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-wrap": "wrap",
          "align-items": "stretch",
          "max-width": "310px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex": "none"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "width": "100px",
                  "height": "100px",
                  "overflow": "hidden",
                  "border-radius": "50%",
                  "margin-right": "8px"
                },
                "children": [
                  {
                    "elmType": "img",
                    "attributes": {
                      "src": "=if([$Picture] == '', @currentWeb + '/_layouts/15/userphoto.aspx?size=M', [$Picture])",
                      "title": "=if([$Picture] == '', 'No picture available', [$Picture.desc])"
                    },
                    "style": {
                      "position": "relative",
                      "top": "50%",
                      "left": "50%",
                      "width": "100%",
                      "height": "auto",
                      "margin-left": "-50%",
                      "margin-top": "-50%"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "display": "flex",
              "flex-direction": "column",
              "flex-wrap": "nowrap",
              "align-items": "stretch",
              "max-width": "200px"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "flex-grow": "1"
                },
                "children": [
                  {
                    "elmType": "span",
                    "txtContent": "[$Title]",
                    "style": {
                      "display": "block"
                    },
                    "attributes": {
                      "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$JobTitle]",
                    "style": {
                      "display": "=if([$JobTitle] == '', 'none', 'block')"
                    },
                    "attributes": {
                      "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-neutralSecondary"
                    }
                  },
                  {
                    "elmType": "span",
                    "txtContent": "[$Company]",
                    "style": {
                      "display": "=if([$Company] == '', 'none', 'block')"
                    },
                    "attributes": {
                      "class": "ms-fontSize-m ms-fontWeight-regular ms-fontColor-neutralSecondary"
                    }
                  }
                ]
              },
              {
                "elmType": "div",
                "style": {
                  "flex-grow": "1",
                  "display": "flex",
                  "flex-direction": "row",
                  "flex-wrap": "wrap",
                  "align-items": "flex-end"
                },
                "children": [
                  {
                    "elmType": "a",
                    "style": {
                      "display": "=if([$Email] == '', 'none', 'block')",
                      "width": "100%"
                    },
                    "attributes": {
                      "class": "ms-fontSize-xs ms-fontWeight-regular ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover",
                      "href": "='mailto:' + [$Email] + '?body=Dear ' + [$Title] + ',\r\n'"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "attributes": {
                          "iconName": "Mail",
                          "class": "ms-fontColor-themePrimary"
                        },
                        "style": {
                          "padding-right": "6px"
                        }
                      },
                      {
                        "elmType": "span",
                        "txtContent": "[$Email]"
                      }
                    ]
                  },
                  {
                    "elmType": "span",
                    "style": {
                      "display": "=if([$Phone] == '', 'none', 'block')",
                      "width": "100%"
                    },
                    "attributes": {
                      "class": "ms-fontSize-xs ms-fontWeight-regular ms-fontColor-neutralPrimary"
                    },
                    "children": [
                      {
                        "elmType": "span",
                        "attributes": {
                          "iconName": "Phone",
                          "class": "ms-fontColor-themePrimary"
                        },
                        "style": {
                          "padding-right": "6px"
                        }
                      },
                      {
                        "elmType": "span",
                        "txtContent": "[$Phone]"
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "stretch",
          "max-width": "310px",
          "min-width": "205px",
          "margin-top": "8px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "a",
                "attributes": {
                  "href": "='https://www.google.com/maps/place/' + if([$StreetAddress] == '', '', [$StreetAddress] + ',') + if([$City] == '', '', [$City] + ',') + if([$State] == '', '', [$State]) + if([$ZipCode] == '', '', ' ' + [$ZipCode]) + '/'",
                  "target": "_blank"
                },
                "style": {
                  "height": "100%"
                },
                "children": [
                  {
                    "elmType": "img",
                    "attributes": {
                      "src": "='https://maps.googleapis.com/maps/api/staticmap?center=' + if([$StreetAddress] == '', '', [$StreetAddress] + ',') + if([$City] == '', '', [$City] + ',') + if([$State] == '', '', [$State]) + if([$ZipCode] == '', '', ' ' + [$ZipCode]) + '&size=200x60&key=AIzaSyDKNauYNcs4ZOq7sQMWYDyz1x82l00ek34'"
                    }
                  }
                ]
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1",
              "text-align": "center"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "[$StreetAddress]",
                "style": {
                  "display": "=if([$StreetAddress] == '', 'none', 'block')"
                },
                "attributes": {
                  "class": "ms-fontSize-sPlus ms-fontWeight-regular ms-fontColor-neutralSecondary"
                }
              },
              {
                "elmType": "span",
                "txtContent": "=if([$City] == '', '', [$City] + ', ') + if([$State] == '', '', [$State] + ' ') + if([$ZipCode] == '', '', [$ZipCode])",
                "style": {
                  "display": "=if([$City] == '' && [$State] == '' && [$ZipCode] == '', 'none', 'block')"
                },
                "attributes": {
                  "class": "ms-fontSize-sPlus ms-fontWeight-regular ms-fontColor-neutralSecondary"
                }
              },
              {
                "elmType": "span",
                "txtContent": "No address provided",
                "style": {
                  "display": "=if([$City] == '' && [$State] == '' && [$ZipCode] == '', 'block', 'none')"
                },
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-neutralTertiary"
                }
              }
            ]
          }
        ]
      },
      {
        "elmType": "div",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "max-width": "310px",
          "min-width": "155px"
        },
        "children": [
          {
            "elmType": "div",
            "style": {
              "flex-grow": "1"
            },
            "children": [
              {
                "elmType": "span",
                "style": {
                  "display": "block"
                },
                "attributes": {
                  "class": "ms-fontWeight-semibold ms-fontSize-m"
                },
                "txtContent": "Notes:"
              },
              {
                "elmType": "span",
                "style": {
                  "display": "=if([$Notes] == '', 'none', 'block')",
                  "padding-left": "8px"
                },
                "txtContent": "[$Notes]",
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-regular ms-fontColor-neutralSecondary"
                }
              },
              {
                "elmType": "span",
                "style": {
                  "display": "=if([$Notes] == '', 'block', 'none')",
                  "padding-left": "8px"
                },
                "txtContent": "No notes entered",
                "attributes": {
                  "class": "ms-fontSize-s ms-fontWeight-semilight ms-fontColor-neutralTertiary"
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "flex": "none",
              "display": "flex",
              "flex-direction": "row-reverse",
              "flex-wrap": "nowrap"
            },
            "children": [
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "share"
                },
                "attributes": {
                  "title": "Share",
                  "class": "ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Share"
                    }
                  }
                ]
              },
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "delete"
                },
                "attributes": {
                  "title": "Delete",
                  "class": "ms-fontColor-neutralPrimary ms-fontColor-red--hover"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Delete"
                    }
                  }
                ]
              },
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "editProps"
                },
                "attributes": {
                  "title": "Edit",
                  "class": "ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "Edit"
                    }
                  }
                ]
              },
              {
                "elmType": "button",
                "customRowAction": {
                  "action": "defaultClick"
                },
                "attributes": {
                  "title": "See more details",
                  "class": "ms-fontColor-neutralPrimary ms-fontColor-themePrimary--hover"
                },
                "style": {
                  "border": "none",
                  "background-color": "transparent",
                  "cursor": "pointer"
                },
                "children": [
                  {
                    "elmType": "span",
                    "attributes": {
                      "iconName": "ContactInfo"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}