Forum Discussion

ErikJacko's avatar
ErikJacko
Copper Contributor
Jan 18, 2022
Solved

Highlighting the first item created in the list - SharePoint Online (365)

Hello guys,

 

I would need to create a view in the list that would highlight the first created item (now I have ordered by parent - children by button - "Create Parent" "Create children") - when I create parent item and after that I create children item, there is no difference in them colored or lettered

 

In the picture, the parents are shown in orange framing

 

Is it possible to create something similar?

 

 

  • ErikJacko your screenshot showed formatting on one of the "child" rows in the groupby view. But you can highlight which is the parent in the groupby by using the following JSON view formatting:

     

    {
      "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
      "groupProps": {
        "hideFooter": false,
        "headerFormatter": {
          "elmType": "div",
          "style": {
            "flex-wrap": "wrap",
            "display": "flex",
            "box-sizing": "border-box",
            "padding": "4px 8px 5px 4px",
            "border-radius": "6px",
            "align-items": "center",
            "white-space": "nowrap",
            "overflow": "hidden",
            "margin": "10px 4px 4px 1px",
            "border": "3px solid gold"
          },
          "children": [
            {
              "elmType": "div",
              "children": [
                {
                  "elmType": "div",
                  "style": {
                    "display": "flex",
                    "flex-direction": "row",
                    "justify-content": "center"
                  },
                  "children": [
                    {
                      "elmType": "div",
                      "txtContent": "=  @group.count",
                      "style": {
                        "padding": "1px 5px 0px 5px",
                        "font-weight": "500"
                      }
                    }
                  ]
                }
              ]
            },
            {
              "elmType": "div",
              "children": [
                {
                  "elmType": "div",
                  "style": {
                    "display": "flex",
                    "flex-direction": "row",
                    "justify-content": "center"
                  },
                  "children": [
                    {
                      "elmType": "div",
                      "txtContent": "='x ' +  @group.fieldData.displayValue +'(s)  ' ",
                      "style": {
                        "padding": " ",
                        "font-weight": "500"
                      }
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    }

     

    This will give you the following result:

     

     

    Rob
    Los Gallardos
    Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

  • RobElliott's avatar
    RobElliott
    Silver Contributor

    ErikJacko it's not currently possible to do that with JSON row formatting.

     

    Rob
    Los Gallardos
    Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

    • ErikJacko's avatar
      ErikJacko
      Copper Contributor

      RobElliott So it is not possible to visually adjust it to make it clear which item is the parent and which is the child?

      • RobElliott's avatar
        RobElliott
        Silver Contributor

        ErikJacko your screenshot showed formatting on one of the "child" rows in the groupby view. But you can highlight which is the parent in the groupby by using the following JSON view formatting:

         

        {
          "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
          "groupProps": {
            "hideFooter": false,
            "headerFormatter": {
              "elmType": "div",
              "style": {
                "flex-wrap": "wrap",
                "display": "flex",
                "box-sizing": "border-box",
                "padding": "4px 8px 5px 4px",
                "border-radius": "6px",
                "align-items": "center",
                "white-space": "nowrap",
                "overflow": "hidden",
                "margin": "10px 4px 4px 1px",
                "border": "3px solid gold"
              },
              "children": [
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "div",
                      "style": {
                        "display": "flex",
                        "flex-direction": "row",
                        "justify-content": "center"
                      },
                      "children": [
                        {
                          "elmType": "div",
                          "txtContent": "=  @group.count",
                          "style": {
                            "padding": "1px 5px 0px 5px",
                            "font-weight": "500"
                          }
                        }
                      ]
                    }
                  ]
                },
                {
                  "elmType": "div",
                  "children": [
                    {
                      "elmType": "div",
                      "style": {
                        "display": "flex",
                        "flex-direction": "row",
                        "justify-content": "center"
                      },
                      "children": [
                        {
                          "elmType": "div",
                          "txtContent": "='x ' +  @group.fieldData.displayValue +'(s)  ' ",
                          "style": {
                            "padding": " ",
                            "font-weight": "500"
                          }
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          }
        }

         

        This will give you the following result:

         

         

        Rob
        Los Gallardos
        Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

Resources