"children": [
{
"forEach": "choice in [$Colors]",
"elmType": "div",
"style": {
"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",
"background-color": "=if([$choice]=='Autumn Orange','#c93712', if([$choice]=='Battleship Grey','#3b3b42',if([$choice]=='Black','#282828',if([$choice]=='Bright Purple','#3e2249',if([$choice]=='Burgundy','#933a50',if([$choice]=='Brilliant Blue','#1482bd',if([$choice]=='Carolina Blue','#6e99db',if([$choice]=='Celadon Blue','#3479aa',if([$choice]=='Cool Grey','#999999',if([$choice]=='Dark Green','#2c3d39',if([$choice]=='Engine Red','#ad1730',if([$choice]=='Gusty Grey','#9c9899',if([$choice]=='Jewel Green','#0e8261',if([$choice]=='Lime','#91de5c',if([$choice]=='Magenta','#932063',if([$choice]=='Maroon','#5b2032',if([$choice]=='Navy','#1d2331',if([$choice]=='Neon Orange','#fe4c2c',if([$choice]=='Neon Yellow','#d9ff45',if([$choice]=='Pink Raspberry','#fc355e',if([$choice]=='Red','#c30a2b',if([$choice]=='Royal','#323d73',if([$choice]=='Steel Grey','#414642',if([$choice]=='Stone','#dacbae',if([$choice]=='Teal Green','#017d79',if([$choice]=='True Navy','#292b46',if([$choice]=='True Royal','#1c3578',if([$choice]=='White','#f2f2f2',if([$choice]=='Yellow','#f4ce2d',''))",
"color": "#6e6e6e",
"font-weight": "bold"
},
"txtContent": "[$choice]"
I am developing a list that will act as a catalog for clothing. The code posted for the gallery view of this list. The snipped posted basically populates choice pills with the associated shirt colors as the background colors.
Is there any way I can reference the "background-color" of the current "for each" loop in the "color" element? For example, "color": "$choice.attribute.background-color"
Ideally, if I'm able to reference elements within elements as stated above, I would like to convert all the hex values to rgba and throw in a formula for the luminance values to figure out optimal font colors for each pill.
Related
I currently started working with Sharepoint and need to create a list the involves personal information (Name, Surname, Description, ...). Maybe some background to what I want to do.
For filtering purpose I have added a dummy line that has all those fields filled with "!". In my last column I want to create a button that allows me to trigger a PowerAutomate flow in order to copy all mails. Now this is were I am stuck. This button I want to create should only be available in the dummy line, where e.g. the field name is filled with "!" but so far I only managed to display my button in all rows and not just the dummy row. I thought about creating an if-statement that checks the field/column "name" for "!" and if that is the case, I want to create the button, but since I am quite new to Sharepoint/JSON I have trouble figuring out what is the exact problem and why my code is not working.
So far I tried to find a solution for my problem, but only came up with this here, which is not quite working. I would really appreciate some help. Thank you very much in advance guys! :)
Edit: A link to the picture for my sharepoint list is below the code :)
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "a",
"if" : {
"name" : "!"
},
"then" : [
{
"txtContent": "Copy",
"attributes": {
"href": "='Here the link to my PowerAutomate-Flow will be pasted'"}
}
],
"else" : [
{
"txtContent": "",
"attributes":{
"href": "=''"}
}
],
"style": {
"padding": "0px 25px",
"cursor": "pointer",
"border": "none",
"color": "white",
"font-weight": "550",
"background-color": "#0078d4",
"text-decoration": "none",
"font-size": "14px",
"text-align": "center",
"width": "35px"
}
}
[My Sharepoint-List](https://i.stack.imgur.com/Dj7RK.png)
Here is a similar case for you to refer to:
https://learn.microsoft.com/en-us/answers/questions/737561/displaynot-dispaly-through-fromat-column-in-sharep.html?childToView=737760#answer-737760
In this case, if the status column is equal to 'Closed', then the button will not work. If not, there will be a button to trigger a flow.
As the button you want to create should only be available in the dummy line, where e.g. the field name is filled with "!", you could modify the code like this:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "button",
"customRowAction": {
"action": "executeFlow",
"actionParams": "{\"id\": \"386b81a1-fce2-45da-a981-91160d0d9245\"}"
},
"attributes": {
"class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
},
"txtContent": "copy",
"style": {
"border": "none",
"background-color": "lightgreen",
"cursor": "pointer",
"display": "=if([$name]=='!','inherit','none')"
}
},
{
"elmType": "span",
"style": {
"padding-right": "8px",
"display": "=if([$name]=='!','none','inherit')"
},
"txtContent": "#currentField"
}
]
}
You could change the parameter in the code according to your own requirement, for example: the "actionParams": "{"id": "386b81a1-fce2-45da-a981-91160d0d9245"}" is generated by the flow I created, you need to change it into your own flow id.
I am working on a document checklist for my users and my second column 'Description' currently has the '?' in it. Currently the code allows the user to hover over the '?' and see a further description if needed as below.
I would like to replace with the '?' with an image, similar to a tooltip ? to ensure the list looks clean. I was wondering if this was possible in Sharepoint online. This is the current code I have.
{"$schema":"https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json","elmType":"div","style":{"font-size":"12px"},"txtContent":"?","customCardProps":{"formatter":{"elmType":"div","txtContent":"[$Description]","style":{"font-size":"12px","color":"green","padding":"5px"}},"openOnEvent":"hover","directionalHint":"bottomCenter","isBeakVisible":true,"beakStyle":{"backgroundColor":"white"}}}
Is this a simple replacement of a code or would this require a more complicated process?``
We can add iconName attribute as shown below:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"font-size": "12px"
},
"attributes": {
"iconName": "SunQuestionMark"
},
"customCardProps": {
"formatter": {
"elmType": "div",
"txtContent": "[$Description]",
"style": {
"fontsize": "12px",
"color": "green",
"padding": "5px"
}
},
"openOnEvent": "hover",
"directionalHint": "bottomCenter",
"isBeakVisible": true,
"beakStyle": {
"backgroundColor": "white"
}
}
}
My test result for your reference:
I have a column in a ShP list where I need whatever figure we enter to change colour according to the range they fit in:
red for <= 50, amber for =>51 and green for >75
I have it working for two ranges but I am still trying to figure out the format into which I should write a range of numbers between >51 and <74 but I have yet to find the format to write it down.
Here's what I have working so far:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"attributes": {
"class": "=if(#currentField <= 50,'sp-field-severity--blocked', if(#currentField >75,'sp-field-severity--good','')"
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline-block",
"padding": "0 4px"
},
"attributes": {
"iconName": "=if(#currentField <= 50,'SadSolid', if(#currentField >75,'Emoji2', '')"
}
},
{
"elmType": "span",
"txtContent": "#currentField"
}
]
}
Can anyone see what I'm missing? I can't be far off... I have managed to fit in a second condition today and it works. Last one to go.
Trying to achieve a horizontal tiled/button view in a SharePoint list, to work with an associated list properties webpart, however item selection is not working, looking for workaround in JSON if possible.
I tried looking for a customRowAction setting that could work the same way, but found nothing.
"hideSelection": "true", seems to completely turn off the ability to select an item.
I would like to be able to click on a list item and it resgister as a "selected" item to trigger the associated List Properties webpart to display the items content.
OOTB this functions as expected but not with the list view styling shown in the JSON.
{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": "true",
"hideColumnHeader": "true",
"rowFormatter": {
"elmType": "div",
"style": {
"float": "left"
},
"children": [
{
"elmType": "button",
"customRowAction": {
"action": "defaultClick"
},
"attributes": {
"class": "ms-bgColor-themeLighterAlt ms-bgColor-themePrimary--hover ms-fontColor-white--hover"
},
"style": {
"display": "flex",
"flex-wrap": "wrap",
"min-width": "150px",
"min-height": "50px",
"margin-right": "10px",
"margin-top": "10px",
"box-shadow": "2px 2px 4px darkgrey"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "center",
"margin": "auto"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-row-title "
},
"txtContent": "[$Phase]"
}
]
}
]
}
]
}
}
If you want to show the item in List Properties web part, you need use the default list view styling, if you use JSON formatting to customize the list view, it will not works.
Using your JSON formatting, when we click the button, we can see the item data in the panel in the same page. Why do you want to show in List Properties web part?
I know the script is working as the text color changes and there are no errors; no matter what width I put in, however, it does not change. So if I put in 300, 600, or 1000, for example, it stays the same when viewed.
I have changed the column width to different values as I said above, and have changed from text to rich text, enhanced, etc.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"txtContent": "#currentField",
"style": {
"color": "green",
"width": "300px"
}
}
I would expect the column width to be the set size indicated in the script, e.g., 600, 300, 1000.
Try using the style name column-width and removing px from the width value. I needed to change the column width and, after reading about JSON, I still needed an example and found your question. I changed the style name and the width value and was successful.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"txtContent": "#currentField",
"style": {
"color": "green",
"column-width": "300"
}
}