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

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

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

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

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

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

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

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

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

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

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

  1. Переключитесь в среду, в которой размещен поток.

  2. Выберите поток для запуска.

  3. Выберите Экспорт > Получить идентификатор потока.

  4. Скопируйте ИД.

    {
  "$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"
    }
  }
}

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

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

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

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

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

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

Предварительное изображение 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]"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

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

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

Специальное свойство inlineEditField JSON используется со значением в качестве внутреннего имени [$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":

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

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

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

      Примечание.

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

  • Last updated on