Forms & Fields

Generate typed SFCC and SFRA forms from XML, complete field values, and navigate back to form definitions

Form XML drives more than runtime validation. The language server reads cartridge form definitions and generates types for the native SFCC form model and SFRA's server.forms.getForm() wrapper. Field names, groups, includes, actions, and value types become part of script intelligence

Define a small form

Peek Definition follows the form name to its XML file and a generated field to the field element that declares its formid and type
cartridge/forms/default/newsletter.xml
<?xml version="1.0" encoding="UTF-8"?>
<form xmlns="http://www.demandware.com/xml/form/2008-04-19">
    <field formid="email" type="string" mandatory="true" />
    <field formid="subscribe" type="boolean" />
    <action formid="submit" valid-form="true" />
</form>

After the form is indexed, access it through either form API:

var server = require('server');
var form = server.forms.getForm('newsletter');
var email = form.email.value;
var subscribed = form.subscribe.checked;

The literal form name selects the generated SFRA shape. Field wrappers include value, valid, error, HTML names, and type-specific members such as boolean checked and selected

cartridge/templates/default/newsletter/form.isml
<isscript>
    var form = pdict.CurrentForms.newsletter;
    var email = form.email.value;
    var valid = form.valid;
</isscript>

In a template, pdict.CurrentForms uses the generated SfccForms map. Native field members use dw.web.FormField with the declared value type. The generated form group exposes its named fields and actions. session.forms and session.getForms() carry the same generated forms

Invoke completion after form. to discover fields; hover form.email.value to inspect its type. Use Go to Definition on 'newsletter' in server.forms.getForm() or a generated field member to return to the corresponding XML. SiteGenesis paths go to the exact element too: app.getForm('profile.customer') opens the customer group, and 'customer.email' in getForm('profile').get('customer.email') opens the email field

What the generator models

Form structureGenerated support
Named fieldsField members with the declared value type; integer and number fields map to numbers
Nested groupsNested typed form groups
Included formsIncluded structure is resolved into the form model, as <Name>FormGroup and <Name>SfraFormGroup types
Listsdw.web.FormList and FormListItem types for the list and its items
ActionsNative form actions and SFRA action properties
SFRA string fieldsString-specific members such as minimum length, maximum length, and regular expression
SFRA numeric fieldsMinimum and maximum value members
SFRA boolean fieldsChecked and selected state
SFRA date fieldsA Date value with minimum and maximum dates
toObject()The form's values as a typed object: fields give values, groups and includes nested objects, lists untyped records. Actions are left out

A form name can have copies in several cartridges and locale folders. The types use the copy B2C reads for the default locale: the first default copy on the active site's cartridge path, else the first copy of any locale on the path. With no copy on the path, the same rule runs over every linked cartridge. Copies are never merged

Generated declarations are written to .intellij-sfcc/generated/form-types.d.ts. Edit the form XML and let the generator refresh it. To rebuild the file on demand, run Intellij SFCC: Regenerate Form Types from the Command Palette. It reports Form types regenerated: 3 form(s) from 4 form file(s)., with Open Form Types, and adds Nothing changed. when the file stayed the same. A form file that doesn't parse gets no types: the message then counts the files that could not be parsed and have no types. and Show Files opens them. Runtime form validation still depends on the deployed XML and submitted request; editor types do not simulate form submission

Name a form type in JSDoc

Each form gets two global types named after it: <Name>Form for the native form and <Name>SfraForm for the object server.forms.getForm() returns. The newsletter form above becomes NewsletterForm and NewsletterSfraForm:

/** @param {NewsletterSfraForm} form */
function subscribe(form) {
    return form.subscribe.checked;
}

The older generated names still compile but are deprecated, so VS Code shows them struck through. Replace them in your JSDoc:

DeprecatedUse
SfraForm<T>SfraFormRoot, or the form's <Name>SfraForm
SfraField<T>SfraFormFieldBase<T>
SfraFieldString, SfraFieldNumber, SfraFieldBooleanSfraFormFieldString, SfraFormFieldNumber, SfraFormFieldBoolean
SfraFieldOptions<T>SfraFormOption<T>
SfraActionSfraFormAction

On this page