パネルを作成

パネルを表示するページタイプを指定します。現在のオプションは次のとおりです。

• user.home (Coupaのホームページ:/and/user/home )
• suppliers.show (サプライヤー詳細ページ:/suppliers /: id/record )
• supplier_order_headers.show
• 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 })
• asn/supplier_headers.show
• budget_lines.show (予算明細ページ:/budget_lines /{ id})

{

	 "slot ":" user.home "

 }

パネルアプリごとに指定できるスロットは1つだけです。アプリを複数のページに表示するには、希望するスロット値でアプリを再度作成します。

データ

データ属性は、パネルでレンダリングされる目的のデータを取得する方法を説明します。パネルをレンダリングするために取得するデータを説明する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 "

	}

}

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

ニューヨーク・タイムズの記事へのAPIコールで、サプライヤーに関する最近の記事を検索すると、次のようになります。

"data ": {

		"nyt_data ": {

			"URI ":" https://api.nytimes.com/svc/search/v2/articlesearch.json?

			q ={ context.supplier.name }& api - key ={ properties.api_key }"

	}

}			

各スロットで使用できるコンテキストデータの更新されたリストについては、Coupaにお問い合わせください。

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

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

"properties ": {

		"USERNAME ": {

			"type ":" string "

		},

		"password ": {

			"type ":" string "

		}

	}

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

"data ": {

		"my_data ": {

			"METHOD ":"投稿",

			"URI ":" https://someurl.com/EVToken ",

			"body ":" grant_type = password&username = {{properties.username }}&

			password = {{properties.password }}"

		}

	}

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

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

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

"launch ": {

		"description ":"PretendCo税計算機サービス",

		"button_text ":"電卓を起動",

		"help_text ":"税金計算機はCoupaと統合されており、国際的な 

		カートの中に税金が入っています」

	}

ページ上のデータが変更され、パネルアプリでレンダリングされたデータに影響を与えるときに使用できる更新ボタンを追加します。これは、リクエスト行が更新されたときにカートパネルアプリに便利です。ユーザーは、[更新]ボタンをクリックして、パネルアプリでデータを更新できます。

これはブール値オプションで、アプリディスクリプターのパネルアプリにリフレッシュボタンを表示するために使用します。

"allow_refresh ": true

Allow_ refreshの使用方法 :

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

ボタンをクリックすると、そのアプリのコンテンツが更新されます。このフィールドは、ブロックではなく、「スロット」、「データ」、「起動」などと同じレベルに追加する必要があります。リフレッシュボタンはパネルアプリケーションの上部に表示されます。

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

タイプ

ブロックのタイプを識別します。たとえば、フィールド、テキスト、バーなどです。これにより、UIのパネルでブロックがどのようにレンダリングされるか、およびデータに必要な形式が決定されます。

data

このJSONオブジェクトには、戦略に応じて異なるプロパティがあります。

JQ

• typeは"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

}

詳細情報：

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

• gitHubのruby - jq gem

その他の物件

異なるブロックタイプは、そのブロックタイプに固有の他のプロパティを有することができる。

タイプ

同じ テキストにする必要があります

テキストブロックタイプは、リキッドマークダウンテンプレートを使用します。テンプレートは、最初にLiquidとして解析され、要求から返されるデータを補間します。その後、テンプレートは再びMarkdownとして解析され、HTMLが生成されます。

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

Markdownでは、ヘッダー、インライン強調フォーマット、リスト、画像、リンク、およびブロック引用符を使用できます。Coupaは、構文の強調表示と表もサポートしています。

LiquidとMarkdownの操作の詳細については、Liquidテンプレート言語とMastering Markdownを参照してください。

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

{

	 "foo ":" bar ",

	 "fizz ": {

			"buzz ":"バズ"

	 }

}

タイプ

同じ フィールドにする必要があります

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

[

	 {

			"label ":"フーバー",

			"value ":" fizzbuzz "

	 },

	 {

			"label ":"Lorem Ipsum ",

			"value ":42

	 }

]

type

バーまたはラインと等しくする必要があります

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

各配列は、表示される単一の一連のデータを表します。最初の要素は系列の名前であり、残りの要素は系列の点です。

[{

		"name ":"1800年",

		"data ": [107, 31, 635, 203, 2]

 }, {

		"name ":"1900年",

		"data ": [133, 156, 947, 408, 6]

 }, {

		"name ":"2000年",

		"data ": [814, 841, 3714, 727, 31]

 }, {

		"name ":"2016年",

		"data ": [1216, 1001, 4436, 738, 40]

}]

タイプ

等しい パイにしてください

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

[{

		名前:'Chrome ',

		年：20.41、

		スライス：真、

		選択済み：正

	}, {

		名前：'Internet Explorer ',

		年：11.84

	}, {

		名前：'Firefox ',

		年：10.85

	}, {

		名前：'Edge ',

		年：4.67

	}, {

		名前:'サファリ',

		年：4.18

	}, {

		名前:'そごうエクスプローラー',

		年：1.64

	}, {

		名前：'Opera ',

		年：2.8

	}, {

		名前：'その他',

		年：2.61

}]

タイプ

同額である必要があり ます

• 通貨の量を決定するためのJSON浮動小数点数。
• 通貨通貨のISO 4217通貨コードを含む文字列。

{

	"AMOUNT ":42.0、

	"通貨":"USD"

}

タイプ

数字に等しくする必要があります

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

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_BASE 64_ENCODED_TOKEN_HERE "}

		}

	}

"before_data ": {

		"auth ": {

			"METHOD ":"投稿",

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

			}

		}

	}