Hello, I am having trouble with the code below. This code is adjusted from this header formatting. Here are the issues I am having:
- Manager Approval-->Not Approved: I would like for this to be red. The entire circle disappears when I try to adjust the "Not Approved" code
- Ethics Approval: This code works just fine. I would like to know how to delete the HR approval codes without jeopardizing the ethics approver code. For example, when I remove everything that has to do with HR Approval, the entire circle disappears (Fig 1)
- SNL Approval: This circle stays green even if their is nothing in the column. If someone's name is entered in the column "SNL Approver Name", then it should be green, like Ethics Approval. I tried using the same code as the Ethics Approval but it does not work. (The approver name column for this one is "Person Group' while Ethics is "Single Line Text") I would also like to get rid of the unnecessary HR approval codes (circle disappears when adjusting it)
Fig. 1
{
"elmType": "div",
"attributes": {
"iconName": "=if([$Ethics_Approver_Name] != '' ,'CompletedSolid' ,'CircleShapeSolid'))",
"class": "=if([$Ethics_Approver_Name] != '' ,'ms-fontSize-42 ms-fontColor-green',if([$Ethics_Approver_Name] == '' ,'ms-fontSize-42 ms-fontColor-yellow','ms-fontSize-42 ms-fontColor-neutralTertiary'))"
}
{
"elmType": "div",
"style": {
"margin": "5px",
"width": "100%",
"height": "160px",
"border": "2px dashed",
"padding": "10px",
"display": "flex",
"flex-direction": "column",
"align-items": "center"
},
"children": [
{
"elmType": "div",
"txtContent": "Project Initiation (PI)",
"attributes": {
"class": "ms-fontSize-28 ms-fontWeight-bold"
}
},
{
"elmType": "div",
"style": {
"display": "flex",
"justify-content": "center",
"width": "100%"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-direction": "row"
},
"children": [
{
"elmType": "div",
"style": {
"width": "140px",
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"margin": "20px"
},
"children": [
{
"elmType": "div",
"txtContent": "Manager Approval",
"style": {
"margin-bottom": "5px"
},
"attributes": {
"class": "ms-fontSize-15"
}
},
{
"elmType": "div",
"attributes": {
"iconName": "=if([$Manager_Approval] == 'Approved' ,'CompletedSolid', if([$AD_Approval] == 'Not Approved' ,'CompletedSolid' , 'CircleShapeSolid'))",
"class": "=if([$Manager_Approval] == 'Approved' ,'ms-fontSize-42 ms-fontColor-green', if([$AD_Approval] == 'Approved' ,'ms-fontSize-42 ms-fontColor-green',if([$AD_Approval] == 'Pending AD Approval' ,'ms-fontSize-42 ms-fontColor-yellow',if([$AD_Approval] == 'Not Approved' ,'ms-fontSize-42 ms-fontColor-yellow',if([$Manager_Approval] == 'Pending Manager Approval' , 'ms-fontSize-42 ms-fontColor-yellow' ,if([$Manager_Approval] == 'Not Approved' , 'ms-fontSize-42 ms-fontColor-red' , 'ms-fontSize-42 ms-fontColor-neutralTertiary'))))))"
}
}
]
},
{
"elmType": "div",
"style": {
"width": "80px",
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"margin-top": "50px"
},
"txtContent": "---------->",
"attributes": {
"class": "ms-fontSize-16"
}
},
{
"elmType": "div",
"style": {
"width": "120px",
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"margin": "20px"
},
"children": [
{
"elmType": "div",
"txtContent": "🧐AD Approval",
"style": {
"margin-bottom": "5px"
},
"attributes": {
"class": "ms-fontSize-15"
}
},
{
"elmType": "div",
"attributes": {
"iconName": "=if([$AD_Approval] == 'Approved' ,'CompletedSolid' , 'CircleShapeSolid')",
"class": "=if([$AD_Approval] == 'Approved' ,'ms-fontSize-42 ms-fontColor-green',if([$AD_Approval] == 'Pending AD Approval' , 'ms-fontSize-42 ms-fontColor-yellow' ,if([$AD_Approval] == 'Not Approved' , 'ms-fontSize-42 ms-fontColor-red' , 'ms-fontSize-42 ms-fontColor-neutralTertiary'))"
}
}
]
},
{
"elmType": "div",
"style": {
"width": "80px",
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"margin-top": "50px"
},
"txtContent": "---------->",
"attributes": {
"class": "ms-fontSize-16"
}
},
{
"elmType": "div",
"style": {
"width": "140px",
"display": "flex",
"flex-direction": "column",
"align-items": "center",
"margin": "20px"
},
"children": [
{
"elmType": "div",
"txtContent": "Ethics Approval",
"style": {
"margin-bottom": "5px"
},
"attributes": {
"class": "ms-fontSize-15"
}
},
{
"elmType": "div",
"attributes": {
"iconName": "=if([$Ethics_Approver_Name] != '' ,'CompletedSolid' ,if([$ApprovalStatus] == 'Rejected by HR' ,'CompletedSolid' , if([$ApprovalStatus] == 'Pending HR Approval' ,'CompletedSolid' ,'CircleShapeSolid')))",
"class": "=if([$Ethics_Approver_Name] != '' ,'ms-fontSize-42 ms-fontColor-green', if([$Ethics_Approver_Name] == '' ,'ms-fontSize-42 ms-fontColor-yellow', if([$ApprovalStatus] == 'Pending HR Approval' ,'ms-fontSize-42 ms-fontColor-green',if([$ApprovalStatus] == 'Rejected by HR' ,'ms-fontSize-42 ms-fontColor-green',if([$ApprovalStatus] == 'Pending Manager Approval' , 'ms-fontSize-42 ms-fontColor-yellow' ,if([$ApprovalStatus] == 'Rejected by Manager' , 'ms-fontSize-42 ms-fontColor-red' , 'ms-fontSize-42 ms-fontColor-neutralTertiary')))))"
}
}
]
},
{
"elmType": "div",
"style": {
"width": "80px",
"display": "=if([$Are_x0020_you_x0020_using_x0020_] =='CSI','block', 'none')",
"flex-direction": "column",
"align-items": "center",
"margin-top": "50px"
},
"txtContent": "---------->",
"attributes": {
"class": "ms-fontSize-16"
}
},
{
"elmType": "div",
"style": {
"width": "120px",
"display": "=if([$Are_x0020_you_x0020_using_x0020_] =='CSI','block', 'none')",
"flex-direction": "column",
"align-items": "center",
"margin": "20px"
},
"children": [
{
"elmType": "div",
"txtContent": "SNL Approval",
"style": {
"display": "=if([$Are_x0020_you_x0020_using_x0020_] =='CSI','block', 'none')",
"margin-bottom": "5px"
},
"attributes": {
"class": "ms-fontSize-15"
}
},
{
"elmType": "div",
"attributes": {
"iconName": "=if([$SNL_Approver_Name] != '' ,'CompletedSolid' , 'CircleShapeSolid')",
"class": "=if([$SNL_Approver_Name] != '' ,'ms-fontSize-42 ms-fontColor-green',if([$ApprovalStatus] == 'Pending HR Approval' , 'ms-fontSize-42 ms-fontColor-yellow' ,if([$ApprovalStatus] == 'Rejected by HR' , 'ms-fontSize-42 ms-fontColor-red' , 'ms-fontSize-42 ms-fontColor-neutralTertiary'))"
}
}
]
}
]
}
]
}
]
}
@RobElliott Sorry! I thought including the entire code would help. Fig 1 is my header. I will break it down here:
Manager Approval-->Approved-->GreenCircle-->Not Approved-->RedCircle
Ethics Approval: Single Line Text. Just need to get rid of the extra code without jeopardizing the entire code
SNL Approval-->When someone enters their name in this "Person Group" column, it should turn green circle, otherwise, it should be a yellow circle.
I will include code snippets of each bullet if that helps.
Fig 1.
- Manager Approval-->Not Approved: I would like for this to be red. The entire circle disappears when I try to adjust the "Not Approved" code
{
"elmType": "div",
"attributes": {
"iconName": "=if([$Manager_Approval] == 'Approved' ,'CompletedSolid', if([$AD_Approval] == 'Not Approved' ,'CompletedSolid' , 'CircleShapeSolid'))",
"class": "=if([$Manager_Approval] == 'Approved' ,'ms-fontSize-42 ms-fontColor-green', if([$AD_Approval] == 'Approved' ,'ms-fontSize-42 ms-fontColor-green',if([$AD_Approval] == 'Pending AD Approval' ,'ms-fontSize-42 ms-fontColor-yellow',if([$AD_Approval] == 'Not Approved' ,'ms-fontSize-42 ms-fontColor-yellow',if([$Manager_Approval] == 'Pending Manager Approval' , 'ms-fontSize-42 ms-fontColor-yellow' ,if([$Manager_Approval] == 'Not Approved' , 'ms-fontSize-42 ms-fontColor-red' , 'ms-fontSize-42 ms-fontColor-neutralTertiary'))))))"
}
}
- Ethics Approval: This code works just fine. I would like to know how to delete the HR approval codes without jeopardizing the ethics approver code. For example, when I remove everything that has to do with HR Approval, the entire circle disappears
{
"elmType": "div",
"attributes": {
"iconName": "=if([$Ethics_Approver_Name] != '' ,'CompletedSolid' ,if([$ApprovalStatus] == 'Rejected by HR' ,'CompletedSolid' , if([$ApprovalStatus] == 'Pending HR Approval' ,'CompletedSolid' ,'CircleShapeSolid')))",
"class": "=if([$Ethics_Approver_Name] != '' ,'ms-fontSize-42 ms-fontColor-green', if([$Ethics_Approver_Name] == '' ,'ms-fontSize-42 ms-fontColor-yellow', if([$ApprovalStatus] == 'Pending HR Approval' ,'ms-fontSize-42 ms-fontColor-green',if([$ApprovalStatus] == 'Rejected by HR' ,'ms-fontSize-42 ms-fontColor-green',if([$ApprovalStatus] == 'Pending Manager Approval' , 'ms-fontSize-42 ms-fontColor-yellow' ,if([$ApprovalStatus] == 'Rejected by Manager' , 'ms-fontSize-42 ms-fontColor-red' , 'ms-fontSize-42 ms-fontColor-neutralTertiary')))))"
}
}
- SNL Approval: This circle stays green even if their is nothing in the column. If someone's name is entered in the column "SNL Approver Name", then it should be green, like Ethics Approval. I tried using the same code as the Ethics Approval but it does not work. (The approver name column for this one is "Person Group' while Ethics is "Single Line Text") I would also like to get rid of the unnecessary HR approval codes (circle disappears when adjusting it)
{
"elmType": "div",
"attributes": {
"iconName": "=if([$SNL_Approver_Name] != '' ,'CompletedSolid' , 'CircleShapeSolid')",
"class": "=if([$SNL_Approver_Name] != '' ,'ms-fontSize-42 ms-fontColor-green',if([$ApprovalStatus] == 'Pending HR Approval' , 'ms-fontSize-42 ms-fontColor-yellow' ,if([$ApprovalStatus] == 'Rejected by HR' , 'ms-fontSize-42 ms-fontColor-red' , 'ms-fontSize-42 ms-fontColor-neutralTertiary'))"
}
}