IFrameを作成

IFrameを使用すると、サードパーティのコンテンツをCoupaインスタンスに埋め込むことができます。IFrameアプリには2つのタイプがあります。 

• フローティングIFrame:IFrameは永続的であり、ボタンの右側またはユーザーがナビゲートするページにあります。IFrameを構成する場合、LocationはFloatingに設定されます。下のフローティングIFrameを参照してください。 

• 埋め込みIFrame ：IFrameは、指定されたページに埋め込まれます。IFrameを構成する場合、場所は特定のページに設定されます。

IFrameをフローティングする

IFrameには、Coupaコアのすべてのページに表示されるタイプのフローティングIFrameが含まれています。フローティングIFrameを使用すると、Coupaの管理者は、ユーザーがアクセスできるすべてのページに、チャットやその他のヘルプウィジェットなどのサードパーティ製のツールを追加できるようになりました。ユーザーは、ITチームやサポートチームからのサポートを受けている間にCoupaを離れる必要はありません。

Coupaは、コアWeb UIの右下に小さなフローティングIFrameタブを配置します。タブはページに固定されず、Coupaのどこにいてもユーザーをフォローします。タブのデータもユーザーをフォローしており、ユーザーがクリックしても情報が失われることはありません。ユーザーが小さなタブをクリックすると、タブが開き、管理者が設定したチャットクライアントまたはヘルプウィジェットが表示されます。展開と折りたたみを可能にするフローティングIFrameには、ウィンドウを展開および折りたたむためのインタラクティブボタンが含まれています。

フローティングIFrameを作成します。

これらのステップを使用して、フローティングIFrameを作成します。管理者は、ウィンドウの右下に隣接して表示される最大3つのフローティングIFrameを作成し、新しいタブごとに左に移動できます。 

1. [設定] > [ IFrame and Panels]に移動し、[C reate]をクリックします。
2. [場所]を[フローティング]に設定し、URLを設定します。
3. [クライアントID]フィールドを設定します。 これは、第三者が適切なCoupa Embedded Appと通信していることを確認するために使用される一意のIDです。任意の一意の文字列です。フローティングIFrameは同じクライアントIDを持つことはできません。
4. Descriptorフィールドに入力します。これは、サードパーティと共有するパラメータとデータを含むJSONデータです。例:

   {
   
      "properties ": {
   
         "APP_KEY ": {
   
            "type ":" string "
   
         },
   
         "APP_SECRET ": {
   
            "type ":" string "
   
         }
   
      }
   
   }

   上記の例では、2つのカスタムプロパティapp_keyとapp_secretがあり、どちらもstring型です。[記述子]フィールドに追加されると、作成したプロパティが[アプリのプロパティ]セクションに追加されます。

5. アプリケーションURLを設定します。埋め込みアプリに表示するサードパーティのURLです。
6. [保存]をクリックします。IFrameレコードを再度開くと、[アプリのプロパティ]セクションに追加したプロパティに値を追加できます。 

デモフローティングIFrameを作成するには、これらのフィールド値を入力します。これにより、ウィンドウを展開および折りたたむためのボタンを持つサンプルIFrameが作成されます。 

• アプリケーションURL ： https://app-bridge-example-app.herokuapp.com/
• クライアントID ：12345

フローティングIFrameとチャットボット間でデータを交換

サードパーティは、Javascript Postmessage APIを使用してCoupaと通信できます。この例では、ユーザーがAPP_SECRETプロパティ名を値123456に設定しています。

以下のコードは、この埋め込みアプリへのアクセス権をサードパーティに提供します。

//チャットボットからCoupa Coreにポストメッセージコールを送信し、プロパティ値を取得するための関数

const getSecret = () => {

  const propertyName = "APP_SECRET ";

  window.parent.postMessage (

    {

      action: "getSecret ",//メッセージタイプ。

      クライアントID:"フローティングIframeのクライアントID ",

      iFRAME_ID:"フローティングIframeのIframe ID ",

      データ：{

        key: "app_secret" //この場合、フローティングIframe. app_secretから取得するプロパティ名。

      }

    }, "*"

  );

}



//これは受信ポストメッセージイベントを聞くリスナーイベントです

// Coupahostからチャットボットへ。

window.addEventListener (" message ", function (event ){

  var eventData = event.data;

  switch (eventData.action ){

    case "returnSecret ":

      console.log (eventData.data) //これにより、ブラウザのコンソールにプロパティ値が表示されます。

      break;

  }

});



getSecret (); //呼び出して、ポストメッセージコールをトリガーし、Coupaコアからシークレットを取得します。

フローティングIFrameのサイズを変更する

Javascript Postmessage APIを使用して、フローティングIFrameのサイズを変更できます。例:

//サイズを変更するために、チャットボットからCoupa Coreにポストメッセージコールを送信する機能。

function resize (options = {}) {

  window.parent.postMessage (

    {

      action: "サイズ変更",

      クライアントID:"フローティングiframeのクライアントID ",

      iFRAME_ID:"フローティングIFRAMEのIFRAME ID ",

      data: {

        height:300 ,//ピクセル単位の高さ

        幅：300 ,// width in px

        initial: options.initial //ページ読み込み時にtrueに設定し、そうでない場合はfalseに設定します

      }

    }、"*" //セキュリティを強化するために、*クーパホストURLに置き換えます

  );

}



resize ({initial: true}) //ページの再読み込み時にinitial: trueでこの関数を呼び出します。

resize ({initial: false}) //ボタンをクリックしたときにinitial: falseでこの関数を呼び出して、強制的にサイズを変更します。

この例では、パラメーターは次のように定義されています。 

• クライアントID:フローティングIFrame側として設定されたクライアントIDと同じです。
• Iframe_id:作成したフローティングIFrameのIFrame ID。この値は、IFrame URLから取得できます。

以下のコードは、第三者の埋め込みアプリIDを取得します。

//チャットボット側では、以下のコードを使用してIframe IDを取得できます。

let urlParams =新しいURLSearchParams (document.location.search);

urlParams.get (" floating_iframe_id ") // iframe IDを取得

urlParams.get (" coupahost ") //ポストメッセージセキュリティを強化するために使用できるクーパホストを取得します

パラメーター

• height:IFrameをpxで表示する高さ。
• 幅：IFrameをpxで表示する幅。
• 初期：初期フラグはtrue/falseのいずれかになります。
  • 真：IFrameの最新のサイズを保存して適用するには、initial: trueを渡します。たとえば、IFrameが300 x 300で、ページをリロードした場合、ページのリロード後もシステムは同じサイズのIFrameを維持します。最近のサイズがなく、チャットボットが最初に読み込まれている場合、システムはリサイズイベントに渡された高さと幅を取得します。
  • 偽：ボタン をクリックしてIFrameのサイズを変更するには、initial: falseを渡します。これにより、最後に保存されたIFrameのサイズに関係なく、渡された高さと幅にIFrameのサイズが強制的に変更されます。

サイズ制限

IFrameのサイズを変更できるサイズ制限があります。

最大限度

• MAX_IFRAME_HEIGHT = 600 px
• MAX_IFRAME_WIDTH = 565 px

最小限度

• MIN_IFRAME_HEIGHT = 20 px
• MIN_IFRAME_WIDTH = 20 px

埋め込みIFrame

Coupaがパネルアプリをサポートする場所にIFrameを埋め込み、IFrameコールアウトクエリに特定のCoupa属性を提供します。埋め込みアプリは、ホームページ、サプライヤーページ、ショッピングカートなどの特定のページにコンテキストを追加します。  

IFrameを埋め込む

1. [設定] > [プラットフォーム] > [インストールされているアプリ]に移動します。
2. [新規作成]ボタンをクリックし、[新規IFrameアプリの作成]を選択します。  
3. [場所]ドロップダウンメニューで、アプリの場所を指定します。スロットフィールドを空白のままにすると、特定のページには表示されず、以前と同じようにIFrameアプリのメニュー項目を作成する必要があります。スロットを選択すると、[新しいウィンドウで開く]オプションは表示されなくなります。