Column Formatting
12 TopicsSharePoint list (not site) image carousel
I'm looking for a way to create an image carousel in a list. Currently I have a list that displays an image using: { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "img", "style": { "position": "relative", "width": "200 px" }, "attributes": { "src": "@currentField" } } What I'd like to do is add links to other images in other columns have have the carousel rotate through the value of the other columns. I found something like this, but can't quite figure out if there's a way to add this type of formatting into the column: { "timeline": { "tracks": [ { "clips": [ { "asset": { "type": "image", "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/images/happy1.jpg" }, "start": 0, "length": 2, "effect": "slideLeft", "transition": { "out": "carouselLeft" } }, { "asset": { "type": "image", "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/images/happy2.jpg" }, "start": 1.4, "length": 2.6, "effect": "slideLeft", "transition": { "in": "carouselLeft", "out": "carouselLeft" } }, { "asset": { "type": "image", "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/images/happy3.jpg" }, "start": 3.4, "length": 2.6, "effect": "slideLeft", "transition": { "in": "carouselLeft", "out": "carouselLeft" } }, { "asset": { "type": "image", "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/images/happy4.jpg" }, "start": 5.4, "length": 2.6, "effect": "slideLeft", "transition": { "in": "carouselLeft", "out": "carouselLeft" } }, { "asset": { "type": "image", "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/images/happy5.jpg" }, "start": 7.4, "length": 2.6, "effect": "slideLeft", "transition": { "in": "carouselLeft", "out": "carouselLeft" } }, { "asset": { "type": "image", "src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/images/happy6.jpg" }, "start": 9.4, "length": 2.6, "effect": "slideLeft", "transition": { "in": "carouselLeft" } } ] } ], "soundtrack": { "src": "https://feeds.soundcloud.com/stream/802202977-unminus-deadfros5h.mp3" } }, "output": { "format": "mp4", "resolution": "sd" } } If there is not a way to use this format, is there a way that I could create a clickable action that rotates through those other columns instead of a fancy carousel? I'm a total noob when it comes to programming but if you give me an example, I can work with that just fine. Thanks.Solved5.7KViews0likes6CommentsShow persons who liked a list item in SP2019
Hi guys, I want to format a column, which shows directly the persons who liked a list item with the list rating feature. (e.g. in the sample with the column "LikedBy" in https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-like-unlike but using the rating feature e.g. in the sample https://github.com/pnp/List-Formatting/tree/master/column-samples/generic-likedby. Someone around who can help me out? Thanks, Sascha1.4KViews0likes0CommentsDate field in JSON text column formatting child component shows empty.
Hi all, In a list I'm trying to show 3 additional column values in a text column: it's own (text) value, the item ID and a date. For this I'm using the following JSON: { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "display": "block" }, "children": [ { "elmType": "div", "txtContent": "=if([$MigrationTemplate] == 'Main','Site ID:: ', 'Main site:: ') + @currentField", "style": { "display": "block" } }, { "elmType": "div", "txtContent": "='ID: ' + [$ID]" }, { "elmType": "div", "txtContent": "Migration on :" }, { "elmType": "div", "txtContent": "=if([$MigrationDate] == '', '', toDateString([$MigrationDate]))" } ] } @currentField and [$ID] show just fine, but the date field always shows up empty (even if I put it straight without the if). When I add the date at the top most component, it does show the date: { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "txtContent": "= @currentField + toDateString([$MigrationDate])" } Again, the current column is a Single line of text column with a short site name in it. How can I show a date field in a child component as per first code sample??? UPDATE: Using the 2nd code snippet, I was able to accomplish the same using '\n' to add new lines: { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "txtContent": "= if([$SiteTemplate] == 'Main','Main ID: ', 'Main site:: ') + @currentField + '\nID: ' + [$ID] + '\n' + if([$MigrationDate], 'Migration scheduled for: ' + toDateString([$MigrationDate]), '')" } In a test private view it worked like a charm, but in the public view I get a "Invalid date" error. So next to my original question for which I'm still curious whether or not there's a solution, I now need to resolve the Invalid date issue... Any ideas?Solved4.4KViews0likes6CommentsList column formatting buttons in the list form view
I’ve been playing around with column formatting, and list form formatting. Column formatting buttons are useful. However they appear to be completely useless in the form view. They only seem to appear if there’s data in the field, which is workable. However, they no longer function as a button as it will just click into the field behind the button. Not only is the button not useable, it’s confusing and clunky. Is there anyway round this, without resorting to power apps etc? I just would like a submit or save button in the form view for a current, not new, list item. It triggers a workflow, and it doesn’t feel comfortable doing that from just a field edit.988Views0likes0CommentsLIST Column Formatting - using Jason
Hello All, I have a Risk_Value Column on my SharePoint List , the Risk value column --> will only hold 1 unique value from the 49 possible values as per the below 7*7 matrix Q: is there a way to format risk-value column to display color & text based on the following if Risk_value is any of blue cells (blue , level 4) if Risk_value is within any yellow cells (Yellow , level 3) if Risk_value is within any orange cells (Orange , level 2) . .............etc.1.4KViews0likes3CommentsRemoval of special characters in a cell in Modern SharePoint Library
Hi Everyone, So I have a document library where the customer wanted to manually create indented subtasks. To do this, they added 5 dashes to specific items to create the appearance of indention. They want these dashes removed, while maintaining an indention. This is what it looks like: The Title column is just a single-line text column. I want the bottom three entries (that have the dashes) to appear indented under the top entry. But I obviously don't want the dashes. I don't know if this is a JSON issue, or may a power automate workflow to get rid of the dashes. Can I change the font of the dashes to white? I'm just not sure. Any help would be greatly appreciated. Thanks! Chris3.6KViews0likes2CommentsWhere is the "Column Formatting" Field?
Hi Community, today I saw that the field "Column Formatting" is no longer present in the detail view of a column. Do you have more information about that? I know that it is possible to format a column on the library/list directly via modern ui, but I want to set this formatting on site level to reuse it on multiple list. How can I implement this yet? Do I have to set it for each list separately? If so, thats a bad joke 😞 Regards, Ingrid1.1KViews0likes2CommentsJSON Clickable Action and sp-field-quickActions
Hi, I'm trying to format a quickfield action to open a task view link. Everything works as intended but I can't format the icon; the most it does is change to red when using the sp-field-trending--down class but if I use the sp-field-quickActions, it simply ignores it and displays as a regular ugly blue/purple hyperlink. I want to use a red or blue color (no ugly underline and make it a little bit bigger), any help would be greatly appreciated. Here's the code: { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "debugMode": true, "elmType": "div", "children": [ { "elmType": "span", "style": { "padding-right": "8px" }, "txtContent": "[$ID]" }, { "elmType": "a", "attributes": { "iconName": "=if([$Tasks_x0020_List] > 0,'TaskLogo', '')", "class": "sp-field-quickActions", "target": "_blank", "href": { "operator": "+", "operands": [ "https://-----.sharepoint.com/eQMS/Lists/Customer%20Complaints%20Tasks/AllItems.aspx#InplviewHash2000000e63d8bd3fdec=FilterField1%3DComplaint%255Fx0020%255FID-FilterValue1%3D", "[$ID]" ] } } } ] } Here's the result:Solved11KViews0likes4CommentsColumn Formatting AND
Hi, I am trying to show a button for a flow action based on a specific content type and the content approval set to pending. I can show the button if I only have the one field in the if statement but when I try to combine to 2 steps it doesnt work. Any help would be appreciated. JSON: { "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json", "elmType": "span", "style": { "color": "#0078d7" }, "children": [ { "elmType": "button", "style": { "background-color": "purple", "color": "white", "cursor": "pointer", "visibility": "=if([$ContentTypeId] == '0x010100328330ABC4EBE147A62B17E6255724E7', if([$_ModerationStatus] == 'Pending',visible,'hidden','hidden'))" }, "txtContent": "Get Approved", "customRowAction": { "action": "executeFlow", "actionParams": "{\"id\": \"183bedd4-6f2b-4264-855c-9dc7617b4dbe\"}" } } ] }1.1KViews0likes2CommentsColor Shading in the Cell based on Column Percentage Value in a List
Hi all, I've searched through the postings and cannot find what I'm trying to accomplish. (see attachment - I worked up a sample) I would like a color code in the column field to change based on the percentage complete. 0-25% = Red 26-50% = Orange 51-99% = Yellow 100% = Green Notes: There are 3 columns that calculate the percentage. Total subtracting Done = Remaining. EX: Total items = 9, 6 are Done with 3 remaining = 67% complete. Any ideas on how to make this happen? Many thanks in advance. SharePoint 365Solved9KViews0likes1Comment