JSON Attribute iconName Creates Pseudo class of CSS (::before) which Repeats the Icon
SharePoint List form, JSON added in Header:
{
“$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
“elmType”: “div”,
“attributes”: {
“class”: “ReactClientFormFields”
},
“style”: {
“display”: “block”
},
“children”: [
{
“elmType”: “div”,
“attributes”: {
“class”: “ms-borderColor-neutralTertiary sp-css-backgroundColor-warningBackground50 ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-18”
},
“style”: {
“background-color”: “#e8e8e880”,
“border-top-width”: “0px”,
“border-bottom-width”: “1px”,
“border-left-width”: “0px”,
“border-right-width”: “0px”,
“border-style”: “solid”,
“box-sizing”: “border-box”,
“width”: “100%”,
“overflow”: “hidden”,
“color”: “#f7a020”
},
“children”: [
{
“elmType”: “span”,
“txtContent”: “Outgoing”,
“style”: {
“width”: “100%”
}
}
]
},
{
“elmType”: “div”,
“attributes”: {
“class”: “ReactFieldEditor”
},
“children”: [
{
“elmType”: “div”,
“attributes”: {
“class”: “ReactFieldEditor-titleContainer”
},
“children”: [
{
“elmType”: “span”,
“attributes”: {
“iconName”:”Calendar”
“aria-hidden”:”true”,
“class”: “ms-Icon ReactFieldEditor-titleIcon root-143”
},
“txtContent”: “”
},
{
“elmType”: “span”,
“attributes”: {
“class”: “fui-Label ms-Label ReactFieldEditor-fieldTitle ___1mnryf3 fk6fouc f19n0e5 fkhj508 fytdu2e fl43uef ftgm304 f1sbtcvk fifp7yv fdghr9 f1asdtw4”
},
“txtContent”: “Date”
}
]
},
{
“elmType”: “div”,
“attributes”: {
“class”: “ReactFieldEditor-core–display”,
“role”: “button”
},
“children”: [
{
“elmType”: “div”,
“attributes”: {
“class”: “od-FieldRenderer-text fieldText_dc7ba0fe”
},
“txtContent”:
“=if(Number([$Date]) == 0,”,toLocaleDateString([$Date]))”
}
]
},
{
“elmType”: “div”,
“attributes”: {
“class”: “ReactFieldEditor-state”
}
}
]
}
]
}
Creates double icon by automatically adding Pseudo class (.CSS-333::before) and content:
When checked in debugger:
Can I set content for this particular class in “style” via JSON? How I can avoid server from putting the pseudo class with content?
HELP!! HELP!!
@ChristinaLiang @konger @HridayDutta @Mindy_Rosenthal @Julian_Sharp @Luxmi_Nagaraj @LocP840 @SergeiBaklan @MarisaMathews @Jessie_Hwang @traceycarisch @micheleariis @justinroyal @NikolinoDE @FNS @AnavSilverman
SharePoint List form, JSON added in Header:{
“$schema”: “https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json”,
“elmType”: “div”,
“attributes”: {
“class”: “ReactClientFormFields”
},
“style”: {
“display”: “block”
},
“children”: [
{
“elmType”: “div”,
“attributes”: {
“class”: “ms-borderColor-neutralTertiary sp-css-backgroundColor-warningBackground50 ms-fontColor-neutralSecondary ms-fontWeight-bold ms-fontSize-18”
},
“style”: {
“background-color”: “#e8e8e880”,
“border-top-width”: “0px”,
“border-bottom-width”: “1px”,
“border-left-width”: “0px”,
“border-right-width”: “0px”,
“border-style”: “solid”,
“box-sizing”: “border-box”,
“width”: “100%”,
“overflow”: “hidden”,
“color”: “#f7a020”
},
“children”: [
{
“elmType”: “span”,
“txtContent”: “Outgoing”,
“style”: {
“width”: “100%”
}
}
]
},
{
“elmType”: “div”,
“attributes”: {
“class”: “ReactFieldEditor”
},
“children”: [
{
“elmType”: “div”,
“attributes”: {
“class”: “ReactFieldEditor-titleContainer”
},
“children”: [
{
“elmType”: “span”,
“attributes”: {
“iconName”:”Calendar”
“aria-hidden”:”true”,
“class”: “ms-Icon ReactFieldEditor-titleIcon root-143”
},
“txtContent”: “”
},
{
“elmType”: “span”,
“attributes”: {
“class”: “fui-Label ms-Label ReactFieldEditor-fieldTitle ___1mnryf3 fk6fouc f19n0e5 fkhj508 fytdu2e fl43uef ftgm304 f1sbtcvk fifp7yv fdghr9 f1asdtw4”
},
“txtContent”: “Date”
}
]
},
{
“elmType”: “div”,
“attributes”: {
“class”: “ReactFieldEditor-core–display”,
“role”: “button”
},
“children”: [
{
“elmType”: “div”,
“attributes”: {
“class”: “od-FieldRenderer-text fieldText_dc7ba0fe”
},
“txtContent”:
“=if(Number([$Date]) == 0,”,toLocaleDateString([$Date]))”
}
]
},
{
“elmType”: “div”,
“attributes”: {
“class”: “ReactFieldEditor-state”
}
}
]
}
]
} Creates double icon by automatically adding Pseudo class (.CSS-333::before) and content: When checked in debugger:Can I set content for this particular class in “style” via JSON? How I can avoid server from putting the pseudo class with content?HELP!! HELP!!@ChristinaLiang @konger @HridayDutta @Mindy_Rosenthal @Julian_Sharp @Luxmi_Nagaraj @LocP840 @SergeiBaklan @MarisaMathews @Jessie_Hwang @traceycarisch @micheleariis @justinroyal @NikolinoDE @FNS @AnavSilverman Read More