4me Help

UI Extension Fields

The table below lists the fields of the UI Extension form and provides utilization guidelines for each field.

Field Label Utilization Guideline
Category

The Category field is used to select the type of record in which the UI extension can be selected.

Name

The Name field is used to enter a short name for the UI extension.

Section Title

The Section title field is used to enter the text that is to be displayed as the section header above the UI extension when the UI extension is presented within a form.

Disabled

The Disabled box is checked when the UI extension may no longer be related to other records.

Use designer

The Use designer box is checked when the UI extension should be created or edited using the wysiwyg UI extension designer. *

Version

The Version field is used to select a version of the UI extension. If a version has not yet been activated, it is labeled “Being Prepared”. The version that is currently active can be selected using the “Active” option. Previously activated versions are identified by the date and time at which they were activated.

A new wysiwyg (what you see is what you get) UI extension designer is being developed and rolled out to a select group of users. This help page already reflects these changes.
CLASSIC UI EXTENSION BUILDER
HTML

The HTML field on the HTML tab is used to maintain the HTML code of the UI extension.

The maintenance of code in this field is supported by a code editor that offers special shortcut keys.

JavaScript

The JavaScript field on the JavaScript tab is used to maintain the JavaScript code of the UI extension.

The maintenance of code in this field is supported by a code editor that offers special shortcut keys.

CSS

The CSS field on the CSS tab is used to maintain the CSS code of the UI extension.

The maintenance of code in this field is supported by a code editor that offers special shortcut keys.

Settings

The Settings tab is used for the following settings:

Show on complete

When the Show on complete box is ticked, the UI extension must be shown when the record to which it belongs, is completed. A selection of records containing at least one UI extension with this setting can never be mass completed.

Description

The Description field is used to create a description of the UI extension.

Snippets
Field

The Field field of the Snippets section on the HTML tab is used to add fields to the UI extension. When the Append Snippet button is pressed, the HTML code for the field is inserted below the HTML code that already existed in the HTML field. The appended HTML code is highlighted to make it easier to identify the code that has been added.

The following types of fields can be added in the Snippets section:

  • attachment – An attachment field allows a file to be linked to the record.
  • checkbox – A checkbox is a single option that can be checked or unchecked.
  • custom-suggest – A custom-suggest field is a suggest field based on a custom collection for which a custom view has been made. This option is only available when at least one enabled custom view with record type ‘Custom Collection Elements’ exists.
  • date-time – A date and/or time field is used to specify a date and/or time.
  • location – A map is used to specify a location. The Google Maps app must be installed from the app store.
  • number – A number field is used to enter numerical values.
  • organization-suggest – An organization-suggest field allows a user to select any organization that they have access to.
  • person-suggest – A person-suggest field allows a user from an internal organization to select any person who is registered in his/her 4me account or in any of its support domain accounts. A user from an external organization can only use a Person field to select a person of that external organization.
  • secret – Available for app offerings. When a secret field is filled out by the customer, a webhook message will be sent to the integration engine using the app_instance.secrets-update webhook. More information in the Developer Documentation.
  • section – A section is used to place a header above a group of fields.
  • select – A select field offers a list of predefined options, from which only one can be selected.
  • site-suggest – A site-suggest field allows a user to select any site that they have access to.
  • team-suggest – A team-suggest field allows specialists to select any team that they have access to.
  • text – A text field is used to enter text.
Label

The Label field of the Snippets section on the HTML tab is used to add a label to the field on the user interface.

ID

The ID field of the Snippets section on the HTML tab is used to create a unique HTML ID.

Options

The Options of the Snippets section can add optional attributes to the field. The following options are available, depending on the selected combination of Category and Field:

  • add to subject – appends the value of this field to the subject of the request, problem or workflow.
  • checked (only for checkbox) – adds a default checkmark in the checkbox.
  • filterable – makes the field filterable.
  • hidden – creates a field that is only accessible to automation rules and APIs.
  • visible only to specialists, auditors, and account administrators of this account – the field is only visible to specialists, auditors, and administrators of the account in which the UI extension was created, and to specialists, auditors, and administrators of a support domain account that belongs to the same directory account as the account in which the UI extension was created.
  • multiline (only for text) – multiline text is accepted.
  • multiple values – more than one value can be added, or multiple attachments may be uploaded.
  • required – the UI extension field is required.
  • rich text (only for text) – text formatting and images can be entered in this field.
  • searchable – field values can be found by using global search.
  • show when empty – shows the field even when no value was entered.
Type

The Type field of the Snippets section on the JavaScript tab is used to add JavaScript code to the UI extension. When the Append Snippet button is pressed, the JavaScript code is inserted below the JavaScript code that already existed in the JavaScript field. The appended JavaScript code is highlighted to make it easier to identify the code that has been added.

The following types of JavaScript snippets can be added in the Snippets section:

  • asset required – The asset required option is used to add JavaScript code that ensures that the Asset field is required in Self Service when an end user is submitting a new request.
  • attachment required – The attachment required option is used to add JavaScript code that ensures that the ‘Attach file…’ link is required for new requests or newly assigned tasks.
  • note required – The note required option is used to add JavaScript code that ensures that the Note field is required in Self Service when an end user is submitting a new request.

The CSS tab also has a Type field. There it is used to add CSS code to the UI extension. When the Append Snippet button is pressed, the CSS code is inserted below the CSS code that already existed in the CSS field. The appended CSS code is highlighted to make it easier to identify the code that has been added.

The following types of CSS snippets can be added in the Snippets section:

  • field layout – The field layout option is used to add CSS code that will present the UI extension with less padding between each field. This can be useful when the UI extension is made up of a lot of fields.
  • hide elements – The hide elements option is used to add CSS code for hiding the default Subject and Note fields in the Self Service user interface. This option is also used to hide the Attachment hyperlink that is normally visible below the Note field in Self Service.
Phrases
Phrases

The Phrases field below the HTML field lists all texts of the UI extension that are available for translation in the Translations section of the Settings console.

WYSIWYG UI EXTENSION DESIGNER
Add Field button

The Add Field button adds a field to the UI extension, placed under the field that is currently selected. Each field has at least the following two properties:

Label

The Label field is used to enter the label that is displayed in front of the field (or above it, on small screens).

ID

The ID field is used to create a unique ID for this field.

The following field types can be selected:

  • Attachment – Allows a file to be attached. Allowed file types are defined in the ‘Security’ section of the Settings console.
  • Checkbox – Can be checked or unchecked.
  • Date and time – A field to capture a moment in time. It can be either a date field, a Time field, or a Date-time field. Fields that include a date can be configured to have a minimum value and a maximum value, taken from another date field in the form.
  • Email – Allows an email address to be captured. Entries are validated for correct structure. This field can have a placeholder text to help the user, e.g. ‘email@example.com’. A maximum number of characters can be defined for the field, as well as the way to store the email address: either in uppercase or in lowercase.
  • Location – Allows a map to be placed, on which a user can pinpoint some sort of occurrence. The zoom level of the map and it’s position (latitude and longitude or user’s location) can be defined for the map to be displayed. Activate the Google Maps App in the App Store to enable this field type.
  • Number – Allows a number to be entered, with a predefined number of decimals, and initial value (to be adjusted by the user). a minimal and a maximum value.
  • Rich text – Enables the user to add formatted text, images and video. This field can have a placeholder text to help the user, e.g. ‘Write down as much details as you can’.
  • Selectbox – Allow a user to make a choice between options. Edit the options using the Edit Options button. Select the Multiple box to allow multiple options to be selected.
  • Static text – A rich text field that cannot be populated or edited by the user. It can be used to add explanatory text, images, and video.
  • Suggest – Allows user to select an organization, person, site, or team from each of the corresponding records they have visibility over. To use a custom suggest, a custom view needs to be created in the account first.
  • Text – Capture any short text. This field can have a placeholder text to help the user, e.g. ‘Format: xxx.xxx.xxx’. A maximum number of characters can be defined for the field, as well as an initial text, and the way to store and display the text: either in uppercase or in lowercase.
  • Textarea – Capture larger texts. This field can have a placeholder text to help the user, e.g. ‘Tell us why you want this’. A maximum number of characters can be defined for the field, as well as an initial text.

Depending on the Field type, a number of properties can be selected:

  • Public – the field is only visible to specialists, auditors, and administrators of the account in which the UI extension was created, and to specialists, auditors, and administrators of a support domain account that belongs to the same directory account as the account in which the UI extension was created.
  • Required – the UI extension field is required. It is possible to define conditions for when this field should be required.
  • Hidden – creates a field that is only accessible to automation rules and APIs. It is possible to define conditions for when this field should be hidden.
  • Readonly – Disallows users to update the value in this field. It is possible to define conditions for when this field should be readonly.
  • Full width – Lets the field use all the width that is available.
  • Enable copy to clipboard – Adds an icon to the field which allows its contents to be copied to the clipboard.
  • Show when empty – show this field in View mode, even if it has no value.
  • Auto translation – Allows the value to be automatically translated into the preferred language of the user.
  • Filterable – makes the field filterable.
  • Searchable – makes the field searchable from the search in the header bar.
  • Add to subject – appends the value of this field to the subject of the request, problem or workflow.
  • Checked by default – (only for checkbox) – adds a default checkmark in the checkbox.
  • Multiple – more than one value can be selected
  • Show suggestions on focus -
Add Section button

The Add Section button adds a section to the UI extension. The visibility of this section can be defined based on conditions.

Label

The Label field is used to enter the label that is displayed above the section of the UI extension.

ID

The ID field is used to create a unique ID for this section.

Settings button

The Settings button opens up the Setting fields for the UI extension.

Show on complete

When the Show on complete box is ticked, the UI extension must be shown when the record to which it belongs, is completed. A selection of records containing at least one UI extension with this setting can never be mass completed.

Description

The Description field is used to create a description of the UI extension.