Configuring Tooltip Definitions
To customize the text that appears in tooltips when users hover over various parts of the Service Board UI, you first configure Tooltip Definitions, and then configure Tooltip Settings.
You can customize the text that appears in tooltips when users hover over the following objects in Service Board:
|
Location
|
Tooltips
|
|---|---|
|
Scheduler tab
|
• Job Cards on the Scheduler Job List
• Work Plan Cards on the Scheduler Job List
• Service Task Cards on the Scheduler Job List
• Installed Product Cards on the Asset Calendar
• Appointments on the Scheduler Calendar
• Events on the Scheduler Calendar
|
|
Map tab
|
• Job Cards on the Map Job List
• Job map pins
• Resource map pins
• Crew map pins
|
 |
• Tooltip content is loaded on demand, and is cached on the client the first time it is loaded from the server. To clear the cache, users can refresh their browsers.
• On the Scheduler Calendar, when Appointments or Events are directly or indirectly updated, the tooltip cache is automatically cleared and the content is reloaded from the server and displayed on demand. Users can also click Refresh Job List to clear the tooltip cache.
|
To configure Tooltip Definition records:
1. In Max Designer, click Developer Tools (
) > , and then in the top left corner, search for and click Tooltip Definition.
) > , and then in the top left corner, search for and click Tooltip Definition.2. In the left pane, click Records, and then in the list view, in the top left corner, click Create (
).
).3. On the New Tooltip Definition page, complete the fields as follows, and then in the top left corner, click Save and Close (
).
).|
Field
|
Value
|
|---|---|
|
Name
|
The name of the new Tooltip Definition record, for example, Job Card Tooltip.
|
|
Related Object
|
The object for which you are creating this Tooltip Definition, for example, Job.
|
|
Identifier
|
This field auto-populates based on what you type in the Name field.
|
|
Code
|
Groovy code used to define the tooltip content and format, which must include fields from the specified Related Object, for example:
"<h4>Job Card Tooltip Example</h4>" +"<br>" +"<li style='font-weight:bold;color:gray;font-style:oblique;'>${svmx_name{</li> " +"<li>${svmx_workflow}</li>"
|
|
|
HTML syntax support for Job Card and Appointment tooltips is based on the following rules, which are not user-configurable.
• All HTML tags are permitted.
• All style attributes for HTML tags are permitted.
• All CSS attributes are permitted.
• For a tags, only the href, name, and target attributes are permitted.
• For img tags, only the src attribute is permitted.
• For input tags, only the type attribute is permitted.
|
◦ In the Code field, to format tooltips that include fields that have the Timestamp, Date, Interval, and Percent data types, be sure to add the special asterisk markup around the field value and specify the full identifier of the data type after the value.
|
|
Although the Timestamp data type can be specified without the full identifier, other data type values that are specified without this identifier are either rendered as timestamp values, or the original value is returned.
|
◦ The Timestamp data type can also be rendered in Since format. To do this, add special asterisk markup around field values, and specify io_timestamp_in_since_tooltip after the values.
▪ Values less than 5 minutes in the past are rendered as Just now.
▪ Values more than 5 minutes in the past are rendered as N minutes ago.
▪ Values that are in the future are not rendered in Since format, and default to the Timestamp data type format.
◦ The Address data type needs no special markup. The first value of the array value is rendered.
◦ The Currency Amount data type also needs no special markup. Be sure to invoke the getDisplayValue Groovy function to format the value.
◦ For Quantity data type, invoke the getDisplayValue Groovy function to format the value. To support localization, add special asterisk markup and the full identifier for the data type.
◦ To support localization for the Option List and Workflow data types, see the following examples.
|
Data Type
|
Example
|
|---|---|
|
Timestamp
|
"<li>*${svmx_start_datetime}*(io_timestamp)</li>"
|
|
Timestamp data type without full identifier
|
"<li>*${svmx_start_datetime}*</li>"
|
|
Timestamp data type in Since format
|
"<li>*${svmx_preferred_start_time}*(io_timestamp_in_since_tooltip)</li>"
|
|
Date
|
"<li>*${io_showcase_date}*(io_date)</li>"
|
|
Interval
|
"<li>*${io_showcase_date}*(io_interval)</li>"
|
|
Percent
|
"<li>*${io_showcase_percent}*(io_percent)</li>"
|
|
Address
|
"<li>${io_showcase_address ? io_showcase_address[0] : ''}</li>"
|
|
Currency Amount
|
"<li>${io_showcase_currency_amount?.getDisplayValue() ?: ''}</li>"
|
|
Quantity with localization support
|
"<li>*${io_showcase_quantity?.getDisplayValue() ?: ''}*(io_quantity)</li>"
|
|
Option List with localization support
|
"<li>*${io_showcase_option_list ? io_showcase_option_list[0].getRecordId() : ''}*(io_option_list)</li>"
|
|
Workflow with localization support
|
"<li>*${svmx_workflow ? svmx_workflow.getStateDefinitionUUID() : ''}*(io_workflow)</li>"
|