JSON Formatting in Modern SharePoint lists/libraries.



One of the most important feature in modern SharePoint lists and library is its ability to be customized by JSON formatting. There are two different methods to do so.

1. additionalRowClass

2. rowFormatter

Below is the one liner defs for both these methods.

additionalRowClass is used when you only wnat to concentrate on one column in the list or library.

rowFormatter is used to customize the complete Row.

And if you decide to act smart and use both of them together, any styling applied to additionalRowClass will be lost.

Now we will use rowFormatter, and for it we will create elements using DIVs

we will create a Main DIV and nest 3 DIVs inside it.

Below is the complete JSON for it. We have also applied styling to the DIVs.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "_comment_": "MAIN DIV",
    "attributes": {
      "class": "ms-bgColor-neutralLighter"
    },
    "style": {
      "display": "flex",
      "flex-wrap": "wrap",
      "align-items": "stretch",
      "flex-direction": "row",
      "padding": "20px",
      "margin-bottom": "16px",
      "max-width": "850px",
      "border-radius": "8px"
    },
    "children": [
  {
        "elmType": "div",
        "__comment": "DIV 1",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "stretch",
          "max-width": "260px"
        },
        "children": [
          {
            "elmType": "img",
            "style": {
              "width": "260px",
              "height": "160px"
            },
            "attributes": {
              "src": "[$PIC]"
            }
          }
        ]
      },
                    
      {
        "elmType": "div",
        "__comment": "DIV 2",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "flex-wrap": "nowrap",
          "align-items": "center",
          "max-width": "360px",
          "min-width": "205px"
        },
        "children": [
          {
            "elmType": "span",
            "txtContent": "=[$Title]",
            "style": {
              "display": "block"
            },
            "attributes": {
              "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
            }
          },
          {
            "elmType": "span",
            "txtContent": "Location",
            "style": {
              "display": "block",
              "padding-top": "20px"
            },
            "attributes": {
              "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
            }
          },
          {
            "elmType": "span",
            "txtContent": "[$Address]"
          },
          {
            "elmType": "a",
            "attributes": {
              "iconName": "MapPin",
              "class": "ms-fontColor-themePrimary",
              "target": "_blank",
              "href": "='http://maps.google.com/?q=' + ( [$Title] + ' ')  + ( [$Address])"
            },
            "style": {
              "font-size": "15px",
              "padding-top": "5px",
              "cursor": "pointer"
            }
          },
          {
            "elmType": "span",
            "txtContent": "='Capacity ' + [$Maximum_x0020_capacity]",
            "style": {
              "display": "block",
              "padding-top": "20px"
            }
          }
        ]
      },
      {
        "elmType": "div",
        "__comment": "DIV 3",
        "style": {
          "flex-grow": "1",
          "display": "flex",
          "flex-direction": "column",
          "align-items": "center",
          "margin-top": "10px",
          "max-width": "310px",
          "min-width": "155px"
        },
        "children": [
          {
            "elmType": "div",
            "__comment": "RATING & STAR DIV",
            "style": {
              "display": "block",
              "font-size": "15px",
              "font-weight": "bold"
            },
            "children": [
              {
                "elmType": "span",
                "txtContent": "[$Rating]",
                "style": {
                  "padding-right": "5px"
                }
              },
              {
                "elmType": "span",
                "attributes": {
                  "iconName": "FavoriteStarFill",
                  "class": "ms-fontColor-themePrimary"
                }
              }
            ]
          },
          {
            "elmType": "span",
            "txtContent": "Price",
            "style": {
              "display": "block",
              "padding-top": "20px"
            },
            "attributes": {
              "class": "ms-fontSize-l ms-fontWeight-semibold ms-fontColor-neutralPrimary"
            }
          },
          {
            "elmType": "span",
            "txtContent": "='£' +[$Price]",
            "style": {
              "display": "block"
            }
          },
          {
            "elmType": "a",
            "txtContent": "View Venue Details",
            "style": {
              "border": "none",
              "padding-top": "32px",
              "background-color": "transparent",
              "color": "#0078d7",
              "padding-left": "0px",
              "text-align": "left",
              "cursor": "pointer"
            },
            "attributes": {
              "target": "_blank",
              "href": "[$Venuelink]"
            }
          }
        ]
      }
    ]
  }
}

Note: Please remember we are here using Picture column to display iamge. If you use image column, the above code won't work.


Comments

Post a Comment

Popular posts from this blog

Creating Nested Galleries in Power Apps. (Parent-Child Relationship)

Image
 This is another most common scenario where in client has two parent child lists or any two lists having a common SharePoint column. And clients wishes to have a relationship on the PowerApps screen where in when he/she selects a particular lets say Program in our example. All the respective Projects following that Projects are shown. In such a scenario we can leverage nested galleries. So what we do in here is we add two galleries on our Power App screen. For Programs gallery the Left one on the screenshot above, we connect it to the Programs list For Second gallery we will connect it to the Projects list. But this is where the magic happens. Here we use Filter () function. So what we do in here is we set the Program's column value in Project's list equal to the Selected Program of left Gallery. i.e. the gallery connected to my Program's list. A more complex version of the same is where you inset the nested gallery inside your parent gallery. In this too everything remains
Read more

How to reset a datepicker control in PowerApps?

Image
 Scenario: Simple reset a date picker control. Issue, you can't use normal Reset() function to reset the datepicker control. Solution: Simple create a variable Set(varResetCD, True) and use this variable to update the reset property of DatePicker control. The below Reset() won't work in case of datepicker control We need to create a variable and use it at the Reset property of the datepicker control. Also, if you still see some text inside your date field there are two other places you need to check in one is the datepicker control advanced properties. In the above screenshot all you need to do is clear InputTextPlaceholder. And then select the control and check the DefaultDate property of the date.  This should be set to Today(), you can also change it to something like below If(varResetCD,Blank(),Today()) What this does is sets the control to blank if the variable you have declared above is true. 
Read more

Reset () function failing to work on Edit form for Combo boxes in Power App.

Image
 Hi Good day, Today we have a very interesting scenario. We have a cascading dropdowns on our Power App screen. The flow for these dropdowns is that a user selects the Division, and a list of Business units containing the selected Division is popped down in your Business Unit dropdown. Now to make it user friendly, we have on change code written on each dropdown. So that if the user decides to change the Division dropdown, the Business Unit dropdown is reset. Please remember in here we are talking in regarding to New Form. On Resetting the above Division combo box, since we have written the Reset function code on Change property of the Division Combo box.   Reset(ddBU);Reset(ddBPI);Reset(ddTeams). The above becomes Up till here everything is hunky dory. This is the classic case of how the Reset() function should behave. But that's not, when you move from new form to Edit form.   The Reset function behaves weirdly. It is able to reset the cascading dropdown values like above. But i
Read more