json
85 TopicsSharePoint List Calendar View Conditional Formatting
Hi all, I've been spinning my wheels on this one. I have created a calendar view from a SP list and want to color code calendar items based on the event type (field = "Event_Type"). They selection list is formatted as radio buttons. I've written the following JSON and input into the Advanced View under Conditional Formatting. I've tried everything I can think of to de-bug but it seems the code is correct? Yet it isn't working: { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "additionalEventClass": { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$Event_Type]", "Vacation/Out of Office" ] }, "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgRed' , 'sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont')+' sp-field-fontSizeSmall'", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$Event_Type]", "Training" ] }, "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGreen' , 'sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont')+' sp-field-fontSizeSmall'", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$Event_Type]", "Onboarding" ] }, "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBrown' , 'sp-css-backgroundColor-BgGold sp-css-color-GoldFont')+' sp-field-fontSizeSmall'", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$Event_Type]", "Holiday" ] }, "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgTeal' , 'sp-css-backgroundColor-BgCyan sp-css-color-CyanFont')+' sp-field-fontSizeSmall'", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$Event_Type]", "Meeting" ] }, "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkPurple' , 'sp-css-backgroundColor-BgViolet sp-css-color-VioletFont')+' sp-field-fontSizeSmall'", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$Event_Type]", "Event" ] }, "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgBlue' , 'sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont')+' sp-field-fontSizeSmall'", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$Event_Type]", "Board" ] }, "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgGray' , 'sp-css-backgroundColor-BgLightGray sp-css-color-LightGrayFont')+' sp-field-fontSizeSmall'", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$Event_Type]", "Wellness" ] }, "=if(@isSelected == true, 'sp-css-color-WhiteFont sp-css-backgroundColor-BgDarkGreen' , 'sp-css-backgroundColor-BgSage sp-css-color-SageFont')+' sp-field-fontSizeSmall'", "" ] } ] } ] } ] } ] } ] } ] } ] } }Solved12KViews0likes10CommentsSharepoint online - Guided tours, feature tour, walk throughs
TLDR; Is there a way to create in-app walkthroughs/ guides tours/ feature tours using open source packages like intro.js, chardin.js, joyride, bootstrap, HopScotch, Crumble with Modern SharePoint Online environment? I couldn't find any tutorials for the same. Since I am not a web developer I could not ascertain if this can work with the modern SharePoint Online site pages at all? Long version I am working on intranet design, using SharePoint online. This intranet serves as a knowledge base, a process workflow reference, and a collaborative tool. I am trying to put together a tutorial so that people can understand what the various web parts are. I have tried using ppt, video, sway, word doc but nothing seems to easy because the user needs to open up two different windows and need to simultaneously walk through both of them. That doesn't work at all for the mobile environment. I researched that websites like walkme, whatfix, inline etc. provide subscription services for the same. I am looking for open source free to use alternatives for the same. My researched shows there are several packages that can help with this, Joyride, intor.js, bootstrap etc. But I cannot ascertain if these can be used with the modern SharePoint online site pages. Could someone guide me to a resource that shows how these and other packages can be set up to use within the SharePoint online environment? Do I need to be worried about privacy and intranet content being exposed to third party apps/ developers if I use these plugins? Any other suggestions on creating walkthroughs for SharePoint online environment that work on mobile and desktop? Any other places where I can post this question? My background: I am not a developer but I tinker with a lot of stuff, I generally use python, VBA, and few visual scripting languages for automation for engineering design and reporting. Any help is appreciated. Thanks, AdityaSolved5.6KViews0likes5CommentsMultiple-selection-enabled People field properties access for View Formatting.
Hello dears, I've a list with a people field ("Owners") allowing multiple selection. There will always be at least 2 people in that field. Is it somehow possible to access the properties of the people field in the context of View Formatting (RowFormatter) ? I'm pretty sure its not possible to loop through the values of such array but maybe its possible to arbitrarily choose like for the 2 first elements? Something like [$Owners].[0].email ? Thanks for your help!1.3KViews0likes2CommentsGallery view formatting to group in columns
I'd like to know if their is a trick or JSON view formatting I can change so I can group all the items on a list in gallery view are grouped vertically by a certain list value (in this case the region which is a choice field). The image I attached helps explain what I mean. I like the exact card width used because 6 options across works perfectly actually.9KViews0likes4CommentsSharePoint List. Gallery Formating
Good morning everyone. I'm trying to use a list to host a series of hyperlink. My list has 3 columns: 1) Title (The default one) 2) Topic (Hyperlink column) 3) Language (Radio button choice) I want to use this list as menu. Similar to the quick link Object in SharePoint (modern). I made all columns but "topic" invisible I created a Gallery view and ensure the column header doesn't appear in all items Now, I have no clue on how to format each tiles. If I make the font size bigger, the bottom of the text is cropped. If I make the size of the box bigger on list, I see the result but it's not reflected on what I see on Sharepoint So, my questions. 1) How to make my boxes larger (in both list and SharePoint) 2) How can I ensure the bottom of my text (The alternative text for the URL) is not cropped (usually the "p, q, g" ) 3) If my text it a bit too long, how can I allow it to take two lines one not only one) 4) How do I remove this little radio button in each tiles ? 5) How do I change the background color of the list object on SharePoint, the background and the background of the tiles ?1.7KViews0likes1CommentTwo JSON questions regarding formatting a Tile View for a SharePoint list
I have a SharePoint list that I have formatted to display in a tile view and because of my lack of knowledge of JSON structure and how it works, I'm not sure how or where to add what I need to bold the column headers and to put a border around each tile. My tiles are very simple and have just three columns I want displayed. I know how to change the sp-card info for the class to get a bolder look but it's bolding the entire column (title AND contents). And there's a soft grey border around each tile and I would like to change the color and bold that as well if possible? Here's what I currently have: { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 413, "width": 254, "hideSelection": false, "fillHorizontally": true, "formatter": { "elmType": "div", "attributes": { "class": "sp-card-container" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-defaultClickButton" }, "customRowAction": { "action": "defaultClick" } }, { "elmType": "div", "attributes": { "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer" }, "children": [ { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralPrimary sp-card-label sp-card-highlightedContent" }, "txtContent": "[!Nominees.DisplayName]", "style": { "white-space": "normal", "word-break": "break-word", "font-size": "13px" } }, { "elmType": "p", "attributes": { "title": "[$Nominees]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent sp-card-multiline", "role": "heading", "aria-level": "3" }, "txtContent": "=if ([$Nominees] == '', '–', [$Nominees])", "style": { "-webkit-line-clamp": "2", "white-space": "normal", "word-break": "break-word", "font-size": "13px", "height": "30px" } } ] }, { "elmType": "div", "attributes": { "class": "sp-card-displayColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Why_x0020_have_x0020_they_x0020_.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$Why_x0020_have_x0020_they_x0020_]", "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-multiline" }, "txtContent": "=if ([$Why_x0020_have_x0020_they_x0020_] == '', '–', [$Why_x0020_have_x0020_they_x0020_])", "style": { "-webkit-line-clamp": "2", "white-space": "normal", "word-break": "break-word", "font-size": "13px", "height": "250px" } } ] }, { "elmType": "div", "attributes": { "class": "sp-card-lastTextColumnContainer" }, "children": [ { "elmType": "p", "attributes": { "class": "ms-fontColor-neutralSecondary sp-card-label" }, "txtContent": "[!Nominator.DisplayName]" }, { "elmType": "p", "attributes": { "title": "[$Nominator]", "class": "ms-fontColor-neutralPrimary sp-card-content " }, "txtContent": "=if ([$Nominator] == '', '–', [$Nominator])" } ] } ] } ] } } And here's what it looks like: Any help is greatly appreciated!3KViews1like2CommentsFormat View: Create Tabs Using JSON list Format View
Hello All, I'm new to JSON format view and attempting to create tabs inside of a Document Library. I started with tabs located here: https://github.com/pnp/List-Formatting/tree/master/view-samples/tabs. However, this approach creates tabs for each item, I need the tabs for the entire library which lists my categories (choice 1-3). I'm not entirely sure of the limitation of JSON formatting but it looks like it can be done. I'm just stuck. Here's the look I'm going for (jquery tabs) but with items below it. Tabs are the library categories: Limitations: I cannot use SPFx packages, and I need to save Power Apps as my last resort. Below is a screenshot of what I currently have for my document library. I've grouped my choice in the view. I also have my JSON code below. Any help or guidance would be greatly appreciated. { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json", "height": 277, "width": 254, "hideSelection": false, "groupProps": { "headerFormatter": { "elmType": "div", "children": [ { "elmType": "div", "style": { "flex-wrap": "wrap", "display": "flex", "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "border-radius": "6px", "align-items": "center", "white-space": "nowrap", "margin": "1px 4px 4px 1px" }, "attributes": { "class": "sp-css-backgroundColor-blueBackground37" }, "children": [ { "elmType": "img", "attributes": {}, "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" }, "txtContent": { "operator": "+", "operands": [ "", "@group.fieldData.displayValue" ] } } ] }, { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "row", "justify-content": "center" }, "children": [ { "elmType": "div", "txtContent": "='has ' + @group.count + if(@group.count > '1', ' Documents', ' Document')", "style": { "font-weight": "500" } } ] } ] } ] } ] } } }2.6KViews0likes0CommentsCustom number format with leading letters and numbers
Hi, I'm tying to create a SharePoint Online List as an incident register. I'm want to have an Incident ID column formatted to display the number like such: INC001, INC002 INC003 and so on. I can format the number column to have the leading INC but it drops off the leading 0s. I googled some code to format the number with the leading 0s but then it drops off the INC. "{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "txtContent": "=padStart(toString(@currentField),3,'0')" }" How do I change the code so I can have the leading lettering (INC) and leading 0s so my number column displayed as previously described. Thanks in advanceSolved2.4KViews1like3CommentsSharePoint library choice column formatting
I am trying to format a JSON for a Choice column that has been set to "choice pills". I am trying to change things like font color, background color, border etc. So far trying to do this but doesn't seem to work: { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", "elmType": "div", "style": { "flex-wrap": "wrap", "display": "flex" }, "children": [ { "forEach": "__INTERNAL__ in @currentField", "elmType": "div", "style": { "color": "=if(@currentField == 'Sales', '#ff0000', if(@currentField == 'Marketing', '#006aff', if(@currentField == 'Warehouse', '#b882d7','green')))", "background-color": "=if(@currentField == 'Sales', '#FAA0A0', if(@currentField == 'Marketing', '#c1d3f7', if(@currentField == 'Warehouse', '#e4c1f7','#DAF7A6')))", "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "overflow": "hidden", "text-overflow": "ellipsis", "display": "flex", "border-radius": "16px", "height": "24px", "align-items": "center", "white-space": "nowrap", "margin": "4px 4px 4px 4px" }, "attributes": { "class": { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$__INTERNAL__]", "Sales" ] }, "sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$__INTERNAL__]", "Marketing" ] }, "sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont", { "operator": ":", "operands": [ { "operator": "==", "operands": [ "[$__INTERNAL__]", "Warehouse" ] }, "sp-css-backgroundColor-BgGold sp-css-color-GoldFont", "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary" ] } ] } ] } }, "txtContent": "[$__INTERNAL__]" } ] }Solved3.2KViews0likes3Comments