Creates stylish, interactive HTML button toolboxes directly from FME Form. This transformer simplifies the process of building web-based launch panels for Experiences in FME Realize—but it can be used for any purpose that benefits from custom buttons in HTML. Each button can include a name, icon, background color, and link to an external or internal web page or service.

This transformer is ideal for:

- Quickly prototyping HTML-based interfaces for use in FME Realize, field apps, or dashboards;

- Generating lightweight, visually appealing button layouts;

- Simplifying toolbox generation without writing raw HTML.

Input

Any feature. In most workflows, this transformer is preceded by a AttributeCreator or ParameterFetcher transformers. It is possible to feed button definitions from a spreadhsheet, database or similar sources.

Output

A feature with an HTML attribute html_content containing the styled toolbox layout. This HTML is ready to:

- Be streamed as a web page from FME Flow;

- Be opened inside a WebView in FME Realize;

- Be used in any custom HTML environment.

The transformer writes the resulting HTML into an attribute called html_content. This naming is intentional—it matches the default expected by the HTML writer, making it easy to connect directly without renaming attributes.

Keep in mind, the transformer overwrites any previous html_content attributes, which means you can't get more buttons by chaining a few of these transformers.

Parameters

General Settings

Toolbox Name: A visible title at the top of the toolbox

Number of Buttons: From 1 to 9. Displays matching parameter groups for configuration.

Buttons Per Row: Controls layout width (e.g., 3 = three buttons in each row).

Button Properties

Button Filter (Optional). Controls which buttons are shown for each feature. The value must be a string of digits 1–9, separated by the | character (pipe).

Example: 2|3|5. If this attribute is provided, only the buttons with matching numbers (as configured in the transformer) will be included in the output. This allows you to generate a custom toolbox per feature type (e.g., hydrants get 6 buttons, pipes get only 2).

> Valid values:

A single digit: 4.

Multiple digits: 1|2|3.

Only digits 1 through 9 are allowed. No leading/trailing pipes or duplicates. If the value is missing or improperly formatted, the transformer logs a warning and falls back to including all buttons.

Button Size: Sets width/height in pixels (buttons are always square)

Icon Size (% of Button Size): Relative icon scale.

Button Corner Rounding: Border radius in pixels. A value of 12 gives a modern rounded look.

Play Sound on Click/Tap: When enabled, plays a short confirmation sound each time a button is tapped or clicked. This improves usability in mobile or AR environments by providing quick feedback.

The sound is lightweight and hosted by Safe Software. You can replace it in your own version if needed by replacing the path to the sound in AttributeCreator, sound_js attribute.

Button Background: Enables per-button background color.

> When enabled, each button can get a customizable background color. This works best with transparent PNG icons (like those from Icons8). If your icons already include a background, be mindful that color clashes or layering issues may occur.

Button Sections (1–9)

Each button has the following parameters:

- Name: Visible label shown below the icon

- Icon URL: The image displayed on the button. Works best with transparent PNGs or SVGs.

- Experience URL: The link triggered when the button is clicked

- Background: A hex color used as the button background (if enabled above)

Usage Notes

Sample icons available: To get started quickly, you can use these example icons hosted by Safe Software:

- Attributes

- Take Notes

- Smart Sensor

- Play Video

You’re encouraged to replace these with your own transparent PNGs or SVGs for full customization.

Using with FME Realize

This transformer is ideal for generating interactive toolboxes in FME Realize experiences.

The typical workflow looks like this:

- Design your toolbox once:

In FME Form, configure the transformer to include all possible buttons needed for the project (e.g., View Attributes, Play Video, Take Notes, etc.).

- Use the Button Filter dynamically:

Set up your workspace to expose the Button Filter Attribute as a published parameter (along with others like FEATURETYPE or ID). This allows each feature (e.g., pipe, hydrant) to display only the buttons relevant to it. The BUTTONFILTER value should use the pipe (|) character to separate button numbers (e.g., 1|2|4). This avoids ambiguity in URLs and works well with FME’s string tools.

- Publish to FME Flow:

Publish the workspace and register it as a webhook. You can do this from FME Flow by creating a Webhook URL tied to the workspace.

- Reference the webhook in your main workspace that creates an AR scene:

In your workspace, create the Summary Annotation attribute (fmear_feature_summary), add a Markdown link to launch the toolbox via the webhook. Here’s an example:

xToolbox](https://your-flow-instance/your-toolbox.fmw?BUTTONFILTER=1|2|4&ID=123&FEATURETYPE=WaterMain)

- Enjoy a dynamic experience:

When a field user taps the link, it opens a web-based toolbox tailored to that specific feature, displaying only the buttons that make sense for it.