Commerce > Administration > System settings > Customizing a form

Customizing a form

This topic is intended for administrators and developers with administration access rights in Episerver.

This section describes how to customize and adapt a form for your Episerver Commerce users.

Forms dictate how fields appear to the Episerver Commerce user when viewing and editing information in the system. Every field is associated with a form, and each business object is associated with one or more types of forms. Common types of forms are Edit Forms, Short Info Forms, and View Forms.

Editing a form

  1. Select a Business Object and then click the Forms tab to see the list of associated forms.

  2. Click Edit next to the form you want. The form customization window appears.

Editing a form's layout

  1. Click Edit Form.
    1. Select a View Type (layout of the form).
      • Two Columns (1:1)
      • Two Columns (1:2)
      • Two Columns (2:1)
      • Three Column (1:1:1)
    2. Enter in a pixel value for the Cell Padding (spaces between each cell).
  2. Click Save.

Adding a section

A section separates groups of fields on a form with its own header and border. After you set the layout, you can add sections and fields.

  1. Select Add > Add Section to add a new section.
    • Title. Enter the name of the section to display on the form (if enabled).
    • Show border line for this section. Select the check box to show the border around section.
    • Show the name of this section on the form. Select the check box to show the Title of the section on the form.
    • View Type. Choose one.
      • One Column
      • Two Columns (1:1)
      • Two Columns (1:2)
      • Two Columns (2:1)
    • Cell Padding. Enter the number of pixels for Cell Padding to determine the amount of space between each cell in the section.
  2. Click Save.

Editing a section

You can edit a section by selecting a section and click Edit.

Adding a field to a section

  1. Highlight a section and click Add > Edit.
  2. Select an existing associated field in the drop-down menu. The Add field dialog box appears.
    • Field is Read Only. Select the check box to make the field unavailable for editing. The field is grayed out on the rendered form.
    • Item label showing on the form.
      • Hide Label. No label appears next to the text box.
      • System Label. Shows the system name next text box.
      • Custom Label. Enter in a custom label.
    • Label Width. Enter a number. (Default is 120px.)
    • Tab Index. Enter an index for the tab.
    • View Type. Select either a One Column or Two Column. In the drop-down box, select the number of text box rows, up to 3.
  3. Click Save.

Editing a field

To edit a field, select and highlight the field and click Edit to change your previous settings.

Re-arranging fields

You can re-arrange fields on a form using the arrow controls on menu bar. Highlight the field and then click the directional arrow you want the field to move to. In the following example, the Security Code field is moved to the right where the Customer Service Phone Number field is placed by clicking the right directional arrow. Fields are moved from cell to cell within a section.

Deleting a section or field

  1. Highlight a section or field.
  2. Click Remove. Click OK to confirm.

Recreating a form

You can recreating a form with a single field rather than customize a form with all fields already in place.

  1. Click Recreate Form on the upper right corner of the window. A confirmation dialog box appears.
  2. Click OK to recreate the form. After you confirm, the fields clear from the form except for the required field.
back to top




Episerver User Guide update 16-2 | Released: 2016-03-31 | © Episerver 2016 | Send feedback to us