Link to the samples:
- https://github.com/pnp/List-Formatting/tree/master/column-samples/date-range-rag
- https://github.com/pnp/List-Formatting/tree/master/view-samples/custom-header-format
When I try to combine the two scripts from PnP List Formatting I am not able to combine the colors with the text. DaysLeft
is to have the date-range-rag look. I know its probably the sequence I have the code but need help. I have spent too much time on this and I know my manager would love this. Here is the code that I add to the Format View and layout is List:
**I forgot to mention that I have tried adding the date-range-rag in the column format as well and didn't work.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideColumnHeader": true,
"hideSelection": true,
"rowFormatter": {
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "column",
"align-items": "flex-start"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themePrimary ms-fontColor-white"
},
"style": {
"display": "=if(@rowIndex == 0, 'flex', 'none')",
"font-weight": "bold",
"font-size": "18px",
"width": "100%",
"padding": "4px"
},
"children": [
{
"elmType": "div",
"txtContent": "DaysLeft",
"style": {
"width": "100px"
}
},
{
"elmType": "div",
"txtContent": "CurrentOwner",
"style": {
"width": "200px"
}
},
{
"elmType": "div",
"txtContent": "Serial Number",
"style": {
"width": "200px"
}
},
{
"elmType": "div",
"txtContent": "Pickup Date",
"style": {
"width": "150px"
}
},
{
"elmType": "div",
"txtContent": "Return Date",
"style": {
"width": "150px"
}
}
]
},
{
"elmType": "div",
"attributes": {
"class": "ms-borderColor-neutralQuaternary"
},
"style": {
"display": "flex",
"font-size": "16px",
"width": "100%",
"padding": "0 4px",
"border-bottom-width": "1px",
"border-bottom-style": "solid",
"border-left-width": "1px",
"border-left-style": "solid",
"border-right-width": "1px",
"border-right-style": "solid"
},
"children": [
{
"elmType": "div",
"txtContent": "[$DaysLeft]",
"style": {
"width": "100px",
"border": "2px solid",
"border-color": "=if([$DueDate] <= @now, '#ff9362', if(1 - Number([$DueDate] - @now) / Number([$DueDate] - [$PickupDate]) >= 0.7) && (1 - Number([$DueDate] - @now) / Number([$DueDate] - [$PickupDate]) < 0.9), '#ffd24c', if(1 - Number([$DueDate] - @now) / Number([$DueDate] - [$PickupDate]) >= 0.9, '#ff9362', '#bdca73'))"
}
},
{
"elmType": "span",
"txtContent": "@currentField",
"style": {
"position": "absolute",
"left": "8px"
},
"attributes": {
"class": "ms-fontColor-neutralSecondary"
}
},
{
"elmType": "span",
"txtContent": "='(' + if(((Number([$DueDate] - @now))/86400000)<1 && ((Number([$DueDate] - @now))/86400000)>=0,'Final day',if(((Number([$DueDate] - @now))/86400000)<2 && ((Number([$DueDate] - @now))/86400000)>=1,'2 days left',if(((Number([$DueDate] - @now))/86400000)<3 && ((Number([$DueDate] - @now))/86400000)>=2,'3 days left',if(((Number([$DueDate] - @now))/86400000)<4 && ((Number([$DueDate] - @now))/86400000)>=3,'4 days left',if(((Number([$DueDate] - @now))/86400000)<5 && ((Number([$DueDate] - @now))/86400000)>=4,'5 days left',if(((Number([$DueDate] - @now))/86400000)<6 && ((Number([$DueDate] - @now))/86400000)>=5,'6 days left',if(((Number([$DueDate] - @now))/86400000)<7 && ((Number([$DueDate] - @now))/86400000)>=6,'7 days left',if(((Number([$DueDate] - @now))/86400000)<8 && ((Number([$DueDate] - @now))/86400000)>=7,'8 days left',if(((Number([$DueDate] - @now))/86400000)<9 && ((Number([$DueDate] - @now))/86400000)>=8,'9 days left',if(((Number([$DueDate] - @now))/86400000)<10 && ((Number([$DueDate] - @now))/86400000)>=9,'10 days left',if(((Number([$DueDate] - @now))/86400000)<11 && ((Number([$DueDate] - @now))/86400000)>=10,'11 days left',if(((Number([$DueDate] - @now))/86400000)<12 && ((Number([$DueDate] - @now))/86400000)>=11,'12 days left',if(((Number([$DueDate] - @now))/86400000)<13 && ((Number([$DueDate] - @now))/86400000)>=12,'13 days left',if(((Number([$DueDate] - @now))/86400000)<14 && ((Number([$DueDate] - @now))/86400000)>=13,'14 days left',if(((Number([$DueDate] - @now))/86400000)<15 && ((Number([$DueDate] - @now))/86400000)>=14,'15 days left',if(((Number([$DueDate] - @now))/86400000)<16 && ((Number([$DueDate] - @now))/86400000)>=15,'16 days left',if(((Number([$DueDate] - @now))/86400000)<17 && ((Number([$DueDate] - @now))/86400000)>=16,'17 days left',if(((Number([$DueDate] - @now))/86400000)<18 && ((Number([$DueDate] - @now))/86400000)>=17,'18 days left',if(((Number([$DueDate] - @now))/86400000)<19 && ((Number([$DueDate] - @now))/86400000)>=18,'19 days left',if(((Number([$DueDate] - @now))/86400000)<20 && ((Number([$DueDate] - @now))/86400000)>=19,'20 days left',if(((Number([$DueDate] - @now))/86400000)<21 && ((Number([$DueDate] - @now))/86400000)>=20,'21 days left',if(((Number([$DueDate] - @now))/86400000)<22 && ((Number([$DueDate] - @now))/86400000)>=21,'22 days left',if(((Number([$DueDate] - @now))/86400000)<23 && ((Number([$DueDate] - @now))/86400000)>=22,'23 days left',if(((Number([$DueDate] - @now))/86400000)<24 && ((Number([$DueDate] - @now))/86400000)>=23,'24 days left',if(((Number([$DueDate] - @now))/86400000)<25 && ((Number([$DueDate] - @now))/86400000)>=24,'25 days left',if(((Number([$DueDate] - @now))/86400000)<26 && ((Number([$DueDate] - @now))/86400000)>=25,'26 days left',if(((Number([$DueDate] - @now))/86400000)<27 && ((Number([$DueDate] - @now))/86400000)>=26,'27 days left',if(((Number([$DueDate] - @now))/86400000)<28 && ((Number([$DueDate] - @now))/86400000)>=27,'28 days left',if(((Number([$DueDate] - @now))/86400000)<29 && ((Number([$DueDate] - @now))/86400000)>=28,'29 days left',if(((Number([$DueDate] - @now))/86400000)<30 && ((Number([$DueDate] - @now))/86400000)>=29,'30 days left',if(((Number([$DueDate] - @now))/86400000)<31 && ((Number([$DueDate] - @now))/86400000)>=30,'31 days left',if(((Number([$DueDate] - @now))/86400000)<32 && ((Number([$DueDate] - @now))/86400000)>=31,'32 days left',if(((Number([$DueDate] - @now))/86400000)<33 && ((Number([$DueDate] - @now))/86400000)>=32,'33 days left',if(((Number([$DueDate] - @now))/86400000)<34 && ((Number([$DueDate] - @now))/86400000)>=33,'34 days left',if(((Number([$DueDate] - @now))/86400000)<35 && ((Number([$DueDate] - @now))/86400000)>=34,'35 days left',if(((Number([$DueDate] - @now))/86400000)<36 && ((Number([$DueDate] - @now))/86400000)>=35,'36 days left',if(((Number([$DueDate] - @now))/86400000)<37 && ((Number([$DueDate] - @now))/86400000)>=36,'37 days left',if(((Number([$DueDate] - @now))/86400000)<38 && ((Number([$DueDate] - @now))/86400000)>=37,'38 days left',if(((Number([$DueDate] - @now))/86400000)<39 && ((Number([$DueDate] - @now))/86400000)>=38,'39 days left',if(((Number([$DueDate] - @now))/86400000)<40 && ((Number([$DueDate] - @now))/86400000)>=39,'40 days left',if(((Number([$DueDate] - @now))/86400000)<41 && ((Number([$DueDate] - @now))/86400000)>=40,'41 days left',if(((Number([$DueDate] - @now))/86400000)<42 && ((Number([$DueDate] - @now))/86400000)>=41,'42 days left',if(((Number([$DueDate] - @now))/86400000)<43 && ((Number([$DueDate] - @now))/86400000)>=42,'43 days left',if(((Number([$DueDate] - @now))/86400000)<44 && ((Number([$DueDate] - @now))/86400000)>=43,'44 days left',if(((Number([$DueDate] - @now))/86400000)<45 && ((Number([$DueDate] - @now))/86400000)>=44,'45 days left',if(((Number([$DueDate] - @now))/86400000)<46 && ((Number([$DueDate] - @now))/86400000)>=45,'46 days left',if(((Number([$DueDate] - @now))/86400000)<47 && ((Number([$DueDate] - @now))/86400000)>=46,'47 days left',if(((Number([$DueDate] - @now))/86400000)<48 && ((Number([$DueDate] - @now))/86400000)>=47,'48 days left',if(((Number([$DueDate] - @now))/86400000)<49 && ((Number([$DueDate] - @now))/86400000)>=48,'49 days left',if(((Number([$DueDate] - @now))/86400000)<50 && ((Number([$DueDate] - @now))/86400000)>=49,'50 days left',if(((Number([$DueDate] - @now))/86400000)<51 && ((Number([$DueDate] - @now))/86400000)>=50,'51 days left',if(((Number([$DueDate] - @now))/86400000)<52 && ((Number([$DueDate] - @now))/86400000)>=51,'52 days left',if(((Number([$DueDate] - @now))/86400000)<53 && ((Number([$DueDate] - @now))/86400000)>=52,'53 days left',if(((Number([$DueDate] - @now))/86400000)<54 && ((Number([$DueDate] - @now))/86400000)>=53,'54 days left',if(((Number([$DueDate] - @now))/86400000)<55 && ((Number([$DueDate] - @now))/86400000)>=54,'55 days left',if(((Number([$DueDate] - @now))/86400000)<56 && ((Number([$DueDate] - @now))/86400000)>=55,'56 days left',if(((Number([$DueDate] - @now))/86400000)<57 && ((Number([$DueDate] - @now))/86400000)>=56,'57 days left',if(((Number([$DueDate] - @now))/86400000)<58 && ((Number([$DueDate] - @now))/86400000)>=57,'58 days left',if(((Number([$DueDate] - @now))/86400000)<59 && ((Number([$DueDate] - @now))/86400000)>=58,'59 days left',if(((Number([$DueDate] - @now))/86400000)<60 && ((Number([$DueDate] - @now))/86400000)>=59,'60 days left',if(((Number([$DueDate] - @now))/86400000)<61 && ((Number([$DueDate] - @now))/86400000)>=60,'61 days left',if(((Number([$DueDate] - @now))/86400000)<62 && ((Number([$DueDate] - @now))/86400000)>=61,'62 days left',if(((Number([$DueDate] - @now))/86400000)<63 && ((Number([$DueDate] - @now))/86400000)>=62,'63 days left',if(((Number([$DueDate] - @now))/86400000)<64 && ((Number([$DueDate] - @now))/86400000)>=63,'64 days left',if(((Number([$DueDate] - @now))/86400000)<65 && ((Number([$DueDate] - @now))/86400000)>=64,'65 days left',if(((Number([$DueDate] - @now))/86400000)<66 && ((Number([$DueDate] - @now))/86400000)>=65,'66 days left',if(((Number([$DueDate] - @now))/86400000)<67 && ((Number([$DueDate] - @now))/86400000)>=66,'67 days left',if(((Number([$DueDate] - @now))/86400000)<68 && ((Number([$DueDate] - @now))/86400000)>=67,'68 days left',if(((Number([$DueDate] - @now))/86400000)<69 && ((Number([$DueDate] - @now))/86400000)>=68,'69 days left',if(((Number([$DueDate] - @now))/86400000)<70 && ((Number([$DueDate] - @now))/86400000)>=69,'70 days left',if(((Number([$DueDate] - @now))/86400000)<71 && ((Number([$DueDate] - @now))/86400000)>=70,'71 days left',if(((Number([$DueDate] - @now))/86400000)<72 && ((Number([$DueDate] - @now))/86400000)>=71,'72 days left',if(((Number([$DueDate] - @now))/86400000)<73 && ((Number([$DueDate] - @now))/86400000)>=72,'73 days left',if(((Number([$DueDate] - @now))/86400000)<74 && ((Number([$DueDate] - @now))/86400000)>=73,'74 days left',if(((Number([$DueDate] - @now))/86400000)<75 && ((Number([$DueDate] - @now))/86400000)>=74,'75 days left',if(((Number([$DueDate] - @now))/86400000)<76 && ((Number([$DueDate] - @now))/86400000)>=75,'76 days left',if(((Number([$DueDate] - @now))/86400000)<77 && ((Number([$DueDate] - @now))/86400000)>=76,'77 days left',if(((Number([$DueDate] - @now))/86400000)<78 && ((Number([$DueDate] - @now))/86400000)>=77,'78 days left',if(((Number([$DueDate] - @now))/86400000)<79 && ((Number([$DueDate] - @now))/86400000)>=78,'79 days left',if(((Number([$DueDate] - @now))/86400000)<80 && ((Number([$DueDate] - @now))/86400000)>=79,'80 days left',if(((Number([$DueDate] - @now))/86400000)<81 && ((Number([$DueDate] - @now))/86400000)>=80,'81 days left',if(((Number([$DueDate] - @now))/86400000)<82 && ((Number([$DueDate] - @now))/86400000)>=81,'82 days left',if(((Number([$DueDate] - @now))/86400000)<83 && ((Number([$DueDate] - @now))/86400000)>=82,'83 days left',if(((Number([$DueDate] - @now))/86400000)<84 && ((Number([$DueDate] - @now))/86400000)>=83,'84 days left',if(((Number([$DueDate] - @now))/86400000)<85 && ((Number([$DueDate] - @now))/86400000)>=84,'85 days left',if(((Number([$DueDate] - @now))/86400000)<86 && ((Number([$DueDate] - @now))/86400000)>=85,'86 days left',if(((Number([$DueDate] - @now))/86400000)<87 && ((Number([$DueDate] - @now))/86400000)>=86,'87 days left',if(((Number([$DueDate] - @now))/86400000)<88 && ((Number([$DueDate] - @now))/86400000)>=87,'88 days left',if(((Number([$DueDate] - @now))/86400000)<89 && ((Number([$DueDate] - @now))/86400000)>=88,'89 days left',if(((Number([$DueDate] - @now))/86400000)<90 && ((Number([$DueDate] - @now))/86400000)>=89,'90 days left',if(((Number([$DueDate] - @now))/86400000)<91 && ((Number([$DueDate] - @now))/86400000)>=90,'91 days left',if(((Number([$DueDate] - @now))/86400000)<92 && ((Number([$DueDate] - @now))/86400000)>=91,'92 days left',if(((Number([$DueDate] - @now))/86400000)<93 && ((Number([$DueDate] - @now))/86400000)>=92,'93 days left',if(((Number([$DueDate] - @now))/86400000)<94 && ((Number([$DueDate] - @now))/86400000)>=93,'94 days left',if(((Number([$DueDate] - @now))/86400000)<95 && ((Number([$DueDate] - @now))/86400000)>=94,'95 days left',if(((Number([$DueDate] - @now))/86400000)<96 && ((Number([$DueDate] - @now))/86400000)>=95,'96 days left',if(((Number([$DueDate] - @now))/86400000)<97 && ((Number([$DueDate] - @now))/86400000)>=96,'97 days left',if(((Number([$DueDate] - @now))/86400000)<98 && ((Number([$DueDate] - @now))/86400000)>=97,'98 days left',if(((Number([$DueDate] - @now))/86400000)<99 && ((Number([$DueDate] - @now))/86400000)>=98,'99 days left',if(((Number([$DueDate] - @now))/86400000)<100 && ((Number([$DueDate] - @now))/86400000)>=99,'100 days left',if(((Number([$DueDate] - @now))/86400000)<101 && ((Number([$DueDate] - @now))/86400000)>=100,'101 days left',if([$DueDate] <= @now,'Time is up! 0','100+')))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))) + ')'",
"style": {
"position": "absolute",
"right": "2px",
"bottom": "2px",
"font-size": "9px",
"color": "black"
},
"attributes": {
"class": "ms-fontColor-neutralSecondary"
}
},
{
"elmType": "div",
"txtContent": "[$CurrentOwner0]",
"style": {
"width": "200px"
}
},
{
"elmType": "div",
"txtContent": "[$SerialNumber]",
"attributes": {
"class": "=if([$Status], '', 'ms-fontColor-redDark')"
},
"style": {
"width": "200px"
}
},
{
"elmType": "div",
"txtContent": "=toLocaleDateString([$PickupDate])",
"attributes": {
"class": "=if([$Status], '', 'ms-fontColor-redDark')"
},
"style": {
"width": "150px"
}
},
{
"elmType": "div",
"txtContent": "=toLocaleDateString([$DueDate])",
"attributes": {
"class": "=if([$Status], '', 'ms-fontColor-redDark')"
},
"style": {
"width": "150px"
}
}
]
}
]
}
}