Power Apps でクラウドサイン のデータを連携利用
MS PowerApps は、データに連携するモバイルおよびタブレット向けアプリをドラッグ＆ドロップとリッチな関数で実現します。CData API ServerとADO.NET Provider for CloudSign (もしくは250+ の他のADO.NET Providers)を組み合わせて使い、PowerApps のリモートデータソースへの連携機能を拡張することができます。PowerApps のCommon Data Service に別途データをコピーする必要はありません。CData API Server は、クラウドサイン のデータにデータベースのようなアクセスを可能にし、SaaS API やNoSQL をインメモリのSQL-92 エンジンで操作できるようにします。
CData API Server は、Swagger のメタデータ標準をサポートします。Azure App Service、Microsoft Flow、およびPowerApps でSwagger メタデータからのUI 生成やコード生成が可能です。Swagger 定義を使えば、PowerApps からクラウドサイン に連携する関数が生成できます。本記事では、それらの関数をPowerApps から使って、リモートのクラウドサイン に連携する方法を説明します。
API Server の設定
以下のリンクからAPI Server の無償トライアルをスタートしたら、セキュアなクラウドサイン OData サービスを作成していきましょう。
クラウドサイン への接続
PowerApps からクラウドサイン のデータを操作するには、まずクラウドサイン への接続を作成・設定します。
- API Server にログインして、「Connections」をクリック、さらに「接続を追加」をクリックします。
- 「接続を追加」をクリックして、データソースがAPI Server に事前にインストールされている場合は、一覧から「クラウドサイン」を選択します。
- 事前にインストールされていない場合は、コネクタを追加していきます。コネクタ追加の手順は以下の記事にまとめてありますので、ご確認ください。
CData コネクタの追加方法はこちら >> - それでは、クラウドサイン への接続設定を行っていきましょう！
- CloudSign に接続するためには、ClientId が必要です。
- 接続情報の入力が完了したら、「保存およびテスト」をクリックします。
API Server のユーザー設定
次に、API Server 経由でクラウドサイン にアクセスするユーザーを作成します。「Users」ページでユーザーを追加・設定できます。やってみましょう。
- 「Users」ページで ユーザーを追加をクリックすると、「ユーザーを追加」ポップアップが開きます。
-
次に、「ロール」、「ユーザー名」、「権限」プロパティを設定し、「ユーザーを追加」をクリックします。
-
その後、ユーザーの認証トークンが生成されます。各ユーザーの認証トークンとその他の情報は「Users」ページで確認できます。
クラウドサイン 用のAPI エンドポイントの作成
ユーザーを作成したら、クラウドサイン のデータ用のAPI エンドポイントを作成していきます。
-
まず、「API」ページに移動し、
「 テーブルを追加」をクリックします。
-
アクセスしたい接続を選択し、次へをクリックします。
-
接続を選択した状態で、各テーブルを選択して確認をクリックすることでエンドポイントを作成します。
OData のエンドポイントを取得
以上でクラウドサイン への接続を設定してユーザーを作成し、API Server でクラウドサイン データのAPI を追加しました。これで、OData 形式のクラウドサイン データをREST API で利用できます。API Server の「API」ページから、API のエンドポイントを表示およびコピーできます。
また、CORS を有効にして［Server］とクリックして次のセクションを定義する必要があります。［*］なしですべてのドメインを許可するオプションを選択することもできます。
- Access-Control-Allow-Origin:値を［*］またはAPI Server を呼び出すドメインに設定します。
- Access-Control-Allow-Methods:値を［GET,PUT,POST,OPTIONS］または使用する必要のあるHTTP メソッドに設定します。
- Access-Control-Allow-Headers:［x-ms-client-request-id, authorization, content-type］に設定します。
最後に、URL の一部としてauthtoken を渡すことにより、ユーザーが認証できるようにAPI Server を構成する必要があります。そのために、インストール先のwww/app_data フォルダに移動し、settings.cfg ファイルを変更して[Application] セクションに次の行を追加します。
AllowAuthTokenInURL = true
Swagger メタデータの取得
メタデータを使用してCustom API 接続を作成します。Swagger 定義を取得するには、ブラウザで次の要求を行い、結果のJSON ファイルを保存します。
http://MySite:MyPort/api.rsc/$oas?version=2
API Server を介してクラウドサイン に接続
以下のステップで、リモートクラウドサイン を検索する簡単なアプリを作成する方法を説明します。
- Microsoft Power Apps で、［Custom connectors］をクリックします。
- ［Create custom connector］をクリックし、［Import an OpenAPI］ファイルを選択します。
- コネクタに名前を付け、JSON ファイルを参照して［Continue］をクリックします。
- 関連する一般情報を入力し、ベースURL が/api.rsc/@myauthtoken (myauthtoken はconfigure API Server ユーザーのAuthToken) の形式であることを確認して［Continue］をクリックします。
- Authentication タイプには［No authentication］を選択します。［Continue］をクリックします。
- アクションと参照の定義を確認し、［Create connector］をクリックします。
- コネクタをテストするには、新しい接続を作成する必要があります。［Test］をクリックし、［Connections］の下の［New Connection］をクリックして［Create］を選択します。
- ［Custom connectors］メニューからコネクタに戻り、［Test］をクリックします。ここから使用可能な操作をテストできます。
データソースをPowerApp に接続
以下のステップに従って、PowerApp からクラウドサイン に接続します。
- Power Apps のメインメニューから［Create an app］をクリックし、オンプレミスまたはクラウドのPowerApp Studio を選択します。
- 空のアプリを選択し、携帯レイアウトまたはタブレットレイアウトのどちらかを選択します。
- ［View］タブで［Data Sources］をクリックし、［Add Data Source］をクリックします。
- 作成した接続をクリックしてコネクタをテストします。
ギャラリーの事前設定
以下のステップに従って、クラウドサイン を検索できる簡単なアプリを作成します。Power Apps の数式を使用してクラウドサイン の行をギャラリーコントロールの行にバインドします。
［View］タブで［Gallery］->［Vertical］をクリックしてギャラリーを追加します。
-
ギャラリーを選択し、ギャラリー設定の［Advanced］タブでギャラリーの［Items］プロパティをクラウドサイン に割り当てます。以下の式を使用すると、Documents テーブルの例にアクセスできます。
ForAll(CDataSwaggerAPI.getAllDocuments().value, {myDocumentId: DocumentId, myTitle: Title}) -
要素をクリックし、［Text］プロパティ(UI 要素の［Advanced］タブ) をThisItem.myDocumentId またはThisItem.myTitle に設定してクラウドサイン 列をUI 要素に割り当てます。
クラウドサイン のデータの検索
ギャラリーに表示されるレコードをフィルタリングするには、［Screen］にTextInput を追加し、TextInput の［Text］プロパティをクリアしてギャラリーの［Items］プロパティを以下のような式にます。また、必要に応じてTextInput1 をギャラリーのTextInput コントロール名に置き換えます。
If(IsBlank(TextInput1.Text),
ForAll(CDataSwaggerAPI.getAllDocuments().value, {myDocumentId: DocumentId, myTitle: Title}),
ForAll(CDataSwaggerAPI.getAllDocuments({'$filter':Concatenate("contains(DocumentId,",TextInput1.Text,")")}).value, {myDocumentId: DocumentId, myTitle: Title}))
この式は、API Server がリモートクラウドサイン に対して実行するOData クエリを作成し、最初にすべてのレコードをアプリに取り込むことをせずに現在のデータに対して検索が実行されるようにします。 サポートされているOData の詳細については、API Server のヘルプドキュメントを参照してください。
クラウドサイン のデータの編集
以下のステップに従って、ギャラリーで選択されたクラウドサイン レコードのフィールドを表示する編集可能な画面をロードします。
- ［Insert］タブで、［New Screen］->［Blank］とクリックし、スクリーンの名前を［Details］に設定します。
- ギャラリーを新しいスクリーンに結び付けます。ギャラリーの最初のエントリで矢印ボタンを選択し、［Advanced］プロパティの［OnSelect］フィールドに以下のように入力します。
Navigate( Details, None )
- ［Details］スクリーンの［Insert］タブで、［Id］と［Id］値の別のラベルを追加します。［Text］プロパティをBrowseGallery.Selected.Id に設定します。
各カラムについて、以下のことを行う必要があります。Custom API の場合、フォーム要素はAPI Server に対してどのリクエストを作成する必要があるかを検出できないため、データ変更式を手動で書く必要があることに注意してください。
- フィールドのラベルを追加します。
- ［Text］メニューからのテキスト入力を画面に追加し、text プロパティをギャラリーから選択したアイテムの値に設定します。(例: BrowseGallery.Selected.myDocumentId).
アプリに基本的な更新機能とナビゲーションを提供するには、［Submit］ボタンと［Back］ボタンを追加します。
- ［Submit］ボタンでOnChange プロパティを以下のように設定します。
CDataSwaggerAPI.updateDocuments(BrowseGallery.Selected.myId,BrowseGallery.Selected.myId,{DocumentId:TextInput1.Text,Title:TextInput2.Text}) - ［Back］ボタンの場合は、［OnSelect］フィールドを以下のように設定します。
Navigate( BrowseScreen, None )
これで、モバイルアプリまたはタブレットアプリでクラウドサイン を参照、検索、更新できるようになりました。