Настройки макета списка

Статья
04/08/2023

Применение условных классов к строкам

Можно использовать additionalRowClass, чтобы применить один или несколько классов ко всей строке списка в зависимости от значения одного или нескольких полей в строке. Эти примеры оставляют без изменений содержимое и структуру строк списка.

Список рекомендуемых классов для использования в форматах представлений см. в разделе Рекомендации по стилю статьи Использование форматирования столбцов для настройки SharePoint.

Совет

Использование свойства additionalRowClass, чтобы применять классы для строк списка, оставит на месте форматирование отдельных столбцов. Это позволяет объединять форматы представления с форматированием столбцов для некоторых визуализаций, обладающих широкими возможностями.

Пример: Условные классы, основанные на поле даты

На рисунке ниже показан макет списка с классом, примененным на основе значения столбца даты:

Список SharePoint в представлении с условным форматированием

В этом примере применяется класс sp-field-severity--severeWarning к строке списка, когда свойство DueDate объекта находится перед текущей датой или временем:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$DueDate] <= @now, 'sp-field-severity--severeWarning', '')"
}

Пример: Условные классы на основе значения в поле текста или выбора

Этот пример был выбран из примера форматирования столбцов Условное форматирование на основе значения в поле текста или выбора с некоторыми важными отличиями для применения данной концепции к строкам списка. Пример форматирования столбца применяет как значок, так и класс к столбцу на основе значения @currentField. Однако атрибут additionalRowClass в форматировании представления позволяет указывать только класс, а не значок. Кроме того, поскольку @currentField всегда разрешает значение поля Title, когда оно ссылается внутри формата представления, этот пример относится непосредственно к полю Status (с использованием синтаксиса [$Field] внутри свойства additionalRowClass, чтобы определить, какой класс применяется к строке).

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if([$Status] == 'Done', 'sp-field-severity--good', if([$Status] == 'In progress', 'sp-field-severity--low' ,if([$Status] == 'In review','sp-field-severity--warning', if([$Status] == 'Has issues','sp-field-severity--blocked', ''))))"
}

Этот пример с дополнительными сведениями можно найти здесь: Условное форматирование на основе поля выбора

Пример: Форматирование чередующихся строк на основе модуля

В этом примере используется оператор % (Mod) для строк списка с чередованием цвета строк:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if(@rowIndex%2==0,'ms-bgColor-themeLight','')"
}

Создание строк настраиваемых списков

Можно использовать rowFormatter, чтобы задать полностью настраиваемый макет значений поля в строке, используя тот же синтаксис, что и при форматировании столбцов.

Пример: Многострочный стиль представления

На рисунке ниже показан список с настраиваемым многострочным стилем представления:

Список SharePoint с настройкой многострочного стиля представления

В этом примере используется элемент rowFormatter, который полностью переопределяет отображение строки списка. Элемент rowFormatter в этом примере создает ограничивающий прямоугольник <div /> для каждой строки списка. Внутри этого ограничивающего прямоугольника поля $Title и $Feedback отображаются на отдельных строках. Под этими полями отображается элемент button, щелчок по которому соответствует щелчку по строке списка в стандартном представлении, который открывает форму свойства для элемента. Этот элемент button отображается условно, когда значение поля $Assigned_x0020_To (предполагается, что это поле пользователя или группы) соответствует текущему пользователю, выполнившему вход:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideSelection": true,
  "hideColumnHeader": true,
  "rowFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-row-card"
    },
    "children": [
      {
        "elmType": "div",
        "style": {
          "text-align": "left"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-title"
            },
            "txtContent": "[$Title]"
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-row-listPadding"
            },
            "txtContent": "[$Feedback]"
          },
          {
            "elmType": "button",
            "customRowAction": {
              "action": "defaultClick"
            },
            "txtContent": "Give feedback",
            "attributes": {
              "class": "sp-row-button"
            },
            "style": {
              "display": {
                "operator": "?",
                "operands": [
                  {
                    "operator": "==",
                    "operands": [
                      "@me",
                      "[$Assigned_x0020_To.email]"
                    ]
                  },
                  "",
                  "none"
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

Этот пример с дополнительными сведениями можно найти здесь: Многострочное отображение представления

Создание настраиваемых заголовков и итоговых строк групп

С помощью groupProps можно гибко форматировать заголовки групп, добавляя в них данные, отображаемое имя и подсчет элементов группируемого столбца. Можно добавить агрегатные значения групп в их заголовки или отформатировать их непосредственно в итоговых строках групп.

Пример: заголовок группы с кодировкой цветом

В приведенном ниже примере у нас есть список с заголовками группы, отформатированными в соответствии с метаданными столбцов.

Список сотрудников, сгруппированный по городам, с отформатированным заголовком группы

В приведенном ниже примере headerFormatter для groupProps используется для форматирования заголовка группы, а @group - для доступа к сведениям о группе.

Примечание.

Указанный ниже формат JSON содержит разрывы строк. Они были добавлены для повышения удобочитаемости кода.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "groupProps": {
    "headerFormatter": {
      "elmType": "div",
      "style": {
        "flex-wrap": "wrap",
        "display": "flex",
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "border-radius": "6px",
        "align-items": "center",
        "white-space": "nowrap",
        "overflow": "hidden",
        "margin": "1px 4px 4px 1px"
      },
      "attributes": {
        "class": "=if(@group.fieldData == 'California', 'sp-css-backgroundColor-blueBackground37',
                   if(@group.fieldData == 'Chicago', 'sp-css-backgroundColor-successBackground50',
                   if(@group.fieldData == 'New York', 'sp-css-backgroundColor-warningBackground50',
                   if(@group.fieldData == 'Seattle', 'sp-css-backgroundColor-blockingBackground50',
                   if(@group.fieldData == 'Washington DC', 'sp-css-backgroundColor-errorBackground50',
                   'sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary')))))"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "=if(@group.fieldData == 'California', 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_California.svg/1920px-Flag_of_California.svg.png',
                     if(@group.fieldData == 'Chicago', 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Flag_of_Chicago%2C_Illinois.svg/1920px-Flag_of_Chicago%2C_Illinois.svg.png',
                     if(@group.fieldData == 'New York', 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_New_York_City.svg/2560px-Flag_of_New_York_City.svg.png',
                     if(@group.fieldData == 'Seattle', 'https://upload.wikimedia.org/wikipedia/en/thumb/6/6d/Flag_of_Seattle.svg/1920px-Flag_of_Seattle.svg.png',
                     if(@group.fieldData == 'Washington DC', 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Flag_of_the_District_of_Columbia.svg/2560px-Flag_of_the_District_of_Columbia.svg.png', '')))))"
          },
          "style": {
            "max-width": "24px",
            "max-height": "24px",
            "margin-top": "2px",
            "border-radius": "2px"
          }
        },
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "span",
              "style": {
                "padding": "5px 5px 5px 5px",
                "font-weight": "500"
              },
              "txtContent": "@group.fieldData.displayValue"
            }
          ]
        },
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "flex",
                "flex-direction": "row",
                "justify-content": "center"
              },
              "children": [
                {
                  "elmType": "div",
                  "txtContent": "='has ' + @group.count + if(@group.count > '1', ' employees', ' employee')",
                  "style": {
                    "font-weight": "500"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

Пример: заголовок группы с кодировкой цветом и агрегатным значением

В приведенном ниже примере у нас есть список с заголовками группы, отформатированными в соответствии с агрегированными значениями группы.

Список сотрудников, сгруппированный по городам, с итоговыми агрегатными значениями

В этом примере для hideFooter для groupProps задано значение true, чтобы скрыть итоговую строку группы, а массив @aggregates используется для отображения суммарного значения в заголовке группы.

Примечание.

Указанный ниже формат JSON содержит разрывы строк. Они были добавлены для повышения удобочитаемости кода.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "groupProps": {
    "hideFooter": true,
    "headerFormatter": {
      "elmType": "div",
      "style": {
        "flex-wrap": "wrap",
        "display": "flex",
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "border-radius": "6px",
        "align-items": "center",
        "white-space": "nowrap",
        "overflow": "hidden",
        "margin": "1px 4px 4px 1px"
      },
      "attributes": {
        "class": "=if(@group.fieldData == 'California', 'sp-css-backgroundColor-blueBackground37',
                   if(@group.fieldData == 'Chicago', 'sp-css-backgroundColor-successBackground50',
                   if(@group.fieldData == 'New York', 'sp-css-backgroundColor-warningBackground50',
                   if(@group.fieldData == 'Seattle', 'sp-css-backgroundColor-blockingBackground50',
                   if(@group.fieldData == 'Washington DC', 'sp-css-backgroundColor-errorBackground50',
                   'sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary')))))"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "=if(@group.fieldData == 'California', 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Flag_of_California.svg/1920px-Flag_of_California.svg.png',
                     if(@group.fieldData == 'Chicago', 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Flag_of_Chicago%2C_Illinois.svg/1920px-Flag_of_Chicago%2C_Illinois.svg.png',
                     if(@group.fieldData == 'New York', 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Flag_of_New_York_City.svg/2560px-Flag_of_New_York_City.svg.png',
                     if(@group.fieldData == 'Seattle', 'https://upload.wikimedia.org/wikipedia/en/thumb/6/6d/Flag_of_Seattle.svg/1920px-Flag_of_Seattle.svg.png',
                     if(@group.fieldData == 'Washington DC', 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Flag_of_the_District_of_Columbia.svg/2560px-Flag_of_the_District_of_Columbia.svg.png', '')))))"
          },
          "style": {
            "max-width": "24px",
            "max-height": "24px",
            "margin-top": "2px",
            "border-radius": "2px"
          }
        },
        {
          "elmType": "div",
          "children": [
            {
              "elmType": "span",
              "style": {
                "padding": "5px 5px 5px 5px",
                "font-weight": "500"
              },
              "txtContent": "@group.fieldData.displayValue"
            }
          ]
        },
        {
          "elmType": "div",
          "forEach": "aggregate in @aggregates",
          "children": [
            {
              "elmType": "div",
              "style": {
                "display": "=if([$aggregate.columnDisplayName] == 'Approved' && Number([$aggregate.value]) < @group.count, 'flex', 'none')",
                "flex-direction": "row",
                "justify-content": "center"
              },
              "children": [
                {
                  "elmType": "div",
                  "txtContent": "='has approval pending for ' + Number(@group.count - Number([$aggregate.value])) + if(@group.count - Number([$aggregate.value]) > 1 , ' employees', ' employee')",
                  "style": {
                    "font-weight": "500"
                  }
                }
              ]
            }
          ]
        }
      ]
    }
  }
}

Пример: настраиваемая итоговая строка группы

В приведенном ниже примере у нас есть список с итоговыми строками групп, отформатированными в соответствии с агрегатным значением.

Список сотрудников, сгруппированный по городам с отформатированными итоговыми строками группы

В приведенном ниже примере footerFormatter для groupProps используется для форматирования итоговой строки группы, а @columnAggregate - для доступа к агрегатным значениям столбцов.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "groupProps": {
    "hideFooter": false,
    "footerFormatter": {
      "elmType": "div",
      "children": [
        {
          "elmType": "div",
          "attributes": {
            "iconName": "=if(@columnAggregate.type == 'Average' && @columnAggregate.value < 10, 'SortDown', 'SortUp')"
          },
          "style": {
            "color": "=if(@columnAggregate.type == 'Average' && @columnAggregate.value < 10, '#d13438', '#107c10')",
            "font-weight": "600",
            "margin-top": "10px"
          }
        },
        {
          "elmType": "div",
          "style": {
            "color": "=if(@columnAggregate.type == 'Average' && @columnAggregate.value < 10, '#d13438', '#107c10')",
            "font-weight": "600",
            "margin-top": "10px",
            "font-family": "Segoe UI"
          },
          "txtContent": "=@columnAggregate.type + ': ' + @columnAggregate.value"
        }
      ]
    }
  }
}

Создание настраиваемых итоговых строк списков

footerFormatter можно использовать для форматирования нижнего колонтитула списка на основе агрегатных значений столбцов.

Настраиваемый нижний колонтитул списка

В приведенном ниже примере у нас есть список с нижним колонтитулом, отформатированным в соответствии с агрегатным значением.

Список сотрудников, сгруппированный по городам, с отформатированным колонтитулом списка

В приведенном ниже примере footerFormatter используется для форматирования колонтитула списка, а @columnAggregate - для доступа к агрегатным значениям столбцов.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideFooter": false,
  "footerFormatter": {
    "elmType": "div",
    "attributes": {
      "class": "ms-fontColor-themePrimary"
    },
    "customCardProps": {
      "formatter": {
        "elmType": "div",
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex"
            },
            "txtContent": "=@columnAggregate.type + ' of ' + @columnAggregate.columnDisplayName + ' is ' + @columnAggregate.value"
          }
        ],
        "style": {
          "height": "10px",
          "width": "auto",
          "cursor": "pointer",
          "font-size": "14px",
          "padding": "14px"
        }
      },
      "openOnEvent": "hover",
      "directionalHint": "bottomCenter",
      "isBeakVisible": true,
      "beakStyle": {
        "backgroundColor": "white"
      }
    },
    "txtContent": "View details",
    "style": {
      "text-decoration": "none",
      "cursor": "pointer",
      "font-size": "16px",
      "margin-top": "10px"
    }
  }
}

Подробная справка по синтаксису

rowFormatter

Необязательный элемент. Указывает объект JSON, который описывает формат строки списка. Схема этого объекта JSON идентична схеме формата столбца. Подробные сведения об этой схеме и ее возможностях см. в статье Справочник по синтаксису форматирования.

Примечание.

С помощью свойства rowFormatter будет блокироваться все, что указывается в свойстве additionalRowClass. Они являются взаимоисключающими.

Различия в поведении между элементом rowFormatter и форматированием столбцов

Несмотря на то, что они используют одну и ту же схему, существуют некоторые различия в поведении элементов внутри элемента rowFormatter и теми же элементами в объекте форматирования столбцов.

@currentField всегда разрешается для значения поля Title внутри rowFormatter.

additionalRowClass

Необязательный элемент. Указывает классы CSS, которые применяются ко всей строке. Поддерживает выражения.

additionalRowClass вступает в силу только тогда, когда элемент rowFormatter не указан. Если rowFormatter указан, то additionalRowClass игнорируется.

hideSelection

Необязательный элемент. Указывает, разрешена или нет возможность выбора строк в представлении. Значение false — это поведение по умолчанию в представлении списка (означает, что выделение видимо и включено). Значение true означает, что пользователи не смогут выбирать элементы списка.

hideColumnHeader

Необязательный элемент. Указывает, скрыты ли заголовки столбцов в представлении или нет. Значение false — это поведение по умолчанию в представлении списка (означает, что заголовки столбцов будут видимы). Значение true означает, что в представлении не будут отображаться заголовки столбцов.

groupProps

Группирует параметры настройки, связанные с группой. Подробные сведения о groupProps см. в статье Справочник по синтаксису групповой настройки

commandBarProps

Группы параметров настройки панели команд. Подробные сведения о commandBarProps см. в разделе Справочник по синтаксису настройки панели команд

Поделиться через

Настройки макета списка

Применение условных классов к строкам

Пример: Условные классы, основанные на поле даты

Пример: Условные классы на основе значения в поле текста или выбора

Пример: Форматирование чередующихся строк на основе модуля

Создание строк настраиваемых списков

Пример: Многострочный стиль представления

Создание настраиваемых заголовков и итоговых строк групп

Пример: заголовок группы с кодировкой цветом

Пример: заголовок группы с кодировкой цветом и агрегатным значением

Пример: настраиваемая итоговая строка группы

Создание настраиваемых итоговых строк списков

Настраиваемый нижний колонтитул списка

Подробная справка по синтаксису

rowFormatter

Различия в поведении между элементом rowFormatter и форматированием столбцов

additionalRowClass

hideSelection

hideColumnHeader

groupProps

commandBarProps

См. также

Дополнительные ресурсы