Conceptos de formato avanzado

Puede usar algunas de las siguientes características para que la vista y el formato de columna sean más completos e interactuables.

Crear un botón para iniciar un flujo

La siguiente captura de pantalla muestra una lista con un botón Flujo que se agrega a la columna Acción:

Puede usar el formato de columna para crear botones que, cuando se seleccionan, ejecutan flujos en el elemento de lista correspondiente. Para los flujos compatibles con la solución, el panel de inicio de flujo se mostrará después de elegir el botón y debe seleccionar Ejecutar flujo para iniciar el flujo. En el caso de los flujos que no son compatibles con la solución, el Panel de inicio de flujo se mostrará después de elegir el botón y el flujo se ejecutará.

Para usar el siguiente ejemplo, debe sustituir el identificador del flujo que quiere ejecutar. Este identificador se encuentra dentro de la propiedad actionParams del atributo customRowAction dentro del elemento button.

Para obtener el identificador de un flujo compatible con la solución:

1. Seleccione Flujo > Ver los flujos en la lista de SharePoint donde está configurado el flujo.
2. Si procede, cambie al entorno en el que se hospeda el flujo.
3. Seleccione el área Soluciones.
4. Seleccione la solución en la que se creó el flujo.
5. Filtre los flujos de nube y seleccione el flujo que desea ejecutar.
6. Seleccione Exportar > Obtener identificador de flujo.
7. Copie el identificador.

Para obtener el identificador de un flujo que no reconoce la solución:

1. Seleccione Flujo > Ver los flujos en la lista de SharePoint donde está configurado el flujo.
2. Seleccione el flujo que quiere ejecutar.
3. Copie el identificador del final de la dirección 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"
    }
  ]
}

Además, puede usar las opciones headerText y runFlowButtonText de la propiedad actionParams para personalizar partes del panel Flujo. Para obtener más información vea la parte de elementos de botón de la sintaxis detallada.

Personalizar tarjetas al mantener el puntero

En la imagen siguiente se muestra una lista con el movimiento del puntero personalizado que se agrega a una lista:

Al mantener el puntero, los metadatos de la columna "Estado", pasan a estar disponibles en el formato de vista:

Al mantener el puntero, los metadatos de la columna "Estado", pasan a estar disponibles en el formato de columna:

Puede usar el formato para definir llamadas personalizadas que se puedan poner en marcha mediante acciones definidas por el usuario como hacer clic o mantener el mouse.

En este ejemplo se usan customCardProps, openOnEvent, directionalHint y 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"
    }
  }
}

Tarjetas predeterminadas manteniendo el puntero

Ahora los usuarios también pueden tener tarjetas de perfil o de activación de archivo en formateadores, por lo que pueden hacer, entre otras cosas, lo siguiente:

1. Tarjeta de perfil o de activación de archivo en cualquier columna
2. Tarjeta de perfil o de activación con formato de vista

Mantenga el puntero sobre un nombre de archivo con formato con tarjeta de archivo predeterminada:

Mantenga el puntero sobre una columna de persona con una tarjeta de perfil predeterminada:

Ambos ejemplos usan 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]"
}

Referencia del formateador de columna

Los usuarios pueden hacer referencia a un formateador de columnas JSON dentro de otro formateador de columnas/vistas y usarlo junto con otros elementos para crear una visualización de columnas personalizada. Esto puede hacerse al usar la propiedad columnFormatterReference.

La siguiente imagen muestra una lista con una disposición de Galería que hace referencia al formateador de la columna Categoría:

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

Edición directa

Con la edición en línea, los formateadores tienen la capacidad de cargar editores de campos para editar datos de campo en un elemento. Los usuarios deben tener permisos de edición en el elemento de lista y el tipo de campo debe pertenecer al conjunto de tipos admitidos para que esta característica funcione.

Una propiedad JSON especial inlineEditField se usa con el valor como el nombre interno del campo [$FieldName] en el elemento de destino en el archivo JSON.

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

Esto permite a los usuarios editar elementos en contexto, dentro de la vista, sin desplazarse a la edición basada en cuadrícula o a un formulario de edición de elementos.

Tipos de campo admitidos

Lista de tipos de campo admitidos para la edición en línea:

• Texto de una sola línea
• Texto multilínea (sin RTF)
• Número
• DateTime
• Opción y opciones múltiples
• Usuario y multiusuario
• Búsqueda

Bordes y personalizaciones al mantener el mouse

La edición directa agrega un borde de desplazamiento sobre los elementos para indicar que estos elementos tienen una acción asociada. El borde predeterminado es neutralSecondaryy, al hacer clic, el editor aparece con un themePrimary borde. Estos colores de borde se pueden invalidar mediante el estilo de configuración en el mismo elemento con inlineEditField mediante algunos atributos especiales: --inline-editor-border-width, --inline-editor-border-style, --inline-editor-border-radiusy --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"
  }
}

Establecer varios valores de campo de un elemento mediante customRowAction

Con las propiedades y customRowAction nuevassetValue, los formateadores pueden representar botones de acción que modifican el elemento internamente sin abrir editores ni formularios. setValue también permite establecer varios valores de campo del elemento a la vez.

El JSON siguiente establecerá el valor de FieldInternalName_1, FieldInternalName_2 y FieldInternalName_3 con los valores proporcionados:

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

Tipos de campo admitidos

• Texto de una sola línea
• Texto multilínea (sin RTF)
• Número
• DateTime
• Opción y opciones múltiples
• Usuario y multiusuario

Valores de campo de valor en actionInput:

• Valores de texto:

  • una cadena válida como "Choice 1"

  • valor de otras columnas: [$ColumnName]

  • una expresión como:

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

    o

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

• Número:

  • un número válido
  • valor de otras columnas: [$ColumnName]
  • una expresión

• Valores de fecha:

  • una cadena de fecha
  • token @now
  • expresiones que devuelven una fecha mediante funciones de fecha integradas
  • addDays y addMinutes, dos nuevas funciones para admitir expresiones como siete días a partir de hoy
  • una cadena vacía "" borra el valor del campo

• Opciones múltiples y múltiples usuarios:

  • Los campos multivalor son especiales, ya que necesitan un valor de matriz para guardar varios valores.
  • appendTo, removeFromy replace, tres funciones que pueden funcionar en campos multivalor.
    • appendTo([$MultiChoiceField], 'MyValue')
    • removeFrom([$MultiUserField], @me): quita todas las repeticiones que coinciden con el segundo parámetro
    • replace([$MultiChoiceField], 'Choice 1', 'Choice 3'): reemplaza todas las repeticiones del segundo parámetro por el tercero.

• Valores de campo de usuario:

  • nombre de usuario o correo electrónico

  • Una cadena vacía "" borra el valor del campo

  • una expresión que devuelve estos valores

    Nota:

    Una consulta se ejecuta con el valor de cadena proporcionado en la columna de usuarios y se usa el primer usuario en los resultados devueltos.