SettingsView
Vous pouvez définir une vue des paramètres spéciale pour permettre aux utilisateurs de modifier des détails spécifiques concernant le fonctionnement de l’application avec leur compte. Par exemple, une application qui a recours à une API tierce (comme Zendesk) peut utiliser une SettingsView
pour autoriser les utilisateurs à se connecter avec leur compte Zendesk. Pour en savoir plus, consultez la page consacrée à l’ajout d’une page de paramètres pour votre application.
Apparence d’une SettingsView
SettingsView
est un composant racine de vue, comme ContextView
, qui contient d’autres éléments d’interface utilisateur. C’est la seule vue qui n’est pas liée à un objet spécifique, mais à la fenêtre d’affichage settings
, laquelle mappe vers des emplacements prédéfinis dans le Dashboard en dehors du volet d’applications.
La vue SettingsView
s’affiche sur la page des paramètres d’application du Dashboard après le chargement d’une application. Lorsque vous affichez un aperçu de votre application en local, vous pouvez afficher un aperçu de SettingsView
dans le Dashboard à l’adresse suivante : https://dashboard.stripe.com/test/apps/settings-preview.
Pour utiliser une SettingsView
, vous devez ajouter une vue avec la fenêtre settings
à votre manifeste d’application. Un manifeste d’application avec une vue « settings » présenterait un champ ui_extension
similaire à ceci :
{ ..., "ui_extension": { "views": [ ..., { "viewport": "settings", "component": "AppSettings" } ], } }
Props
Prop | Type | Description |
---|---|---|
children Required |
| The contents of the SettingsView, usually a Form or some
other content surrounding a form. |
onSave |
| If provided, a "Save" button will be rendered with the SettingsView.
This callback will be called when the button is clicked. |
statusMessage |
| A string to display a status such as "Saved" or "Error"
in the footer of the view. |
Exemple
Cet exemple illustre comment récupérer des paramètres depuis une API externe, les afficher et enregistrer les modifications.
import {useState, useEffect, useCallback} from 'react'; import { Box, TextField, SettingsView, } from '@stripe/ui-extension-sdk/ui'; type FormStatus = 'initial' | 'saving' | 'saved' | 'error'; const AppSettings = ({ userContext }: any) => { const [storedValue, setStoredValue] = useState<string>(''); const [status, setStatus] = useState<FormStatus>('initial'); // use the current user id to retrieve the stored value from an external api const key = userContext.id; useEffect(() => { const fetchSetting = async (key: number) => { try { const response = await fetch(`https://www.my-api.com/${key}`) const storedSettingValue = await response.text() if (storedSettingValue) { setStoredValue(storedSettingValue) } } catch (error) { console.log('Error fetching setting: ', error) } }; fetchSetting(key); }, [key]); const saveSettings = useCallback(async (values) => { setStatus('saving'); try { const { greeting } = values; const result = await fetch( 'https://www.my-api.com/', { method: 'POST', body: JSON.stringify(values) } ); await result.text(); setStatus('saved'); setStoredValue(greeting); } catch (error) { console.error(error); setStatus('error'); } }, []); const getStatusLabel = useCallback(() => { switch(status) { case 'saving': return 'Saving...'; case 'saved': return 'Saved!'; case 'error': return 'Error: There was an error saving your settings.'; case 'initial': default: return ''; } }, [status]) const statusLabel = getStatusLabel(); return ( <SettingsView onSave={saveSettings} statusMessage={statusLabel} > <Box css={{ padding:'medium', backgroundColor: 'container', }} > <Box css={{ font: 'lead' }} > Please enter a greeting </Box> <Box css={{ marginBottom: 'medium', font: 'caption' }} > Saved value: {storedValue || 'None'} </Box> <TextField id="greeting" name="greeting" type="text" label="Greeting:" size="medium" /> </Box> </SettingsView> ); }; export default AppSettings;