Форматирование столбцов в списках и библиотеках SharePoint

Статья
04/08/2023

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

Например, список с полями "Заголовок", "Трудозатраты", "Кому назначено" и "Состояние" без настройки может выглядеть так:

Список SharePoint с четырьмя столбцами без форматирования

Список с полями Трудозатраты, Кому назначено и Состояние, настроенные с помощью функции форматирования столбцов, может выглядеть так:

Список SharePoint с тремя отформатированными столбцами

Совет

Примеры из этой статьи и много других примеров с сайта сообщества доступны в репозитории GitHub, посвященном определениям форматирования столбцов с открытым кодом. Вы можете найти эти примеры в репозитории sp-dev-column-formatting организации SharePoint на сайте GitHub.

Чем форматирование столбцов отличается от настройщика полей?

Как форматирование столбцов, так и расширения Настройщик полей SharePoint Framework позволяют настраивать поля в списках SharePoint. Настройщик полей — универсальный инструмент, так как позволяет создавать любой код для управления отображением поля.

Форматирование столбцов проще и доступнее, Однако он менее гибкий, так как он не позволяет использовать пользовательский код; он допускает только определенные предопределенные элементы и атрибуты.

В таблице ниже сравниваются форматирование столбцов и настройщик полей.

Тип поля	Форматирование столбцов	Настройщик полей
Условное форматирование на основе значений элементов и диапазонов значений	Поддерживается	Поддерживается
Ссылки на действия	Поддержка статических гиперссылок, которые не запускают скрипт	Поддержка всех гиперссылок, в том числе запускающих пользовательские сценарии
Визуализация данных	Поддержка простой визуализации, которую можно выразить с помощью HTML и CSS	Поддержка произвольной визуализации данных

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

Приступая к форматированию столбцов

Чтобы открыть панель форматирования столбцов, откройте раскрывающееся меню под столбцом. В разделе Параметры столбца щелкните Форматировать этот столбец.

Если к выбранному столбцу еще не применялось форматирование, эта панель будет выглядеть вот так.

Панель форматирования столбца с областью для вставки или ввода объекта JSON, а также кнопками для предварительного просмотра, сохранения и отмены

Если форматирование не задано, поле будет отображаться как обычно. Чтобы отформатировать столбец, введите в поле объект JSON для форматирования столбца.

Чтобы просмотреть параметры форматирования, нажмите Просмотреть. Чтобы сохранить изменения, нажмите Сохранить. После сохранения изменений форматирование увидят все пользователи, просматривающие список.

Самый простой способ отформатировать столбец — отредактировать пример и применить его к нужному полю. Следующие разделы содержат примеры, которые можно копировать, вставлять и редактировать. Кроме того, несколько примеров доступны в репозитории SharePoint/sp-dev-column-formatting.

Примечание.

Все примеры в этом документе относятся к схеме JSON, используемой в SharePoint Online, и SharePoint Server по подписке начиная с обновления компонентов версии 22H2. Чтобы отформатировать столбцы в SharePoint 2019 или SharePoint Server по подписке до обновления компонентов версии 22H2, используйте https://developer.microsoft.com/json-schemas/sp/v1/column-formatting.schema.json в качестве схемы.

Отображение значений поля (базовые настройки)

Самый простой способ отформатировать столбец — вставить значение поля в элемент <div />. Этот пример подходит для числовых и текстовых полей, а также полей выбора и даты:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField"
}

Извлечь значения полей некоторых типов немного сложнее. Поле пользователя представляется в системе как объект, а отображаемое имя пользователя указывается в свойстве title такого объекта. Это тот же пример, но измененный так, чтобы он подходил для поля пользователя:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField.title"
}

Поле подстановки также представляется как объект. Отображаемый текст сохраняется в свойстве lookupValue. Этот пример подходит для поля подстановки:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField.lookupValue"
}

Применение условного форматирования

Форматирование столбцов позволяет применять стили, классы и значки к полям в зависимости от их значений.

Условное форматирование на основе диапазона чисел (базовые настройки)

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

Предупреждение о степени серьезности 70 с оранжевым фоном

В этом примере условное выражение в стиле Excel (=if) используется для применения класса (sp-field-severity--warning) к родительскому элементу <div />, если значение в текущем поле меньше или равно 70. В этом случае поле выделяется, если значение меньше или равно 70, и отображается как обычно, если оно больше 70.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField <= 70,'sp-field-severity--warning', '')"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField <= 70,'Error', '')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Условное форматирование с учетом значения в текстовом поле или поле выбора (расширенные настройки)

Ниже показан пример условного форматирования, примененного к текстовому полю или полю выбора.

Поле состояния, в котором элемент

Вы можете применить условное форматирование к полям текста или выбора, которые могут содержать фиксированный набор значений. В примере ниже применяются различные классы в зависимости от того, какое значение имеет поле: "Готово", "Проверка", "Обнаружены проблемы" или другое. В этом примере к классу CSS () применяется <div /> класс CSS (sp-field-severity--low, sp-field-severity--good, sp-field-severity--warning, sp-field-severity--severeWarning, sp-field-severity--blocked) на основе значения поля. Затем он выводит элемент <span /> с атрибутом IconName. Этот атрибут автоматически применяет другой класс CSS к элементу <span />, внутри которого отображается значок Fluent UI. Наконец, выводится другой элемент <span />, содержащий значение в поле.

Используйте этот шаблон, чтобы сопоставить разные значения с различными степенями срочности и серьезности. Вы можете отредактировать этот пример, чтобы указать собственные значения полей, а также стили и значки, которые необходимо сопоставить с этими значениями.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'Done', 'sp-field-severity--good', if(@currentField == 'In progress', 'sp-field-severity--low', if(@currentField == 'In review', 'sp-field-severity--warning', if(@currentField == 'Has issues', 'sp-field-severity--severeWarning', 'sp-field-severity--blocked')))) + ' ms-fontColor-neutralSecondary'"
  },
  "children": [
    {
      "elmType": "span",
      "style": {
        "display": "inline-block",
        "padding": "0 4px"
      },
      "attributes": {
        "iconName": "=if(@currentField == 'Done', 'CheckMark', if(@currentField == 'In progress', 'Forward', if(@currentField == 'In review', 'Error', if(@currentField == 'Has issues', 'Warning', 'ErrorBadge'))))"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Применение форматирования на основе диапазонов дат

Так как даты часто используются для отслеживания крайних сроков и временных шкал ключевых проектов, форматирование часто применяется на основе значения в поле даты и времени. Чтобы применить форматирование на основе значения этого поля, используйте приведенные ниже шаблоны.

Форматирование элемента, если дата в столбце предшествует сегодняшней дате или наступает после нее (расширенные настройки)

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

Поле состояния со значением

В этом примере поле текущей даты окрашивается в красный цвет, если значение в поле "DueDate" элемента предшествует текущим дате и времени. В отличие от некоторых предыдущих примеров, в этом примере форматирование применяется к одному полю с учетом значения в другом поле. Обратите внимание, что DueDate на это ссылается [$FieldName] синтаксис. FieldName — это внутреннее имя поля. В этом примере также используется специальное значение @now, которое можно использовать в полях даты и времени. Это значение сопоставляется с текущими датой и временем, которые определяются при загрузке списка.

Примечание.

Если в имени поля есть пробелы, они определяются как _x0020_. Например, имя поля "Due Date" должно писаться так: $Due_x0020_Date.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "debugMode": true,
  "txtContent": "@currentField",
  "style": {
    "color": "=if([$DueDate] <= @now, '#ff0000', '')"
  }
}

Форматирование элементов с учетом произвольных дат (расширенные настройки)

Чтобы сравнить значение поля даты и времени с датой, отличной от @now, используйте шаблон, приведенный в примере ниже. В следующем примере текущее поле выделено красным цветом, если дата выполнения была <= завтра. Для этого используются математические операции с датой. Вы можете добавить миллисекунды к любой дате, чтобы получить новую дату. Например, чтобы добавить день к дате, необходимо добавить (24*60*60*1000 = 86 400 000).

В этом примере демонстрируется альтернативный синтаксис для условного выражения с использованием тернарного (?) оператора внутри дерева абстрактного синтаксиса.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": {
         "operator": "?",
         "operands": [
            {
               "operator": "<=",
               "operands": [
                  "[$DueDate]",
                  {
                     "operator": "+",
                     "operands": [
                        "@now",
                        86400000
                     ]
                  }
               ]
            },
            "#ff0000",
            ""
         ]
      }
   }
}

Вышеуказанный пример с использованием синтаксиса выражений в стиле Excel:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": "=if([$DueDate] <= @now + 86400000, '#ff0000', '')"
   }
}

Чтобы сравнить значение поля даты и времени с другой константой даты, преобразуйте строку в дату с помощью метода Date(). Приведенный ниже пример кода окрашивает текущее поле в красный цвет, если значение в поле "DueDate" предшествует дате 22.03.2017.

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": {
         "operator": "?",
         "operands": [
            {
               "operator": "<=",
               "operands": [
                  "[$DueDate]",
                  {
                     "operator": "Date()",
                     "operands": [
                        "3/22/2017"
                     ]
                  }
               ]
            },
            "#ff0000",
            ""
         ]
      }
   }
}

Вышеуказанный пример с использованием синтаксиса выражений в стиле Excel:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "div",
   "txtContent": "@currentField",
   "style": {
      "color": "=if([$DueDate] <= Date('3/22/2017'), '#ff0000', '')"
   }
}

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

Форматирование столбцов позволяет показывать гиперссылки для перехода на другие веб-страницы или запускать пользовательские функции. Можно показывать только статические ссылки, параметризируемые с использованием значений из полей в списке. Форматирование столбцов невозможно использовать для вывода ссылок на протоколы, отличные от http://, https://, mailto: и tel:.

Протокол tel: разрешает только цифры, специальные символы *+# и визуальные сепараторы .-/().

Преобразование значений полей в гиперссылки (базовые настройки)

В этом примере показано, как преобразовать текстовое поле с финансовыми символами в гиперссылку, которая позволяет перейти на страницу Yahoo Finance с актуальными котировками для соответствующих символов. В этом примере используется оператор +, позволяющий добавить значение текущего поля к статической гиперссылке http://finance.yahoo.com/quote/. Этот шаблон также можно использовать, если вы хотите предоставить пользователям возможность просматривать контекстную информацию, связанную с элементом, или запустить бизнес-процесс для текущего элемента, если эта информация или процесс доступны по гиперссылке, параметризуемой с помощью значений из элемента списка.

Списки акций с финансовыми символами, преобразованными в гиперссылки

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "a",
   "txtContent": "@currentField",
   "attributes": {
      "target": "_blank",
      "href": "='http://finance.yahoo.com/quote/' + @currentField"
   }
}

Совет

В веб-части Списка указанный выше тег привязки перенаведет пользователя на новую вкладку. Чтобы перейти по той же вкладке, добавьте data-interception атрибут и присвойте ему значение on. Дополнительные сведения об атрибуте перехвата данных.

Добавление в поле кнопки действия (расширенные настройки)

На рисунке ниже приведены кнопки действия, добавленные в поле.

Поле

С помощью форматирования столбцов можно отображать ссылки на быстрые действия рядом с полями. В этом примере, предназначенном для поля пользователя, отображаются два элемента в родительском элементе <div />:

элемент <span />, содержащий отображаемое имя пользователя;
элемент <a />, открывающий ссылку mailto:, которую можно использовать для создания письма, тема и основной текст которого динамически заполняются с помощью метаданных элемента. Элемент <a /> стилизуется с помощью классов пользовательскогоms-Iconинтерфейса , ms-Icon—Mailи ms-QuickAction Fluent, чтобы сделать его похожим на значок электронной почты с возможностью щелчка.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "style": {
                "padding-right": "8px"
            },
            "txtContent": "@currentField.title"
        },
        {
            "elmType": "a",
            "style": {
                "text-decoration": "none"
            },
            "attributes": {
                "iconName": "Mail",
                "class": "sp-field-quickActions",
                "href": {
                    "operator": "+",
                    "operands": [
                        "mailto:",
                        "@currentField.email",
                        "?subject=Task status&body=Hey, how is your task coming along?.\r\n---\r\n",
                        "@currentField.title",
                        "\r\nClick this link for more info. http://contoso.sharepoint.com/sites/ConferencePrep/Tasks/Prep/DispForm.aspx?ID=",
                        "[$ID]"
                    ]
                }
            }
        }
    ]
}

Создание простой визуализации данных

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

Форматирование числового столбца в виде гистограммы (расширенные настройки)

На рисунке ниже приведен числовой столбец, отформатированный в виде гистограммы.

Список

В этом примере для визуализации числового поля @currentField в виде гистограммы применяются стили background-color и border-top. Размер столбиков зависит от того, каков атрибут width. Ему присваивается 100%, если значение больше 20, и (@currentField * 5)% в противном случае. Чтобы применить этот пример к своему числовому столбцу, вы можете настроить граничное условие (20) в соответствии с максимальным предполагаемым значением в поле и изменить формулу, чтобы указать, на сколько должен увеличиваться столбец в зависимости от значения в поле.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "span",
      "txtContent": "@currentField",
      "style": {
        "padding-left": "8px",
        "white-space": "nowrap"
      }
    }
  ],
  "attributes": {
    "class": "sp-field-dataBars"
  },
  "style": {
    "padding": "0",
    "width": "=if(@currentField >= 20, '100%', (@currentField * 5) + '%')"
  }
}

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

Список, возле элементов которого расположены значки тенденций к увеличению и уменьшению

В этом примере используются два числовых поля Before и After, значения которых можно сравнить. Соответствующий значок тенденции отображается рядом с полем After в зависимости от значения этого поля по сравнению со значением в поле Before. Если значение поля After выше, используется sp-field-trending--up, а если значение поля After ниже, используется sp-field-trending--down.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "attributes": {
                "class": {
                    "operator": "?",
                    "operands": [
                        {
                            "operator": ">",
                            "operands": [
                                "[$After]",
                                "[$Before]"
                            ]
                        },
                        "sp-field-trending--up",
                        "sp-field-trending--down"
                    ]
                },
                "iconName": {
                    "operator": "?",
                    "operands": [
                        {
                            "operator": ">",
                            "operands": [
                                "[$After]",
                                "[$Before]"
                            ]
                        },
                        "SortUp",
                        {
                            "operator": "?",
                            "operands": [
                                {
                                    "operator": "<",
                                    "operands": [
                                        "[$After]",
                                        "[$Before]"
                                    ]
                                },
                                "SortDown",
                                ""
                            ]
                        }
                    ]
                }
            }
        },
        {
            "elmType": "span",
            "txtContent": "[$After]"
        }
    ]
}

Вышеуказанный пример с использованием синтаксиса выражений в стиле Excel:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "span",
            "attributes": {
                "class": "=if([$After] > [$Before], 'sp-field-trending--up', 'sp-field-trending--down')",
                "iconName": "=if([$After] > [$Before], 'SortUp', if([$After] < [$Before], 'SortDown', ''))"
            }
        },
        {
            "elmType": "span",
            "txtContent": "[$After]"
        }
    ]
}

Форматирование многозначных полей

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

Форматирование обычного текста

Ниже показан пример форматирования многозначного поля, примененного к полю "Пользователь".

Список кнопок, уведомляющий всех исполнителей каждого элемента. Первая строка пустая, во второй строке указано

В этом примере используется оператор length для определения количества элементов поля и оператор join для сцепления адресов электронной почты всех участников. В этом примере кнопка скрывается, если участники не обнаружены, и учитывается множественное число в тексте.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "a",
    "style": {
        "display": "=if(length(@currentField) > 0, 'flex', 'none')",
        "text-decoration": "none"
    },
    "attributes": {
        "href": {
            "operator": "+",
            "operands": [
                "mailto:",
                "=join(@currentField.email, ';')"
            ]
        }
    },
    "children": [
        {
            "elmType": "span",
            "style": {
                "display": "inline-block",
                "padding": "0 4px"
            },
            "attributes": {
                "iconName": "Mail"
            }
        },
        {
            "elmType": "span",
            "txtContent": {
                "operator": "+",
                "operands": [
                    "Send email to ",
                    {
                        "operator": "?",
                        "operands": [
                            "=length(@currentField) == 1",
                            "@currentField.title",
                            "='all ' + length(@currentField) + ' members'"
                        ]
                    }
                ]
            }
        }
    ]
}

Простое форматирование HTML-элементов

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

Снимок экрана: поле с текстом

В этом примере используется оператор loopIndex и length для идентификации последнего члена поля, а также атрибут forEach для дублирования ЭЛЕМЕНТОВ HTML.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "display": "block"
    },
    "children": [
        {
            "elmType": "span",
            "forEach": "region in @currentField",
            "txtContent": {
               "operator": "?",
               "operands": [
                  "=loopIndex('region') == 0",
                  "[$region.lookupValue]",
                  {
                     "operator": "?",
                     "operands": [
                        "=loopIndex('region') + 1 == length(@currentField)",
                        "=', and ' + [$region.lookupValue]",
                        "=', ' + [$region.lookupValue]"
                     ]
                  }
               ]
            }
        }
    ]
}

Сложное форматирование HTML-элементов

Ниже показан пример создания списка пользователей с изображениями, адресами электронной почты и простым счетчиком для числа участников в верхней части.

Список с именем

В этом примере используется оператор loopIndex для управления полями всех строк, кроме первой, и атрибут forEach для создания списка элементов.

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "div",
    "style": {
        "min-height": "1.5em",
        "flex-direction": "column",
        "align-items": "start"
    },
    "children": [
        {
            "elmType": "div",
            "txtContent": "=length(@currentField)",
            "style": {
                "border-radius": "1.5em",
                "height": "1.5em",
                "min-width": "1.5em",
                "color": "white",
                "text-align": "center",
                "position": "absolute",
                "top": "0",
                "right": "1em",
                "background-color": "=if(length(@currentField) == 0, '#ddd', '#aaa'"
            }
        },
        {
            "elmType": "div",
            "forEach": "person in @currentField",
            "style": {
                "justify-content": "center",
                "margin-top": "=if(loopIndex('person') == 0, '0', '1em')"
            },
            "children": [
                {
                    "elmType": "div",
                    "style": {
                        "display": "flex",
                        "flex-direction": "row",
                        "justify-content": "center"
                    },
                    "children": [
                        {
                            "elmType": "img",
                            "attributes": {
                                "src": "=getUserImage([$person.email], 'S')"
                            },
                            "style": {
                                "width": "3em",
                                "height": "3em",
                                "border-radius": "3em"
                            }
                        },
                        {
                            "elmType": "a",
                            "attributes": {
                                "href": "='mailto:' + [$person.email]"
                            },
                            "style": {
                                "margin-left": "0.5em"
                            },
                            "children": [
                                {
                                    "elmType": "div",
                                    "txtContent": "[$person.title]",
                                    "style": {
                                        "font-size": "1.2em"
                                    }
                                },
                                {
                                    "elmType": "div",
                                    "txtContent": "[$person.email]",
                                    "style": {
                                        "color": "gray"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Поддерживаемые типы столбцов

Форматировать можно следующие типы столбцов:

Вычисляемый
Выбор
Контент
Счетчик (ИД)
Валюта
Дата и время
Hyperlink
Изображение
Расположение
Подстановка
Множественный выбор
Многострочный текст
Несколько пользователей
Числовой
Пользователь или группа
Изображение
Однострочный текст
Заголовок (в списках)
Да/Нет
Управляемые метаданные
Средний рейтинг
Отметки "Мне нравится"
Состояние утверждения
Вложения

Следующее в настоящее время не поддерживается:

Имя файла (в библиотеках документов)
Метка хранения
Запечатанные столбцы
Столбец многострочного текста с расширенным форматированием

Имя класса	Снимок экрана
sp-field-customFormatBackground	Указывает параметры заполнения и поля для всех классов, использующих фон.
sp-field-severity--good
sp-field-severity--low
sp-field-severity--warning
sp-field-severity--severeWarning
sp-field-severity--blocked
sp-field-dataBars
sp-field-trending--up
sp-field-trending--down
sp-field-quickActions

Создание собственной нотации JSON

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

Совет

В любой момент можно нажать Ctrl+Пробел, чтобы получить предложения относительно свойств и значений.

Совет

Можно начать с HTML-кода, используя вспомогательное средство форматирования, которое может преобразовать HTML и CSS в JSON с помощью встроенных стилей.

Совет

Рекомендации SharePoint предоставляют бесплатную веб-часть Средство форматирования столбцов, которую можно использовать для редактирования и применения форматов непосредственно в браузере.

Форматирование столбцов в списках и библиотеках SharePoint

Чем форматирование столбцов отличается от настройщика полей?

Приступая к форматированию столбцов

Отображение значений поля (базовые настройки)

Применение условного форматирования

Условное форматирование на основе диапазона чисел (базовые настройки)

Условное форматирование с учетом значения в текстовом поле или поле выбора (расширенные настройки)

Применение форматирования на основе диапазонов дат

Форматирование элемента, если дата в столбце предшествует сегодняшней дате или наступает после нее (расширенные настройки)

Форматирование элементов с учетом произвольных дат (расширенные настройки)

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

Преобразование значений полей в гиперссылки (базовые настройки)

Добавление в поле кнопки действия (расширенные настройки)

Создание простой визуализации данных

Форматирование числового столбца в виде гистограммы (расширенные настройки)

Форматирование многозначных полей

Форматирование обычного текста

Простое форматирование HTML-элементов

Сложное форматирование HTML-элементов

Поддерживаемые типы столбцов

Рекомендации по стилю

Предопределенные классы

Предопределенные значки

Создание собственной нотации JSON

См. также

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

Форматирование столбцов в списках и библиотеках SharePoint

Чем форматирование столбцов отличается от настройщика полей?

Приступая к форматированию столбцов

Отображение значений поля (базовые настройки)

Применение условного форматирования

Условное форматирование на основе диапазона чисел (базовые настройки)

Условное форматирование с учетом значения в текстовом поле или поле выбора (расширенные настройки)

Применение форматирования на основе диапазонов дат

Форматирование элемента, если дата в столбце предшествует сегодняшней дате или наступает после нее (расширенные настройки)

Форматирование элементов с учетом произвольных дат (расширенные настройки)

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

Преобразование значений полей в гиперссылки (базовые настройки)

Добавление в поле кнопки действия (расширенные настройки)

Создание простой визуализации данных

Форматирование числового столбца в виде гистограммы (расширенные настройки)

Отображение значков тенденций к увеличению или уменьшению (расширенные настройки)

Форматирование многозначных полей

Форматирование обычного текста

Простое форматирование HTML-элементов

Сложное форматирование HTML-элементов

Поддерживаемые типы столбцов

Рекомендации по стилю

Предопределенные классы

Предопределенные значки

Создание собственной нотации JSON

См. также

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