1

May be some of you was asking yourself since a while what does it means the property ClientFormCustomFormatter for a content type?

First that property is stored as a string.

After a reverse engineering of the SPO react components on a targeted tenant, it finally corresponds to a way for formatting the View/Edit form of a List Item.

Unfortunately, the JSON Schema is not available from the Microsoft Docs or official GitHub repos even no info on our favorites search engines.

So below the JSON schema of that property with a sample and a screenshot result.

1 Answer 1

1

ClientFormCustomFormatter JSON Schema

{
  "$schema": "http://json-schema.org/draft-04/schema#",
  "title": "ClientFormCustomFormatter JSON",
  "description": "Form Formatter JSON for SharePoint list view form.",
  "type": "object",
  "properties": {
    "headerJSONFormatter": {
      "description": "Format the header",
      "$ref": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json#definitions/elm"
    },
    "footerJSONFormatter": {
      "description": "Format the footer",
      "$ref": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json#definitions/elm"
    },
    "bodyJSONFormatter": {
      "description": "Group fields by named sections",
      "type": "object",
      "properties": {
        "sections": {
          "description": "Array of sections",
          "type": "array",
          "items": {
            "description": "A body section",
            "type": "object",
            "properties": {
              "displayname": {
                "type": "string",
                "description": "Section Title"
              },
              "fields": {
                "description": "Array of field titles within the section",
                "type": "array",
                "items": {
                  "type": "string"
                }
              }
            }
          }
        }
      }
    }
  }
}

ClientFormCustomFormatter JSON Sample

{
  "headerJSONFormatter": {
    "elmType": "div",
    "style": {
      "display": "block",
      "width": "100%",
      "text-align": "center",
      "padding": "0.5em 0"
    },
    "attributes": {
      "class": "ms-bgColor-themeSecondary ms-fontColor-white ms-font-su"
    },
    "txtContent": "=[$Title]"
  },
  "footerJSONFormatter": {
    "elmType": "div",
    "style": {
      "display": "block",
      "width": "100%",
      "text-align": "center",
      "padding": "0.5em 0"
    },
    "attributes": {
      "class": "ms-bgColor-themeSecondary ms-fontColor-white ms-fontSize-l ms-fontWeight-light"
    },
    "txtContent": "Footer test"
  },
  "bodyJSONFormatter": {
    "sections": [
      {
        "displayname": "Section 1",
        "fields": [
          "Title",
          "EventDate"
        ]
      },
      {
        "displayname": "Section 2",
        "fields": [
          "Description"
        ]
      },
      {
        "displayname": "Section 3",
        "fields": [
          "Zone"
        ]
      }
    ]
  }
}

ClientFormCustomFormatter JSON Sample Result JSON Sample Result

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.