Configuring HTML and Styles in FSM Mobile
Configure static HTML for event details and resource forms, and use CSS to style your custom content. For customization responsibilities and shared limits, see FSM Mobile Scripting and Customization.
In this topic:
Use semantic content such as paragraphs, headings, lists, emphasis, links, and tables. FSM Mobile sanitizes configured HTML before rendering it. The following table lists suitable HTML elements and attributes.
|
Content |
Examples |
|---|---|
|
Sections and headings |
|
|
Text and blocks |
|
|
Lists and tables |
|
|
Links and images |
|
|
Custom content hooks |
|
Use explicit end tags for non-void elements, for example <div></div>. Keep interactive controls and handlers in imported code. For limits on deprecated markup, see HTML Compatibility Limits.
Event Content
Event mappings belong under routes/mobile.event.article.<event type>.map. The CRM Task key is task. Project Tasks use projecttask when that feature is enabled. Do not use the older event.task.map path.
The label and sublabel properties supply event text. In the current agenda and selected-task presentation, these values render as text. Use body for formatted content in the selected event's detail/menu area. It is not displayed in the agenda card.
This fragment replaces the CRM Task event body with fixed HTML:
{
"routes/mobile": {
"event": {
"article": {
"task": {
"map": {
"body": "formulatext:'<p class=\"custom-guidance\">Review the service instructions before starting work.</p>'"
}
}
}
}
}
}
Replacing body replaces its existing mapped content. To retain existing case and task information, append the custom HTML to the existing body formula instead. Preserve the definition's other mappings, filters, and resource rules. Apply a Project Task change separately under event.article.projecttask.map, using fields valid for that record.
Resource Pages and Forms
Use html when adding elements. The readonly: true setting renders the value as HTML. An editable HTML element presents multiline text. The inlinehtml compatibility type resolves to read-only HTML.
Existing records need an applicable article map that supplies the content. A static element value is a default for record creation and does not replace loaded record values. When Automap is enabled, ensure it produces the intended mapping. For map syntax and precedence, see FSM Searches and Field Mapping.
This fragment adds fixed instructions to the existing Details resource. Its explicit read-only formula supplies the HTML for existing records without a NetSuite write destination:
{
"routes/mobile": {
"details": {
"article": {
"map": {
"customGuidance": "formulatext:'<p class=\"custom-guidance\">Review the service instructions before starting work.</p>'"
}
},
"element": {
"customGuidance": { "type": "html", "readonly": true }
}
}
}
}
A resource must also be selected for the intended jobs. For an existing or separately defined custom resource, see Selecting Resources.
Scoped Styling
For stylesheet import configuration, see Changing Registered Imports.
For example, custom-styles.css can contain:
.custom-guidance {
padding: 0.75rem;
border-left: 0.25rem solid #315d80;
}
.custom-button-content > button {
font: inherit;
padding: 0.5rem;
}
Target your custom content rather than FSM's internal classes or DOM structure. The CSS cascade applies. Internal styles do not universally outrank external styles. For supported element class tokens, see FSM Mobile Element Reference. A shadow root can encapsulate a custom widget's styles. Inherited properties and deliberately exposed host styling still need consideration.
HTML Compatibility Limits
Some deprecated configured HTML tags and attributes, including iframe-related markup and inline handlers, remain accepted for compatibility. Removal is planned without an announced date. Use semantic HTML and imported code when creating customizations. Configured-fragment compatibility does not establish support for embedding the complete FSM Mobile app in an iframe.