diff --git a/column-samples/generic-dynamic-colored-pills/dynamiccoloredpills.png b/column-samples/generic-dynamic-colored-pills/dynamiccoloredpills.png new file mode 100644 index 000000000..8f25cad7d Binary files /dev/null and b/column-samples/generic-dynamic-colored-pills/dynamiccoloredpills.png differ diff --git a/column-samples/generic-dynamic-colored-pills/generic-dynamic-colored-pills.json b/column-samples/generic-dynamic-colored-pills/generic-dynamic-colored-pills.json new file mode 100644 index 000000000..80df5d7c5 --- /dev/null +++ b/column-samples/generic-dynamic-colored-pills/generic-dynamic-colored-pills.json @@ -0,0 +1,43 @@ +{ + "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json", + "elmType": "div", + "style": { + "display": "flex", + "flex-wrap": "wrap", + "width": "100%" + }, + "children": [ + { + "elmType": "div", + "style": { + "margin": "2px auto" + }, + "children": [ + { + "elmType": "div", + "style": { + "vertical-align": "middle", + "white-space": "nowrap", + "width": "auto", + "padding": "5px", + "color": "=if( ((((ceiling((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5)) % 255) / 10) * 10) * 0.299) + (ceiling(((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10) * 0.587) + ((255 - ceiling(((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10)) * 0.114)) ) > 145, '#000000', '#ffffff')", + "background-color": "='rgba(' + (ceiling((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5)) % 255) / 10) * 10) + ', ' + (ceiling((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10) + ', ' + (255 - ceiling(((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10)) + ', 1)'", + "border-width": "2px", + "border-style": "solid", + "border-color": "='rgba(' + (255 - ceiling((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5)) % 255) / 10) * 10) + ', ' + (255 - ceiling((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10) + ', ' + (ceiling(((((@currentField.lookupValue.length) * pow(@currentField.lookupId, 5) + @currentField.lookupId ) % 255) / 10) * 10)) + ', 1)'", + "border-radius": "25px" + }, + "children": [ + { + "elmType": "span", + "style": { + "padding": "8px" + }, + "txtContent": "@currentField.lookupValue" + } + ] + } + ] + } + ] +} diff --git a/column-samples/generic-dynamic-colored-pills/readme.md b/column-samples/generic-dynamic-colored-pills/readme.md new file mode 100644 index 000000000..999b659d9 --- /dev/null +++ b/column-samples/generic-dynamic-colored-pills/readme.md @@ -0,0 +1,3 @@ +The JSON code to dynamically add colored pills to lookup columns. If you have a lookup column with more than 10 options or a lookup column that can have additional items added, managing the pill colors can be time-consuming. The code will calculate a color, background, and border color based on the length of the lookup value and the lookupId. + +This code can be applied to any lookup column