Концепции расширенного форматирования

  • Статья

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

Создание кнопки для запуска потока

На приведенном ниже снимке экрана показан список, где в столбец действий добавлена кнопка потока

снимок экрана с примером

С помощью форматирования столбцов вы можете создавать кнопки, при нажатии которых запускаются потоки для соответствующих элементов списка. Для потоков, которые учитывают параметры решений, панель запуска потока выводится на экран после выбора кнопки, и для запуска потока необходимо выбрать "Запустить поток". Для потоков, которые не работают с решением, после нажатия кнопки отобразится панель запуска потока, и поток будет запущен.

Чтобы использовать приведенный ниже пример, необходимо указать ИД нужного потока. Этот ИД содержится в свойстве actionParams атрибута customRowAction внутри элемента button.

Чтобы получить идентификатор потока, учитывающего параметры решения:

  1. Выберите Поток > Просмотреть потоки в списке SharePoint, где настроен поток.
  2. Если это актуально, переключитесь в среду, в которой находится поток.
  3. Выберите область "Решения".
  4. Выберите решение, в котором был создан поток.
  5. Отфильтруйте облачные потоки и выберите поток, который необходимо выполнить.
  6. Выберите Экспорт > Получить идентификатор потока.
  7. Скопируйте ИД.

Чтобы получить идентификатор потока, который не поддерживает решение, выполните следующие действия:

  1. Выберите Поток > Просмотреть потоки в списке SharePoint, где настроен поток.
  2. Выберите поток для запуска.
  3. Скопируйте идентификатор из окончания URL-адреса.
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "{\"id\": \"edf627d9-20f4-45ba-8bc9-4494bf2ff1be\"}"
  },
  "attributes": {
    "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
  },
  "style": {
    "border": "none",
    "background-color": "transparent",
    "cursor": "pointer"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "Flow"
      },
      "style": {
        "padding-right": "6px"
      }
    },
    {
      "elmType": "span",
      "txtContent": "Send to Manager"
    }
  ]
}

Кроме того, с помощью параметров headerText и runFlowButtonText в свойстве actionParams можно настраивать части самой панели потока! Дополнительные сведения см. в разделе Элементы кнопки подробного справочника по синтаксису.

Пользовательские карты при наведении

На следующем рисунке показан список с пользовательским наведением, добавленным в список:

При наведении — метаданные в столбце "Состояние" становятся доступными в форматировании представления:

Предварительное изображение 1

При наведении — метаданные в столбце "Состояние" становятся доступными в форматировании столбца:

Предварительное изображение 2

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

В этом примере используются customCardProps, openOnEvent, directionalHint и isBeakVisible:

{
  "elmType": "div",
  "style": {
    "font-size": "12px"
  },
  "txtContent": "[$Status]",
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "txtContent": "Define your formatter options inside the customCardProps/formatter property"
    },
    "openOnEvent": "hover",
    "directionalHint": "bottomCenter",
    "isBeakVisible": true,
    "beakStyle" : {
      "backgroundColor": "white"
    }
  }
}

Стандартные карточки, отображаемые при наведении

Теперь пользователи могут иметь карточку профиля или карточку наведения на файл и в модулях форматирования, некоторые из вещей, которые теперь могут делать пользователи:

  1. Карточка профиля или файловая карта на любом столбце
  2. Карточка профиля или карточка Hover с форматированием вида

Наведите курсор на форматированное имя файла с карточкой файлов по умолчанию:

Предварительное изображение 3

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

Предварительное изображение 4

Оба примера используют defaultHoverField

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "style": {
        "width": "32px",
        "height": "32px",
        "overflow": "hidden",
        "border-radius": "50%",
        "margin": "2px"
      },
      "attributes": {
        "src": "=getUserImage([$Editor.email], 's')",
        "title": "[$Editor.title]"
      }
    },
    {
      "elmType": "span",
      "style": {
        "vertical-align": "middle",
        "margin-left": "2px"
      },
      "txtContent": "[$Editor.title]"
    }
  ],
  "defaultHoverField": "[$Editor]"
}

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

Пользователи могут ссылаться на объект JSON средства форматирования столбцов внутри другого средства форматирования столбца или представления и использовать его с другими элементами для построения пользовательской визуализации столбца. Это можно сделать, воспользовавшись свойством columnFormatterReference.

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

Макет коллекции, ссылающийся на столбец

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

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 127,
  "width": 254,
  "hideSelection": false,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "button",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
                },
                "txtContent": "[!Title.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
                },
                "txtContent": "[!Category.DisplayName]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-content"
                },
                "style": {
                  "height": "32px",
                  "font-size":"12px"
                },
                "children": [
                  {
                    "columnFormatterReference": "[$Category]"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Встроенная правка

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

Специальное свойство json inlineEditField используется со значением как внутреннее имя поля [$FieldName] в целевом элементе json.

{
  "elmType": "div",
  "inlineEditField": "[$FieldName]",
  "txtContent": "[$FieldName]"
}

Встроенная правка с помощью свойства inlineEditField

Это позволяет пользователям изменять элементы на месте, в представлении, не переходя к редактированию на основе сетки или к форме редактирования элементов.

Поддерживаемые типы полей

Список поддерживаемых типов полей для встроенной правки:

  • Текст из одной строки
  • Многострочного текста (без RTF)
  • Номер
  • Даты и время
  • Выбор и MultiChoice
  • Пользователь и многопользовательский пользователь
  • Подстановка

Границы и пользовательские настройки наведения указателя

Встроенная правка добавляет границу наведения указателя к элементам, указывая, что эти элементы имеют связанное действие. По умолчанию используется neutralSecondaryграница , а при щелчке появится редактор с themePrimary границей. Эти цвета границы можно переопределить, задав стиль для того же элемента с inlineEditField помощью некоторых специальных атрибутов : --inline-editor-border-width, --inline-editor-border-style, --inline-editor-border-radiusи --inline-editor-border-color.

{
  "elmType": "div",
  "inlineEditField": "[$FieldName]",
  "txtContent": "[$FieldName]",
  "style": {
    "--inline-editor-border-color": "transparent transparent red transparent",
    "border-color": "gray",
    "border-width": "1px",
    "border-style": "solid"
  }
}

Задайте несколько значений поля элемента с помощью customRowAction

С помощью свойств new setValue и customRowAction форматировщики могут отображать кнопки действий, которые изменяют элемент внутри, не открывая редакторы или формы. setValue также позволяет одновременно устанавливать несколько значений поля элемента.

В нижеприведенном JSON будут установлены значения FieldInternalName_1, FieldInternalName_2 и FieldInternalName_3 с предоставленными значениями:

{
  "elmType": "div",
  "txtContent": "[$FieldName]",
  "customRowAction":{
    "action": "setValue",
    "actionInput": {
      "FieldInternalName_1": "FieldValue_1",
      "FieldInternalName_2": "FieldValue_2",
      "FieldInternalName_3": "=if([$Status] == 'Completed', 'yes', 'no')"
    }
  }
}

Поддерживаемые типы полей

  • Текст из одной строки
  • Многострочного текста (без RTF)
  • Номер
  • Даты и время
  • Выбор и MultiChoice
  • Пользователь и многопользовательский пользователь

Значение поля значений в actionInput:

  • Текстовые значения:

    • допустимая строка, такая как "Choice 1"

    • значение из других столбцов: [$ColumnName]

    • выражение, например:

      "if([$column]> 10, "Choice A", "Choice B")"

      или

      {operator: "+", operands" : ["Choice", "A"]}

  • Число:

    • допустимое число
    • значение из других столбцов: [$ColumnName]
    • выражение

  • Значения даты:

    • строка даты
    • @now маркер
    • выражения , возвращающие дату с помощью встроенных функций даты
    • addDays и addMinutes, две новые функции для поддержки выражений, таких как семь дней с сегодняшнего дня
    • пустая строка "" очищает значение поля

  • Множественный выбор и несколько пользователей

    • Поля с несколькими значениями являются специальными, так как для сохранения нескольких значений им необходимо значение массива.
    • appendTo, removeFromи replace— три функции, которые могут работать с полями с несколькими значениями.
      • appendTo([$MultiChoiceField], 'MyValue')
      • removeFrom([$MultiUserField], @me): удаляет все вхождения, соответствующие второму параметру
      • replace([$MultiChoiceField], 'Choice 1', 'Choice 3'): заменяет все вхождения второго параметра на третий.

  • Значения поля "person":

    • имя пользователя или адрес электронной почты

    • Пустая строка "" очищает значение поля

    • выражение, возвращающее эти значения

      Примечание.

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