Erstellen Sie ein Panel

Legt den Seitentyp fest, auf dem das Panel gerendert wird. Aktuelle Optionen sind:

• user.home (Coupa Homepage:/und/user/home )
• suppliers.show (Lieferanten-Detailseite:/suppliers/:id/record )
• supplier_order_headers.show
• items.show (Artikeldetailseite:/items/{id} )
• contractss.show (Vertragsdetailseite:/contracts/show/:id )
• requisition_headers.edit (Coupa-Warenkorb:/requisition_headers/{id}/edit )
• invoices.show (Rechnungsdetailseiten, einschließlich der Bearbeitung von Rechnungen auf der Rechnungs-UI der nächsten Generation:/invoices/{id} und/invoices/{id}/show_for_approval )
• receipts.full_receipt (Detaillierte Belegseite:/receipts/{id}/full_receipt )
• expenses.index (Spesen Landingpage:/Spesen )
• projects.show (Projektdetailseite:/projects/{id} )
• quotes/requests.show (Sourcing-Event-Detailseite:/quotes/requests/{id} )
• asn/headers.show (ASN-Detailseite:/asn/headers/{id} )
• asn/supplier_headers.show
• budget_lines.show (budget lines page:/budget_lines/{id})

{

	 "slot": "user.home"

 }

Pro Panel-App kann nur ein Steckplatz angegeben werden. Damit die App auf mehreren Seiten angezeigt wird, erstellen Sie die App erneut mit dem gewünschten Slot-Wert.

daten

Das DATA-Attribut beschreibt, wie die gewünschten Daten abgerufen werden, die im Bedienfeld gerendert werden.  Ein JSON-Objekt, das beschreibt, welche Daten zum Rendern des Panels abgerufen werden sollen. Die Werte in diesem Objekt sind URLs, an die Coupa eine Anforderung sendet, um Daten abzurufen. Die Antworten aus allen diesen Datenanforderungen werden zu einem Hash zusammengeführt, der unter dem Schlüsselnamen steht, der ihnen in diesem Objekt zugewiesen wurde.

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

	}

}

Jeder Slot bietet kontextbezogene Details über die Seite, auf der er angezeigt wird. Zum Beispiel hat eine Panel-App, die auf einer Lieferanten-Show-Seite angezeigt wird, Zugriff auf Kontextdaten zu diesem bestimmten Lieferanten. Sie können diese Kontextinformationen in Ihren Datenobjekten verwenden, jedoch nicht in Blöcken. Wenn also eine Panel-App auf der Show-Seite für "ACME Supplier" gerendert wird, kann der API-Aufruf basierend auf dem Namen des Lieferanten, der Coupa-ID, den benutzerdefinierten Feldwerten und anderen Eigenschaften dieses Lieferanten angepasst werden.

Ein API-Aufruf zur NY Times-Artikelsuche nach aktuellen Artikeln über einen Lieferanten würde wie folgt aussehen:

"data": {

		"nyt_data": {

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

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

	}

}			

Wenden Sie sich an Coupa, um eine aktualisierte Liste der für jeden Steckplatz verfügbaren Kontextdaten zu erhalten.

Ein Array von Eigenschaften, die ein Benutzer/Administrator nach der Aktivierung Ihrer Panel-App bereitstellen muss. Wenn Ihre App/API für jeden Coupa-Kunden, der sie aktiviert, einen eindeutigen API-Schlüssel oder ein Login/Passwort benötigt, stellen Sie diese Option folgendermaßen bereit.

Ein Beispielblock wäre:

"properties": {

		"username": {

			"type": "Zeichenfolge"

		},

		"password": {

			"type": "Zeichenfolge"

		}

	}

Sie verweisen dann in den Datenblöcken wie folgt auf Ihre Eigenschaften:

"data": {

		"my_data": {

			"method": "Posten",

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

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

			password={{ properties.password }}"

		}

	}

Wenn ein Coupa-Administrator eine neue Panel-App aktiviert, wird er aufgefordert, alle in Ihrem App-Deskriptor angegebenen „Eigenschaften“ -Felder auszufüllen.

Fügt eine Startschaltfläche hinzu, die verwendet werden kann, wenn eine Panel-App nicht sofort angezeigt werden muss. Anstatt dass sich die Panel-App automatisch an den Drittanbieter wendet und die Daten rendert, wendet sie sich nur, wenn der Endbenutzer manuell auf die Schaltfläche Starten klickt.

Dieses JSON-Objekt enthält description, button_text und help_text. Beispiel:

"launch": {

		"Beschreibung": "PretendCo Steuerrechner-Service",

		"button_text": "Taschenrechner starten",

		"help_text": "Der Steuerrechner lässt sich in Coupa integrieren, um Ihnen bei der Berechnung internationaler 

		steuern, direkt im Einkaufswagen."

	}

Verwendung von Launch:

• Verwenden, wenn die Daten in der Panel-App nur für bestimmte Geschäftsfälle innerhalb der Seite relevant sind
• Auf der gleichen Ebene wie Steckplatz, Daten usw. hinzufügen, aber nicht in Blöcken

Fügt eine Aktualisierungsschaltfläche hinzu, die verwendet werden kann, wenn sich die Daten auf der Seite ändern und sich auf die in der Panel-App gerenderten Daten auswirken. Dies ist praktisch für Ihre Warenkorb-Panel-App, wenn eine Anforderungszeile aktualisiert wird. Der Benutzer kann auf die Schaltfläche Aktualisieren klicken, um die Daten in der Panel-App zu aktualisieren.

Diese boolesche Option wird verwendet, um eine Aktualisierungsschaltfläche in der Panel-App im App-Deskriptor anzuzeigen:

"allow_refresh": wahr

Verwendung von allow_ refresh:

• Verwenden, wenn die von der App benötigten Daten vom Benutzer aktualisiert werden können und die App die neuen Daten benötigt

Wenn Sie darauf klicken, aktualisiert die Schaltfläche den Inhalt dieser App. Dieses Feld sollte auf der gleichen Ebene wie "Steckplatz", "Daten", "Start" usw. hinzugefügt werden, jedoch nicht in Blöcken. Die Schaltfläche „Aktualisieren“ wird oben in der Panel-Anwendung angezeigt.

Das Attribut blocks beschreibt, wie Daten im Panel gerendert werden. Es handelt sich um ein Array von JSON-Objekten („Blöcken“) verschiedener Typen, die jeweils eine separate Visualisierung beschreiben. Blöcke haben Zugriff auf die zuvor gesendeten Daten und verwenden diese, um Visualisierungen zu erstellen.

typ

Identifiziert den Blocktyp. Zum Beispiel Felder , Text oder Balken. Dadurch wird bestimmt, wie der Block im Bedienfeld auf der Benutzeroberfläche gerendert wird, und auch das erforderliche Format für die Daten.

daten

Dieses JSON-Objekt hat je nach Strategie unterschiedliche Eigenschaften.

JQ

• typ muss gleich "jq" sein

• jq ist eine Zeichenfolge, die ein JQ-Skript enthält. Das JQ-Skript erhält die zusammengeführte Datenstruktur aus dem Datenattribut als Eingabe und muss eine JSON-Struktur erzeugen, die zum gewünschten Format für den Blocktyp passt.

Verarbeitung von Daten mit JQ

Beispielsweise könnte das folgende JQ-Skript verwendet werden, um mehrere spezifische Datenelemente zu extrahieren und in einem anderen JSON-Objekt neu zu verpacken:

{

	 "username": ".study_queue.user_information.username",

	 "radicals": ".level_progression.requested_information.radicals_progress",

	 "kanji": ".level_progression.requested_information.kanji_progress"

}

Dies würde dazu führen, dass das folgende JSON-Objekt erzeugt wird:

{

	 "username": "example_user",

	 „Radikale“: 0,

	 "kanji": 0

}

Mehr Informationen:

• JQ 1.6 Handbuch oder JQ auf GitHub

• ruby-jq gem auf GitHub

andere Eigenschaften

Verschiedene Blocktypen können andere Eigenschaften aufweisen, die für diesen Blocktyp spezifisch sind.

typ

Muss gleicher Text sein

Der Textblocktyp verwendet eine Liquid Markdown-Vorlage. Die Vorlage wird zunächst als Liquid geparst, um die Daten zu interpolieren, die von den Anforderungen zurückgegeben werden. Anschließend wird die Vorlage erneut als Markdown geparst, um das HTML zu generieren.

Markdown bietet eine sichere Methode zum Generieren von HTML, und aus Sicherheitsgründen blockiert Coupa Inline-HTML in der Vorlage. Es gibt kein Zeichenlimit außer dem maximalen Limit der Datenspalte, in der die Konfiguration des Blocks gespeichert ist.

Markdown ermöglicht Kopfzeilen, Inline-Hervorhebungsformatierungen, Listen, Bilder, Links und Blockzitate. Coupa unterstützt auch Syntaxhervorhebung und Tabellen.

Ausführliche Informationen zur Arbeit mit Liquid und Markdown finden Sie unter Liquid-Vorlagensprache und Mastering Markdown.

Die Datenstrategie muss ein einzelnes JSON-Objekt erzeugen. Alle Schlüssel im Objekt stehen der Liquid-Vorlage als Variablen zur Verfügung

{

	 "foo": "Bar",

	 "fizz": {

			"Buzz": "Buzz"

	 }

}

typ

Muss gleich sein Feld

Die Datenstrategie muss ein Array von JSON-Objekten mit Label- und Value-Attributen erzeugen. Beim Rendern wird die Bezeichnung als Feldbezeichnung und der Wert als Feldwert verwendet.

[

	 {

			"label": "Foobar",

			"value": "Fizzbuzz"

	 },

	 {

			"label": "Lorem Ipsum",

			"value": 42

	 }

]

typ

Muss gleich Balken oder Linie sein

Die Datenstrategie muss ein Array von Arrays erzeugen. Im Gegensatz zum Tabellenblock sind die Daten für Balken-/Liniendiagramme spaltenorientiert.

Jedes Array stellt eine einzelne Reihe von Daten dar, die angezeigt werden. Das erste Element ist der Name der Reihe, dann sind die verbleibenden Elemente die Punkte in der Reihe.

[{

		"Name": "Jahr 1800",

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

 }, {

		"name": "Jahr 1900",

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

 }, {

		"name": "Jahr 2000",

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

 }, {

		"name": "Jahr 2016",

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

}]

typ

Muss gleich Kuchen sein

Die Datenstrategie muss ein spaltenorientiertes Array von Arrays erzeugen, wie im Abschnitt Balken/Linienblock beschrieben.

[{

		name: 'Chrome',

		jahr: 20,41,

		geschnitten: wahr,

		ausgewählt: wahr

	}, {

		name: 'Internet Explorer',

		jahr: 11.84

	}, {

		name: 'Firefox',

		jahr: 10.85

	}, {

		name: 'Edge',

		jahr: 4.67

	}, {

		name: 'Safari',

		jahr: 4.18

	}, {

		name: 'Sogou Explorer',

		jahr: 1.64

	}, {

		name: 'Oper',

		jahr: 2.8

	}, {

		name: 'Andere',

		jahr: 2.61

}]

typ

Muss gleich Geld sein

• Betrag eines JSON-Floats, um den Betrag der Währung zu bestimmen.
• Die Währung ist eine Zeichenfolge, die den ISO 4217-Code der Währung enthält.

{

	"Betrag": 42,0,

	"currency": "USD"

}

Typ

Muss gleiche Zahlen sein

Die Datenstrategie muss eine einzelne json Integer oder Float erzeugen.

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": {"Autorisierung":"basic YOUR_BASE64_ENCODED_TOKEN_HERE"}

		}

	}

"before_data": {

		"auth": {

			"method": "Posten",

			"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": "Inhaber {{ before_data.auth.access_token }}"

			}

		}

	}