View Formatting Issue - Grouped Section header not moving when expanding
I'm having an issue with my View Format JSON. I'm attempting to utilize the honeycomb icon view under grouped categories. When I go to expand each group the icons are on a fixed position on the screen and the group headers do not move down. See screenshot below: Here is the code I'm using - can someone see my error? { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideSelection": true, "hideColumnHeader": true, "hideListHeader": true, "groupProps": { "headerFormatter": { "elmType": "div", "attributes": { "class": "sp-row-card" }, "style": { "color": "black", "background-color": "#FAF9F9", "flex-grow": "1", "display": "flex", "flex-direction": "row", "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "border-radius": "6px", "align-items": "center", "flex-wrap": "nowrap", "overflow": "auto", "margin": "1px 4px 4px 1px" }, "children": [ { "elmType": "img", "style": { "max-width": "24px", "max-height": "24px", "margin-top": "2px", "border-radius": "2px" } }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "padding": "5px 5px 5px 5px", "font-weight": "500", "font-size": "15px" }, "txtContent": "@group.fieldData.displayValue" } ] }, { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "justify-content": "center" } } ] } ] } }, "rowFormatter": { "elmType": "div", "style": { "position": "absolute", "width": "150px", "height": "150px", "left": "=if(floor(@rowIndex/5) % 2 == 0 , @rowIndex % 5 * 150 + 'px' , @rowIndex % 5 * 150 + 75 + 'px' )", "top": "=floor(@rowIndex / 5) * 125 + 'px'" }, "children": [ { "elmType": "a", "style": { "position": "relative", "display": "flex", "justify-content": "center", "align-items": "center", "width": "100%", "height": "100%" }, "attributes": { "href": "[$URL]", "target": "_blank" }, "children": [ { "elmType": "svg", "style": { "fill": "currentColor", "cursor": "pointer" }, "attributes": { "viewBox": "-150 -150 300 300", "class": "ms-fontColor-themePrimary" }, "children": [ { "elmType": "path", "attributes": { "d": "M130 75 L0 150 L-130 75 L-130 -75 L-0 -150 L130 -75 z" } } ] }, { "elmType": "div", "style": { "position": "absolute", "display": "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center", "cursor": "pointer", "width": "100%", "height": "100%" }, "attributes": { "class": "ms-fontColor-white ms-fontColor-themeLight--hover" }, "children": [ { "elmType": "div", "style": { "font-size": "32px", "margin-bottom": "5px" }, "attributes": { "iconName": "[$Icon]" } }, { "elmType": "div", "style": { "font-size": "14px", "width": "75%", "text-align": "center" }, "txtContent": "[$Title]" } ] } ] } ] } } Thanks!
How to add extra formatting to a column?
I am currently working on a list to track different equipment we have on site and each item requires different configurations of servicing, recalibrating and PAT testing. So I have the list formatted that so when you say an item needs just calibrating and servicing, it'll grey out the date where the next PAT test date needs to go to signify that it isn't required. below is the code that SharePoint generates to do this. { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "box-sizing": "border-box", "padding": "0 2px" }, "attributes": { "class": { "operator": ":", "operands": [ { "operator": "<", "operands": [ { "operator": "indexOf", "operands": [ "[$Doesthisitemneed_x002e__x002e__x]", "Calibrating" ] }, 0 ] }, "sp-css-backgroundColor-BgLightGray sp-css-borderColor-LightGrayFont", "" ] } }, "children": [ { "elmType": "span", "style": { "line-height": "16px", "height": "14px" }, "attributes": { "iconName": { "operator": ":", "operands": [ { "operator": "<", "operands": [ { "operator": "indexOf", "operands": [ "[$Doesthisitemneed_x002e__x002e__x]", "Calibrating" ] }, 0 ] }, "", "" ] }, "class": { "operator": ":", "operands": [ { "operator": "<", "operands": [ { "operator": "indexOf", "operands": [ "[$Doesthisitemneed_x002e__x002e__x]", "Calibrating" ] }, 0 ] }, "sp-css-color-LightGrayFont", "" ] } } }, { "elmType": "span", "style": { "overflow": "hidden", "text-overflow": "ellipsis", "padding": "0 3px" }, "txtContent": "[$Prev_x002e_Calibration.displayValue]", "attributes": { "class": { "operator": ":", "operands": [ { "operator": "<", "operands": [ { "operator": "indexOf", "operands": [ "[$Doesthisitemneed_x002e__x002e__x]", "Calibrating" ] }, 0 ] }, "sp-field-fontSizeSmall sp-css-color-LightGrayFont", "sp-field-fontSizeSmall" ] } } } ] } Now what I want to do is to format the dates that are added to show if they are in date, upcoming or overdue. the code below shows how I achieve this: { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "txtContent": "@currentField", "attributes": { "class": "=if([$NextCalibration] <= @now, 'sp-field-severity--blocked' , if([$NextCalibration] -2419200000 >= @now , 'sp-field-severity--good' , 'sp-field-severity--warning'))" } } My main questions is: How do I combine these to. I don't particularly understand the JSON code that SharePoint has generated so is there somewhere i can place my code to do what I need it to do? Thanks in advanceSPO list jumps to top when loading new items
I am seeing an issue with an SPO list, where the page jumps back to the top when attempting to scroll down. You can see a video of what occurs here: https://www.youtube.com/watch?v=_lx30TvRfqs&feature=youtu.be (note in this video, I have only scrolled down). I have replicated this issue across multiple browsers (chrome, IE and Edge) on several machines. The issue only seems to occur after the list reaches a certain length. I am using custom JSON view formatting, the code for which can be seen here. Though another user appears to have run into the same issue, and did not mention using view formatting. If I alter my formatting to be more dense (to show more items per line, thus reducing the height of the page), the issue does not occur. The issue also does not occur in folders with fewer items. As you can see from the video, the problem happens as the page reaches the bottom of the currently loaded items. Hence why reducing the number of items or fitting more onto the screen prevents the issue (as all the items are loaded with the page). However this is not a solution as we require more than the ~50 items we can currently show, before the bug appears. I have posted this to MS Answers, and an MS agent directed me here. He seemed to think the issue was related to my JSON code.Format a Choice Column so it presents the items on individual lines rather than wrapping them?
Hi, I've had a good troll of the internet but I can't find an answer to my question, this kind of makes me think it's not possible, but considering how customisable SPO is now I find that hard to believe. I have a choice column that is configured to allow users to select more than one item. When this column is displayed on the list the items are separated by a comma and they are all wrapped. What I'd like to do is put a line break between each item so they are easy to read at a glance, what would be really good would be to bullet them but I'd be happy with separate lines. :) Does anyone have any thoughts on how I could achieve this? Thanks in advance Rob
Managing file templates for document libraries programatically
Are there methods available to programatically manage file template capabilities in document libraries? I've created a library and added the out of the box file templates (e.g. Word Document, Excel Workbook, etc.). This can be seen in the schema of an extracted PnP template under <NewDocumentTemplates>: Is there a way we can apply or configure this setting to a library during or post-creation programatically?
