埋め込みパネルアプリを作成

データを取得中...

アプリは、アプリのデータをフェッチするために最大5つの別々のHTTP呼び出しを行うことができます。これらは、記述子のデータ属性を使用して指定されます。API呼び出しは、JSON（推奨）またはXMLを返します。

Panelアプリのブロックタイプ

Panelアプリは、ブロックと呼ばれるさまざまなタイプのUI要素を使用して、既存のCoupaページにそのデータをレンダリングします。Coupaは以下のブロックタイプをサポートしています。

• リッチテキスト（画像を含む）
• フィールド（基本的にキーと値のペア）
• 数字
• 貨幣
• テーブル
• 円グラフ
• 折れ線グラフ／棒グラフ
• 立ち上げ
• 再読み込み

テキストブロック

{
   "foo": "bar",
   "fizz": {
      "buzz": "buzz"
   }
}

フィールドブロック

[
   {
      "label": "Foobar",
      "value": "fizzbuzz"
   },
   {
      "label": "Lorem Ipsum",
      "value": 42
   }
]

テーブルブロック

[
   ["col1", "col2", "col3"],
   [1, 2, 3],
   [4, 5, 6]
]

棒/折れ線ブロック

[{
    "name": "Year 1800",
    "data": [107, 31, 635, 203, 2]
 }, {
    "name": "Year 1900",
    "data": [133, 156, 947, 408, 6]
 }, {
    "name": "Year 2000",
    "data": [814, 841, 3714, 727, 31]
 }, {
    "name": "Year 2016",
    "data": [1216, 1001, 4436, 738, 40]
}]

円ブロック

[{
    name: 'Chrome',
    y: 20.41,
    sliced: true,
    selected: true
  }, {
    name: 'Internet Explorer',
    y: 11.84
  }, {
    name: 'Firefox',
    y: 10.85
  }, {
    name: 'Edge',
    y: 4.67
  }, {
    name: 'Safari',
    y: 4.18
  }, {
    name: 'Sogou Explorer',
    y: 1.64
  }, {
    name: 'Opera',
    y: 2.8
  }, {
    name: 'Other',
    y: 2.61
}]

貨幣ブロック

{
  "amount": 42.0,
  "currency": "USD"
}

数字ブロック

42.0

認証

Coupaは以下の認証タイプをサポートしています：

"data": {
    "nyt_data": {
      "uri": "https://api.nytimes.com/svc/search/v2/articlesearch.json?q={context.supplier.name}
            &api-key={properties.api_key}"
    }
  }

"data": {
    "trip_data": {
      "uri": "https://someurl.net/trips",
      "headers": {"Authorization":"basic YOUR_BASE64_ENCODED_TOKEN_HERE"}
    }
  }

"before_data": {
    "auth": {
      "method": "post",
      "uri": "https://someurl.com/MYToken",
      "body": "grant_type=password&username={{ properties.username }}&password={{ properties.password }}"
    }
  },
  "data": {
    "risk_data": {
      "uri": "https://someurl.com/MYData?integration_id=%22ID{context.supplier.id}%22",
      "headers": {
        "Authorization": "bearer {{ before_data.auth.access_token }}"
      }
    }
  }

API URL

• URLはHTTPSである必要があります
• CoupaサーバーからURLにアクセスできる必要があります（つまり、HEADリクエストは成功する必要があります）
• URLは有効なLiquidテンプレートとして正常に解析される必要があります。これは補間を有効にするためのものです

APIリクエストの詳細

• Liquidを使用してデータをURLに補間する場合、結果は有効なURLでなければなりません
• 応答コードは200または204でなければなりません
• リモートサーバーは5分のタイムアウト期間内に応答する必要があります
• 回答のコンテンツタイプは application/json または application/xmlのいずれかにしてください

ボタン

パネルアプリの 起動ボタン（launch）と 更新ボタン（allow_refresh） を設定できます。機能はブロックのように見えますが、技術的にはボタンはブロックではありません。ボタンの詳細については、この記事Panel App basicsセクションをご覧ください。詳細については。

Coupa Cats

このシンプルなアプリは猫に関連するランダムな画像と事実を示しています。

これはアプリを動かすコードです。

{
  "properties": {},
  "slot": "user.home",
  "before_data": {},
  "data": {
    "cat_data": {
      "uri": "https://aws.random.cat/meow"
    },
    "fact_data": {
      "uri": "https://cat-fact.herokuapp.com/facts/random"
    }
  },
  "blocks": [
    {
      "type": "text",
      "data": {
        "type": "jq",
        "jq": ".cat_data"
      },
      "text": "![random cat pic from aws.random.cat]({{ file }}){:height=\"450px\"}"
    },
    {
      "type": "text",
      "data": {
        "type": "jq",
        "jq": ".fact_data"
      },
      "text": "## Here's an interesting fact about cats:\n\n{{ text }}"
    }
  ]
} 

ニューヨークタイムズの記事検索

このアプリでは、ニューヨークタイムズからのサプライヤーに関する最近のニュースをサプライヤーのページに追加します。これを機能させるには、NYT APIキーを取得する必要があります。

これはアプリを動かすコードです。

{
  "properties": {
    "api_key": {
      "type": "string"
    }
  },
  "slot": "suppliers.show",
  "before_data": {
  },
  "data": {
    "nyt_data": {
      "uri": "https://api.nytimes.com/svc/search/v2/articlesearch.json?q={context.supplier.name}&api-key={properties.api_key}"
    }
  },
  "blocks": [
    {
      "type": "text",
      "data": {
        "type": "jq",
        "jq": "{ \"docs\": .nyt_data | .response | .docs }"
      },
      "text": "![nyt logo](http://www.transervice.com/wp-content/uploads/2018/06/the-new-york-times-4.png){:height=\"100px\"}"
    },
    {
      "type": "text",
      "data": {
        "type": "jq",
        "jq": "{ \"docs\": .nyt_data | .response | .docs }"
      },
      "text": "1. [{{ docs[0].headline.main }}]({{ docs[0].web_url }}) \n2. [{{ docs[1].headline.main }}]
                  ({{ docs[1].web_url }})\n3. [{{ docs[2].headline.main }}]({{ docs[2].web_url }})\n4. 
                  [{{ docs[3].headline.main }}]({{ docs[2].web_url }})\n5. [{{ docs[2].headline.main }}]
                  ({{ docs[4].web_url }})\n"
    }
  ]
} 

天気パネルアプリ

この例のアプリは、場所の温度の側面のグラフィック表現を示しています。これを機能させるには、NYT APIキーを取得する必要があります。

これはアプリを動かすコードです。

{
  "properties": {
    "api_key":{
      "type": "string"
    }
  },
  "slot": "user.home",
  "data": {
    "chicago_data": {
      "method": "get",
      "uri": "https://api.openweathermap.org/data/2.5/weather?q=Chicago&appid={properties.api_key}&units=imperial"
    }
  },
  "blocks": [
    {
      "type": "bar",
      "title": "Here's the weather in Chicago",
      "data": {
        "type": "jq",
        "jq": "[{name:\"Temp\",data:[.chicago_data.main.temp]},{name:\"WindSpeed\",data:[.chicago_data.wind.speed]},
               {name:\"Humidity\",data:[.chicago_data.main.humidity]}]"
      },
      "axes": {
        "xAxis": {
          "labels": {
            "enabled": false
          }
        },
        "yAxis": {
          "title": {
            "text": ""
          },
          "max": 100
        }
      }
    },
    {
      "type": "line",
      "title": "Here's the weather in Chicago",
      "data": {
        "type": "jq",
        "jq": "[{name:\"Minimum, Current, MaxTemp\", data:[[.chicago_data.main.temp_min],[.chicago_data.main.temp],
               [.chicago_data.main.temp_max]]}]"
      },
      "axes": {
        "xAxis": {
          "labels": {
            "enabled": false
          }
        },
        "yAxis": {
          "title": {
            "text": ""
          },
          "max": 70
        }
      }
    }
  ]
}

パートナーのインスタンスでテストする

Coupaでこれをテストするには、バージョンR25.0以降である必要があります。最終的に、アプリはカスタムPanelアプリではなく、アプリディレクトリの一部になりますが、Coupaがアプリをアプリディレクトリに正式に追加する前に、これらの手順を使用して独自にテストできます。

1. 設定に移動
2. [プラットフォーム]で、[インストール済みアプリ]をクリックします。
3. ［作成］ボタンをクリックし、［新しいパネルアプリを作成］を選択します。
4. アプリを作成
5. 名前を追加
6. 記述子セクションに、上記のコードを含めます。

完了すると、エラーがない場合、パネルアプリが各サプライヤーのページに表示されます。