Choose a version:

FunctionSettings

FunctionSettings should be used when configuring the metafield configuration of a Shopify Function. It provides a structure for various input fields and controls, such as text fields, checkboxes, and selections. It also integrates with the native Contextual Save Bar to handle form submission and reset actions.

Anchor to eventsEvents

Learn more about registering events.

Anchor to reset reset <typeof tagName> | null: A callback that is run when the form is reset.
Anchor to submit submit <typeof tagName> | null: A callback that is run when the form is submitted.

CallbackEventListener

(EventListener & {
      (event: CallbackEvent<T>): void;
    }) | null

CallbackEvent

Event & {
  currentTarget: HTMLElementTagNameMap[T];
}

CallbackExtendableEventListener

(EventListener & {
      (event: CallbackExtendableEvent<TTagName>): void;
    }) | null

CallbackExtendableEvent

AT_TARGET
```
2
```
bubbles
The **`bubbles`** read-only property of the Event interface indicates whether the event bubbles up through the DOM tree or not. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/bubbles)
```
boolean
```
BUBBLING_PHASE
```
3
```
cancelable
The **`cancelable`** read-only property of the Event interface indicates whether the event can be canceled, and therefore prevented as if the event never happened. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelable)
```
boolean
```
cancelBubble
The **`cancelBubble`** property of the Event interface is deprecated.
```
boolean
```
CAPTURING_PHASE
```
1
```
composed
The read-only **`composed`** property of the or not the event will propagate across the shadow DOM boundary into the standard DOM. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composed)
```
boolean
```
composedPath
The **`composedPath()`** method of the Event interface returns the event's path which is an array of the objects on which listeners will be invoked. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composedPath)
```
() => EventTarget[]
```
currentTarget
The **`currentTarget`** read-only property of the Event interface identifies the element to which the event handler has been attached. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/currentTarget)
```
EventTarget | null
```
defaultPrevented
The **`defaultPrevented`** read-only property of the Event interface returns a boolean value indicating whether or not the call to Event.preventDefault() canceled the event. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/defaultPrevented)
```
boolean
```
eventPhase
The **`eventPhase`** read-only property of the being evaluated. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/eventPhase)
```
number
```
initEvent
The **`Event.initEvent()`** method is used to initialize the value of an event created using Document.createEvent().
```
(type: string, bubbles?: boolean, cancelable?: boolean) => void
```
isTrusted
The **`isTrusted`** read-only property of the when the event was generated by the user agent (including via user actions and programmatic methods such as HTMLElement.focus()), and `false` when the event was dispatched via The only exception is the `click` event, which initializes the `isTrusted` property to `false` in user agents. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/isTrusted)
```
boolean
```
NONE
```
0
```
preventDefault
The **`preventDefault()`** method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/preventDefault)
```
() => void
```
returnValue
The Event property **`returnValue`** indicates whether the default action for this event has been prevented or not.
```
boolean
```
srcElement
The deprecated **`Event.srcElement`** is an alias for the Event.target property.
```
EventTarget | null
```
stopImmediatePropagation
The **`stopImmediatePropagation()`** method of the If several listeners are attached to the same element for the same event type, they are called in the order in which they were added. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopImmediatePropagation)
```
() => void
```
stopPropagation
The **`stopPropagation()`** method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation)
```
() => void
```
target
The read-only **`target`** property of the dispatched. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target)
```
EventTarget | null
```
timeStamp
The **`timeStamp`** read-only property of the Event interface returns the time (in milliseconds) at which the event was created. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/timeStamp)
```
DOMHighResTimeStamp
```
type
The **`type`** read-only property of the Event interface returns a string containing the event's type. [MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/type)
```
string
```
waitUntil
Provide a promise that signals the length, and eventual success or failure of actions relating to the event. This may be called many times, which adds promises to the event. However, this may only be called synchronously during the dispatch of the event. As in, you cannot call it after a `setTimeout` or microtask.
```
(promise: Promise<void>) => void
```

export interface CallbackExtendableEvent<
  TTagName extends keyof HTMLElementTagNameMap,
> extends CallbackEvent<TTagName>,
    Pick<ExtendableEvent, 'waitUntil'> {}

Was this section helpful?

jsx

import {render} from 'preact';

import {useState} from 'preact/hooks';

export default async () => {

render(<Extension />, document.body);

};

function Extension() {

const [percentage, setPercentage] = useState(

shopify.data.metafields[0].value,

);

async function applyExtensionMetafieldChange() {

await shopify.applyMetafieldChange({

type: 'updateMetafield',

namespace: '$app:discounts-percentage',

key: 'function-configuration',

value: percentage,

valueType: 'integer',

});

}

return (

<s-function-settings

onSubmit={(e) => e.waitUntil(applyExtensionMetafieldChange())}

onReset={resetForm}

<s-number-field

step="1"

suffix="%"

label="Percentage"

name="percentage"

value={shopify.data.metafields[0].value}

onChange={(event) => setPercentage(event.currentTarget.value)}

</s-function-settings>

);

}

Examples

jsx

import {render} from 'preact';
import {useState} from 'preact/hooks';

export default async () => {
  render(<Extension />, document.body);
};

function Extension() {
  const [percentage, setPercentage] = useState(
    shopify.data.metafields[0].value,
  );

  async function applyExtensionMetafieldChange() {
    await shopify.applyMetafieldChange({
      type: 'updateMetafield',
      namespace: '$app:discounts-percentage',
      key: 'function-configuration',
      value: percentage,
      valueType: 'integer',
    });
  }

  return (
    <s-function-settings
      onSubmit={(e) => e.waitUntil(applyExtensionMetafieldChange())}
      onReset={resetForm}
    >
      <s-number-field
        step="1"
        suffix="%"
        label="Percentage"
        name="percentage"
        value={shopify.data.metafields[0].value}
        onChange={(event) => setPercentage(event.currentTarget.value)}
      />
    </s-function-settings>
  );
}

Anchor to relatedRelated

TextField

NumberField

ChoiceList