inlineEditField Sample?

[sympmarc]

Sample (which sample are you talking about)

NA

Suggestion (the more details, the better)

As far as I can see, there aren't many inlineEditField samples. The main thing I'm finding with this is that our end users don't have any idea it's there. I'm trying to come up with what amounts to a toggle to sort of turn it on and off for the Title field.

This json works and shows the Title with the pencil to the right of it. Clicking on the pencil doesn't do anything, though. What it does do is bring the "editability" of the Title to the user's attention.

I'll continue to work on this, but if anyone has already climbed this hill, it would be great to get a nice, simple sample into the repo.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-wrap": "wrap",
        "align-items": "left"
      },
      "txtContent": "@currentField",
      "inlineEditField": "@currentField"
    },
    {
      "elmType": "div",
      "attributes": {
        "iconName": "Edit"
      },
      "style":{
        "margin": "5px"
      }
    }
  ]
}

[aaclage]

Dear Mr. @sympmarc,

I don't know if below sample can simplify and help users to make better use of inlineEditField or achieve your requested sample. if more details are needed please advice.

Thank you for your attention.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "position": "fixed",
        "display": "flex",
            "flex-wrap": "wrap",
            "align-items": "left"
      },
      "children": [
        {
          "elmType": "div",
          "style": {
            "display": "flex",
            "flex-wrap": "wrap",
            "align-items": "left"
          },
          "txtContent": "@currentField"
        }
      ]
    },
    {
      "elmType": "div",
      "children": [
        {
          "elmType": "div",
          "style": {
            "cursor": "pointer",
            "flex-wrap": "wrap",
            "display": "flex",
            "align-items": "left"
          },
          "inlineEditField": "@currentField",
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-wrap": "wrap",
                "align-items": "left",
                "color": "rgba(0, 0, 0, 0)"
              },
              "txtContent": "@currentField"
            },
            {
              "elmType": "div",
              "style": {
                "margin": "5px"
              },
              "attributes": {
                "iconName": "Edit"
              },
              "customCardProps": {
                "openOnEvent": "hover",
                "directionalHint": "topCenter",
                "isBeakVisible": true,
                "formatter": {
                  "elmType": "div",
                  "style": {
                    "padding": "10px"
                  },
                  "txtContent": "Allow to edit content"
                }
              }
            }
          
          ]
        }
      ]
    }
  ]
}

[sympmarc]

That's great, @aaclage! That's exactly the improvement I was looking for.

That isn't a sample in the repo today, is it? IMO, it should be.

[aaclage]

Normally, this type of sample you can find in json mix with custom solutions and not dedicated sample. Maybe it could be 💡 for regular contributers: @tecchan1107 @Fedes365 @anandragav

[sympmarc]

I cleaned this up a little, as I saw some weird behavior on scroll.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "children": [
        {
          "elmType": "div",
          "style": {
            "cursor": "pointer",
            "flex-wrap": "wrap",
            "display": "flex",
            "align-items": "left"
          },
          "inlineEditField": "@currentField",
          "children": [
            {
              "elmType": "div",
              "txtContent": "@currentField"
            },
            {
              "elmType": "div",
              "style": {
                "margin": "5px"
              },
              "attributes": {
                "iconName": "Edit"
              },
              "customCardProps": {
                "openOnEvent": "hover",
                "directionalHint": "topCenter",
                "isBeakVisible": true,
                "formatter": {
                  "elmType": "div",
                  "style": {
                    "padding": "10px"
                  },
                  "txtContent": "Edit content"
                }
              }
            }
          ]
        }
      ]
    }
  ]
}

[aaclage]

Great, thanks for the cleaning. Was trying to make some effects, but it looks like you wanted simple :)