You are here: Commerce Manager > System Administration > System Settings > Customizing an Existing Form

Customizing an Existing Form

Every field is associated with a Form, and each Business Object is associated with one or more types of forms. The common types of forms found in Commerce Manager are the Edit Forms, Short Info Forms, and View Forms. For example, the New Credit Card form looks like this:

By editing the form, you can change the layout, add new fields and sections, and more.

To edit an existing form, click on a Business Object and click on the Forms tab to see the list of associated forms.

Click on the Edit icon next to the form you want to make changes to. The form customization window pops up.

There are various functions available to edit and customize a form.

Editing the Layout of a Form

You can change the layout and the fields that appear on the form.

Click on Edit Form.
a. Select a View Type (or the layout of the form). You have a choice between a Two Column (1:1, 1:2, 2:1), or Three Column (1:1:1) layout.
b. Enter in a pixel value for the Cell Padding, or spaces between each cell.
Click Save to confirm your changes.

This example uses a Two Column (1:1) layout.

Adding Sections and Fields

Once your layout is set, you can add additional sections and/or additional fields.

Click on Add --> Add Section to add a new section. Adding sections allows you to separate and divide groups of fields on a form with their own header and border.
Enter in a Title for the section.
Checkmark the box next to "Show border line for this section" if you want to show the border around section. Otherwise, uncheck the box to hide the border.
Checkmark "Show the name of this section on the form" if you want to show the title of the section on the form. Otherwise, uncheck the box to hide the title.
Select a View Type or layout of the section: One Column, Two Columns (1:1), Two Columns (1:2), Two Columns (2:1)
Enter a numeric pixel value for Cell Padding or amount of space between each cell in the section.
Click Save to save your changes.

You can edit a section by clicking on a section and click on Edit.

Within each section are fields. You can add new fields to a specific section by highlighting the section and then by clicking Add --> Edit.

Select an existing associated field in the dropdown menu.
a. Checkmark the "Field is Read Only" box if you want the field to be unavailable for edit. When you see the rendered form, the field will be grayed out.

Select the "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
Enter in a Label Width numerical value. Default is 120px.
Tab Index: enter an index for the tab.
Select a View Type, either a One Column or Two Column. In the dropdown, enter in the number of text box rows, up to 3.
Click Save to add the field to the section.

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

You can re-arrange fields on a form but using the arrow controls on menu bar. Highlight the field and then click on the directional arrow you want the field to move to.

In this example, the "Security Code" field is moved to the right where the "Customer Service Phone Number" field is placed by clicking on the right directional arrow. Fields are moved from cell to cell within a section.

Deleting Sections and Fields

To delete a section or field, highlight either one and click on Remove. A popup will appear. Click OK to confirm deletion. Otherwise, click Cancel.

Recreating a Form

Recreating a form allows a user to create a form from scratch with a single field rather than customize a form with all fields already in place. Click on Recreate Form on the upper right corner of the window.

A popup will appear. Click on OK to recreate the form. Otherwise, click Cancel. Once you confirm, the fields will clear from the form except for the required field.

Saving a Customized Form

Once you are done with your changes, click on Save on the upper right corner of the window. To save and close the window at the same time, click the down-arrow next on the Save button and on the dropdown click Save and close.

Once those changes are saved, the form you edited will render based on your configuration. For example, here is the customized Credit Card edit form an end user sees.