SOLVED

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

Copper Contributor

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?

 

 

list preview.png

4 Replies

@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)

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

best response confirmed by ErikJacko (Copper Contributor)
Solution

@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:

 

groupBy.png

 

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

Hello Rob, thanks a lot !
Also it's possible to make this formatting on every first child of ?
1 best response

Accepted Solutions
best response confirmed by ErikJacko (Copper Contributor)
Solution

@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:

 

groupBy.png

 

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

View solution in original post