Eine eingebettete Panel-App erstellen

Erfahren Sie, wie Sie Panel-Apps für bestimmte Seiten in Coupa erstellen.

Einleitung

Panel-Apps ermöglichen es Kunden, Daten aus externen Quellen in einem UI-Panel auf einer bestimmten Coupa-Seite anzuzeigen. Diese Daten können kontextspezifisch sein und automatisch oder manuell aktualisiert werden. Wenn beispielsweise eine Lieferantenseite in Coupa geladen wird, kann eine Panel-App auf dieser Seite automatisch Daten von einer externen Quelle über die API abrufen, die sich auf diesen bestimmten Lieferanten bezieht, und die Daten in Coupa anzeigen.

Erstellen Sie eine Panel-App, indem Sie Konfiguration > Plattform > Installierte Apps und klicken Sie auf Erstellen und dann die Option: Neue Panel-App erstellen , Der Schlüssel zum Erstellen und Konfigurieren einer Panel-App ist der Descriptor, ein Parametersatz im JSON-Format für Ihre App.

Hier ist eine Beispiel-Panel-App auf der Coupa-Startseite.

Beispiel-Panel-App auf der Coupa-Startseite

Sie können eine Panel-App erstellen, indem Sie Konfiguration > Plattform > Installierte Apps , Klicken Sie auf Erstellen und wählen Sie Neue Panel-App erstellen ,

Anforderungen

Ab R29 benötigen Panel-Apps mindestens TLS v1.2 um ausgehende Verbindungen mit APIs von Drittanbietern herzustellen.

Panel-App-Grundlagen

Panel-Apps werden unter Verwendung eines App-Deskriptors im JSON-Format erstellt. Der Deskriptor besteht aus zwei Haupteigenschaften: Daten und Blöcke. Daten werden verarbeitet mit JQ v1.6 ,

Eigenschaft Beschreibung
slot

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


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.

API-Aufrufe parametrisieren (Eigenschaften)

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.

launch

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
allow_refresh

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.

blocks

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.

error_blocks Das Attribut Fehlerblöcke funktioniert ähnlich wie das Attribut Blöcke, wird aber verwendet, um Fehlermeldungen zu erstellen, wenn es ein Problem beim Abrufen oder Rendern der Daten gibt.

Daten werden abgerufen

Wir werden Apps erlauben, bis zu 5 separate HTTP-Aufrufe durchzuführen, um Daten für die App abzurufen. Diese werden mit dem Datenattribut im Deskriptor angegeben. API-Aufrufe sollten entweder JSON (bevorzugt) oder XML zurückgeben.

Panel-App-Blocktypen

Panel-App stellt diese Daten auf einer vorhandenen Coupa-Seite unter Verwendung verschiedener Typen von Benutzeroberflächenelementen dar, die als Blöcke , Coupa unterstützt die folgenden Blocktypen:

  • Rich-Text (einschließlich Bilder)
  • Felder (im Wesentlichen Schlüssel-Wert-Paare)
  • Nummer
  • Geldmittel
  • Kreisdiagramm
  • Grafik Zeile/Balken/Spalte
  • Starten
  • Aktualisieren

App-Konfiguration

Attribut Beschreibung

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:

other properties

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

Panel-App-Blocktypen

Textblock

Attribut Beschreibung

type

Muss gleich sein text

template

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 ,

data

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

Derzeit ist ein Textblock die beste/einzige Möglichkeit, Daten in einer Tabelle anzuzeigen, indem das Kramdown Tabellenformat.

Feldblock

Eigenschaft Beschreibung

type

Muss gleich sein field

data

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
	 }
]
title Ein optionaler Titel, der über der Liste der Felder angezeigt wird.

Balken-/Zeilenblock

Eigenschaft Beschreibung

type

Muss gleich sein bar oder line

data

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]
}]
axis Ermöglicht die Konfiguration der Beschriftungen auf der x- und y-Achse.
title Ein optionaler Titel, der über dem Diagramm angezeigt wird.
description Eine Optionsbeschreibung, die unter dem Diagramm in kleinerem Text angezeigt wird.

Kreisblock

Eigenschaft Beschreibung

type

Muss gleich sein Torte

data

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
}]
title Ein optionaler Titel, der über dem Diagramm angezeigt wird.
description Eine Optionsbeschreibung, die unter dem Diagramm in kleinerem Text angezeigt wird.

Geldsperre

Eigenschaft Beschreibung

type

Muss gleich sein Geld

data Die Datenstrategie muss ein JSON-Objekt mit der folgenden Struktur erzeugen:
  • 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"
}
Title Ein optionaler Titel, der über der Zahl angezeigt wird.
Description Eine optionale Beschreibung, die unter der Zahl in kleinerem Text angezeigt wird.

Nummernblock

Eigenschaft Beschreibung

Type

Muss gleich sein Zahlen

Data

Die Datenstrategie muss eine einzelne JSON-Ganzzahl oder einen Gleitkommawert erzeugen.


42.0
Decimal Die Anzahl der Dezimalstellen, die nach dem Dezimalpunkt angezeigt werden sollen. Der Standardwert ist 0.
Title Ein optionaler Titel, der über der Zahl angezeigt wird.
Description Eine optionale Beschreibung, die unter der Zahl in kleinerem Text erscheint.Beispiel-Panel-Apps

Benutzerdefinierte Felder

Der Zugriff auf benutzerdefinierte Felder in einem kontextbezogenen Objekt erfolgt in diesem allgemeinen Format:
context.<object>.custom_fields.<field_name>

Wo <field_name> ist die Feldname Aufforderung beim Erstellen eines benutzerdefinierten Felds:

cf_fields.png

Da wir uns das Lieferantenobjekt ansehen und ein Feld, Telefonnummer, haben, würden Sie folgendermaßen darauf verweisen:
context.supplier.custom_fields.phone_number

Slot Accessor für benutzerdefiniertes Feld
Contracts.show context.contract.custom_fields.
Projekte.anzeigen context.project.custom_fields.
quotes/requests.show context.quote_request.custom_fields.
requisition_headers.edit context.requisition_header.custom_fields.
Lieferanten.anzeigen context.supplier.custom_fields.

Benutzerdefinierte Felder sind nicht anwendbar für Slots, die nicht auf ein bestimmtes Objekt verweisen, wie:

  • user.home
  • expenses.index

API-Details

Authentifizierung

Coupa unterstützt die folgenden Authentifizierungstypen:

Methode Beispiel
Standard-API-Schlüssel

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

"data": {
		"trip_data": {
			"uri": "https://someurl.net/trips",
			"headers": {"Authorization":"basic YOUR_BASE64_ENCODED_TOKEN_HERE"}
		}
	}
Anforderung für kurzlebige Token unter Verwendung der Anforderung "before_data"

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

  • URLs müssen HTTPS sein
  • URLs müssen für Coupa-Server zugänglich sein (d. h. eine HEAD-Anforderung muss erfolgreich sein)
  • URLs müssen erfolgreich als gültige Liquid-Vorlagen analysiert werden. Dies dient der Interpolation

API-Anforderungsdetails

  • Wenn Daten mit Liquid in die URLs interpoliert werden, muss das Ergebnis eine gültige URL sein
  • Antwortcode muss 200 oder 204 sein
  • Der Remoteserver muss innerhalb eines Zeitraums von 5 Sekunden antworten
  • Antwortinhaltstyp muss entweder application/json oder application/xml

Schaltflächen

Sie können eine Schaltfläche "Starten" ( launch ) und ein Schaltfläche Aktualisieren ( allow_refresh ) für Ihre Panel-Apps. Obwohl die Funktionalität wie ein Block aussieht und sich anfühlt, sind Schaltflächen technisch gesehen keine Blöcke. Sie finden Details zu den Schaltflächen im Panel-App-Grundlagen Abschnitt dieses Artikels. für weitere Informationen.

Panel-App-Kontext

Sie können Panel-Apps für die folgenden Seiten erstellen:

  • Homepage: / und /user/home
  • Lieferantenseite: /suppliers/:id/record
  • Seite Verträge: /contracts/show/:id
  • Einkaufswagen: /requisition_headers/{id}/edit
  • Projekt-Startseite: projects.show
  • Seite "Einstellungen Sourcing-Event": quotes/requests.show

Jeder Panel-App-Typ hat seine eigene Kontext-Payload. Unten finden Sie die Felder, die in der Panel-Apps-API-Payload bereitgestellt werden, die als Kontext verwendet werden, um Daten abzugleichen und zu finden.

Seite Verfügbare Felder
Alle Panel-Apps user_instance (d. h. [Domänenname].coupahost.com) ist in der Payload enthalten.
Startseite id , email , fullname , login , employee_number
Rechnung anzeigen/bearbeiten

invoice_id , invoice_date , invoice_number , supplier_name , supplier_number , supplier_id

Lieferantenseite

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

custom_fields: object.supplier.custom_field_values_hash

Vertragsseite id , parent_contract_id , name , number , version , supplier_id , start_date , status
Einkaufswagen Die Einkaufswagen-Panel-App-Payload enthält dieselben Felder wie die Anforderungskopf-API-Payload
Projekte Alle Projektsystemfelder und benutzerdefinierten Felder
Beschaffungsereignis

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

Panel-App-Beispiele

Artikelsuche in New York Times

Diese App fügt die neuesten Nachrichten über den Lieferanten aus der New York Times auf der Seite des Lieferanten hinzu. Sie müssen eine NYT API-Schlüssel um dieses hier zum Laufen zu bringen.

nyt-article-search.png

Dies ist der Code, der die App steuert.

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

Wetterpanel-App

Diese Beispiel-App zeigt die grafische Darstellung von Temperaturaspekten eines Standorts. Sie müssen eine API-Schlüssel um dieses hier zum Laufen zu bringen.

weather-app-example.png

Dies ist der Code, der die App steuert.

{
	"properties": {},
	"slot": "suppliers.show",
	"data": {
		"chicago_data": {
			"method": "get",
			"uri": "https://api.openweathermap.org/data/2.5/weather?q=Chicago&appid=155057bc8e3dde82a6482e76bddf9c10&units=imperial"
		}
	},
	"blocks": [
		{
			"type": "bar",
			"title": "Here's the weather in Chicago",
			"data": {
				"type": "jq",
				"jq": "[{name: \"Temp\", data: [.chicago_data.main.temp]}, {name: \"Wind Speed\", 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, max temp for Chicago\", data: [[.chicago_data.main.temp_min], [.chicago_data.main.temp], [.chicago_data.main.temp_max]] }, {name: \"Fake data not from API\", data: [44, 52, 130, 87, 74, 88] }]"
			},
			"axes": {
				"xAxis": {
					"labels": {
						"enabled": true
					},
					"categories": [
						"Jan",
						"Feb",
						"Mar",
						"Apr",
						"May",
						"June"
					]
				},
				"yAxis": {
					"title": {
						"text": ""
					},
					"max": 200
				}
			}
		}
	]
}

Panel-App-API-Beispiel

Unten sehen Sie den App-Deskriptor, der für einen automatisierten Test verwendet wird. Wir untersuchen die API-Antwort, um genau Folgendes zurückzugeben:

[	
	{	
		"data_title":"Title",
		"data_number":42,
		"second_score":88
	}
]
 
{
	# Here is where you'd setup client specific fields. Like login/password. The customer would be prompted to fill in
	# those values once, when activating the application
	"properties": {},
	# This is the page where the app gets displayed. See the "slot" property for possible values.	
	"slot": "suppliers.show",	 
	# Some APIs require a bearer token, or a 2-step process, this is where you handle that.
	"before_data": {}, 
	"data": {
		"coupa_data": {
			# You can add context specific values to this API call, {{context.contract.supplier_name}} for example
			"uri": "http://fake.test", 
			# This works intuitively, just specify your API headers here, Bearer token, params, etc.
			"headers": {} 
		}
	},
	"blocks": [
		{
			"type": "number",
			# This is hard-coded title for this block, cant use api data, or contextual data here	
			"title": "Title for number block",
			# "coupa_data" was the API response above, .[0] returns the stuff in the {}, ".data_number" gets the value, 
			# in this case "42"
			"data": {
				"type": "jq",
				"jq": ".coupa_data | .[0] | .data_number"	
			}
		}, 
			# So this block renders a specially formatted number block, with the number "42" in large bold font, 
			# and a text label/title of "Title for number block"
		{
			# Fields block has some of the strictest requirements for data, It displays all data in key -> value pairs
			"type": "fields",
			"data": {
				"type": "jq",
				"jq": ".coupa_data | .[] | to_entries | map({ label: .key, value: .value })" 
			}
		},
		{
			# For this block, we are just going to pull the hash out from the [] and use the values inside it
			"type": "text",
			"data": {
				"type": "jq",
				"jq": " .coupa_data | .[0]"
			},
			# Text blocks gives you a lot of flexibility for displaying data from the API response in context.
			# The text can be formatted just like markup, so you can create links, tables, render/resize images, etc.	 
			"text": "{{ data_number }}	is the data_number" 
		},
		{
			# Setting up the bar graph is pretty tricky, maybe work with us if you want to go this route.
			# But this example creates a bar graph with values/labels bar sizes based on the values in the API response
			"type": "bar",
			"title": "Bar graph with fake data",
			"data": {
				"type": "jq",
				"jq": "[{name: \"Overall Score\", data: [.coupa_data | .[0].data_number]}, 
								{name: \"Environment score\", data: [.coupa_data | .[0].second_score]}]" 
			},
			"axes": {"xAxis": {"labels": { "enabled": false}}, "yAxis": {"title": { "text": ""}, "max": 100} }
		}
	]
}

Test in der Instanz des Partners

Um dies in Coupa zu testen, müssen Sie Version R25.0 oder höher verwenden.  Am Ende wird Ihre App Teil des App-Verzeichnisses und keine benutzerdefinierte Panel-App sein. Mit diesen Schritten können Sie jedoch selbst testen, bevor Coupa die App offiziell zum App-Verzeichnis hinzufügt.

  1. Wählen Sie Konfiguration
  2. Klicken Sie unter Plattform auf "Installierte Apps"
  3. Klicken Sie auf die Schaltfläche "Erstellen" und wählen Sie dann "Neue Panel-App erstellen"
  4. App erstellen
  5. Einen Namen hinzufügen
  6. Fügen Sie im Deskriptorabschnitt den oben aufgeführten Code ein

Wenn keine Fehler aufgetreten sind, wird auf jeder Lieferantenseite eine Panel-App angezeigt.

Parts or all of this page might have been machine-translated. We apologize for any inaccuracies.

Vergleichbare Artikel


Coupa Core API

Unsere RESTful-API bietet robusten Zugriff auf das Lesen, Bearbeiten oder Integrieren Ihrer Daten mit der Coupa-Plattform.

Ressourcen

Wir haben unsere API-Endpunkte nach Objekttyp geordnet: Referenzdaten, Transaktionsdaten und freigegebene Ressourcen.

Referenzdaten-Ressourcen

Referenzdaten werden verwendet, um die Kernkomponenten von Coupa wie Benutzer, Lieferanten, Konten usw. einzurichten.

Transaktionsressourcen

Wenn Benutzer Coupa verwenden, werden Transaktionsdaten wie Anforderungen, Bestellungen und Rechnungen erstellt.