Submit button

The form's primary action button, triggers validation, the save flow, and any onBeforeSave / onSave handlers.

The Submit button kicks off the form's save pipeline:

  1. Declarative validation, every field with a required, pattern, or requiredIf rule is checked.
  2. Author validation, onValidate handlers (form-level and per-field) run.
  3. onBeforeSave, author hook fires; can call return { cancel: true } to abort.
  4. Primary write, fields are mapped to SharePoint columns and the item is created/updated.
  5. Post-save writers, Signature, Attachments, Image, Taxonomy, LinkedList children are written in a follow-up phase.
  6. onSave, final hook fires with the resulting item id.

A single form should have exactly one Submit button (use the

SubmitCancel pair for the standard submit + cancel layout).

Common properties

PropertyDescription
label
string
default: "Submit"
Button text.
visibleIf
expression
Hide unless the expression returns true. Useful for wizard-style multi-page forms.
enableIf
expression
Disable until the expression returns true. Use for client-side prerequisites that aren't expressible as field-level rules.

Type-specific properties

PropertyDescription
variant
"primary" | "danger"
default: "primary"
Colour scheme. Use "danger" on destructive submits (e.g. a Cancel-Subscription form).
size
"sm" | "md" | "lg"
default: "md"
Button size.
busyLabel
string
default: "Saving…"
Replacement label shown while the save flow is running.
confirmMessage
string
If set, show a confirm dialog before submitting. Empty/missing means no prompt.

JavaScript recipes

Pre-save side effects (audit trail)

f365.events.onBeforeSave(() => {
  f365.field('LastModifiedBy').value = f365.user.current().email;
  f365.field('LastModifiedOn').value = new Date().toISOString();
});

Cancel submit when a related check fails

f365.events.onBeforeSave(async () => {
  const inStock = await f365.http.get<{ available: number }>(
    `/api/inventory/${f365.field('Sku').value}`
  );
  if (inStock.available < Number(f365.field('Quantity').value)) {
    f365.ui.showAlert('Not enough stock to fulfil this order.');
    return { cancel: true };
  }
});

Redirect after a successful save

f365.events.onSave(({ itemId }) => {
  f365.nav.redirectAfterSave(`/Lists/Orders/DispForm.aspx?ID=${itemId}`);
});

Disable until the form is clean

// In the property panel:
// enableIf:  AgreedToTerms === true AND TotalAmount > 0

Related articles

  • Cancel button

    Discards unsaved changes and returns to the prior page, with a confirmation prompt if the form is dirty.

  • SubmitCancel pair

    The conventional "Submit + Cancel" button pair at the bottom of a form, paired layout with the right spacing built in.

  • Save flow, what happens when the user clicks Submit

    The two-phase save pipeline, validation, primary write, then post-save writers for attachments, signatures, images, and child rows.