FunctionSettings

Simple function settings form implementation

import {
  reactExtension,
  useApi,
  FunctionSettings,
  TextField,
  Section,
} from '@shopify/ui-extensions-react/admin';

export default reactExtension(
  'admin.settings.validation.render',
  async (api) => {
    // Use Direct API access to fetch initial
    // metafields from the server if we are
    // rendering against a pre-existing `Validation`
    const initialSettings = api.data.validation
      ? await fetchSettings(api.data.validation.id)
      : {};

    return <App settings={initialSettings} />;
});

function App({settings}) {
  const [value, setValue] = useState(settings);
  const [error, setError] = useState();

  const {applyMetafieldsChange} = useApi();

  return (
    <FunctionSettings
      onError={(errors) => {
        setError(errors[0]?.message);
      }}
    >
      <Section heading="Settings">
        <TextField
          label="Name"
          name="name"
          value={value}
          error={error}
          onChange={(value) => {
            setValue(value);
            setError(undefined);
            applyMetafieldsChange({
              type: 'updateMetafield',
              namespace: '$app:my_namespace',
              key: 'name',
              value,
              valueType: 'single_line_text_field',
            });
          }}
        />
      </Section>
    </FunctionSettings>
  );
}

import {
  extension,
  FunctionSettings,
  TextField,
  Section,
} from '@shopify/ui-extensions/admin';

export default extension(
  'admin.settings.validation.render',
  async (root, api) => {
    // Use Direct API access to fetch initial
    // metafields from the server if we are
    // rendering against a pre-existing `Validation`
    const initialSettings = api.data.validation
      ? await fetchSettings(api.data.validation.id)
      : {};

    const textField = root.createComponent(TextField, {
      value: initialSettings.name,
      label: 'Name',
      name: 'name',
      onChange(value) {
        textField.updateProps({value, error: undefined});
        api.applyMetafieldsChange({
          type: 'updateMetafield',
          namespace: '$app:my_namespace',
          key: 'name',
          value,
          valueType: 'single_line_text_field',
        });
      },
    });

    const section = root.createComponent(Section, {
      heading: 'Settings',
    });

    const settings = root.createComponent(FunctionSettings, {
      onError(errors) {
        textField.updateProps({error: errors[0]?.message});
      },
    });

    section.append(textField);
    settings.append(section);
  },
);