埋め込みPanelアプリを作成する

パネルがレンダリングされるページタイプを指定します。現在のオプション：

• user.home (Coupaホームページ： / および /user/home できます。
• suppliers.show (サプライヤー詳細ページ： /suppliers/:id/record できます。
• items.show (アイテム詳細ページ： /items/{id} できます。
• contracts.show (契約詳細ページ： /contracts/show/:id できます。
• requisition_headers.edit (Coupaショッピングカート： /requisition_headers/{id}/edit できます。

• invoices.show (次世代インボイスUIでのインボイスの編集を含むインボイス詳細ページ： /invoices/{id} および /invoices/{id}/show_for_approval できます。

• receipts.full_receipt (詳細な受領書ページ： /receipts/{id}/full_receipt できます。

• expenses.index (経費ランディングページ： /expenses できます。

• projects.show (プロジェクト詳細ページ： /projects/{id} できます。

• quotes/requests.show (ソーシングイベント詳細ページ： /quotes/requests/{id} できます。

• asn/headers.show (事前出荷明細通知詳細ページ： /asn/headers/{id} できます。

• receipts.full_receipt (受領書詳細ページ： /receipts/{id}/full_receipt できます。

{
	 "slot": "user.home"
 }

Panelアプリごとに指定できるスロットは1つだけです。アプリを複数のページに表示するには、目的のアプリを再度作成します slot 値を使用します。

data

データ属性は、パネルにレンダリングされた目的のデータをフェッチする方法を説明します。  パネルをレンダリングするためにフェッチするデータを説明するJSONオブジェクト。このオブジェクトの値は、データを取得するためにCoupaがリクエストを送信するURLになります。 これらすべてのデータ要求からの応答は1つのハッシュに統合され、このオブジェクトで指定されたキー名でエイリアスされます。

"data": {
		"study_queue": "https://www.wanikani.com/api/user/{user_ID}/study-queue",
		"level_progression": "https://www.wanikani.com/api/user/{user_ID}/level-progression"
	}
}

各 slot が表示されるページに関するコンテキスト詳細を提供します。たとえば、サプライヤーの表示ページに表示されているPanelアプリは、その特定のサプライヤーに関するコンテキストデータにアクセスできます。このコンテキスト情報はデータオブジェクトで使用できますが、で使用することはできません blocks 。 したがって、Panelアプリが「ACMEサプライヤー」の表示ページでレンダリングされると、サプライヤーの名前、Coupa ID、カスタムフィールド値、そのサプライヤーの他のプロパティに基づいてAPIコールをカスタマイズできます。

サプライヤーに関する最近の記事を検索するNYタイムズの記事の検索へのAPIコールは次のようになります。

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

各スロットで利用可能なコンテキストデータの更新リストについては、Coupaにお問い合わせください。

Panelアプリを有効にした後にユーザー/管理者が提供する必要があるプロパティの配列。アプリ/APIで一意のAPIキー、または有効にするCoupa顧客ごとにログイン/パスワードが必要な場合、そのオプションの提供方法は次のとおりです。

ブロックの例は次のとおりです。

"properties": {
		"username": {
			"type": "string"
		},
		"password": {
			"type": "string"
		}
	}

次に、データブロックのプロパティを次のように参照します。

"data": {
		"my_data": {
			"method": "post",
			"uri": "https://someurl.com/EVToken",
			"body": "grant_type=password&username={{ properties.username }}&
			password={{ properties.password }}"
		}
	}

Coupa管理者が新しいPanelアプリを有効にすると、アプリ記述子で指定されたすべての「プロパティ」フィールドに入力するよう求められます。

Panelアプリをすぐに表示する必要がない場合に使用できる起動ボタンを追加します。Panelアプリが自動的にサードパーティに連絡してデータをレンダリングするのではなく、エンドユーザーが手動で[起動]ボタンをクリックした場合にのみ連絡します。

このJSONオブジェクトには次が含まれます description 、 button_text および help_text 。例：

"launch": {
		"description": "PretendCo Tax Calculator Service",
		"button_text": "Launch Calculator",
		"help_text": "Tax Calculator integrates with Coupa to help you calculate international 
		taxes, right in the cart."
	}

使用方法 launch で指定します。

• Panelアプリのデータがページ内の特定のビジネスケースにのみ関連する場合に使用します
• と同じレベルで追加 slot 、 data 、など。ただし、 blocks

ページのデータが変更され、Panelアプリでレンダリングされたデータに影響を与える場合に使用できる[更新]ボタンを追加します。 これは、申請書の品目が更新されたときにカートPanelアプリで便利です。ユーザーは[更新]ボタンをクリックして、Panelアプリのデータを更新できます。

これはブール値のオプションで、アプリ記述子のPanelアプリに更新ボタンを表示するために使用されます。

"allow_refresh": true

使用方法 allow_ refresh で指定します。

• ユーザーがアプリに必要なデータを更新でき、アプリに新しいデータが必要な場合に使用します

ボタンをクリックすると、そのアプリのコンテンツが更新されます。このフィールドは「slot」、「data」、「launch」などと同じレベルに追加する必要がありますが、ブロック単位では追加できません。更新ボタンはパネルアプリケーションの上部に表示されます。

ブロック属性は、パネルでデータをレンダリングする方法を説明します。これは、さまざまなタイプのJSONオブジェクト（「ブロック」）の配列で、それぞれが個別のビジュアライゼーションを説明します。ブロックは、以前に送信されたデータにアクセスし、それを使用して視覚化を作成します。

type

ブロックのタイプを識別します。たとえば、 fields 、 text 、または bars 。これにより、UIでのパネルのレンダリング方法とデータに必要なフォーマットが決定されます。

data

このJSONオブジェクトは戦略によって異なるプロパティーを持っています。

JQ

• タイプは「jq」に等しくなければなりません

• jqはJQスクリプトを含む文字列です。JQスクリプトは、データ属性からマージされたデータ構造を入力として供給され、ブロックタイプに必要なフォーマットに適合するJSON構造を生成する必要があります。

JQでデータを処理する

たとえば、次のJQスクリプトを使用していくつかの特定のデータピースを抽出し、別のJSONオブジェクトに再パッケージ化できます。

{
	 "username": ".study_queue.user_information.username",
	 "radicals": ".level_progression.requested_information.radicals_progress",
	 "kanji": ".level_progression.requested_information.kanji_progress"
}

これにより、次のJSONオブジェクトが生成されます。

{
	 "username": "example_user",
	 "radicals": 0,
	 "kanji": 0
}

詳細情報：

• JQ 1.6マニュアル または GitHubのJQ

• GitHubのruby-jq gem

other properties

異なるブロックタイプには、そのブロックタイプに固有の他のプロパティーがあります。

type

以下と等しい text

テキストブロックタイプはLiquid Markdownテンプレートを使用します。テンプレートは最初にLiquidとして解析され、リクエストから返されたデータを補完します。次に、テンプレートはMarkdownとして再度解析され、HTMLが生成されます。

Markdownは安全なHTML生成方法を提供し、セキュリティ上の理由から、Coupaはテンプレート内のインラインHTMLをブロックします。ブロックの構成を保存するデータ列の最大制限以外の文字制限はありません。

Markdownでは、ヘッダー、インライン強調フォーマット、リスト、画像、リンク、ブロック引用が可能です。Coupaは、構文の強調表示とテーブルもサポートしています。

LiquidとMarkdownの取り扱いの詳細については、を参照してください Liquidテンプレート言語 および Markdownの習得 。

データ戦略は、単一のJSONオブジェクトを生成する必要があります。オブジェクト内のすべてのキーは、Liquidテンプレートで変数として使用できます。

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

type

以下と等しい field

データ戦略は、ラベルと値の属性を持つJSONオブジェクトの配列を作成する必要があります。レンダリング時、ラベルはフィールドラベルとして使用され、値はフィールド値として使用されます。

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

type

以下と等しい bar または line

データ戦略は、配列の配列を生成する必要があります。テーブルブロックとは異なり、棒/折れ線グラフのデータは列指向になります。

各配列は、表示される一連のデータを表します。最初の要素はシリーズの名前で、残りの要素はシリーズのポイントです。

[{
		"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]
}]

type

以下と等しい 円

データ戦略は、「棒/折れ線ブロック」セクションで説明されているように、配列の列指向の配列を作成する必要があります。

[{
		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
}]

type

以下と等しい 貨幣

• Amountは、通貨の金額を決定するためのJSONフロート。
• Currencyは、通貨のISO 4217通貨コードを含む文字列。

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

Type

以下と等しい 数字

データ戦略は、単一のJSON整数または浮動小数点を生成する必要があります。

42.0

"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 }}"
			}
		}
	}

invoice_id 、 invoice_date 、 invoice_number 、 supplier_name 、 supplier_number 、 supplier_id

id 、 name 、 display_name 、 duns 、 number 、 tax_id 、 website 、 status

カスタムフィールド： object.supplier.custom_field_values_hash

id 、 event_name 、 event_commodity 、 project_id 、 supplier_id カスタムフィールドとタグ