Creación de tarjetas KPI

Una tarjeta KPI muestra datos en una o varias columnas o filas, en función de la altura y anchura de la tarjeta, sin una configuración de tabla. Puede utilizar la tarjeta KPI cuando desee resaltar determinados recuentos y llevar al usuario a una página de detalles para ver más información.

Acerca de esta tarea

La anatomía de una tarjeta KPI es la siguiente:
Ejemplo de tarjeta KPI
Título de tarjeta
Etiqueta o cabecera exclusiva que se asigna a la tarjeta.
Ayuda contextual de tarjeta
Una ayuda contextual proporciona detalles adicionales sobre los datos que se muestran en la tarjeta.
Etiqueta de cabecera
Etiqueta exclusiva que se asigna a la cabecera.
Ayuda contextual de encabezado
Una ayuda contextual proporciona detalles adicionales sobre la cabecera que se muestra en la tarjeta.
Número de KPI
El valor real que indica el rendimiento.
Etiqueta de unidad
Unidad de medida utilizada para cuantificar el ICR. El valor puede ser pedidos, USD, días, porcentaje.
Enlace de pie de página
Un campo o enlace que se puede pulsar con una etiqueta, por ejemplo, View all.
Puede utilizar el Creador de tarjetas para crear una tarjeta KPI.

Procedimiento

  1. En el menú de navegación, pulse Creador de tarjetas.
  2. Pulse Nueva tarjeta.

En la pestaña General , defina la tarjeta:

  1. Asigne un nombre a la tarjeta.
    Se hace referencia a la tarjeta por su nombre en la biblioteca de tarjetas.
  2. Seleccione el tipo de tarjeta.
    Seleccione KPI.

En la pestaña Datos , añada datos a la tarjeta:

  1. Opcional: Puede utilizar el editor de origen para configurar el tamaño, la cabecera, el pie de página y los datos visualizados en la tarjeta. Para editar el origen de tarjeta, pulse el icono Editar origen .
    El editor de origen le permite copiar los datos de la tarjeta y las configuraciones de estilo que puede duplicar para otras tarjetas.
    Nota: Las modificaciones realizadas en este código sobrescriben las configuraciones realizadas en las pestañas Estilo y Datos del editor de tarjetas.
  2. Añada una consulta GraphQL para recuperar los datos.
    Pulse Añadir y escriba una consulta similar a la consulta en el ejemplo. Para obtener más información, consulte Adición de consultas a tarjetas.
  3. Defina las variables que esté utilizando en la consulta.
    En el campo QUERY VARIABLES , defina las variables en formato JSON utilizando un formato similar al código del ejemplo.
  4. Ejecute la consulta.
  5. Verifique que se devuelvan datos para la consulta, de forma similar a los datos que se devuelven en el ejemplo.
  6. En la pestaña Transformar , añada código para transformar los datos para su visualización en una tarjeta KPI.
    Utilice un código similar al del ejemplo o utilice la transformación predeterminada.
  7. Pulse Terminado.
  8. Añada los ICR de los datos devueltos por la consulta a la tarjeta.
    Pulse Añadir y seleccione los campos de datos que se mostrarán como ICR en la tarjeta.
    1. Pulse el icono Menú de desbordamiento y, a continuación, pulse Editar para añadir una etiqueta para el ICR seleccionado.
    2. Añadir etiqueta de cabecera, ayuda contextual de cabecera y etiqueta de unidad.
    3. Seleccione la dirección de la etiqueta de unidad.
      Por ejemplo, Vertical u Horizontal.
    4. En la sección Valor , añada la etiqueta de valor y seleccione una plantilla en la lista disponible.
      Las plantillas siguientes están disponibles para su selección:
      • Texto: muestra el valor seleccionado en formato de texto.
      • Porcentaje: muestra el valor seleccionado en porcentaje.
      • Número: muestra el valor seleccionado en formato entero.
      • Fecha: muestra el valor seleccionado en formato de fecha.
      • Enlace: Crea un enlace de página detallado para el valor seleccionado. Si está seleccionado, añada el ID de página y pulse Añadir variable para pasar variables a la página para cargar la información en la página.

        En lugar de añadir un ID de página, también puede seleccionar una página de la biblioteca. Para seleccionar una página, pulse Seleccionar de biblioteca. De forma alternativa, puede añadir un enlace externo. Cuando se pulsa, este enlace se abre en una pestaña nueva.

  9. Pulse Terminado.

En el separador Estilo , defina el estilo de la tarjeta:

  1. En Dimensiones, aumente el ancho y la altura de la tarjeta.
  2. En Cabecera, añada un título a la tarjeta y, opcionalmente, habilite una ayuda contextual.
  3. Expanda Pie de página y establezca Enlace de pie de página en activado y asigne una etiqueta y especifique un ID de página.

    Puede añadir un ID de página en el campo o puede seleccionar una página de la biblioteca. Para seleccionar una página, pulse Seleccionar de libaray. De forma alternativa, puede añadir un enlace externo al pie de página. Cuando se pulsa, este enlace se abre en una pestaña nueva.

    Nota: Algunas páginas están marcadas conThis page requires context.aviso. Esto significa que estas páginas requieren variables de contexto para representar el contenido correctamente en la página y que estas variables faltan en el contexto de la página. Para añadir variables de contexto de página, consulte Configuración de variables de contexto de página.

    Después de seleccionar la página, puede añadir variables de plantilla para que el contenido de la página sea dinámico. Esto significa que puede utilizar la misma página varias veces con contenido personalizado de acuerdo con las variables.

  4. Pulse Guardar.

Ejemplo

Para una tarjeta KPI, se puede visualizar cualquier atributo que se devuelva de una consulta. Sin embargo, totalCount suele ser el número que se visualiza.

query dashboardMetrics($tenantId: String, $customerFilter: BooleanExp = {CONSTANT_VALUE: true}, $supplierFilter: BooleanExp = {CONSTANT_VALUE: true}, $originFilter: BooleanExp = {CONSTANT_VALUE: true}, $destinationFilter: BooleanExp = {CONSTANT_VALUE: true}) {
  openSalesOrder: businessObjects(
    advancedFilter: {AND: [{EQUALS: [{SELECT: "shipmentStatusByDate", type: STRING}, {type: STRING, VALUE: "NOT_SHIPPED"}]}, {EQUALS: [{SELECT: "orderType", type: STRING}, {type: STRING, VALUE: "OUTBOUND"}]}, $customerFilter, $supplierFilter, $originFilter, $destinationFilter]}
    cursorParams: {first: 0}
    hint: {viewId: "graph"}
    simpleFilter: {tenantId: $tenantId, type: Order}
  ) {
    totalCount
  }
}
El código siguiente es un ejemplo de cómo definir las variables que se van a utilizar en la consulta.

{
  "tenantId": "{{ tenantId }}",
  "customerFilter": "{ \"EQUALS_ANY\": [ {\"SELECT\": \"buyer.id\", \"type\": \"STRING\" }, { \"VALUES\": {{ inventory.appliedFilters.Customer.ids }}, \"type\": \"STRING\" } ] }",
  "supplierFilter": "{ \"EQUALS_ANY\": [ {\"SELECT\": \"vendor.id\", \"type\": \"STRING\" }, { \"VALUES\": {{ inventory.appliedFilters.Supplier.ids }}, \"type\": \"STRING\" } ] }",
  "originFilter": "{ \"EQUALS_ANY\": [ {\"SELECT\": \"shipFromLocation.id\", \"type\": \"STRING\" }, { \"VALUES\": {{ inventory.appliedFilters.Origin.ids }}, \"type\": \"STRING\" } ] }",
  "destinationFilter": "{ \"EQUALS_ANY\": [ {\"SELECT\": \"shipToLocation.id\", \"type\": \"STRING\" }, { \"VALUES\": {{ inventory.appliedFilters.Destination.ids }}, \"type\": \"STRING\" } ] }"
}
El código siguiente es un ejemplo de los datos devueltos por la consulta. En el ejemplo, se devuelve el número total de pedidos para cada fecha de envío planificada.
{
  "data": {
    "openSalesOrder": {
      "totalCount": 32,
      "__typename": "BusinessObjectsCursor"
    }
  },
  "loading": false,
  "networkStatus": 7
}

El atributo que se muestra debe coincidir con lo que se devuelve de los datos. Este atributo se elige en la sección ICR. Se puede realizar cualquier cálculo en los datos que se devuelven. En el ejemplo siguiente, se añade 100 al ICR devuelto por la consulta.


{
	"errors": "{{#? this.errors}}",
	"pageInfo": "{}",
	"totalCount": [
		"{{this.data.openSalesOrder.totalCount}}"
	],
	"results": [
		{
			"openSalesOrdersCount": "{{this.data.openSalesOrder.totalCount + 100}}"
		}
	]
}

Qué hacer a continuación

Añada la tarjeta a un panel de control utilizando el Creador de paneles de control.