メディアの選択と場所のViva Connectionsアクション

完了

SharePoint Framework (SFPx) アダプティブ カード拡張機能 (ACE) では、アダプティブ カード スキーマで使用できる複数の種類のアクションがサポートされています。 これには、次のようなアクションが含まれます。

• ブラウザーで URL を開く
• 既存のカードに別のアダプティブ カードをサブフォームとして表示する
• 送信アクション

Viva Connectionsには、ACE 開発者が利用できる 2 種類のアクションが含まれています。

このユニットでは、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でサポートされている他の種類のアクションを使用すると、位置情報データを操作できます。 1 つは緯度と経度を使用してマップ上の場所を示し、もう 1 つはマップ上の場所を選択できます。

場所データを表示する

2 つの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
      }
    }
  }
}]

位置情報を取得する

もう 1 つの場所アクションでは、ユーザーがマップ上の場所を選択できます。 このアクションを使用するには、アダプティブ カードに次の 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でサポートされる特殊なアクション機能について学習しました。