HTML Content and JavaScript Customization in FSM Mobile
Developers and administrators can use this topic to learn how to configure HTML content in the FSM Mobile app and when to use imported JavaScript functions.
This topic explains how to configure HTML content in FSM Mobile app and when to use imported JavaScript functions instead of an HTML field.
Choosing FSM Mobile Customization Features
Use the feature that matches the intended outcome.
|
Requirement |
Recommended Approach |
|---|---|
|
Static section heading |
Use a heading element. |
|
Create, edit, or delete access control |
Use the resource create, edit, and delete properties. |
|
Static formatted content |
Use an html element with a corresponding map reference. |
|
Dynamic or interactive custom behavior |
Use imported JavaScript functions. |
A heading element displays a static heading in the configured order and does not submit a value when the form is saved. Resource permission properties control the relevant action without relying on CSS or HTML workarounds.
Static HTML Content in FSM Mobile
Use an html or inlinehtml element for static, semantic content in a mobile form or page. Examples include labels, paragraphs, links, alerts, and other formatted content. FSM Mobile app sanitizes configured HTML content before rendering it.
For new configurations, use an html element. Retain inlinehtml only when necessary.
Use the documented supported HTML tags and attributes. Do not use configured HTML to modify FSM application behavior, navigation, state, or application APIs.
Mapping HTML Content for Existing Records in FSM Mobile
An HTML or inlineHTML field needs a corresponding reference in the applicable map property for its content to appear on existing records.
The mapping must return the content that the field is intended to display. This requirement applies even when the configured value is fixed HTML.
Test HTML content by opening an existing record in FSM Mobile and confirming that the mapped content appears as intended.
Using Imported JavaScript Functions for Dynamic FSM Mobile Behavior
Use an imported JavaScript function when custom behavior needs to respond to the page, interact with the DOM, or add interactivity beyond static HTML content.
Configure imports under routes/mobile/import. An import references a JavaScript, JSON, or CSS file in the NetSuite File Cabinet. Imported JavaScript is loaded after the document has finished loading.
{
"routes/mobile": {
"import": {
"customMessage": "/FieldService/import/custom-message.js"
}
}
}
Treat imported code as an external customization. It is responsible for its own behavior and must not modify FSM application JavaScript, application state, database, API endpoints, sign-in page, or navigation.
Use standard browser APIs to work with the rendered page. Prefix custom HTML IDs, names, classes, and data attributes with custom to reduce naming collisions.