上一篇

下一步

媒体选择和位置的 Viva Connections 操作

已完成

SharePoint 框架 (SFPx) 自适应卡片扩展 (ACE) 支持自适应卡片架构中可用的多种类型的操作。 这些操作包括以下操作：

• 在浏览器中打开 URL
• 在现有卡片上将另一个自适应卡片显示为子窗体
• 提交操作

Viva Connections 包括 ACE 开发人员可以利用的另外两种类型的操作。

在本单元中，你将了解 Viva Connections 支持的一些位置和媒体的特殊操作功能。

ACE 的媒体上传

Viva Connections 支持的两种类型的操作中的第一种是从 ACE 选择和上传文件的功能。 图像以 Base64 字符串的形式上传。

为此，请将以下操作添加到自适应卡：

"actions": [
  {
    "type": "VivaAction.SelectMedia",
    "id": "Select Media",
    "title": "Select Files",
    "parameters": {
      "mediaType": "MediaType.Image"
    }
  }
]

下一步是处理由 QuickView 事件处理程序中的 操作上传的 onAction() 媒体：

public onAction(action: ISelectedMediaActionArguments): void {
  this.setState({
    uploadedImageName: action.media[0].fileName,
    uploadedImageContent: action.media[0].content // base64
  });
}

ACE 的位置操作

Viva Connections 支持的其他类型的操作增加了处理位置数据的功能。 一个用于基于纬度和经度坐标在地图上显示位置，而另一个用于在地图上选择位置。

显示位置数据

若要使用两个 Viva Connections 操作之一在地图上显示位置，请将以下操作添加到自适应卡：

"actions": [{
  "id": "originLocation",
  "title": "View dropoff location",
  "action": {
    "type": "VivaAction.ShowLocation",
    "parameters": {
      "locationCoordinates": {
        "latitude": this.state.trip.destination.latitude,
        "longitude": this.state.trip.destination.longitude
      }
    }
  }
}]

获取位置数据

其他位置操作支持用户在地图上选取位置。 若要使用此操作，请将以下 JSON 添加到自适应卡：

"actions": [{
  "id": "destinationLocation",
  "type": "VivaAction.GetLocation",
  "title": "Select trip destination from map",
  "parameters": {
    "chooseLocationOnMap": true
  }
}]

若要获取用户从地图中选择的坐标，请使用 操作的 location 属性检索纬度和经度坐标。

public onAction(action: IGetLocationActionArguments): void {
  const currentTrip = this.state.trip;

  if (action.type === 'VivaAction.GetLocation') {
    trip.DestinationLocation = <ILocation>{
      latitude: action.location.latitude,
      longitude: action.location.longitude
    };
    this.setState({ trip: trip });
    this.quickViewNavigator.pop();
  }
}

摘要

在本单元中，你了解了 Viva Connections 对位置和媒体支持的一些特殊操作功能。

继续