Eine eingebettete Panel-App erstellen

Gibt den Seitentyp an, an dem der Bereich gerendert wird. Aktuelle Optionen sind:

• user.home (Coupa-Startseite: / und /user/home )
• suppliers.show (Lieferantendetailseite: /suppliers/:id/record )
• items.show (Artikeldetailseite: /items/{id} )
• contracts.show (Seite mit Vertragsdetails: /contracts/show/:id )
• requisition_headers.edit (Coupa-Einkaufswagen: /requisition_headers/{id}/edit )

• invoices.show (Rechnungsdetailseiten, einschließlich der Bearbeitung von Rechnungen auf der Rechnungsbenutzeroberfläche der nächsten Generation: /invoices/{id} und /invoices/{id}/show_for_approval )

• receipts.full_receipt (Detaillierte Bestätigungsseite: /receipts/{id}/full_receipt )

• expenses.index (Ausgaben-Zielseite: /expenses )

• projects.show (Projektdetailseite: /projects/{id} )

• quotes/requests.show (Detailseite des Sourcing-Events: /quotes/requests/{id} )

• asn/headers.show (ASN-Detailseite: /asn/headers/{id} )

• receipts.full_receipt (Seite mit Belegdetails: /receipts/{id}/full_receipt )

{
	 "slot": "user.home"
 }

Pro Panel-App kann nur ein Slot angegeben werden. Um die App auf mehreren Seiten anzuzeigen, erstellen Sie die App erneut mit dem gewünschten slot Wert.

data

Das Datenattribut beschreibt, wie die gewünschten Daten abgerufen werden, die im Bereich gerendert werden.  Ein JSON-Objekt, das beschreibt, welche Daten zum Rendern des Bereichs abgerufen werden sollen. Die Werte in diesem Objekt sind URLs, an die Coupa eine Anfrage sendet, um Daten abzurufen. Die Antworten aus all diesen Datenanforderungen werden in einem Hash zusammengeführt, der unter dem Schlüsselnamen aliasiert wird, der ihnen in diesem Objekt zugewiesen ist.

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

Stück slot bietet kontextbezogene Details zu der Seite, auf der es angezeigt wird. Beispielsweise hat eine Panel-App, die auf einer Lieferantenanzeigeseite angezeigt wird, Zugriff auf kontextbezogene Daten zu diesem bestimmten Lieferanten. Sie können diese kontextbezogenen Informationen in Ihren Datenobjekten verwenden, aber nicht in blocks , Wenn also eine Panel-App auf der Anzeigeseite für "ACME-Lieferant" rendert, kann der API-Aufruf basierend auf dem Namen des Lieferanten, der Coupa-ID, den Werten benutzerdefinierter Felder und anderen Eigenschaften dieses Lieferanten angepasst werden.

Ein API-Aufruf für die Artikelsuche der NY Times für kürzliche Artikel ü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 Slot verfügbaren Kontextdaten zu erhalten.

Eine Reihe von Eigenschaften, die ein Benutzer/Administrator nach der Aktivierung Ihrer Panel-App bereitstellen muss. Wenn für Ihre App/API ein eindeutiger API-Schlüssel oder ein Anmelde-/Kennwort für jeden Coupa-Kunden erforderlich ist, der dies aktiviert, führen Sie diese Option folgendermaßen aus.

Ein Beispiel hierfür wäre:

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

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

"data": {
		"my_data": {
			"method": "post",
			"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 sich automatisch an den Drittanbieter zu wenden und die Daten darzustellen, reicht sie nur aus, wenn der Endbenutzer manuell auf die Schaltfläche "Starten" klickt.

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

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

Verwendung von launch :

• Verwenden, wenn die Daten in der Panel-App nur für bestimmte Geschäftsfälle auf der Seite relevant sind
• Auf derselben Ebene hinzufügen wie slot , data usw., aber nicht in blocks

Fügt eine Aktualisierungsschaltfläche hinzu, die verwendet werden kann, wenn sich Daten auf der Seite ändern, und wirkt sich auf die in der Panel-App gerenderten Daten aus. Dies ist praktisch für Ihre Einkaufswagen-Panel-App, wenn eine Anforderungsposition aktualisiert wird. Der Benutzer kann auf 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": true

Verwendung von allow_ refresh :

• Verwenden, wenn die für die App erforderlichen 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 "Slot", "Daten", "Starten" usw. hinzugefügt werden, aber nicht in Blöcken. Die Schaltfläche "Aktualisieren" wird oben in der Panel-Anwendung angezeigt.

Das blocks-Attribut beschreibt, wie Daten im Bereich gerendert werden. Es ist ein Array von JSON-Objekten ("Blöcke") verschiedener Typen, die jeweils eine separate Visualisierung beschreiben. Blöcke haben Zugriff auf die zuvor gesendeten Daten und verwenden sie, um Visualisierungen zu erstellen.

type

Identifiziert den Blocktyp. Zum Beispiel, fields , text , oder bars , Dadurch wird bestimmt, wie der Block im Bereich auf der Benutzeroberfläche gerendert wird, sowie das erforderliche Format für die Daten.

data

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. Dem JQ-Skript wird die zusammengeführte Datenstruktur aus dem Datenattribut als Eingabe zugeführt und es muss eine JSON-Struktur erstellt werden, die dem für den Blocktyp erforderlichen Format entspricht.

Verarbeitung von Daten mit JQ

Beispielsweise könnte das folgende JQ-Skript verwendet werden, um mehrere spezifische Daten zu extrahieren und sie in ein anderes JSON-Objekt umzupacken:

{
	 "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 produziert wird:

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

Weitere Informationen:

• JQ 1.6 manuell oder JQ auf GitHub

• ruby-jq gem auf GitHub

other properties

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

type

Muss gleich sein text

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

Markdown bietet eine sichere Methode zum Generieren von HTML. Aus Sicherheitsgründen blockiert Coupa Inline-HTML in der Vorlage. Es gibt keine Zeichenbegrenzung außer der maximalen Grenze der Datenspalte, in der die Blockkonfiguration gespeichert ist.

Markdown ermöglicht Kopfzeilen, Formatierung von Inline-Betonung, Listen, Bilder, Links und Blockquotes. Coupa unterstützt auch Syntaxhervorhebung und Tabellen.

Ausführliche Informationen zum Arbeiten 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"
	 }
}

type

Muss gleich sein field

Die Datenstrategie muss ein Array von JSON-Objekten mit Label- und Wertattributen erzeugen. Beim Rendering wird die Beschriftung als Feldbeschriftung und der Wert als Feldwert verwendet.

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

type

Muss gleich sein bar oder line

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

Jedes Array stellt eine einzelne Datenreihe dar, die angezeigt wird. Das erste Element ist der Name der Serie, dann sind die verbleibenden Elemente die Punkte in der Serie.

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

Muss gleich sein Torte

Die Datenstrategie muss ein spaltenorientiertes Array von Arrays erstellen, wie im Abschnitt Balken-/Zeilenblock beschrieben.

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

Muss gleich sein Geld

• Betrag eines JSON-Gleitkommas, um den Währungsbetrag zu bestimmen.
• Währung ist eine Zeichenfolge, die den Währungscode nach ISO 4217 der Währung enthält.

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

Type

Muss gleich sein Zahlen

Die Datenstrategie muss eine einzelne JSON-Ganzzahl oder einen Gleitkommawert 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": {"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

custom_fields: object.supplier.custom_field_values_hash

id , event_name , event_commodity , project_id , supplier_id und alle benutzerdefinierten Felder und Tags