1

According to The official detailed syntax reference, I can use (CSS-like) style attributes like "display" and "width".

I tried something like this:

    {
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "children": [
     {
        "elmType": "div",
        "width": "100%",
        "display": "block",
        "children": [
         {
            "elmType": "a",
            "txtContent": "@currentField",
            "attributes": {
               "target": "_blank",
               "href": "='https://studentarteveldehsbe.sharepoint.com/sites/ICTManagement/Lists/ProjectUitgave/AllItems.aspx?FilterField1=ProjectNr&FilterValue1=' + [$Nummer]"
            }
         }
         ]
     },
     {
        "elmType": "div",
        "display": "block",
        "txtContent": "=' (' + [$Investering] + '/' + [$Kost] + ')'"     }
   ]
}

However, when I look at the resulting list with a debugger, what I get is:

<div class="customField_389b8982">
    <div class="sp-field-customFormatter">
        <div>
            <a href="https://studentarteveldehsbe.sharepoint.com/sites/ICTManagement/Lists/ProjectUitgave/AllItems.aspx?FilterField1=ProjectNr&amp;FilterValue1=7002" target="_blank" rel="noopener noreferrer ">4000</a>
        </div>
        <div> (0.00 €/4,000.00 €)</div>
    </div>
</div>

As you can see, the width and display attributes are totally ignored (and this is indeed what I observe). Am I missing something, is this a bug, is it by design or am I just looking at it the wrong way?

Note: for completeness' sake, in my example, I was just trying to force the second "inner" DIV to start on a new line, but for some reason, SharePoint insists on showing them next to each other (so if you have a solution for this: also greatly appreciated :-) )

  • I think your first div needs to come under "rowFormatter" so try this for your first div - { "$schema": "developer.microsoft.com/json-schemas/sp/…", "hideSelection": false, "hideColumnHeader": false, "rowFormatter": { "elmType": "div" }, "style": { "width": "100%", "display": "block" } } – Jamie_lee Feb 12 at 10:35
  • Thanks for the suggestion. However, it does not seem to match the schema (there is, e.g. nog attribute "style", nor "hideColumnHeader"). Am I misreading you? – Nick Sabbe Feb 13 at 11:25
0

Those are style attributes and will need to be nested in a style property. So adjusting your format like this should apply those values:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "children": [
     {
        "elmType": "div",
        "style": {
            "width": "100%",
            "display": "block"
        },
        "children": [
         {
            "elmType": "a",
            "txtContent": "@currentField",
            "attributes": {
               "target": "_blank",
               "href": "='https://studentarteveldehsbe.sharepoint.com/sites/ICTManagement/Lists/ProjectUitgave/AllItems.aspx?FilterField1=ProjectNr&FilterValue1=' + [$Nummer]"
            }
         }]
     },
     {
        "elmType": "div",
        "style": {
            "display": "block"
        },
        "txtContent": "=' (' + [$Investering] + '/' + [$Kost] + ')'"
     }]
}

To be fair, the actual sample on the documentation side isn't even correct formatting syntax. I'll submit a pull request to fix that. Thanks!

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.