Page History

...

...

MQTT Broker ??? TagProvider ??? UNS Namespace (dynamic)
                                    ?
                              AssetTree Folder
                                    ?
                    ?????????????????????????????????
                  Header        AssetTree         MainPage
                 (Canvas)    (Navigation)     (DataGrid + Trend)
                                    ?
                          Client.Context.AssetPath
                          drives all content dynamically

When to Use This Skill

Use this skill when:

• The user wants to connect to an external MQTT broker (not create local simulated data)
• The data structure is dynamic or unknown upfront — the broker defines what exists
• The user mentions TagProvider, MQTT, IIoT, UNS integration, or auto-discovery
• The user wants an asset-navigation UI where selecting a tree node changes the displayed data
• The application is monitoring/visualization focused (not tight SCADA control)

...

Prerequisites

• Solution must be open (open_solution or create_solution completed)
• An MQTT broker must be accessible from the machine (local or remote)
• For testing without an external broker: FrameworX has a built-in MQTT broker and a SparkplugB simulator that can be started from Data Explorer → MQTT Tools

MCP Tools and Tables Involved

Implementation Steps

Step 0: Discover the MQTT Broker Data (Interactive)

Before creating any configuration, you need to see what data the broker has. This step is interactive — it involves the user.

...

Step 1: Create the TagProvider Connection

Fetch the schema and protocol details:

...

After creation, the TagProvider immediately starts discovering topics when runtime starts. Topics appear as dynamic tags under Tag.<ProviderName>.<topic.path>.

Step 2: Create the Linked Folder in AssetTree

The AssetTree folder is what makes the TagProvider data visible and navigable in the UI. A Linked Folder connects an AssetTree node to a TagProvider and specifies which initial nodes from the provider's namespace to display.

...

From this point down, the AssetTree is dynamic — the platform auto-expands the tree based on whatever the MQTT broker publishes. No further tag creation needed.

Step 3: Build the Layout (Header + AssetTree + Content)

The standard pattern for asset-navigation applications is a Layout with three regions:

...

• Header: Top bar — title, navigation buttons, status indicators
• Menu (left side): The AssetTree control — users click here to navigate assets
• Content (main area): The display that reacts to the selected asset

Step 4: Create the Header Display

A simple Canvas display with the application title:

...

{
  "table_type": "DisplaysList",
  "data": [
    {
      "Name": "Header",
      "PanelType": "Canvas",
      "Width": 1200,
      "Height": 60,
      "Description": "Application header bar",
      "Objects": [
        {
          "Type": "TextBlock",
          "Name": "Title",
          "Left": 20,
          "Top": 15,
          "Text": "MQTT Production Monitor",
          "FontSize": 18,
          "FontWeight": "Bold"
        }
      ]
    }
  ]
}

Step 5: Create the AssetTree Menu Display

A Canvas display containing the AssetTree control that drives navigation:

...

These properties drive the content display reactively.

Step 6: Create the MainPage (Dynamic Content)

The MainPage uses Asset() bindings to react to the user's tree selection. All content is driven by Client.Context.AssetPath.

...

// In scripts or CodeBehind:
double value = Asset(@Client.Context.AssetPath + "/Temperature");

// In display element LinkedValue fields:
// Static: @Tag.MQTT.plant.line1.temperature
// Dynamic: Asset(Client.Context.AssetPath + "/Temperature")

Step 7: Start Runtime and Verify

designer_action('start_runtime')

...

get_screenshot('runtime')

Code Examples

Asset() in CodeBehind (Display Events)

void Opening()
{
    // Optionally set a default branch to expand
    @Client.Context.TreeInitialBranch = "MQTT/spBv1.0/GroupID";
}

Asset() in Scripts

public static double GetTemperature(string assetPath)
{
    return TK.ToDouble(Asset(assetPath + "/Temperature"));
}

Data Type Handling for HTML5/Portable Clients

// WPF (.NET Framework 4.8) — automatic type resolution
var value = Asset("/MQTT/plant/line1/temperature");

// HTML5/Portable (NetStandard 2.0) — explicit conversion required
int intValue = TK.ToInt(Asset("/MQTT/plant/line1/count"));
double dblValue = TK.ToDouble(Asset("/MQTT/plant/line1/temperature"));
string strValue = TK.ToString(Asset("/MQTT/plant/line1/status"));
bool boolValue = TK.ToDigital(Asset("/MQTT/plant/line1/running"));

Verification

1. get_objects('UnsTagProviders') — verify the TagProvider was created with correct PrimaryStation
2. designer_action('navigate', 'Uns.AssetTree') → get_designer_state() — confirm the linked folder appears with the TagProvider reference
3. designer_action('start_runtime') → get_runtime_state() — confirm the TagProvider connection is active
4. get_screenshot('runtime') — verify the AssetTree populates and the Layout renders correctly
5. Ask the user to click different nodes in the AssetTree and confirm the DataGrid updates dynamically

Common Pitfalls

Variations

Variation A: Mixed Approach (TagProvider + Device Module)

...

• For specific TagProvider paths that need historical trending, create a Historian TagProvider connection
• TrendCharts can use Asset() syntax to automatically query historical data from historian TagProviders
• Useful when you need long-term trending on external data without creating local tags

Related Skills

• skill-device-mqtt — Explicit MQTT integration using Device Module (Channel → Node → Points)
• skill-asset-navigation — Generic asset-navigation UI patterns (not MQTT-specific)
• skill-sparkplugb-collector — SparkplugB Collector setup with Device Module

Documentation References

• TagProvider Services — Concept overview
• TagProvider Services How-to — Step-by-step procedures
• UNS TagProvider Services Reference — All properties and settings
• TagProvider Services Technology — Architecture deep dive
• MQTT Tools Reference — Data Explorer MQTT browser
• MQTT Integration Reference — TagProvider vs Device comparison

Open Items (Draft Notes)

...

In this section...

...