Créer une application de panneau intégré

Spécifie le type de page dans lequel le panneau sera affiché. Les options actuelles sont :

• user.home (Page d’accueil Coupa : / et /user/home )
• suppliers.show (page de détails du fournisseur : /suppliers/:id/record )
• items.show (page des détails de l'article : /items/{id} )
• contracts.show (page des détails du contrat : /contracts/show/:id )
• requisition_headers.edit (panier d'achat Coupa : /requisition_headers/{id}/edit )

• invoices.show (pages de détails des factures, y compris la modification des factures sur l'interface de facturation de nouvelle génération : /invoices/{id} et /invoices/{id}/show_for_approval )

• receipts.full_receipt (Page de reçu détaillé : /receipts/{id}/full_receipt )

• expenses.index (Page de destination des dépenses : /expenses )

• projects.show (page de détails du projet : /projects/{id} )

• quotes/requests.show (page des détails de l'appel d'offres : /quotes/requests/{id} )

• asn/headers.show (page de détails ASN : /asn/headers/{id} )

• receipts.full_receipt (page des détails du reçu : /receipts/{id}/full_receipt )

{
	 "slot": "user.home"
 }

Un seul emplacement peut être spécifié par application de panneau. Pour que l'application apparaisse sur plusieurs pages, créez-la à nouveau avec le nom souhaité slot valeur.

data

L'attribut data décrit comment récupérer les données souhaitées qui sont affichées dans le panneau.  Objet JSON qui décrit les données à récupérer pour le rendu du panneau. Les valeurs de cet objet seront des URL auxquelles Coupa enverra une demande afin de récupérer des données. Les réponses de toutes ces demandes de données seront fusionnées en un seul hachage, avec un alias sous le nom de clé qui leur est donné dans cet objet.

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

Chacun(e) slot fournit des détails contextuels sur la page sur laquelle elle est affichée. Par exemple, une application de panneau affichée sur une page d'affichage de fournisseur aura accès aux données contextuelles sur ce fournisseur spécifique. Vous pouvez utiliser ces informations contextuelles dans vos objets de données, mais pas dans blocks , Ainsi, lorsqu'une application de panneau s'affiche sur la page d'affichage de « Fournisseur ACME », l'appel API peut être personnalisé en fonction du nom du fournisseur, de l'ID coupa, des valeurs de champ personnalisé et d'autres propriétés de ce fournisseur.

Un appel API à la recherche d'articles du New York Times pour des articles récents sur un fournisseur ressemblerait à ceci :

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

Contactez Coupa pour obtenir une liste actualisée des données contextuelles disponibles pour chaque emplacement.

Tableau de propriétés qu'un utilisateur/administrateur doit fournir après avoir activé votre application Panel. Si votre application/API nécessite une clé API unique ou un identifiant/mot de passe pour chaque client Coupa qui l'active, voici comment vous pouvez fournir cette option.

Voici un exemple de bloc :

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

Vous référencez ensuite vos propriétés dans les blocs de données comme suit :

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

Lorsqu'un administrateur Coupa active une nouvelle application de panneau, il est invité à remplir tous les champs de « propriétés » spécifiés dans votre descripteur d'application.

Ajoute un bouton de lancement qui peut être utilisé lorsqu'une application Panel n'a pas besoin d'être affichée immédiatement. Plutôt que d'être transmise automatiquement à un tiers et de restituer les données, l'application ne le fait que si l'utilisateur clique manuellement sur le bouton Lancer.

Cet objet JSON inclut description , button_text et help_text , Par exemple :

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

Comment utiliser launch :

• Utiliser si les données de l'application Panel ne concernent que des business cases spécifiques de la page
• Ajouter au même niveau que slot , data , etc., mais pas dans blocks

Ajoute un bouton Actualiser qui peut être utilisé lorsque les données de la page changent et affecte les données affichées dans l'application Panel. Ceci est pratique pour votre application de panneau de panier lorsqu'une ligne de demande est mise à jour. L'utilisateur peut cliquer sur le bouton Actualiser pour mettre à jour les données dans l'application Panel.

Cette option booléenne est utilisée pour afficher un bouton d'actualisation sur l'application Panel dans le descripteur d'application :

"allow_refresh": true

Comment utiliser allow_ refresh :

• Utiliser si les données requises par l'application peuvent être mises à jour par l'utilisateur et si l'application a besoin des nouvelles données

Lorsque vous cliquez dessus, le bouton actualise le contenu de cette application. Ce champ doit être ajouté au même niveau que « slot », « data », « lancement », etc., mais pas en blocs. Le bouton Actualiser apparaît en haut de l'application du panneau.

L'attribut blocs décrit comment afficher les données dans le panneau. Il s'agit d'un tableau d'objets JSON ("blocs") de différents types qui décrivent chacun une visualisation distincte. Les blocs ont accès aux données précédemment envoyées et les utilisent pour créer des visualisations.

type

Identifie le type de bloc. Par exemple, fields , text , ou bars , Cela déterminera la façon dont le bloc est rendu dans le panneau de l'interface utilisateur, ainsi que le format requis pour les données.

data

Cet objet JSON aura des propriétés différentes selon la stratégie.

JQ

• le type doit être égal à "jq"

• jq est une chaîne qui contient un script JQ. Le script JQ reçoit la structure de données fusionnée de l'attribut de données comme entrée et doit produire une structure JSON qui correspond au format requis pour le type de bloc.

Traitement des données avec JQ

Par exemple, le script JQ suivant peut être utilisé pour extraire plusieurs données spécifiques et les reconditionner dans un autre objet JSON :

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

L'objet JSON suivant est ainsi créé :

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

Plus d'informations :

• Manuel JQ 1.6 ou JQ sur GitHub

• gemme ruby-jq sur GitHub

other properties

Différents types de blocs peuvent avoir d'autres propriétés spécifiques à ce type de bloc.

type

Doit être égal à text

Le type de bloc de texte utilise un modèle de marquage liquide. Le modèle est d'abord analysé en tant que Liquide pour interpoler les données qui sont retournées par les demandes. Ensuite, le modèle est analysé à nouveau sous Markdown pour générer le code HTML.

Markdown fournit une méthode sûre pour générer du HTML et, pour des raisons de sécurité, Coupa bloque le HTML en ligne dans le modèle. Il n'y a pas de limite de caractères autre que la limite maximale de la colonne de données qui stocke la configuration du bloc.

Le balisage permet de mettre en en-têtes, de mettre en évidence les en-têtes, listes, images, liens et citations. Coupa prend également en charge la coloration syntaxique et les tableaux.

Pour plus d'informations sur l'utilisation de Liquid et Markdown, consultez Langue du modèle liquide et Maîtriser le Markdown ,

La stratégie de données doit produire un seul objet JSON. Toutes les clés de l'objet seront disponibles pour le modèle Liquide en tant que variables.

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

type

Doit être égal à field

La stratégie de données doit produire un tableau d'objets JSON avec des attributs d'étiquette et de valeur. Lors du rendu, l'étiquette sera utilisée comme étiquette de champ et la valeur sera utilisée comme valeur de champ.

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

type

Doit être égal à bar ou line

La stratégie de données doit produire un tableau de tableaux. Contrairement au bloc de tableau, les données des graphiques à barres/courbes seront orientées colonne.

Chaque tableau représente une seule série de données qui seront affichées. Le premier élément est le nom de la série, les autres éléments sont les points de la série.

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

Doit être égal à tarte

La stratégie de données doit produire un tableau de tableaux orienté colonne, comme décrit dans la section Bloc de barres/lignes.

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

Doit être égal à argent

• Montant d'un JSON Float pour déterminer le montant de la devise.
• Devise chaîne contenant le code de devise ISO 4217 de la devise.

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

Type

Doit être égal à nombres

La stratégie de données doit produire un entier JSON unique ou un nombre à virgule flottante.

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

champs_personnalisés : object.supplier.custom_field_values_hash

id , event_name , event_commodity , project_id , supplier_id et tous les champs et balises personnalisés