#json #if-statement #sharepoint-online
#json #if-оператор #sharepoint-online
Вопрос:
Я просто попытался адаптировать «Пользовательскую карточку наведения в списках» из Github к моему списку Sharepoint online, но столкнулся с парой проблем (https://github.com/pnp/sp-dev-list-formatting/tree/master/column-samples/custom-hover-cards).
В принципе, я хотел бы, чтобы этот список карточек наведения работал для моего простого процесса:
- Начать
- Выполняется
- Выполнено
Есть ли кто-нибудь, кто мог бы поддержать меня в этом?
Заранее спасибо amp; BR Генри
{
"elmType": "div",
"style": {
"font-size": "12px"
},
"txtContent": "[$Status]",
"customCardProps": {
"formatter": {
"elmType": "div",
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"padding": "15px 45px 15px 15px"
},
"children": [
{
"elmType": "div",
"children": [
{
"elmType": "div",
"style": {
"font-size": "18px",
"font-weight": "550",
"text-align": "center",
"margin-bottom": "10px"
},
"txtContent": "Tracking details"
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "600",
"padding-left": "15px"
},
"txtContent": " ",
"attributes": {
"iconName": "StatusCircleCheckmark",
"class": "ms-fontColor-green"
}
},
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "600",
"margin-left": "-16px"
},
"txtContent": " ",
"attributes": {
"iconName": "CircleRing",
"class": "ms-fontColor-green"
}
},
{
"elmType": "span",
"style": {
"font-size": "=if([$StatusCode] > 0, '16px', ''",
"font-weight": "=if([$StatusCode] > 0, '600', ''",
"padding-left": "9px"
},
"txtContent": "Ready to be packed",
"attributes": {
"class": "='ms-fontColor-' if([$StatusCode] > 0, 'green', 'green')"
}
},
{
"elmType": "div",
"style": {
"font-size": "10px",
"font-weight": "600",
"text-align": "center"
},
"attributes": {
"class": "='ms-fontColor-' if([$StatusCode] > 0, 'black', 'black')"
}
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"border-left-style": "solid",
"border-left-color": "='ms-borderColor-' if([$StatusCode] > 0,'green','neutralSecondaryAlt')",
"text-align": "center",
"margin-left": "21px"
},
"attributes": {
"class": "='ms-fontColor-' if([$StatusCode] > 0,'green','neutralSecondaryAlt')"
}
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "600",
"padding-left": "15px"
},
"txtContent": " ",
"attributes": {
"iconName": "=if([$StatusCode] > 0, 'StatusCircleCheckmark', 'CircleRing')",
"class": "='ms-fontColor-' if([$StatusCode] > 0,'green','neutralSecondaryAlt')"
}
},
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "600",
"margin-left": "-16px"
},
"txtContent": " ",
"attributes": {
"iconName": "CircleRing",
"class": "='ms-fontColor-' if([$StatusCode] > 0,'green','neutralSecondaryAlt')"
}
},
{
"elmType": "span",
"style": {
"font-size": "=if([$StatusCode] > 0, '16px', ''",
"font-weight": "=if([$StatusCode] > 0, '600', ''",
"padding-left": "9px"
},
"txtContent": "Packed",
"attributes": {
"class": "='ms-fontColor-' if([$StatusCode] > 0,'green','neutralSecondaryAlt')"
}
},
{
"elmType": "div",
"style": {
"font-size": "10px",
"font-weight": "600",
"text-align": "center",
"border-left-style": "solid",
"border-left-color": "=if([$StatusCode] > 1,'green','neutralSecondaryAlt')",
"margin-left": "21px"
},
"attributes": {
"class": "='ms-fontColor-' if([$StatusCode] > 0, 'black', 'black')"
},
"txtContent": "[$PackedDate]"
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"border-left-style": "solid",
"border-left-color": "='ms-borderColor-' if([$StatusCode] > 1,'green','neutralSecondaryAlt')",
"margin-left": "21px"
},
"attributes": {
"class": "='ms-fontColor-' if([$StatusCode] > 1,'green','neutralSecondaryAlt')"
}
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "600",
"padding-left": "15px"
},
"txtContent": " ",
"attributes": {
"iconName": "=if([$StatusCode] > 1, 'StatusCircleCheckmark', 'CircleRing')",
"class": "='ms-fontColor-' if([$StatusCode] > 1,'green','neutralSecondaryAlt')"
}
},
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "600",
"margin-left": "-16px"
},
"txtContent": " ",
"attributes": {
"iconName": "CircleRing",
"class": "='ms-fontColor-' if([$StatusCode] > 1,'green','neutralSecondaryAlt')"
}
},
{
"elmType": "span",
"style": {
"font-size": "=if([$StatusCode] > 1, '16px', ''",
"font-weight": "=if([$StatusCode] > 1, '600', ''",
"padding-left": "9px"
},
"txtContent": "Shipped",
"attributes": {
"class": "='ms-fontColor-' if([$StatusCode] > 1,'green','neutralSecondaryAlt')"
}
},
{
"elmType": "div",
"style": {
"font-size": "10px",
"font-weight": "600",
"text-align": "center",
"border-left-style": "solid",
"border-left-color": "= if([$StatusCode] > 2,'green','neutralSecondaryAlt')",
"margin-left": "21px"
},
"attributes": {
"class": "='ms-fontColor-' if([$StatusCode] > 1, 'black', 'black')"
},
"txtContent": "[$ShippedDate]"
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"border-left-style": "solid",
"border-left-color": "='ms-borderColor-' if([$StatusCode] > 2,'green','neutralSecondaryAlt')",
"margin-left": "21px"
},
"attributes": {
"class": "='ms-fontColor-' if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
}
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "600",
"padding-left": "15px"
},
"txtContent": " ",
"attributes": {
"iconName": "=if([$StatusCode] > 2, 'StatusCircleCheckmark', 'CircleRing')",
"class": "='ms-fontColor-' if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
}
},
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "600",
"margin-left": "-16px"
},
"txtContent": " ",
"attributes": {
"iconName": "CircleRing",
"class": "='ms-fontColor-' if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
}
},
{
"elmType": "span",
"style": {
"font-size": "=if([$StatusCode] > 2, '16px', ''",
"font-weight": "=if([$StatusCode] > 2, '600', ''",
"padding-left": "9px"
},
"txtContent": "In transit",
"attributes": {
"class": "='ms-fontColor-' if([$StatusCode] > 2,'green','neutralSecondaryAlt')"
}
},
{
"elmType": "div",
"style": {
"font-size": "10px",
"font-weight": "600",
"text-align": "center",
"border-left-style": "solid",
"border-left-color": "=if([$StatusCode] > 3,'green','neutralSecondaryAlt')",
"margin-left": "21px"
},
"attributes": {
"class": "='ms-fontColor-' if([$StatusCode] > 2, 'black', 'black')"
},
"txtContent": "[$InTransitStartDate]"
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"border-left-style": "solid",
"border-left-color": "='ms-borderColor-' if([$StatusCode] > 3,'green','neutralSecondaryAlt')",
"margin-left": "21px"
},
"attributes": {
"class": "='ms-fontColor-' if([$StatusCode] > 3,'green','neutralSecondaryAlt')"
}
}
]
},
{
"elmType": "div",
"children": [
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "600",
"padding-left": "15px"
},
"txtContent": " ",
"attributes": {
"iconName": "=if([$StatusCode] > 3, 'StatusCircleCheckmark', 'CircleRing')",
"class": "='ms-fontColor-' if([$StatusCode] > 3,'green','neutralSecondaryAlt')"
}
},
{
"elmType": "span",
"style": {
"font-size": "16px",
"font-weight": "600",
"margin-left": "-16px"
},
"txtContent": " ",
"attributes": {
"iconName": "CircleRing",
"class": "='ms-fontColor-' if([$StatusCode] > 3,'green','neutralSecondaryAlt')"
}
},
{
"elmType": "span",
"style": {
"font-size": "=if([$StatusCode] > 3, '16px', ''",
"font-weight": "=if([$StatusCode] > 3, '600', ''",
"padding-left": "9px"
},
"txtContent": "Delivered",
"attributes": {
"class": "='ms-fontColor-' if([$StatusCode] > 3,'green','neutralSecondaryAlt')"
}
},
{
"elmType": "div",
"style": {
"font-size": "10px",
"font-weight": "600",
"text-align": "center",
"margin-left": "21px"
},
"attributes": {
"class": "='ms-fontColor-' if([$StatusCode] > 3, 'black', 'black')"
},
"txtContent": "[$DeliveredDate]"
}
]
}
]
}
]
}
]
},
"openOnEvent": "hover",
"directionalHint": "bottomCenter",
"isBeakVisible": true
}
}
Ответ №1:
Для выполнения карты наведения:
Step 1: You need to create a choice column named as "Status" with options as Start,In progress,Done
Step 2: You need to create a choice column named as "Status Code" with options as 1,2,3 where 1(represents Start),2 (In Progress),3 (Done). Set Number Accordingly.
Добавьте следующий JSON в форматирование столбца. Результат следующего JSON:
Теперь добавьте следующий JSON в форматирование столбца:
{ «elmType»: «div», «style»: { «font-size»: «12px» }, «txtContent»: «[$Status]», «customCardProps»: { «formatter»: { «elmType»: «div», «дочерние элементы»: [ { «elmType»: «div», «дочерние элементы»: [ { «elmType»: «div», «style» : { «заполнение»: «15px 45px 15px 15px» }, «дочерние элементы»: [ { «elmType»: «div», «дочерние элементы»: [ { «elmType»: «div», «style»: { «font-size»: «18px», «font-weight»: «550», «text-align»: «center», «margin-bottom»: «10px» }, «txtContent»: «Отслеживание статуса» } ] }, { » elmType»: «div», «дочерние элементы»: [ { «elmType»: «span», «style»: { «border-left-style»: «solid», «border-left-color»: «=’ms-borderColor-‘ if([$StatusCode] > 0, ‘green’,’neutralSecondaryAlt’)», «text-align»: «center», «margin-left»: «21px» }, «attributes»: { «class»: «=’ms -Цвет шрифта-‘ if([$StatusCode] > 0, ‘зеленый’, ‘Нейтральный второстепенный’)» } } ] }, { » elmType»: «div», «дочерние элементы»: [ { «elmType»: «span», «style»: { «font-size»: «16px», «font-weight»: «600», «padding-left»: «15px» }, «txtContent»: » «, «attributes»: { «iconName»: «=if([$StatusCode] > 0, ‘StatusCircleCheckmark ‘, ‘Обводка’)», «класс»: «=’ms-fontColor-‘ if([$StatusCode] > 0, ‘зеленый’,’Нейтральный второстепенный’)» } }, { «elmType»: «span», «style»: { «font-size»: «16px», «font-weight»: «600», «margin-left»: «-16px» }, «txtContent»: » «, «attributes»: { «iconName»: «CircleRing», «class»: «=’ms-fontColor-‘ if([$StatusCode] > 0, ‘green’,’neutralSecondaryAlt’)» } }, { «elmType»: «span», «style»: { «размер шрифта»: «=if([$StatusCode] > 0, ’16px’, «», «вес шрифта»: «=if([$StatusCode] > 0, ‘600’, «», » padding-left»: «9px» }, «txtContent»: «Start», «attributes»: { «class»: «=’ms-fontColor-‘ if([$StatusCode] > 0, ‘green’,’neutralSecondaryAlt’)» } }, { «elmType»: «div», «style»: { «font-size»: «10px», «font-weight»: «600» , «выравнивание текста»: «по центру», «стиль границы слева»: «сплошной», «цвет границы слева»: «=if([$StatusCode] > 1, ‘зеленый’, ‘Нейтральный второстепенный’)», «margin-left»: «21px» }, «атрибуты»: { «class»: «=’ms-fontColor-‘ if([$StatusCode] > 0, ‘черный’, ‘black’)» }, «txtContent»: «[$ PackedDate]» } ] }, { «elmType»: «div», «дочерние элементы»: [ { «elmType»: «span», «style»: { «border-left-style»: «solid», «border-left-color»: «=’ms-borderColor-‘ if([$StatusCode] > 1, ‘green’,’neutralSecondaryAlt’)», «margin-left»: «21px» }, «атрибуты»: { «класс»: «= ‘ms-fontColor-‘ if([$StatusCode] > 1, ‘зеленый’,’Нейтральный второстепенный’)» } } ] }, { » elmType»: «div», «дочерние элементы»: [ { «elmType»: «span», «style»: { «font-size»: «16px», «font-weight»: «600», «padding-left»: «15px» }, «txtContent»: » «, «attributes»: { «iconName»: «=if([$StatusCode] > 1, ‘StatusCircleCheckmark’, ‘CircleRing’)», «class»: «=’ ms-fontColor-‘ if([$StatusCode] > 1,’green’,’neutralSecondaryAlt’)» } }, { «elmType»: «span», «style»: { «font-size»: «16px», «font-weight»: «600», «margin-left»: «-16px» }, «txtContent»: » «, «attributes»: { «iconName»: «CircleRing», «class»: «=’ms- Цвет шрифта-‘ if([$StatusCode] > 1, ‘зеленый’, ‘Нейтральный второстепенный’)» } }, { «elmType»: «span», «style»: { «font-size»: «=if([$StatusCode] > 1, ’16px’, «», «font-weight»: «=if([$StatusCode] > 1, ‘600’, «», » padding-left»: «9px» }, «txtContent»: «Выполняется», «атрибуты»: { «class»: «=’ms-fontColor-‘ if([$StatusCode] > 1, ‘green’,’neutralSecondaryAlt’)» } }, { «elmType»: «div», «style»: { «font-size»: «10px», «font-weight»: «600 «, «выравнивание текста»: «по центру», «стиль границы слева»: «сплошной», «цвет границы слева»: «= if([$StatusCode] > 2, ‘зеленый’, ‘Нейтральный второстепенный’)», «margin-left»: «21px» }, «атрибуты»: { «class»: «=’ms-fontColor-‘ if([$StatusCode] > 1, ‘черный’, ‘black’)» }, «txtContent»: «[$ Дата отправки]» } ] }, { «elmType»: «div», «дочерние элементы»: [ { «elmType»: «span», «style»: { «border-left-style»: «solid», «border-left-color»: «=’ms-borderColor-‘ if([$StatusCode] > 2, ‘green’,’neutralSecondaryAlt’)», «margin-left»: «21px» }, «атрибуты»: { «класс «: «=’ms-fontColor-‘ if([$StatusCode] > 2,’зеленый’,’Нейтральный второстепенный’)» } } ] }, { » elmType»: «div», «дочерние элементы»: [ { «elmType»: «span», «style»: { «font-size»: «16px», «font-weight»: «600», «padding-left»: «15px» }, «txtContent»: » «, «attributes»: { «iconName»: «=if([$StatusCode] > 2, ‘StatusCircleCheckmark ‘, ‘Обводка’)», «класс»: «=’ms-fontColor-‘ if([$StatusCode] > 2, ‘зеленый’,’Нейтральный второстепенный’)» } }, { «elmType»: «span», «style»: { «font-size»: «16px», «font-weight»: «600», «margin-left»: «-16px» }, «txtContent»: » «, «attributes»: { «iconName» : «Обводка», «класс»: «=’ms-fontColor-‘ if([$StatusCode] > 2, ‘зеленый’, ‘Нейтральный второстепенный’)» } }, { «elmType»: «span», «style»: { «font-size»: «=if([$StatusCode] > 2, ’16px’, «», «font-weight»: «=if([$StatusCode] > 2, ‘600’, «», » padding-left»: «9px» }, «txtContent»: «Готово», «атрибуты»: { «class»: «=’ms-fontColor-‘ if([$StatusCode] > 2,’green’,’neutralSecondaryAlt’)» } }, { «elmType»: «div», «style»: { «font-size»: «10px», «font-weight»: «600», «text-align»: «center», «border-left-style»: «solid», «border-left-color»: «=если([$StatusCode] > 3, ‘green’,’neutralSecondaryAlt’)», «margin-left»: «21px» }, » атрибуты»: { «class»: «=’ms-fontColor-‘ if([$StatusCode] > 2, ‘black’, ‘черный’)» }, «txtContent»: «[$InTransitStartDate]» } ] } ] } ] } ] }, » openOnEvent»: «hover», «directionalHint»: «bottomCenter», «isBeakVisible»: true } }
Пожалуйста, не забудьте отметить ответ. Спасибо