SOLVED

Document Library: How to Interact with a Drop Down Field without using "Edit in Grid View"

Brass Contributor

I have a dropdown field in the document library which I cannot set signoff status in normal view.  I have to click in Edit in Grid View and then it allows me to select the status. Is there a way I can accomplish this without using Grid View.  Maybe JSON? not sure.

 

VeeExcelLearn_0-1659572576740.png

 

1 Reply
best response confirmed by VeeExcelLearn (Brass Contributor)
Solution

@VeeExcelLearn Yes, this is possible using JSON formatting. You have add below line in your JSON code: 

 

"inlineEditField": "@currentField",

 

Example:

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "inlineEditField": "@currentField",
  "style": {
    "flex-wrap": "wrap",
    "display": "flex"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "display": "flex",
        "border-radius": "16px",
        "height": "24px",
        "align-items": "center",
        "white-space": "nowrap",
        "margin": "4px 4px 4px 4px"
      },
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@currentField",
                "Rejected"
              ]
            },
            "sp-css-backgroundColor-BgDarkRed sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Approved"
                  ]
                },
                "sp-css-backgroundColor-BgMintGreen sp-field-fontSizeSmall sp-css-color-MintGreenFont",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "@currentField",
                        "Pending"
                      ]
                    },
                    "sp-css-backgroundColor-BgGold sp-field-fontSizeSmall sp-css-color-GoldFont",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "@currentField",
                            ""
                          ]
                        },
                        "",
                        "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      },
      "txtContent": "@currentField"
    }
  ]
}

 

Output

ganeshsanap_0-1659591851234.png


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

1 best response

Accepted Solutions
best response confirmed by VeeExcelLearn (Brass Contributor)
Solution

@VeeExcelLearn Yes, this is possible using JSON formatting. You have add below line in your JSON code: 

 

"inlineEditField": "@currentField",

 

Example:

 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "inlineEditField": "@currentField",
  "style": {
    "flex-wrap": "wrap",
    "display": "flex"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "display": "flex",
        "border-radius": "16px",
        "height": "24px",
        "align-items": "center",
        "white-space": "nowrap",
        "margin": "4px 4px 4px 4px"
      },
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@currentField",
                "Rejected"
              ]
            },
            "sp-css-backgroundColor-BgDarkRed sp-css-borderColor-WhiteFont sp-field-fontSizeSmall sp-css-color-WhiteFont",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Approved"
                  ]
                },
                "sp-css-backgroundColor-BgMintGreen sp-field-fontSizeSmall sp-css-color-MintGreenFont",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "@currentField",
                        "Pending"
                      ]
                    },
                    "sp-css-backgroundColor-BgGold sp-field-fontSizeSmall sp-css-color-GoldFont",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "@currentField",
                            ""
                          ]
                        },
                        "",
                        "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      },
      "txtContent": "@currentField"
    }
  ]
}

 

Output

ganeshsanap_0-1659591851234.png


Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

View solution in original post