Introduction to Connected Experiences in FME Realize

Introduction

FME Realize is Safe Software’s Augmented Reality (AR) app, designed to bring any data into context of the real world. Unlike traditional AR tools, the power of FME Realize lies in its expandability, allowing users, not developers, to build custom workflows and extensions that enhance AR experiences.

Why Extend FME Realize?

The real strength of FME Realize is its ability to interact with external tools, databases, and services. We call these extensions “Сonnected Experiences” or simply “Experiences”.

Connected Experiences allow users to:

• Display detailed information about an object in AR.
• Link to external reports, AI agents, web applications, or live dashboards.
• Trigger actions in FME Flow, third-party APIs, or internal systems.
• Collect user input and pass it back to FME Flow for processing.

How Experiences Work in FME Realize

Experiences in FME Realize are displayed inside a WebView—a built-in browser that opens custom web pages, either:

• Directly from a link inside a Feature Summary Annotation.
• From other Experiences (for example, we can create a collection of Experiences on a single page), where parameters are passed from one page to another.

These experiences can take many forms:

• Static Pages (prebuilt web pages displaying content based on passed parameters).
• FME Flow Workspace and Gallery Apps running FME workspaces in the cloud.
• Webhooks & APIs triggering FME Flow or external services or real-time processes.

What This Article Covers

This article will guide you through creating and managing WebView experiences in FME Realize. You'll learn:

• How to pass parameters from AR features and Between Experiences.
• The different ways to structure your experiences.
• Best practices for handling user interactions and data inside a WebView.

By the end, you'll be able to customize and extend FME Realize to fit your workflow—whether it's integrating asset reports, updating your databases, or displaying live sensor data. Keep in mind, all the pages, buttons, and design choices shown in this tutorial were created by an FME user—not a developer. Your Experiences can look completely different—tailored to your needs, workflows, branding, and design preferences.

Passing Parameters From AR Features and Between Experiences

Links: The Starting Point for Experiences

Every Connected Experience in FME Realize begins with a link found in Feature Summary Annotations. These annotations provide users with key information about an asset while viewing it in AR, and they also serve as an entry point to deeper interactions.

A Summary Annotation can include:

• Static text (e.g., object descriptions)
• Dynamic attributes (e.g., feature names or IDs)
• Clickable links that trigger Experiences.
  

Usually, links open a WebView, displaying a connected Experience, such as a static web page, an FME Flow App, or an FME workspace-generated page.

Adding Links to Summary Annotations

To create a link in a Summary Annotation, we define the fmear_feature_summary attribute in FME Workbench, usually with the AttributeCreator transformer. This attribute supports Markdown, allowing us to format text and add links. 

In the following simple example, the link opens a WebView showing the home page of the Safe Software website:

The Summary Annotation can also be a lot more complex and include feature attributes, workspace parameters, FME functions, and more. 

Understanding Links with Parameters

Links can pass parameters to the Experience, providing context about the asset. These parameters may include feature ID, feature type, additional feature data (status, dates, required operations), and other parameters (visualization mode, user location, etc).

FME Workbench constructs links dynamically, usually in AttributeCreator, to ensure that Experiences receive the right information. Parameters can be passed directly or indirectly through multiple pages.

1. Direct Passing (Single Link)

A Summary Annotation contains a link that passes parameters directly to an Experience. The example below shows the “Attributes” links, which are directly linked to an FME webhook that reads the source data using feature ID and retrieves its attributes.

The Experience immediately receives the parameters and displays a browser window with the results of its action, in this case, an HTML table with all the attributes of the selected water main:

This is useful for important or frequently used experiences, such as displaying feature attributes.

2. Indirect Passing (Through an Intermediate Page)

Some Experiences route parameters through multiple pages instead of passing them directly. This is useful when a Summary Annotation is too small to contain multiple links or detailed interface elements.

A Summary Annotation is limited to:

• Markdown only (no HTML or advanced styling).
• A compact size (about 5 lines of text).
• A small number of links (too many links would make it cluttered).

If an Experience only requires one or two links, placing them directly in the Summary Annotation is fine. However, if we need:

• More Experiences to choose from, or
• A user-friendly interface with larger buttons,

Then, we may use an intermediate HTML page—we can call it a toolbox page or home page, etc. For example

1. The Feature Summary Annotation contains a link to a Toolbox page.
   
2. The Toolbox is an HTML page generated with an FME workspace that presents multiple options, each with a large, easy-to-tap button.

3. Clicking a button passes the same parameters to the final Experience. This way, users can navigate step by step through the Toolbox options, rather than deal with a cluttered Summary Annotation.
   

Choosing the Right Experience Type

Each Experience type offers different levels of customization and interactivity, letting users tailor FME Realize to their needs.

• Use Static Pages for simple, yet customizable prebuilt content.
• Use FME Flow Apps for interactive, FME Flow driven web tools.
• Use Webhooks for more customized Experiences.

In fact, even a static page with parameter handling can behave like a light-weight webhook, since it customizes its behavior based on the data passed to it. The distinction lies in where the logic runs—on the server (traditional webhook) or in the browser (static page with JavaScript).

Building consecutive experiences is not required, but it's a flexible way to improve usability for expanding user-defined functionality. 

URL parameters don’t have to use the same names across different Experiences. Workbench workspaces can handle parameter mapping flexibly, allowing us to fetch parameters and pass their values to other Experiences using any naming convention that suits our workflow.

FME Realize supports multiple types of Connected Experiences, allowing users to extend functionality in different ways. These Experiences range from static pages to dynamic content generated by FME Flow or other services.

Static Pages
Some Experiences are simple prebuilt web pages that do not require a live connection to a service. These pages can:

• Display static information (e.g., instructions, videos, legal notices, help guides):
  https://example.com/instructions.html
• Use basic JavaScript to process parameters from the URL. The following snippet shows how to use JavaScript to get the URL parameters for this URL:
  https://demo.com/qaAgent.htm?GISID=1234&TYPE=WtrMain&AGENT=Gemini

  const urlParams = new URLSearchParams(window.location.search);
  document.getElementById("Id").value = urlParams.get('GISID') || "";
  document.getElementById("Type").value = urlParams.get(TYPE') || "";
  document.getElementById("Agent").value = urlParams.get('AGENT') || "";

FME Flow Workspace Apps
An FME Flow Workspace App is an easy way to run FME workspaces inside FME Realize.

Webhooks and APIs
An Experience can send a request to a webhook, which can utilize FME or other products. For more information, see Working with FME and Webhooks.

Building Experiences in Practice

Now that we’ve covered the different types of Connected Experiences, let’s get hands-on.
We’ll go over a few practical examples that demonstrate each approach to Experience building—from simple static pages to fully dynamic, FME-driven workflows.

Each example will show:

• How parameters are passed and handled
• How the Experience is triggered from FME Realize
• What type of interaction or output is expected

Whether you're creating a lightweight static viewer or a powerful data-driven dashboard, these examples will give you a solid foundation to build on.

The Main Workspace

The main workspace defines the AR transformation and handles the creation of summary annotations.

Open the ExpUndergroundInfrastructure.fmw workspace and examine the AttributeCreators in the “Summary Annotation” bookmark.

The AttributeCreators create two attributes:

• The “_buttons” attribute defines which Experience buttons we will see on the “Toolbox” page, which is our first Experience. “_buttons” will become a part of the toolbox URL in the fmear_feature_summary attribute. The “_buttons” value is a url-safe string (spaces are replaced with “%20”) of button numbers from 0 to 5, which means we can have up to 6 buttons for each feature. So a string “0 1 2 3 4 5” in a url-encoded form looks as follows:  0%201%202%203%204%205
  
  An underground pipe may have just three to four buttons, whereas a hydrant, a visible on-the-ground object, can have all six to provide more functionality. Each button will be associated with an Experience.
  
  

Underground Pipe	Fire Hydrant

• There is no limit on the number of Experiences—it is totally up to users to decide what they would like to see in their AR app!
  
  
• The “fmear_feature_summary” attribute defines what we see in our feature summary annotations and includes the link to an FME Flow webhook that generates our “Toolbox” page:

**FIRE HYDRANT**
**ID :** @Value(ID) | **Status :** @Value(Status)

[Toolbox](@Value(_toolbox_url)&ID=@Value(ID)&DATASET=@Value(fme_feature_type)&BUTTONS=@Value(_buttons)).

The Toolbox Workspace

The _toolbox_url attribute used in fmear_feature_summary is a link to a webhook created from a workspace called ExpToolbox.fmw once we publish it to FME Flow. Open and inspect it.

This workspace receives the following parameters:

• ID (a unique feature ID)
• DATASET (a feature type, to which the feature belongs)
• BUTTONS (a set of buttons that will be created for the feature)
• (not shown in the url) the webhook token.

With AttributeSplitter, ListExploder, and AttributeFilter, we split the BUTTONS parameter into several features, each creating a short HTML snippet defining a button. 

For example, the following snippet will create the Attributes button:

<div class="button-wrapper">
  <a href="https://fmeflow/ExpAttributes.fmw?ID=@Value(_id)&DATASET=@Value(_dataset)"
           class="button button-attributes">
    <img src="https://img.icons8.com/ios-filled/50/ffffff/data-sheet.png">
  </a>
  <div class="label">Attributes</div>
</div>

We pass the ID and the DATASET parameters to the next workspace, ExpAttributes.fmw, which shows feature attributes. 

The Attributes Workspace

This workspace defines a new experience linked to our Toolbox page. Now we can have a closer look at it.

The workspace receives the ID and Dataset parameters from the Toolbox, reads the data (this is why we needed to know the dataset) and keeps only the features with the specified ID.

The AttributeExploder allows the creation of separate features representing the pairs “Attribute Name”:”Attribute Value” from all the attributes of a feature. Having our data in this form allows the creation of an HTML page without knowing the actual schema of a feature type, which allows our workspace to work with any datasets.

Each “Attribute Name”:”Attribute Value” feature creates an HTML table row snippet:

<tr><td>@Value(_attr_name)</td><td>@Value(_attr_value)</td></tr>

We aggregate these snippets into an HTML table and insert it into the full HTML template:

<body>
    <div class="container">
        <h1>Asset type: @Value(_dataset), ID: @Value(_id)</h1>
        <table>
            @Value(html_table_line)
        </table>
    </div>
</body>

The full page goes back to FME Realize and displays all the feature attributes.

If you prefer to use a standard FME HTMLReportGenerator transformer, it will work too. However, custom HTML allows a lot more styling choices and additional functionality. For example, you can fully redefine your CSS styles and make the table look according to your corporate standards. Or you can add some actions, for example, an “Edit” button that would allow editing attributes, and then a “Submit” button would run an FME Flow workspace app that would update your central database—it is totally possible with the power of the FME platform.

Like the Toolbox Experience, we need to publish this workspace to FME Flow and create a webhook URL.

We finished the overview of the workflow that goes from our AR model, to the Toolbox page, and to the Attribute display page. Now let’s have a look at a few more Experiences linked to our Toolbox.

Linking Static Pages: 3D Model and Video

Linking to an existing page is a good choice when you want to provide materials that don’t change often—such as manuals, instructions, guides, or reference documents. This content can be a simple PDF, an HTML page, or even a YouTube video.

In this case, the Toolbox HTML button simply directs the user to the linked resource. The example below opens a YouTube video explaining how to clean a catch basin. The video will play in full-screen mode, as specified by the YouTube URL syntax.

<div class="button-wrapper">
    <a href="https://www.youtube.com/embed/5XzmrEkKGmo" class="button button-video">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/video.png" alt="Video">
    </a>
    <div class="label">Video</div>
</div>

Similarly, we can link a simple HTML page. The example below loads a technical specifications page of a Fire Hydrant. The page contains the main characteristics of the hydrant as well as a ThreeJS 3D model of it.

<div class="button-wrapper">
    <a href="https://safe-scenarios.s3.us-west-2.amazonaws.com/ThreeJSExamples/ARAssets/FireHydrant.html" class="button button-3d">
        <img src="https://img.icons8.com/?size=100&id=6667&format=png&color=ffffff" alt="3D Model">
    </a>
    <div class="label">3D Model</div>
</div>

Linking an FME Flow Workspace App

FME Flow workspace apps are an easy way to add more functionality to your AR solution.

<div class="button-wrapper">
    <a href="https://yourFMEFlowInstance/ExperienceNotes" class="button button-note">
        <img src="https://safe-scenarios.s3.us-west-2.amazonaws.com/images/notes.png" alt="Notes">
    </a>
    <div class="label">Notes</div>
</div>   

Conclusion

FME Realize is more than just a data visualization tool—it's a flexible platform that empowers FME users to extend their AR workflows with Connected Experiences. Whether you're displaying detailed asset attributes, integrating external systems, embedding 3D models, or launching dynamic reports, the possibilities are entirely in your hands.

As you've seen in this article, Experiences can be built using a combination of:

• Simple Markdown-based links inside Feature Summary Annotations
• Dynamic FME Flow-generated content
• Parameterized webhooks
• Static or interactive web pages
  
  

You don’t need to be a developer to create powerful and polished Experiences. Everything—from layout to logic—can be driven by your existing FME skills, using familiar transformers and workspace design principles.

The examples in this article are just a starting point. Your own Experiences may look completely different, reflecting your organization’s workflows, branding, and user needs. Whether you're building a toolbox of actions, launching an inspection form, or embedding a full dashboard—FME Realize gives you the tools to make it happen.

Now it’s your turn to experiment, extend, and realize your own vision for augmented reality.

Additional Resources

Tutorial: Getting Started with Augmented Reality | FME Realize

Creating an FME Flow AR App

Using FME Realize (FME AR Mobile App)

Placing 3D Models in the Real World (or Near You): A Guide to Location, Landmarks, and Accuracy in FME Realize