SettingsView
Sie können eine spezielle Einstellungsansicht festlegen und den Nutzer/innen damit die Änderung bestimmter Details in Bezug auf die Funktionsweise der App in ihrem Konto ermöglichen. Beispielsweise könnte eine App, die Drittanbieter-APIs wie Zendesk verwendet, für die Nutzerautorisierung über das jeweilige Zendesk-Konto eine SettingsView
-Ansicht verwenden. Lernen Sie, wie Sie Ihrer App eine Einstellungsseite hinzufügen, um mehr zu erfahren.
Darstellung der SettingsView
SettingsView
ist, genau wie ContextView
, eine Ansichts-Root-Komponente, die alle anderen Nutzeroberflächen-Elemente enthält. Es ist die einzige Ansicht, die an kein bestimmtes Objekt, wohl aber an das Darstellungsfeld settings
gebunden ist. Das Darstellungsfeld settings
wird dabei festgelegten Stellen im Dashboard außerhalb des App-Drawers zugeordnet.
SettingsView
wird auf der Seite mit den App-Einstellungen im Dashboard gerendert, nachdem Sie eine App hochgeladen haben. Wenn Sie Ihre App in der Vorschau lokal anzeigen, können Sie eine Vorschau der SettingsView
im Dashboard unter https://dashboard.stripe.com/test/apps/settings-preview anzeigen.
Um SettingsView
zu nutzen, müssen Sie eine Ansicht mit dem Darstellungsfeld settings
zu Ihrem App-Manifest hinzufügen. Eine Anwendung mit einer Einstellungsansicht hätte ein App-Manifest mit einem Feld ui_extension
, das ungefähr so aussieht:
{ ..., "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. |
Beispiel
In diesem Beispiel wird gezeigt, wie Einstellungen aus einer externen API abgerufen, angezeigt und Änderungen gespeichert werden.
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;