Edit forms | 51黑料不打烊 Campaign

Documentation Campaign Campaign Classic v7 Documentation

[Also applies to v8]{class="badge positive" title="Also applies to Campaign v8"}

Edit forms editing-forms

Last update: Mon Jan 06 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Applies to:
Campaign Classic v7

Topics:
Configuration

CREATED FOR:

Developer

Overview

Marketers and operators use input forms to create, modify, and preview records. Forms show a visual representation of information.

You can create and modify input forms:

You can modify the factory input forms that are delivered by default. The factory input forms are based on the factory data schemas.
You can create custom input forms, based on data schemas that you define.

Forms are entities of xtk:form type. You can view the input form structure in the xtk:form schema. To view this schema, choose Administration > Configuration > Data schemas from the menu. Read more about form structure.

To access input forms, choose Administration > Configuration > Input forms from the menu:

To design forms, edit the XML content in the XML editor:

Form types

You can create different types of input forms. The form type determines how users navigate the form:

Console screen

This is the default form type. The form comprises a single page.
Content Management

Use this form type for content management. See this use case.
Assistant

This form comprises multiple floating screens that are ordered in a specific sequences. Users navigate from one screen to the next. Read more.
Iconbox

This form comprises multiple pages. To navigate the form, users select icons at the left of the form.
Notebook

This form comprises multiple pages. To navigate the form, users select tabs at the top of the form.
Vertical pane

This form shows a navigation tree.
Horizontal pane

This form shows a list of items.

Containers

In forms, you can use containers for various purposes:

Organize content within forms
Define access to input fields
Nest forms within other forms

Organize content

Use containers to organize content within forms:

You can group fields into sections.
You can add pages to multipage forms.

To insert a container, use the <container> element. Read more.

Group fields

Use containers to group input fields into organized sections.

To insert a section into a form, use this element: <container type="frame">. Optionally, to add a section title, use the label attribute.

Syntax: <container type="frame" label="section_title"> [鈥 </container>

In this example, a container defines the Creation section, which comprises the Created by and Name input fields:

<form _cs="Coupons (nms)" entitySchema="xtk:form" img="xtk:form.png" label="Coupons"
      name="coupon" namespace="nms" type="default" xtkschema="xtk:form">
  <input xpath="@code"/>
  <input xpath="@type"/>
  <container label="Creation" type="frame">
    <input xpath="createdBy"/>
    <input xpath="createdBy/@name"/>
  </container>
</form>

Add pages to multipage forms

For multipage forms, use a container to create a form page.

This example shows containers for the General and Details pages of a form:

<container img="ncm:book.png" label="General">
[鈥
</container>
<container img="ncm:detail.png" label="Details">
[鈥
</container>

Define access to fields

Use containers to define what is visible and to define access to fields. You can turn on or off groups of fields.

Nest forms

Use containers to nest forms within other forms. Read more.

References to images

To find images, choose Administration > Configuration > Images from the menu.

To associate an image with an element in the form, for example, an icon, you can add a reference to an image. Use the img attribute, for example, in the <container> element.

Syntax: img="namespace:filename.extension"

This example shows references to the book.png and detail.png images from the ncm namespace:

<container img="ncm:book.png" label="General">
[鈥
</container>
<container img="ncm:detail.png" label="Details">
[鈥
</container>

These images are used for icons that users click to navigate a multipage form:

Create a simple form create-simple-form

To create a form, follow these steps:

From the menu, choose Administration > Configuration > Input forms.
Click the New button at the top right of the list.

Specify the form properties:

Specify the form name and the namespace.

The form name and the namespace can match the related data schema. This example shows a form for the cus:order data schema:

code language-xml
`<form entitySchema="xtk:form" img="xtk:form.png" label="Order" name="order" namespace="cus" type="iconbox" xtkschema="xtk:form"> [鈥 </form>`

Alternatively, you can explicitly specify the data schema in the entity-schema attribute.

code language-xml
`<form entity-schema="cus:stockLine" entitySchema="xtk:form" img="xtk:form.png" label="Stock order" name="stockOrder" namespace="cus" xtkschema="xtk:form"> [鈥 </form>`

Specify the label to be displayed on the form.
Optionally, specify the form type. If you do not specify a form type, the console screen type is used by default.

If you are designing a multipage form, you can omit the form type in the <form> element and specify the type in a container.

Click Save.

Insert the form elements.

For example, to insert an input field, use the <input> element. Set the xpath attribute to the field reference as an XPath expression. Read more.

This example shows input fields based on the nms:recipient schema.

code language-xml
`<input xpath="@firstName"/> <input xpath="@lastName"/>`

If the form is based on a specific schema type, you can look up the fields for this schema:
1. Click Insert > Document fields.
2. Select the field and click OK.

Optionally, specify the field editor.

A default field editor is associated with each data type:

For a date-type field, the form shows an input calendar.
For an enumeration-type field, the form shows a selection list.

You can use these field editor types:

table 0-row-2 1-row-2 2-row-2 3-row-2
Field editor	Form attribute
Radio button	`type="radiobutton"`
Checkbox	`type="checkbox"`
Edit tree	`type="tree"`

table 0-row-3 1-row-3 2-row-3 3-row-3
Element	Attribute	Description
`<input>`	`read-only="true"`	Provides read-only access to a field
`<container>`	`type="visibleGroup" visibleIf="`edit-expr`"`	Conditionally displays a group of fields
`<container>`	`type="enabledGroup" enabledIf="`edit-expr`"`	Conditionally enables a group of fields

code language-xml
`<container type="enabledGroup" enabledIf="@gender=1"> [鈥 </container> <container type="enabledGroup" enabledIf="@gender=2"> [鈥 </container>`

code language-xml
`<container type="frame" label="Name"> <input xpath="@firstName"/> <input xpath="@lastName"/> </container> <container type="frame" label="Contact details"> <input xpath="@email"/> <input xpath="@phone"/> </container>`

Create a multipage form create-multipage-form

You can create multipage forms. You can also nest forms within other forms.

Create an `iconbox` form

Use the iconbox form type to show icons at the left of the form, which take users to different pages in the form.

To change the type of an existing form to iconbox, follow these steps:

Change the type attribute of the <form> element to iconbox:

code language-xml
`<form [鈥 type="iconbox">`

Set a container for each form page:

Add a <container> element as a child of the <form> element.

To define a label and an image for the icon, use the label and img attributes.

code language-xml

code language-xml
`<form entitySchema="xtk:form" name="Service provider" namespace="nms" type="iconbox" xtkschema="xtk:form"> <container img="xtk:properties.png" label="General"> <input xpath="@label"/> <input xpath="@name"/> [鈥 </container> <container img="nms:msgfolder.png" label="Details"> <input xpath="@address"/> [鈥 </container> <container img="nms:supplier.png" label="Services"> [鈥 </container> </form>`

<form entitySchema="xtk:form" name="Service provider" namespace="nms" type="iconbox" xtkschema="xtk:form">
    <container img="xtk:properties.png" label="General">
        <input xpath="@label"/>
        <input xpath="@name"/>
        [鈥
    </container>
    <container img="nms:msgfolder.png" label="Details">
        <input xpath="@address"/>
        [鈥
    </container>
    <container img="nms:supplier.png" label="Services">
        [鈥
    </container>
</form>

Alternatively, remove the type="frame" attribute from the existing <container> elements.

Create a notebook form

Use the notebook form type to show tabs at the top of the form, which take users to different pages.

To change the type of an existing form to notebook, follow these steps:

Change the type attribute of the <form> element to notebook:

code language-xml
`<form [鈥 type="notebook">`

51黑料不打烊