Service Manager

Home 

Creating a Form

Forms are created within the Form Editor. You create a form associated with a business object, which in turn is used within a layout for users to view.

While you can add more than one component to a form table cell, it can have an adverse effect on your form display. Adding elements causes the width and height of adjacent cell to increase.

Columns expand to the width of their largest field name or control.

1.From the Configuration console, click Build > Business Objects.

2.Open a business object > Forms > Add New Form. The application shows a blank form.

3.Enter information into the fields. These options apply to the entire form, not individual components.

Field Description
Display Name A unique name for this form
Description A brief description of what the form is used for.
Show control borders Shows the boundaries of the controls you insert.
Show layout cells Shows the outline of each cell in a list format.

Show tab indexes

Shows the tab indexes.

Audit Views

Logs each time the form is viewed.

Default Cell Margins

The number of pixels for each cell to have. The order is top, right, bottom, left, or click the down arrow to enter the values in the diagram.

4.To apply a style to the form, click Form styling..., enter values from the pop-up window, then click Save.

Styles defined here are superseded by styles defined in individual controls. See also Example: Using the SelectorFormat Property to Change a Style on Hover

Field Description
Form Style

The style used for the overall form. Choose a style from the drop-down list.

See Using Highlighter Styles.

Label Style The style used for the labels in the form.
Control Style The style used for the controls in the form.

5.Drag a field, relationship, or other control onto the form. You can drop the component when you see the green check mark.

Fields: Includes all fields defined for this business object. For example, the Urgency field has been added to an incident form called Incident.DataEntry. The application stores a value entered in the Urgency field on the Incident.DataEntry form in the incident business object.

Relationships: You can add a field from a business object relationship provided the relationship is one-to-one or many-to-one. This includes all business objects linked with this business object through defined relationships. For example, the IncidentDetails form includes a Customer Name field allowing you to search through the display names returned from the Employee business object. When you select a name, the application automatically populates the rest of the customer information.

Other: Includes controls and graphical elements. For example, the Incident.Brief form includes a pair of lists displaying recently updated tasks and recent activities. See About the "Other" Form Controls.

Available fields and components are derived from the business object associated with the form.

Drop in the blue area to place the component next to an existing component in the same cell.

Drop below the blue area to place the component in a new row below the existing cell.

Drop to the right of the blue area to place the component in a new column next to the existing cell.

To remove a control, select the component and press Delete on your keyboard.

6.Adjust individual cell properties from the Cell Properties tab. These properties pertain to the entire cell, no matter how many components are in the cell and no matter what properties each control has defined.

Property Description
Cell Layout

How the cell is laid out:

Horizontal: Pads left and right cell borders.

Vertical: Pads top and bottom of cell.

Cell Vertical Alignment How the contents align in the cell.
Column Span By default, each column is only one column wide. However, you can define a cell to span across multiple columns. This is useful when designing forms with merged cells. Enter the number value here.
Margins Overrides the default margins for the form.  Enter the number of pixels for each cell to have. The order is top, right, bottom, left, or click the down arrow to enter the values in the diagram.

Row Span

By default, each row is only one row high. However, you can define a cell to span down multiple rows. Enter the number value here.

Section Break

Makes this cell a section break.

Style

Defines a style.

Style Rule

Applies an expression to this style. You can define what existing style (bold, header, etc.) to apply to a control based on a condition. See Example: Showing Fields in Different Colors Based on Value for an example on how this could work.

7.Edit the properties of the component using the Control Properties tab in the left panel. The control properties listed depend on the component you are working with.

The properties are listed in alphabetical order.

Property Description
Control Type

The type of control depends on the component:

Attachments

Cancel Button

Check Box

Color bar indicator

Image

Label

List

Link Field

Object Matching Control

Read-only Text Field

Related Objects List

Text Field

UI Command Button

URL Button

Custom Mask

Custom masks are useful for fields requiring a specific value format, such as a phone number, percentage value or serial number.

This control becomes available if you select Custom from the Edit Mask field. Enter a custom expression using the following characters:

U: Upper-case characters only.

A: Alphanumeric characters only.

l: Lower-case characters only.

9: Numeric characters only.

For example, an ISSN (International Standard Serial Number, a unique eight-digit number used to identify a print or electronic periodical publication) is formatted as an eight-digit number, separated by a hyphen into two four-digit numbers. By using a custom mask of 9999-9999, the required format is displayed, and invalid characters cannot be entered. This type of edit mask permits entering less than the required number of characters as placeholders. For example, you can enter five or less digits as characters for a custom mask of 999.99.

Disable Uploading The default upload state for the uploader control.
Editable Specifies if you can edit the control.
Edit Mask

Specifies an expression that forces the user to enter a specific character set:

Custom mask: A custom mask.

IP Address: 999.999.999.999

MAC Address: AAAAAAAAAAAA

None: No mask

US Phone: (999)999-9999

Zip Code: AAAAA

When using an edit mask, a placeholder is displayed in the form for each character in the expression. Using an edit mask also prevents the entry of invalid characters.

Extension Field The extension of the file to upload to the Knowledge Base.
Field Name Contains the name of the associated business object field.
File Name Field The name of the file to upload to the Knowledge Base.

Height

The control height in ems.

Label

The text to appear on the field or control label.

Label Expression

An expression to apply to this label, if needed. For example, on the KnowledgeSelfService form, the following expression has been added to the Details cells: $(("Article ID: " + KnowledgeNumber)). This adds the label Article ID to the label and the Knowledge Base number assigned to this record.

Label Pos

The label position.

Label Style Rule

An expression to apply to this label, if needed. For example, on the KnowledgeSelfService form, the following expression has been added to the Details cells: $(("Article ID: " + KnowledgeNumber)). This adds the label Article ID to the label and the Knowledge Base number assigned to this record.

List Name

The name of the embedded list to display in the form.

List Relation

The name of the business object relationship associated with the embedded list.

Max Rows

Defines the maximum number of rows to be displayed in an embedded list (embedded in the form). This limits the number of records displayed, superseding the values created in the list editor.

Name of Relationship with Parent

Optional. Applies to schedules.

Owner Expression

An expression associated with the owner of a software installation.

Package Expression

An expression associated with software package installed.

Read Only Expression

An expression associated with this read-only state. For example, you can set a field to be displayed as read-only when its status changes.

Read Only Rule

The read-only status of the component.

Required Expression

An expression is required in this field.

Required Rule

Marks this field as required.

Searchable

You can search for the name or item in this field.

Size in

KB or MB. Used with attachments.

Style

A display style for this control:

Default: Default settings for the label and cell in accordance with the theme.

Black Combo Box: Adds a combo box with a black background. Makes the label bold.

Blue Text: Makes field entries blue.

Bold Highlighted: Makes field entries bold.

Bold Label: Makes the label bold.

Bold w/Horizontal Rule: Makes field entries bold and underlined.

Counter: Sets the cell as a counter. When a new record is added, the application increments the counter by 1.

Header: Applies larger text style to label for use as a form heading.

Highlighted Row: Enhances the cell with a highlight color.

Horizontal Rule: Adds a horizontal rule to a cell. Uses rules to organize sets of fields and controls.

Horizontal Rule Header: Sets the label against a shaded background.

Light Blue Text: Makes field entries light blue.

Light Blue Text Right: Makes field entries light blue and right-aligns them when displayed in the field.

Link (button): Provides custom styling for a link button.

Panel Body: Creates a body section in a panel form component.

Panel Body (First Row): Creates a body section as the top row in a panel form component.

Panel Body (No Border): Creates a body section with no border in a panel form component.

Panel Footer: Creates a footer in a panel form component.

Panel Header: Creates the heading in a panel, which can serve as a component in a complex form.

Red Label: Makes field labels red.

Right Label: Sets the label flush right against the field.

Therm labels bottom: Provides custom styling for the bottom portion of an escalation thermometer.

Therm labels top: Provides custom styling for the top portion of an escalation thermometer.

Vertical Rule: Adds a vertical rule to a cell.

Vertical Rule (long): Adds a vertical rule to a cell, with the top of the rule running into the cell padding.

VIP: Provides custom styling for a VIP cell.

YellowBox: Highlights the label in a yellow color.

SmallGreyFont: Sets label font in small grey color.

RedRightLabel: Sets label font in red color and aligns to the right.

RedLabel: Sets label font in red color.

RedHeaderLabel: Sets label font size big and in red color suitable for header.

RedBox: Highlights label in red color.

PurchaseItemsNotLinkedToSKU: Highlights the Purchase Items not Linked to Stock Keeping Items label in yellow color.

IntegrationStatusRunning: Highlights Integration of Status Running label in yellow color.

IntegrationStatusCompleted: Highlights Integration of Status Completed label in green color.

IntegrationStatusAborting: Highlights Integration of Status Aborting label in orange color.

IncidentSLAThirdEscalation: Highlights Incident SLA Third Escalation label in yellow color.

IncidentEscalationBreach: Highlights Incident Escalation Breach label in red color.

HighlightUnlicensedProductsCompanyWide: Highlights Unlicensed Products Company Wide label in yellow color.

HighlightUnlicensedProducts: Highlights Unlicensed Products label in red color.

Heights80px: Sets label height at 80 pixel

Heights50px: Sets label height at 50 pixel.

Heights200px: Sets label height at 200 pixel.

GreenLabel: Sets label font in green color.

GreenBox: Highlights label in green color.

DarkBlueBackgroundSectionHeader: Highlights the section header in dark blue color.

DarkBlueBackgroundRightLabel: Highlights label in dark blue color and aligns to right.

DarkBlueBackgroundHeader: Highlights the header in dark blue color.

DarkBlueBackground: Highlights label in dark blue color.

ClosedProjectItem: Sets the Closed Project Item label font in green color.

BlueLabel: Highlights label in blue color.

See About Using Expressions in Styles for information about these controls.

Style Rule

An expression to be applied to this style, if needed. You can define what existing style (bold, header, etc.) to apply to a control based on a condition.

Tab Index

The tab order of the field. See About the Tab Order on a Form

URL

URL that this control calls.

Use Like Expression for Autocomplete

True or false. For service level agreement links.

Use Timezone Control

True or false. For schedules.

Visible Expression

Accepts the expression $(true) to make the expression control visible, or $(false) to hide it from the user.

Width

The control width (ems).

8.To add a cell, select a cell on the form, then do one of the following:

From the toolbar go to Commands > Insert . then choose a command.

Select a command from the top of the form:

Add Top Row: Inserts a blank row at the top of the form.

Add Bottom Row: Inserts a blank row at the bottom of the form.

Insert Row Above: Inserts a blank row above the selected row.

Insert Row Below: Inserts a blank row below the selected row.

Insert Left Column: Inserts a column to the left of the selected column.

Insert Right Column: Inserts a column to the right of the selected column.

Delete Item: Deletes the selected item.

Merge Cells: Combines the selected cells into a single cell.

9.Click the open icon to open the Form Editor Commands window, then click a command:

Delete Control: Deletes the selected control.

Merge Cells: Combines the selected cells into a single cell.

Add Row At the End: Inserts a blank row at the bottom of the form.

Insert Row Above Selection: Inserts a blank row above the selected row.

Insert Row Below Selection: Inserts a blank row below the selected row.

Delete Row: Deletes the selected row and its contents.

Insert Column to Right: Inserts a column to the right of the selected column.

Insert Column to Left: Inserts a column to the left of the selected column.

Delete Column: Deletes the selected column.

Show tab order

Apply left-to-right tab order

Apply top-to-bottom tab order

Clear - Let browser decide

Complete index assignments

Another empty cell appears.

10.Repeat for more cells, using the appropriate commands for your form.

For example, to modify the vertical alignment of a cell, next to Cell Vertical Alignment, choose an alignment setting from the drop-down list.

You can manipulate these styles to add powerful structure and design elements to the form. Examples include:

Adding buttons to initiate an action.

Defining control actions when selected or manipulated (for example, run a report).

Defining control behaviors (for example, contents or lack of content, use of a pick list, accompanying tool tips).

Adding a free-floating label to identify a control or other item.

Formatting the appearance of a control by adding styles.

Adjusting control size and alignment.

11. Click Save. Frequently saving your changes is recommended as you construct the form.


Was this article useful?