LogoLogo
IntegrationsInstallationAdministrationContact Support
XMPro Platform
XMPro Platform
  • What is XMPro?
  • Getting Started
    • Browser Requirements
    • End-To-End Use Case
  • Resources
    • What's New in 4.4
      • What's New in 4.3
      • What's New in 4.2
      • What's New in 4.1.13
      • What's New in 4.1
      • What's New in 4.0
    • Blueprints, Accelerators & Patterns
    • Integrations
    • Sizing Guideline
    • Platform Security
    • Icon Library
    • FAQs
      • Implementation FAQs
      • Configuration FAQs
      • Agent FAQs
      • General FAQs
      • External Content
        • Blogs
          • 2024
            • How to Build Multi-Agent Systems for Industry
            • Why Solving the Problem Doesn’t Solve the Problem: The Importance of Scalable Intelligent Operations
            • Content, Decision, and Hybrid: The Three Pillars of Multi-Agent Systems in Industry
            • Revolutionizing Manufacturing with AI and Generative AI: XMPro’s Intelligent Business Operations Sui
            • The Evolution of Skills: Lessons from Agriculture in the GenAI and MAGS Era
            • Part 1: From Railroads to AI: The Evolution of Game-Changing Utilities
            • Part2: The Future of Work: Harnessing Generative Agents in Manufacturing
            • Bridging Automation and Intelligence: XMPro’s Approach to Industrial Agent Management
            • XMPro APEX: Pioneering AgentOps for Industrial Multi Agent Generative Systems
            • Part 5 – Rules of Engagement: Establishing Governance for Multi-Agent Generative Systems
            • How to Achieve Scalable Predictive Maintenance for Industrial Operations
            • Understanding the Difference Between XMPro AI Assistant and AI Advisor
            • Part 3 – AI at the Core: LLMs and Data Pipelines for Industrial Multi-Agent Generative Systems
            • MAGS: The Killer App for Generative AI in Industrial Applications
            • The Importance of Pump Predictive Maintenance for Operational Efficiency
            • Progressing Through The Decision Intelligence Continuum With XMPro
            • The Value-First Approach to Industrial AI: Why MAGS Implementation Must Start with Business Outcomes
            • New Guide – The Ultimate Guide to Multi-Agent Generative Systems
            • The Ultimate Guide To Predictive Analytics
            • Part 4 – Pioneering Progress | Real-World Applications of Multi-Agent Generative Systems
            • Scaling Multi-Agent Systems with Data Pipelines: Solving Real-World Industrial Challenges
          • 2023
            • How to master Predictive Analytics using Composable Digital Twins
            • Accelerate Your AI Workflow: The 3 Key Business Advantages of XMPro Notebook
            • The Roadmap to Intelligent Digital Twins
            • What is edge computing, and how can digital twins utilize this technology?
            • THE TOP 5 USE CASES FOR COMPOSABLE DIGITAL TWINS IN RENEWABLES + HOW TO SUPERCHARGE RESULTS WITH AI
            • The Technology Behind Predictive Maintenance (PdM) : Hardware & Software
            • The Benefits of Using Digital Twins in Smart Manufacturing
            • XMPro I3C Intelligent Digital Twins Strategy Framework
            • The TOP 5 use cases for composable digital twins in mining – and how to use AI to supercharge result
            • The TOP 5 use cases for Composable Digital Twins in the Oil & Gas industry
            • Why Decision Intelligence with Digital Twins is “kinda like” DCS for Automation and Control
            • XMPro becomes an NVIDIA Cloud-Validated partner
            • From Reactive to Predictive : Introduction to Predictive Maintenance
            • Microsoft Azure Digital Twins : Everything You Need To Know
            • Unlocking Efficiency: The Right Time & Strategy to Launch Your Digital Twin for Enhanced Asset Manag
            • Revolutionize Your Supply Chain: How Digital Twins Can Boost Efficiency and Cut Costs
          • 2022
            • Create a Common Operating Picture of Your Operations with XMPro
            • 7 Trends for Industrial Digital Twins in 2022
            • How to Build a Digital Twin + 60 Use Cases By Industry
            • What are composable digital twins in the metaverse?
          • 2021
            • The Value of a Composable Digital Twin
          • 2020
            • Lean Digital Twin: Part 2
            • Digital Twin: Your Most Productive Remote Worker
            • From the Control Room to the Bedroom
            • Lean Digital Twin: Part 3
          • 2019
            • My Digital Twin: Digital Twin Applications for Real-time Operations (Like Me)
          • 2018
            • XMPro IoT Operational Capability Survey Results 2018
            • What is a Digital Business Platform and Why Should I Care?
            • [Robotic] Process Automation for IoT
            • 3 Patterns of Industrial IoT Use Cases
            • The CXO’s Guide to Digital Transformation – May The Five Forces Be With You
            • Is Security More Important Than Trustworthiness for Industrial IoT?
            • XMPro at bpmNEXT 2018: Watch The Presentation
          • 2017
            • The Top 5 Reasons to Invest in an IIoT Development Platform
            • IoT Business Solutions Start with Big Data & Create Business Outcomes
            • How AI Bots Bring Digital Twins to Life
          • 2016
            • How To Get Started With Industrial IoT
            • How To Overcome The Top 5 Challenges To Industrial IoT Adoption
            • What is an IoT Platform vs. an IoT Business Application Suite?
            • Industrial IoT: How To Get Started with Predictive Maintenance
            • 3 Ways The Internet of Things is Transforming Field Service
            • 7 Types of Industrial IoT Data Sources (And How To Use Them)
          • 2015
            • How Important Are Processes To The Internet Of Things?
            • Understanding the Value of Real Time KPI Management as Your Next Strategic Project
            • 6 Myths About Machine Learning
            • 10 Predictive Analytics Use Cases By Industry
            • What is a “Business Moment” in your business?
            • Does Operational Intelligence Make Business Intelligence Obsolete?
            • How To Reduce Operational Costs by 36% with Predictive Analytics
            • From Many, One – The Nature of Complex Event Processing
            • Herding Cats: What Enterprise Architects need to know about Business Process Management
          • 2014
            • Making Business Operations More Intelligent
          • 2013
            • Best Next Action Is The Next Big Thing For Intelligent Operations
            • The learns from two ‘Best in class’ organisations acquiring BPM technology
          • 2012
            • Why Intelligent Business Operations is Mobile, Social and Smart
            • Why Do You Want Intelligent Business Operations?
            • How big of a problem are ‘dark processes’?
            • Operational Risk: When You Stick Your Head In The Sand
            • The Difference Between Event-based And Workflow-based Processes
          • 2011
            • Is mobile BPM now essential to the business?
            • Stretch Socially Dynamic Processes To Fit Your Business
            • Social Listening – Get Control Of The Conversation
            • Operations Management – The Keys To KPIs
            • Benefits of BPM v 1.0
            • How to Prioritise Processes
          • 2010
            • The Business Drivers
            • Preserving Capability and Agility
            • Mobile BPM
        • Use Cases
          • Aging Pipe Predictive Maintenance in Water Utilities
          • Air Quality Monitoring For Agriculture
          • Alarm Management and Triage
          • Asset Condition Monitoring for Surface Processing Plants in the Mining Industry
          • Bogie Health Monitoring in the Rail Industry
          • Boiler Feed Water Pumps
          • CHPP Throughput Loss Monitoring
          • Casting Guidance
          • Conveyor Belt System Monitoring and Optimization in Automotive Manufacturing
          • Cooling Tower Fin Fan Monitoring
          • Cyclone/Slurry Pump Monitoring
          • Demand Planning to Reduce Stockholding in Stores
          • Demin Water Monitoring for Boiler Tube Corrosion
          • EV Battery Assembly Process Optimization for the Car Manufacturing Industry
          • Flood Prediction & Response in Water Utilities
          • Golden Batch For Culture Addition In The Dairy processing Industry.
          • Golden Batch Monitoring
          • Improve First Pass Yield (FPY)
          • Induced Draft (ID) Fan Monitoring
          • Long Conveyor Monitoring
          • Monitor Process Health to Reduce Cash-to-Cash Cycle
          • Monitor Storm Water Reservoirs For Flood Prevention
          • Monitor and Reduce Energy Consumption
          • Oil Well Maintenance Planning
          • Oil Well RTP Monitoring
          • Pipe Scaling Prediction for Roller Cooling
          • Precision Irrigation in Agriculture
          • Predict Heat Exchanger Fouling
          • Predictive Maintenance & Asset Health Monitoring For Haul Trucks In The Mining Industry
          • Predictive Maintenance For Mobile Assets Within The Mining Industry
          • Predictive Maintenance for Robotic Arms in the Automotive Industry
          • Predictive Maintenance for Wind Turbines
          • Pump Health Monitoring in Water Utilities
          • Pumping Station OEE
          • Real-time Balanced Business Scorecard (BBS)
          • Real-time Safety Monitoring
          • Short Term Inventory Planning
          • Strategic Performance & Safety Oversight for Global Mining Operations
          • Wheel and Track Wear Monitoring In The Rail Industry
          • Wind Turbine Performance Optimization
        • Youtube
          • 2024
            • Discover Gen AI Powered Operations With XMPro iBOS
            • Generative AI and Digital Twins in 2024 - XMPro Webinar
            • Go From Reactive To Predictive Operations In Water Utilities With XMPro iDTS
            • How to add Timestamps to Elements in XMPro App Designer
            • How to Build an AI Advisor for Industrial Operations Using XMPro
            • How XMPro Stream Hosts and Collections Enable Scalable, Real-Time Data Processing
            • Mind Blowing AI Agentic Operations For Industry With XMPro MAGS
            • The Ultimate Beginner's Guide To Predictive Analytics Podcast
            • XMPro's Flexible Deployment Options: Flexible Cloud & On-Premise Solutions For Industry
            • XMPro iBOS: The Only AI-Powered Suite for Scalable Intelligent Operations
          • 2023
            • 2023 XMPro Product Roadmap - Webinar
            • An Introduction To Intelligent Digital Twins - Webinar
            • Energy and Utilities Asset Optimisation through Digital Twin technology
            • Explore Model Governance using our MLflow Agent
            • Exploring XMPro Notebook and MLflow for Data Science and Model Governance
            • How Changing Properties For One Block Can Be Applied To All Blocks Within Same Style Group
            • How do I Use A Button To Update a Data Source In XMPro App Designer
            • How Does XMPro Compare To ESBs (Enterprise Service Buses)-
            • How to Configure and Integrity Check in Data Streams
            • How To Create A Widget Within XMPro App Designer
            • How to Create Intelligent Digital Twins Using XMPro AI
            • How to export grid data to Excel In XMPro App Designer
            • How to Revolutionize Your Supply Chain with Digital Twins
            • How To Rotate Text In App Designer
            • How To Update a Data Source Using A Button
            • How To Use & Clone XMPro Demos For Your Own Use
            • How To Use And Build 3rd Party Apps To Extend The Capabilities Of The XMPro App Designer.
            • How to use Avatars and why they are important
            • How to view stream host logs In XMPro Data Stream Designer
            • Logging Provider Support With XMPro
            • Mastering Health Check Endpoints: A Guide to Ensuring Service Uptime and Performance with XMPro
            • Mastering Root Cause Analysis with XMPro: Capture, Value, Impact
            • Microsoft Azure Digital Twins Everything You Need To Know
            • Model Based Predictive Maintenance (PdM) With XMPro
            • Monthly Webinar - Accelerate your digital twin use cases - XMPro Blueprints, Accelerators & Patterns
            • Optimizing Time Series Chart (TSC) Performance
            • Predictive Maintenance & Condition Monitoring - A Hot Seat Q&A Session
            • Predictive Maintenance with XMPro iDTS
            • Smart Facilities Management with Intelligent Digital Twins
            • The Benefits of using Digital Twins in Smart Manufacturing
            • The Four Industrial Revolutions Explained In Under 4 Minutes! #industry4 #smartmanufacturing
            • The Roadmap To Intelligent Digital Twins
            • The Technology Behind Predictive Maintenance (PdM) - The Hardware & Software that makes PdM Tick...
            • THE TOP USE CASES FOR COMPOSABLE DIGITAL TWINS IN RENEWABLES
            • Tips on how to use cache in agent configuration and get live updates
            • Webinar - XMPro 4.3 Release Showcase
            • What is a Digital Twin- Why Composable Digital Twins is the Future.
            • What Is Predictive Maintenance- (PdM)
            • What To Do When a Data Source Is Not Showing in Pass Page Parameter
            • XMPro - The World's Only AI - Powered Intelligent Digital Twin Suite
            • XMPro - The World's Only No Code Digital Twin Composition Platform
            • XMPro AI : How It Works
            • XMPro AI End To End Use Case
            • XMPro Auto Scale - Understanding Distributed Caching for Cloud-Native Applications
            • XMPro Promo Video - Dell Validated Design For Manufacturing Edge
          • 2022
            • Aggregate Transformation Agent Example - XMPRO Data Stream Designer
            • App Layout Best Practices for Desktop & Mobile - XMPro Lunch & Learn
            • Broadcast Transformation Agent Example - XMPRO Data Stream Designer
            • Calculated Field Transformation Agent Example - XMPRO Data Stream Designer
            • CRC16 Function Agent Example - XMPRO Data Stream Designer
            • Create a Common Operating Picture of Your Operations with XMPro
            • CSV Context Provider Agent Example - XMPro Data Stream Designer
            • CSV Simulator Agent Example - XMPRO Data Stream Designer
            • CSV Writer Agent Example - XMPRO Data Stream Designer
            • Data Conversion Transformation Agent Example - XMPro Data Stream Designer
            • Digital Twin Strategy To Execution Pyramid - XMPro Webinar
            • Event Printer Action Agent Example - XMPRO Data Stream Designer
            • File Listener Agent Example - XMPRO Data Stream Designer
            • Filter Transformation Agent Example - XMPRO Data Stream Designer
            • Group & Merge Transformation Agent Example - XMPRO Data Stream Designer
            • How To Bind Data To A Chart and Get It Working As Expected - XMPro Lunch & Learn
            • How To Send Data To My App (Including Caching Introduction) - XMPro Lunch & Learn
            • Join Transformation Agent Example - XMPRO Data Stream Designer
            • Min/Max Function Agent Example - XMPRO Data Stream Designer
            • PART 1- How To Manage Complex Operations in Real-time Using Composable Digital Twins
            • PART 3 - How To Manage Complex Operations in Real-time Using Composable Digital Twins
            • PART2 - How To Manage Complex Operations in Real-time Using Composable Digital Twins
            • Pass Through Agent Example - XMPRO Data Stream Designer
            • Pivot Table Transformation Agent Example - Count - XMPRO Data Stream Designer
            • Pivot Table Transformation Agent Example - Sum - XMPRO Data Stream Designer
            • Real-Time Is Real - How To Use Event Intelligence Tools to Manage Complex Operations in Real-time.
            • Row Count Agent Example - XMPRO Data Stream Designer
            • Sort Transformation Agent Example - XMPRO Data Stream Designer
            • Transpose Transformation Agent Example - Columns - XMPRO Data Stream Designer
            • Transpose Transformation Agent Example - Rows - XMPRO Data Stream Designer
            • Trim Name Transformation Agent Example - XMPRO Data Stream Designer
            • Twilio Action Agent Example - XMPRO Data Stream Designer
            • Union Transformation Agent Example - XMPRO Data Stream Designer
            • Variables & Expressions in App Designer - XMPro Lunch & Learn
            • Window Transformation Agent Example - XMPRO Data Stream Designer
            • XML File Reader Action Agent Example - XMPRO Data Stream Designer
          • 2021
            • The Value of a Composable Digital Twin - XMPro Webinar
          • 2020
            • 1. Understanding The Problem - UX Design - XMPRO
            • 1.1 Welcome - XMPRO UI Design Basics
            • 1.2 Introduction To UI Design - XMPRO UI Design Basics
            • 2. Creating User Stories - UX Design - XMPRO
            • 2.1 Responsive Design - XMPRO UI Design Basics
            • 2.2 Grids - XMPRO UI Design Basics
            • 2.3 Visual Hierarchy - XMPRO UI Design Basics
            • 2.4 Wireframes - XMPRO UI Design Basics
            • 3. Creating User Flow Diagrams - UX Design - XMPRO
            • 3.1 Color Palette - XMPRO UI Design Basics
            • 3.2 Typography - XMPRO UI Design Basics
            • 3.3 White Space - XMPRO UI Design Basics
            • 3.4 UI Elements - XMPRO UI Design Basics
            • 4. Plan Your App with Wireframes - UX Design - XMPRO
            • 4.1 Chart Types - XMPRO UI Design Basics
            • 4.2 Chart Styling - XMPRO UI Design Basics
            • 5. Designing for Dynamic Data - UX Design - XMPRO
            • Agents and Their Types - XMPRO Data Stream Designer
            • Data Wrangling: Row Transpose - XMPRO Data Stream Designer
            • Digital Twin: Your Most Productive Remote Worker - XMPRO Webinar
            • End-To-End Real-Time Condition Monitoring Demo - XMPRO Application Development Platform
            • Error Endpoints - XMPRO Data Stream Designer
            • Export and Import Recommendations - XMPRO App Designer
            • How To Add Buttons To Agents - XMPRO Data Stream Designer
            • How To Add EditLists to Agents - XMPRO Data Stream Designer
            • How To Change UI Language - XMPRO Subscription Manager
            • How To Configure a Stream Object - XMPRO Data Stream Designer
            • How To Configure The Aggregate Transformation - XMPRO Data Stream Designer
            • How To Configure The Anomaly Detection Agent - XMPRO Data Stream Designer
            • How To Configure The Azure SQL Action Agent - XMPRO Data Stream Designer
            • How To Configure The Azure SQL Context Provider - XMPRO Data Stream Designer
            • How To Configure The Azure SQL Listener - XMPRO Data Stream Designer
            • How To Configure The Calculated Field Transformation - XMPRO Data Stream Designer
            • How To Configure The CSV Context Provider - XMPRO Data Stream Designer
            • How To Configure The CSV Listener - XMPRO Data Stream Designer
            • How To Configure The Data Conversion Transformation - XMPRO Data Stream Designer
            • How To Configure The Edge Analysis Transformation - XMPRO Data Stream Designer
            • How To Configure The Email Action Agent - XMPRO Data Stream Designer
            • How To Configure The Email Listener - XMPRO Data Stream Designer
            • How To Configure The Event Printer Action Agent - XMPRO Data Stream Designer
            • How To Configure The Event Simulator Listener - XMPRO Data Stream Designer
            • How To Configure The FFT Function - XMPRO Data Stream Designer
            • How To Configure The File Listener - XMPRO Data Stream Designer
            • How To Configure The Filter Transformation - XMPRO Data Stream Designer
            • How To Configure The IBM Maximo Action Agent - XMPRO Data Stream Designer
            • How To Configure The IBM Maximo Context Provider - XMPRO Data Stream Designer
            • How To Configure The IBM Maximo Listener - XMPRO Data Stream Designer
            • How To Configure The Join Transformation - XMPRO Data Stream Designer
            • How To Configure The JSON File Reader Context Provider - XMPRO Data Stream Designer
            • How To Configure The MQTT Action Agent - XMPRO Data Stream Designer
            • How To Configure The MQTT Advanced Action Agent - XMPRO Data Stream Designer
            • How To Configure The MQTT Advanced Listener - XMPRO Data Stream Designer
            • How To Configure The MQTT Listener - XMPRO Data Stream Designer
            • How To Configure The Normalize Fields Function - XMPRO Data Stream Designer
            • How To Configure The OSIsoft PI Context Provider - XMPRO Data Stream Designer
            • How To Configure The OSIsoft PI Listener - XMPRO Data Stream Designer
            • How To Configure The Pass Through Transformation - XMPRO Data Stream Designer
            • How To Configure The PMML Agent - XMPRO Data Stream Designer
            • How To Configure The REST API Context Provider - XMPRO Data Stream Designer
            • How To Configure The RScript Agent - XMPRO Data Stream Designer
            • How To Configure The Run Recommendation Agent - XMPRO Data Stream Designer
            • How To Configure The Signal Filter - XMPRO Data Stream Designer
            • How To Configure The SQL Server Action Agent - XMPRO Data Stream Designer
            • How To Configure The SQL Server Context Provider - XMPRO Data Stream Designer
            • How To Configure The SQL Server Listener - XMPRO Data Stream Designer
            • How To Configure The SQL Server Writer Action Agent - XMPRO Data Stream Designer
            • How To Configure The Twilio Action Agent - XMPRO Data Stream Designer
            • How To Configure The Union Transformation - XMPRO Data Stream Designer
            • How To Configure The Unzip Function - XMPRO Data Stream Designer
            • How To Configure The Window Transformation - XMPRO Data Stream Designer
            • How To Create an App - XMPRO App Designer
            • How To Create and Manage Templates - XMPRO App Designer
            • How To Create and Publish a Use Case - XMPRO Data Stream Designer
            • How To Create and Use a Widget - XMPRO App Designer
            • How To Create App Data Connections - XMPRO App Designer
            • How To Create App Pages and Navigation - XMPRO App Designer
            • How To Create Recommendation Rules - XMPRO App Designer
            • How To Create Recurrent Data Streams - XMPRO Data Stream Designer
            • How To Do Integrity Checks - XMPRO Data Stream Designer
            • How To Edit Page Properties - XMPRO App Designer
            • How To Enable Audit Trails - XMPRO App Designer
            • How to Export, Import, and Clone a Data Stream - XMPRO Data Stream Designer
            • How To Export, Import and Clone an App - XMPRO App Designer
            • How to Export and Import an App - XMPRO App Designer
            • How To Find Help for an Agent - XMPRO Data Stream Designer
            • How To Install The XMPRO App Designer
            • How To Maintain and Capture Notes - XMPRO App Designer
            • How To Manage Agents - XMPRO Data Stream Designer
            • How To Manage and Use Server Variables - XMPRO Data Stream Designer
            • How To Manage Buffer Size - XMPRO Data Stream Designer
            • How to Manage Categories - XMPRO App Designer
            • How To Manage Categories - XMPRO Data Stream Designer
            • How To Pass Parameters Between Pages - XMPRO App Designer
            • How To Publish and Share an Application - XMPRO App Designer
            • How To Set Up and Use Charts in Live View - XMPRO Data Stream Designer
            • How To Set Up and Use Gauges in Live View - XMPRO Data Stream Designer
            • How To Share a Data Stream - XMPRO Data Stream Designer
            • How To Share a Use Case - XMPRO Data Stream Designer
            • How To Share an App For Design Collaboration - XMPRO App Designer
            • How To Troubleshoot a Use Case - XMPRO Data Stream Designer
            • How To Upgrade a Stream Object Version - XMPRO Data Stream Designer
            • How To Use App Files - XMPRO App Designer
            • How To Use Application Versions - XMPRO App Designer
            • How To Use Bar Gauge - XMPRO App Designer
            • How To Use Calendar - XMPRO App Designer
            • How To Use Chart Pan, Zoom and Aggregation - XMPRO App Designer
            • How To Use Chart Panes and Axes - XMPRO App Designer
            • How To Use Chart Print and Export- XMPRO App Designer
            • How To Use Charts - XMPRO App Designer Toolbox
            • How To Use Charts: Series - XMPRO App Designer
            • How To Use Collections - XMPRO Data Stream Designer
            • How To Use Content Card - XMPRO App Designer
            • How To Use D3 - XMPRO App Designer
            • How To Use Data Sources - XMPRO App Designer
            • How To Use Embedded Pages - XMPRO App Designer Toolbox
            • How To Use Fieldset and Field - XMPRO App Designer Toolbox
            • How To Use Flex Layout
            • How To Use Form Validation - XMPRO App Designer Toolbox
            • How To Use Input Mappings - XMPRO Data Stream Designer
            • How To Use Linear Gauges - XMPRO App Designer
            • How To Use Live View - XMPRO Data Stream Designer
            • How To Use Lookup - XMPRO App Designer
            • How To Use Maps - XMPRO App Designer
            • How To Use Page Layers - XMPRO App Designer
            • How To Use Pivot Grid - XMPRO App Designer
            • How To Use Polar Charts - XMPRO App Designer
            • How To Use Power BI - XMPRO App Designer
            • How To Use Radio Buttons - XMPRO App Designer Toolbox
            • How To Use Recommendations - XMPRO App Designer Toolbox
            • How To Use Select Box - XMPRO App Designer
            • How To Use Stacked Layouts - XMPRO App Designer Toolbox
            • How To Use Stream Host Local Variables - XMPRO Data Stream Designer
            • How To Use Tabs - XMPRO App Designer Toolbox
            • How To Use Tags - XMPRO App Designer Toolbox
            • How To Use Templated List - XMPRO App Designer
            • How To Use Templates - XMPRO App Designer
            • How To Use Text - XMPRO App Designer Toolbox
            • How To Use Text Area - XMPRO App Designer Toolbox
            • How To Use The Accordion - XMPRO App Designer Toolbox
            • How To Use The Block Styling Manager - XMPRO App Designer
            • How To Use The Box and Data Repeater Box - XMPRO App Designer Toolbox
            • How To Use The Button - XMPRO App Designer Toolbox
            • How To Use The Circular Gauge - XMPRO App Designer Toolbox
            • How To Use The Data Grid - XMPRO App Designer Toolbox
            • How To Use The HTML Editor - XMPRO App Designer Toolbox
            • How To Use The Hyperlink and Box Hyperlink - XMPro App Designer Toolbox
            • How To Use The Image - XMPRO App Designer Toolbox
            • How To Use The Indicator - XMPRO App Designer Toolbox
            • How To Use The Layout Grid - XMPRO App Designer Toolbox
            • How To Use The Number Selector - XMPRO App Designer Toolbox
            • How To Use The Pie Chart - XMPRO App Designer Toolbox
            • How To Use The Range Slider - XMPRO App Designer Toolbox
            • How To Use The Recommendation Chart - XMPRO App Designer Toolbox
            • How To Use The Scroll Box - XMPRO App Designer Toolbox
            • How To Use The Select Box - XMPRO App Designer Toolbox
            • How To Use The Sparkline - XMPRO App Designer Toolbox
            • How To Use The Textbox - XMPRO App Designer Toolbox
            • How To Use Tree Grid - XMPRO App Designer
            • How To Use Tree List - XMPRO App Designer
            • How To Use Unity - XMPRO App Designer Toolbox
            • How To Use Variables - XMPRO App Designer
            • How To Write and Maintain Notes and Business Case - XMPRO Data Stream Designer
            • Interactive 3D Models For Digital Twins - XMPRO Event Intelligence Platform
            • Manage Input Arrow Highlights - XMPRO Data Stream Designer
            • Manage Recommendation Access - XMPRO App Designer
            • Realize Value from End-To-End Condition Monitoring in 6 - 8 Weeks - XMPRO
            • Recommendation Versions - XMPRO App Designer
            • Solution Development Process For Event Intelligence Apps - XMPRO
            • Stream Hosts and How To Install Them - XMPRO Data Stream Designer
            • Use Case Versioning - XMPRO Data Stream Designer
            • XMPRO App Designer Overview - Event Intelligence Applications
            • XMPRO Data Stream Designer - Event Intelligence Applications
            • XMPRO Real-Time Event Intelligence Demo
            • XMPRO Recommendations - Event Intelligence Applications
          • 2019
            • Data Distribution Service: Using DDS in Your IoT Applications
            • My Digital Twin: Digital Twin Applications For Real-Time Operations (Like Me)
            • Setting up a Typical Industrial IoT Use Case with XMPro
            • XMPro Overview & Fin Fan Failure Demo
          • 2016
            • XMPro iBPMS Overview
          • 2013
            • XMPro Best Next Action - 3 Examples for XMPro blog
            • XMPro Case Management Example
            • XMPro Internet of Things Demo
          • 2012
            • Is Agile Business the New Normal
            • The Future of BPM Moving Towards Intelligent Business Operations
            • What industries does XMPro serve-
            • Who is XMPro for-
            • XMPro - The Social Listener - Why You Should Be Listening.wmv
            • XMPro Cool Vendor 2012
            • XMPro iBPMS For SharePoint
            • XMPro iBPMS v6 XMWeb for Intelligent Business Operations
            • XMPro News and Gartner BPM Sydney Summit Discount Offer.mp4
            • XMPro Version 6 - Introducing the Next Generation BPM for Intelligent Business Operations
    • Practice Notes
      • Unified Recommendation Alert Management
      • Performant Landing Pages in Real-Time Monitoring
  • Concepts
    • XMPro AI
      • XMPro Notebook
    • Data Stream
      • Stream Object Configuration
      • Verifying Stream Integrity
      • Running Data Streams
      • Timeline
    • Collection and Stream Host
    • Agent
      • Virtual vs Non-Virtual Agents
    • Application
      • Template
      • Page
      • Block
      • Canvas
      • Page Layers
      • Block Styling
      • Devices
      • Flex
      • Block Properties
      • Data Integration
      • Navigation and Parameters
      • Variables and Expressions
      • App Files
      • Metablocks
    • Recommendation
      • Rule
      • Execution Order
      • Auto Escalate
      • Form
      • Action Requests
      • Notification
      • Recommendation Alert
      • Deleted Items
      • Scoring
    • Connector
    • Landing Pages & Favorites
    • Version
    • Manage Access
    • Category
    • Variable
    • Insights
      • Data Delivery Insights
  • How-To Guides
    • Data Streams
      • Manage Data Streams
      • Manage Collections
      • Use Remote Receivers and Publishers
      • Manage Recurrent Data Streams
      • Use Business Case and Notes
      • Run an Integrity Check
      • Check Data Stream Logs
      • Use Live View
      • Use Stream Metrics
      • Troubleshoot a Data Stream
      • Upgrade a Stream Object Version
      • Setup Input Mappings
      • Use Error Endpoints
      • Use the Timeline
      • Context Menu
    • Application
      • Manage Apps
      • Manage Templates
      • Manage Pages
      • Import an App Page
      • Design Pages for Mobile
      • Navigate Between Pages
      • Pass Parameters Between Pages
      • Page Data
      • Manage Connections
      • Check Connector Logs
      • Manage Data Sources
      • Use Data Sources in the Page
      • Use Dynamic Properties
      • Use Expression Properties
      • Use Page Layers
      • Use Block Styling and Devices
      • Use Flex
      • Use Validation
      • Use Variables & Expressions
      • Create and Maintain Notes
      • Manage Widgets
      • Manage App Files
      • Manage Themes
    • Recommendations
      • Manage Categories
      • Manage Recommendations
      • Manage Rules
      • Manage Notifications
      • Manage Notification Templates
      • Subscribe to Notifications
      • Manage Forms
      • Manage Variables
      • Manage Alerts
      • Manage Alerts on Mobile
      • Manage Deleted Recommendation Items
    • Connectors
      • Manage Connectors
      • Building Connectors
      • Packaging Connectors
    • Stream Host
    • Agents
      • Manage Agents
      • Building Agents
      • Packaging Agents
      • Debugging an Agent
    • Manage Versions
    • Manage Access
    • Manage Categories
    • Manage Variables
    • Import, Export, and Clone
    • Publish
      • Admin Unpublish Override
    • Manage Site Settings
    • Manage Landing Pages & Favorites
  • Blocks
    • Common Properties
    • Layout
      • Accordion
      • Box & Data Repeater Box
      • Card & Content Card
      • Field & Fieldset
      • Layout Grid
      • Menu
      • Scroll Box
      • Stacked Layout Horizontal & Vertical
      • Tabs
      • Templated List
      • Toolbar
    • Basic
      • Calendar
      • Check Box
      • Color Selector
      • Data Grid
      • Date Selector
      • Dropdown Grid
      • Embedded Page
      • File Library
      • File Uploader
      • Html Editor
      • Image
      • Indicator
      • List
      • Lookup
      • Number Selector
      • Radio Buttons
      • Range Slider
      • Select Box
      • Switch
      • Tags
      • Text
      • Text Area
      • Textbox
      • Tree Grid
      • Tree List
    • Device Input
      • Location Capture
      • Visual Media Capture
    • AI
      • Azure Copilot
      • ChatGPT Copilot
    • Actions
      • Box Hyperlink
      • Button
      • Data Operations
      • Hyperlink
    • Recommendations
      • Alert Action
      • Alert Analytics
      • Alert Discussion
      • Alert Event Data
      • Alert Form
      • Alert List
      • Alert Timeline
      • Alert Triage
      • Alert Survey
      • Recommendation Chart
    • Visualizations
      • Autodesk Forge
      • Azure Digital Twin Hierarchy
      • Bar Gauge
      • Chart
      • Circular Gauge
      • D3 Visualization
      • Esri Map
      • Image Map
      • Linear Gauge
      • Live Feed
      • Map
      • Pie Chart
      • Pivot Grid
      • Polar Chart
      • Power BI
      • Sparkline
      • Time Series Analysis
      • Tree Map
      • Unity
      • Unity (Legacy)
    • Advanced
      • Metablock
    • Widgets
  • Administration
    • Administrative Accounts
    • Language
    • Companies
      • Register a Company
      • Manage a Company
      • Manage Company Subscriptions
      • Manage License
    • Subscriptions
      • Manage User Access
      • Setup Auto Approval/Default Subscriptions
      • Request and Apply a License
    • Users
      • Invite a User
      • Register an Account
      • Profile
      • Change Password
      • Reset Password
      • Delete a User
      • Change Business Role
  • Installation
    • Overview
    • 1. Preparation
    • 2. Install XMPro
      • Azure
      • AWS
      • On-Premise
    • 3. Complete Installation
      • Configure Auto Scale (Optional)
      • Configure Health Checks (Optional)
      • Configure Logging (Optional)
      • Configure SSO (Optional)
        • SSO - Azure AD
        • SSO - ADFS
      • Create Base Company
      • Install Stream Host
        • Windows x64
        • Azure Web Job
        • Ubuntu 20.04 x64
        • Docker
      • Install Agents & Connectors
  • Release Notes
    • v4.4.18
    • v4.4.17
    • v4.4.16
    • v4.4.15
    • v4.4.14
    • v4.4.13
    • v4.4.12
    • v4.4.11
    • v4.4.10
    • v4.4.9
    • v4.4.8
    • v4.4.7
    • v4.4.6
    • v4.4.5
    • v4.4.4
    • v4.4.3
    • v4.4.2
    • v4.4.1
    • v4.4.0
    • Archived
      • v4.3.12
      • v4.3.11
      • v4.3.10
      • v4.3.9
      • v4.3.8
      • v4.3.7
      • v4.3.6
      • v4.3.5
      • v4.3.4
      • v4.3.3
      • v4.3.2
      • v4.3.1
      • v4.3.0
        • v4.2.3
        • v4.2.2
        • v4.2.1
      • v4.2.0
      • v4.1.13
      • v4.1.0
      • v4.0.0
Powered by GitBook
On this page
  • Metablock Properties
  • Behavior
  • Data Source
  • Value
  • Real World Use Cases
  • Enhancing Chart Display
  • Streamlining Pump Status Display
  • Autodesk: visualize 2D & 3D models
  • Autodesk: Visualize 2D & 3D models with authentication
  • Creating a Metablock Script: Step-by-Step Guide
  • Step 1: Search for a code snippet
  • Step 2: Writing your Metablock script
  • Step 3: Testing your code locally (Optional)
  • Step 4: Configure the Metablock in App Designer
  • Example Files
  • Security Features
  • FAQs
  • Why did the JavaScript code in my Metablock not execute on page load?
  • How can I load multiple script files?
  • Why is the Metablock throwing 500 errors related to styling and script files?

Was this helpful?

Export as PDF
  1. Blocks
  2. Advanced

Metablock

PreviousAdvancedNextWidgets

Last updated 2 days ago

Was this helpful?

Metablock allows pro-code designers to leverage libraries to add their dynamic blocks in XMPro using script files.

We recommend leveraging generative AI to write the scripts. This approach can significantly streamline the development process and enhance the functionality of the blocks.

Only the is required. Utilize the other properties based on your specific needs for the Metablock behavior.

Metablock Properties

Behavior

Presentation File (HTML)

Upload the HTML script file that will be rendered in your Metablock, which is used to create dynamic blocks that may display data from a or from .

<div class="foo">bar</div>

Alternatively, you can write your scripts in a single HTML file that includes both CSS and JavaScript. This approach is ideal for smaller applications.

<!-- Style with CSS the div element with class foo the color blue -->
<style>
    .foo { color: blue }
</style>

<!-- Html to show the text "foo" -->
<div class="foo">foo</div>

<!-- JavaScript to change the text "foo" to "bar" when the page has loaded -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const fooDiv = document.querySelector('.foo');
        fooDiv.innerHTML = 'bar';
    });
</script>

Styling File (CSS)

If you wish to add styling, upload a CSS file to style your Metablock control.

.foo {
    color : green;
}

Script File (JavaScript)

If you wish to run JavaScript, upload a JavaScript file for your Metablock. Place any initial/startup values as constants in this file.

const foo = 'foo';

Data Source

Common Properties

Common properties include: filter, sort, show # of results, and skip # of results;

// Access data source when the metablcok is loaded (optional) 
function onDataLoaded(data){
  //Access a value from the data source
  const foo = data.find(obj => 'foo' in obj).foo;
}

// Access live updates on the data source after the metablock has been loaded (optional)
function onDataChanged(data, changes){
  
}
onDataLoaded(data) sample data format
[
    {
        "ReadingNo": 911,
        "Timestamp": "2024-08-16T07:24:00.1791525Z",
        "value": 3.6695501388374483,
        "entityid": "static",
        "_$parentProperties": {},
        "_$parentExpressions": [],
        "_$state": {
            "_$typeName": "EntityState",
            "name": "Unchanged"
        }
    }
]

The data above originates from a data stream that we’ve set up and it runs once upon page load. Keep in mind that the data format might differ based on your data source configuration.

onDataChanged(data, changes) sample data format
//data from `data` variable
[
    {
        "ReadingNo": 1156,
        "Timestamp": "2024-08-16T08:04:52.3154712Z",
        "value": 1.5450710600917559,
        "entityid": "static",
        "_$parentProperties": {},
        "_$parentExpressions": [],
        "_$state": {
            "_$typeName": "EntityState",
            "name": "Unchanged"
        }
    }
]
//data from `changes` variable
[
    {
        "ReadingNo": 1156,
        "Timestamp": "2024-08-16T08:04:52.3154712Z",
        "value": 1.5450710600917559,
        "entityid": "static",
        "_$parentProperties": {},
        "_$parentExpressions": [],
        "_$state": {
            "_$typeName": "EntityState",
            "name": "Unchanged"
        }
    }
]

In this example, both the data and changes variables contain identical data, indicating that there are no updates. However, in a real-world scenario, the changes variable would capture any modifications to the initial data.

Value

Value Mapping

If you wish to define value mappings for run-time use, you can configure user-defined key-value pairs. These values remain static during application rendering.

When selecting Server Variables as a Source for the Value Mapping, the list of unencrypted Server Variables will be displayed. Tick the Encrypt checkbox to use an encrypted Server Variable for values like keys, secrets, or password. Note that only plain text values are supported for encrypted Server Variables due to the request proxying process.

Encrypted Server Variables will not have their value available immediately on the Metablock. Instead, you can use them inside a Fetch/XHR request or a WebSocket/MQTT message before being forwarded to the actual target.

  • Fetch/XHR Request - You can use encrypted server variables as part of the URL, Header, or Body of the Fetch/XHR request.

  • WebSocket/MQTT Message - You can use encrypted server variables as part of the WebSocket message. For MQTT Messages, you can use it as part of the following message types: Connect (Username and Password), Publish (Payload), and Subscribe (Subscribe Topics)

Proxy Requests

Tick to proxy requests on the AD Server, so that encrypted server variables are replaced with the actual value before being forwarded to the target request. This is ticked by default when using an encrypted server variable on the value mapping, but you can opt in to use it even without any encrypted server variable.

// Access Value mapping data when the metablock is loaded (optional)
function onValueMappingLoaded(data){
    //Apply a value from the value mapping
    const foo = data['foo'];
}
OnValueMappingLoaded(data) sample data format
  {
      "key": "Value",
      "isWorking": true,
      "counter": 10
      "password": "{{var-x:Encrypted Variable Name}}" //Encrypted Server Variable template
  }

Note: The password property will not have the actual value yet when it is mapped from an Encrypted Server Variable. Instead, it is just a template for the Server Variable name.

Real World Use Cases

Enhancing Chart Display

Use Value Mapping to incorporate user input for displaying Harmonic Frequency, maintaining connector integrity while improving data visualization.

Streamlining Pump Status Display

Leverage Value Mapping to dynamically pass URLs from other data sources or utilize expressions, eliminating the need for manual URL adjustments during version updates.

Autodesk: visualize 2D & 3D models

Note: This is a simple example to demonstrate the APS Viewer API using an unauthenticated repository. Refer to the authenticated use case for a more complex example that includes security measures for credentials.

Autodesk: Visualize 2D & 3D models with authentication

Autodesk: Authentication using Connector

Autodesk: Authenticate using Value Mapping

Creating a Metablock Script: Step-by-Step Guide

Step 1: Search for a code snippet

Find relevant sample, we search for sample Autodesk Forge code and found the following links:

Step 2: Writing your Metablock script

Adapt the sample code to the Metablock format. For simplicity, the HTML, CSS & JavaScript has been combined into a single file.

<!-- main.html -->
<h1>Autodesk Forge Viewer</h1>
<div id="main"></div>
/* main.css */
h1 {
    font-family: Arial, sans-serif; 
    color : #333;
}
// main.js

var hasInitialized = false;

function onValueMappingLoaded(data) {
    
    // Prevent multiple initializations
    if (hasInitialized) 
        return;
    
    hasInitialized = true;
    
    // Load the CSS forge dependencies
    const cssViewerUrl = 'https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css?v=v7.*';
    loadCSSViewer(cssViewerUrl);
    
    // Load the forge viewer
    var viwerUrl = 'https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js';
    var viewer = loadViewer(viwerUrl);
    
    // Get the model URL from the data
    const modelUrl = data['model_url']

    // Load the model into the viewer
    loadModel(viewer, modelUrl);
}

function loadViewer(viewer_url) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = viewer_url;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

function loadCSSViewer(css_viewer_url){
    return new Promise((resolve, reject) => {
        const link = document.createElement('link');
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = css_viewer_url;
        link.onload = resolve;
        link.onerror = reject;
        document.head.appendChild(link);
    });
}

// Loads the model into the viewer
function loadModel(viewer, modelUrl) {
    viewer.then(() => {
        var myViewerDiv = document.getElementById('main');
        var viewer = new Autodesk.Viewing.Private.GuiViewer3D(myViewerDiv);
        var options = {
            'env': 'Local',
            'document': modelUrl
        };
        Autodesk.Viewing.Initializer(options, function onInitialized() {
            viewer.start(options.document, options);
        });
    }).catch((error) => {
        console.error('Failed to load Forge viewer:', error);
    });
}

Step 3: Testing your code locally (Optional)

Test it locally before implementation by running it from another html file (test-harness.html) via a local webserver. A 3D interactive model of a house should load in your browser.

  1. Create the test-harness.html file in the same directory as your Metablock files.

!-- test-harness.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Harness for XMPro Metablocks</title>
    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <!-- Link to the Metablock CSS file -->
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <!-- Container for the Metablock HTML content -->
    <div id="main">
        <p id="loading">Loading content...</p>
    </div>
        
    <!-- Include the Metablock JavaScript file -->
    <script src="main.js"></script>

    <script>
        // Fetch the content of main.html and inject it into the #main div
        fetch('main.html')
            .then(response => response.text())
            .then(html => {
                // Insert the fetched HTML into the #main div
                document.getElementById('main').innerHTML = html;

                // Initialize static data for the Metablock
                // This object allows passing specific initialization data to the JavaScript
                // through the onValueMappingLoaded function
                var data = {

                    // model_url: The url of the model to be displayed in the Metablock
                    // This would be passed in from the XMPro Metablock configuration Value Mapping.

                    model_url: "https://developer-autodesk.github.io/translated-models/dwfx-sample-house/f0224dd3-8767-45c1-ff99-5c9c881b9fee/0.svf"

                    // Add any other required initialization parameters here, for example:
                    // api_endpoint: "https://api.example.com/v1",
                    // debug_mode: true,
                    // theme: "dark"
                    
                }

                // Call the onValueMappingLoaded function with the initialization data
                // This function should be defined in main.js and will use the provided data
                // to set up the Metablock's initial state
                onValueMappingLoaded(data);
            })
            .catch(error => {
                // Log any errors that occur during the fetch operation
                console.error('Error loading main.html:', error);
            });
    </script>
</body>
</html>
  1. Run the test-harness.html in a webserver (node.js)

    1. Open a terminal or command prompt and navigate to your project folder where the metablock files are.

    2. Initialize a new Node.js project by running npm init -y

    3. Install Express by running npm install express

    4. Create public folder and moved your HTML, CSS & JavaScript files inside

    5. Create a file named server.js

    6. copy and paste below code in server.js file

      // server.js
      
      const express = require('express');
      const path = require('path');
      const app = express();
      const port = process.env.PORT || 3000;
      
      // Serve static files from the 'public' directory
      app.use(express.static(path.join(__dirname , 'public')));
      
      app.get('/', (req, res) => {
          res.sendFile(path.join(__dirname, 'public', 'test-harness.html'));
      });
      
      app.use((req,res) => {
          res.status(404);
          res.send(`<h1>Error 404: Resource not found</h1>`);
      });
      
      // Start the server
      app.listen(port, () => {
          console.log(`Server is running on http://localhost:${port}`);
      });
    7. To start the server, run node server.js

Step 4: Configure the Metablock in App Designer

  1. Drag the Metablock onto your page.

  2. Open Block Properties.

  3. Add the 3 Metablock files by clicking on the plus icon and uploading the main.html, main.css, main.js files and selecting each from their respective dropdown.

  4. Add a Value Mapping of key model_url and Value https://developer-autodesk.github.io/translated-models/dwfx-sample-house/f0224dd3-8767-45c1-ff99-5c9c881b9fee/0.svf

  5. Save the page

  6. Launch the page

Example Files

Security Features

We have added security features in Metablock to safeguard the users from potential attacks, When developing applications, we have selectively enabled the following features:

  • Form Submission

  • Pop-up windows

  • Modal Dialogs

  • JavaScript Features

  • External Resources

  • Allowed Downloads

Additionally, Metablock allows the use of specific hardware APIs for enhanced application capabilities, including camera, encrypted-media, full-screen, geo-location, speaker, accelerometer, gyroscope, magnetometer, and midi.

FAQs

Why did the JavaScript code in my Metablock not execute on page load?

Due to the timing of function instantiation, we recommend checking the document's ready state instead of relying on the load event:

Check document's ready state:

if (document.readyState === 'complete') {
    // add your logic here
}

Alternatively use one of the existing functions.

function onValueMappingLoaded(data) {
    // add your logic here
}

How can I load multiple script files?

To load external script files, include a script block like you would usually do on an html file. The same thing applies for styles/css files.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

You can also reference resources (js, css, image) uploaded on your App Files folder by following the correct format for the URL when referencing. Prefix the path with "./AppFiles/" and append the path of the App Files resource:

"./AppFiles/{path on the App Files}"

See the following example for the html that links different resources from the App File:

App Files

For an App Files folder structure that looks like this:

offline_files/
├── offline_image.png
├── offline-script.js
└── offline-styles.css

HTML

Link the resources by following the correct format.

ex. "./AppFiles/offline_files/offline-script.js"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
    <!-- Loading style resource from AppFiles -->
    <link rel="stylesheet" href="./AppFiles/offline_files/offline-styles.css">
</head>
<body>
    <!-- Loading image resource from AppFiles -->
    <img id="image" src="./AppFiles/offline_files/offline-image.png" alt="Offline Image">
    <div class="container">
        <h1>Welcome to My Web Page</h1>
        <p>This is a sample page that uses <span class="highlight">AppFiles</span> resources for js, css and images.</p>
        <button id="clickMe">Click Me!</button>
        <p id="counter">Button clicks: 0</p>
    </div>
    <!-- Loading script resource from AppFiles -->
    <script src="./AppFiles/offline_files/offline-script.js"></script>
    <!-- Loading script resource from an external link -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            let flipped = false;
            $('#image').click(function() {
                flipped = !flipped;
                $(this).css('transform', flipped ? 'scaleX(-1)' : 'scaleX(1)');
            });
        });
    </script>
</body>
</html>

Note: Displaying the Metablock may take some time since it needs to finish loading all referenced App File resources before it is shown on the Application. Avoid referencing heavy files from the App Files and use external resources instead.

You can also dynamically load JavaScript files but only for external resources and not from the App Files.

function loadScript(url) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = url;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

Why is the Metablock throwing 500 errors related to styling and script files?

This can occur if your HTML file includes inline script import code that does not follow the correct format. Only link external resources or make sure the file is uploaded on App Files and the URL format is correct.

<!-- unsupported import script -->
<link rel="stylesheet" href="styles.css">

<!-- unsupported import script -->
<script src="app.js"></script>

<!-- valid html -->
<span>foo</span>   

To use the Data Source property, include these predefined JavaScript functions in your :

You can refer to a working example script that demonstrates an Autodesk Forge visualization .

The Value Mapping opens a new blade to setup the Key and Value configuration. The options for the Value Source are Static, , and .

To use Value Mapping, include this predefined JavaScript function in your :

Access and visualize your engineering data and designs from the cloud using (APS, formerly Forge).

Leverage when embedding the in XMPro App Pages to display interactive 2D and 3D views of your designs.

When authentication is needed to dynamically load 2D and 3D views of your designs using the . We could utilize a Connector or the Value Mapping and use server variables for the credentials. This eliminates the need for hardcoded credentials while maintaining secure access to the visualization platform, (APS, formerly Forge). See the following Metablock examples on how to use these methods.

Leverage the to get Token from the authentication service and the to pass the token to the Metablock.

Leverage the to pass an encrypted Server Variable to the Metablock and call the authentication service using a Fetch request to get the Token.

Demo:

Github:

Make sure you have Node.js installed on your computer. You can download it from .

Open a web browser and go to

Refer to the simple use case for a complete set of files for this example.

Dynamic
Expression
Variables
Autodesk Platform Services
APS Viewer
Autodesk Platform Services
Very Basic 3D Viewer (autodesk-forge.github.io)
viewer-javascript-offline.sample/index.html at gh-pages · Autodesk-Forge/viewer-javascript-offline.sample · GitHub
https://nodejs.org/
http://localhost:3000
Presentation File (HTML)
Data Source
Value Mapping
Script File
here
Script File
APS Viewer
Value Mapping
REST API Connector
Data Source
Value Mapping
Autodesk
See the Common Properties article for more details on common Data Source properties.
meta-block-examples/src/packages/chart-display at main · XMPro/meta-block-examplesGitHub
meta-block-examples/src/packages/pump-status-display at main · XMPro/meta-block-examplesGitHub
meta-block-examples/src/packages/aps-view-basic at main · XMPro/meta-block-examplesGitHub
meta-block-examples/src/packages/aps-view-with-auth at main · XMPro/meta-block-examplesGitHub
meta-block-examples/src/packages/aps-view-with-auth-from-valuemapping at main · XMPro/meta-block-examplesGitHub
meta-block-examples/src/packages/link-appfiles-resources at main · XMPro/meta-block-examplesGitHub
Link App Files Resources Example
Logo
Logo
Logo
Logo
Logo
Logo
Fig 1: Enhancing chart display
Fig 2: Pump status display
Fig 3: Autodesk Platform Services Viewer example without authentication
Fig 4: Autodesk Platform Services Viewer example with authentication