Compartir a través de


Funcionalidades de ubicación en la extensión de tarjeta adaptable

Nota:

La funcionalidad de geolocalización en la extensión de tarjeta adaptable estará disponible en SPFx v1.15.

Por lo tanto, asegúrese de que lo ha instalado antes de continuar.

Para obtener más información sobre cómo instalar la versión preliminar de SPFx v1.15, consulte SharePoint Framework notas de la versión v1.15.

En este tutorial también se supone que ya ha creado una extensión de tarjeta adaptable de SharePoint.

Para obtener información sobre cómo crear su primera extensión de tarjeta adaptable de SharePoint, pruebe este tutorial.

Nuevos tipos de acción para la geolocalización

Hay 2 acciones de ubicación:

  1. Obtener ubicación
  2. Mostrar ubicación

Obtener ubicación:

Proporciona la ubicación actual del dispositivo del usuario o abre el selector de ubicación y devuelve la ubicación elegida por el usuario. En el explorador, usa Mapas de Bing como interfaz de asignación:

La acción de extensión de tarjeta adaptable para obtener ubicación es: VivaAction.GetLocation.

Toma un parámetro booleano opcional: ChooseLocationOnMap.

Si la propiedad ChooseLocationOnMap está establecida en true, la acción abrirá un mapa y el usuario podrá elegir una ubicación en el mapa. De lo contrario, capturará la ubicación actual del dispositivo del usuario.

Mostrar ubicación:

Con esta acción, se muestra un mapa en la pantalla en el que puede mostrar la ubicación actual del usuario o unas coordenadas especificadas.

La acción extensión de tarjeta adaptable para mostrar ubicación es: VivaAction.ShowLocation.

Toma un parámetro de ubicación opcional: locationCoordinates.

Para mostrar una ubicación específica, debe pasar las coordenadas de ubicación (latitud y longitud) usando el parámetro locationCoordinates.

El objeto locationCoordinates consta de las siguientes propiedades:

{
  /**
   * Latitude of the location.
   */
  latitude: number;

  /**
   * Longitude of the location.
   */
  longitude: number;

  /**
   * Timestamp (optional).
   */
  timestamp?: number;

  /**
   * Accuracy of the location (optional).
   */
  accuracy?: number;
}

Tutorial y ejemplos

Puede echar un vistazo a este tutorial que detalla los pasos para crear una tarjeta con acciones de geolocalización.

Los siguientes ejemplos describen la acción de geolocalización y su propósito.

  1. Obtener la ubicación actual del usuario

    En la plantilla JSON, introduzca la siguiente acción:

    "actions": [{
      type: 'VivaAction.GetLocation',
      id: 'Get Location'
    }]
    

    Cuando se invoca esta acción, se captura la geolocalización actual del usuario y se pasa al desarrollador de terceros a través de la devolución de llamada onAction.

    Nota:

    En este caso, no se muestra el mapa.

  2. Seleccionar la ubicación en un mapa

    En la plantilla JSON, introduzca la siguiente acción:

    "actions": [{
      type: 'VivaAction.GetLocation',
      id: 'Get Location',
      parameters: {chooseLocationOnMap: true}
    }]
    

    Cuando se invoca esta acción, se abre un mapa que señala la ubicación actual del usuario y el usuario puede seleccionar y compartir la ubicación de su elección. Las coordenadas de la ubicación seleccionada se pasan al desarrollador de terceros a través de la devolución de llamada onAction.

  3. Mostrar la ubicación actual del usuario

    En la plantilla JSON, introduzca la siguiente acción:

    "actions": [{
      type: 'VivaAction.ShowLocation',
      id: 'Show Location'
    }]
    

    Cuando se invoca esta acción, se abre un mapa que muestra las coordenadas de la ubicación actual del usuario.

  4. Mostrar una ubicación especificada

    En la plantilla JSON, introduzca la siguiente acción:

    "actions": [{
      type: 'VivaAction.ShowLocation',
      id: 'Show Location',
      parameters: {
        locationCoordinates: {
          latitude: 28.6132039578389,
          longitude: 77.229488240066
        }
      }
    }]
    

    Cuando se invoca esta acción, se abre un mapa que muestra las coordenadas de ubicación especificadas en la acción.

Acceso a acciones de geolocalización mediante el panel de propiedades de la tarjeta del diseñador de tarjetas

Si no desea escribir código pero desea ver cómo funcionan las acciones de geolocalización, puede explorar este tutorial que le permite crear tarjetas con acciones de geolocalización a través del panel de propiedades.

Nota:

Estas acciones de geolocalización se pueden agregar a la vista de tarjeta o a los botones de la vista de tarjeta o dentro de la vista rápida.

Códigos de permiso y error

Para que las API de ubicación funcionen, el usuario tiene que conceder el permiso para acceder a la ubicación del dispositivo.

Código de error Descripción del error
PermissionDenied El usuario ha denegado el permiso para acceder a la ubicación
InternalError Hubo un error inesperado al invocar las API de ubicación
HostNotSupported La acción de ubicación se está usando en un entorno no admitido

Devoluciones de llamada para desarrolladores de tarjetas

Cuando se invoca la acción VivaAction.GetLocation, pasamos las coordenadas de ubicación capturadas a través de la devolución de llamada onAction.

Nota:

No se ha invocado la devolución de llamada onAction para VivaAction.ShowLocation.

Para las acciones: VivaAction.GetLocation y VivaAction.ShowLocation, si el usuario llega a un estado de error, se invocará una devolución de llamada onError a la que pasaremos el nombre de la acción y el código de error.

Disponibilidad de acciones de geolocalización

Nota:

Estas nuevas acciones están disponibles solo en el explorador en estos momentos. Viva Connections compatibilidad con dispositivos móviles de escritorio y Viva Connections se habilitará más adelante. Después de la disponibilidad general, la matriz de soporte técnico para las acciones tendrá el siguiente aspecto:

Acción Escritorio de conexión Viva Viva Connections Mobile Explorador
Obtener ubicación No compatible Compatible Compatible
Mostrar ubicación No compatible Compatible Compatible