RenderDraw Documentation
  • About RenderDraw
    • What is RenderDraw?
    • RenderDraw Philosophy
    • Key features and benefits
  • Introduction
  • Getting Started with RenderDraw
    • Installation
    • Adding a RenderDraw License to a user's account
    • RenderDraw Permission Sets
      • Using user access policies for automated permission set & License Assignment
    • Relating Drawings to a Salesforce Record
    • CAD Conversion
      • Setup of CAD Conversion
      • UI CAD Conversion for Salesforce for Salesforce Admins
      • Version 1
        • CAD Conversion API (Direct Use)
          • Example input for Conversion
      • Version 2 (proposal)
        • Purpose
        • Sample File Input Conversion
  • Diving deeper
    • RenderDraw Architecture
      • RenderDraw Components
      • Storage of your Drawings
        • Connecting to your drawings
      • Supported Formats
    • Relationships
      • Why Metadata Matters
        • Advanced Metadata Relationships
          • Child Lookup
          • Parent-Child Relationships
      • Record Management
        • Scene Settings
    • Performance Considerations
    • Development Resources
    • Using Components on LWR Digital Experiences
    • Utilizing Interactions within Lightning Flow
    • Fixing Common Issues
  • Usage Scenarios
    • Use Cases
      • 2D
        • Part Finder
          • Data Setup for B2B
            • Choose where you want to display your Product Catalogs
            • Setup Field on Catalog Object
            • Setup Group and Files
          • Parse PDF Catalogs to attach images
          • Base setup for initial catalog page
            • Sharing of Files
            • Clone Pages
          • Create Callouts for Parts
          • Utilize OCR to highlight callouts
          • Optionally show inventory or availability based on data
          • Create Interactions for hover and click actions
          • Create a reusable, connected Datatable
        • Custom 2D App Development using Salesforce
        • 2D Admin Guide (Clicks, not Code)
          • Setting your object up for 2D visuals
          • Setup 2D Scene Settings for a record
          • Add a background image to your scene
          • Adding Droppable Areas and Drop Zones to a Scene
          • Adding Draggable Items to a Scene
          • Relating Components to Salesforce Data
          • Add a DataSource to a 2D scene to bind data
          • Adding Layout Drawing menu to your component (Floorplan & Spatial Drawing)
          • Linking your clicks to Actions / Flows
          • Visual Rules engine
          • Hover Actions and Popovers
          • Change your Layout Drawing visuals based on Salesforce Data in a DataSource query
          • Enable users to take snapshots
          • Show additional Drawings with your 2D Canvas
          • Use Color Selection to add clickable regions to your 2D Scene
          • Use OCR to add Clickable regions to your 2D scenes.
            • Enable Azure OCR in your Remote Site settings & Metadata
            • Add Layout Areas using OCR
        • Data interaction within a Flow
          • Modifying Canvas with APEX
        • 2D User Guide
          • Take a snapshot
      • 3D
        • Admin
          • Adding Components to your Lightning Pages
          • Examples
            • Asset Management
            • Product Visualization
            • Setup for 3D Visual Configuration Scenarios
              • Salesforce CPQ
              • Conga CPQ
              • Custom Configuration Scenarios
            • 3D Product Photography
          • Setup 3D Scene
            • Visual Scene Setup
              • Interaction Events
              • Grouping
              • Labeling
              • Actions
              • Attributes (Look & Feel)
            • Configuration
              • Interaction Events
                • Action Items
                • Conditions
                • Steps
        • Developer
          • Custom 3D App Development using Salesforce
        • End-User Usage
          • View Related 3D Converted files on a record
          • 3D Annotations & Comments
      • CAD Conversion
        • CAD Conversion using Admin UI
          • Prior to getting started...
          • CAD Conversion UI within Salesforce
        • Automatic Conversion in Salesforce
          • Integration User
          • Remote Site Setting
          • Setup Connected App
          • Setup Custom Settings for Triggering Conversion
          • Test your Files
          • Extending the integration using Platform Events
      • RenderDraw Interactive Maps
        • Admin Setup
        • End User Usage
      • Other Apps
        • RenderDraw Data Utilities
          • Essentials
            • Swiper
            • Flow Image display
            • QR Code Generator
            • QR Code Scanner
          • Standard
            • 360º Virtual Tours
              • Administration
              • Usage
            • AnnotateIt! Images
              • Admin's Guide to AnnotateIt! components
              • Permissions / Authorization
            • Standalone Datatable
          • Advanced
            • AnnotateIt! PDF Editor
            • Parsing PDFs
            • CSV Importer
        • RenderDraw for Propel
          • Initial Setup
            • Common Issues
          • CAD Conversion & Visual Viewing
          • Annotate Item Attachments
        • MeasurePro (iOS App)
          • Creating a Deep Link to Launch with Parameters
      • Interacting with RenderDraw using Lightning Messaging Service (LMS)
        • Canvas Element Hovered
        • Canvas Element Selected
        • Canvas Initialized
        • Canvas Interaction
        • Record Selected
        • Code Example of Listening to LMS Events
  • API Documentation
    • 3D Components API
      • Events (Aura)
        • EVT_Renderer_Context_Details_Closed
        • EVT_Renderer_Element_Added
        • EVT_Renderer_Get_CameraPositionandTarget
        • EVT_Renderer_Get_Hierarchy
        • EVT_Renderer_Loaded
        • EVT_Renderer_Mesh_Selected
        • EVT_Renderer_Mesh_Selection_Cleared
        • EVT_Renderer_Select_Component
        • EVT_Renderer_Screenshot_Taken
      • Components (Aura/LWC)
        • 3D Interaction Canvas (LWC)
        • 3D Advanced Renderer (Aura)
        • 3D Scene Director (Aura)
        • 3D Simple Renderer (Aura)
        • 3D File Attachment Viewer (Aura)
    • 2D Components API
      • 2D Interaction Canvas
      • 2D Scene Director
    • Universal Components Used throughout the Suite
      • dynamicContentComponent_treeGrid
    • Data Objects used throughout the Suite
      • Canvas
      • BaseCanvasItem
      • LayoutWall
      • DropZone
      • DroppableArea
  • 👬Digital Twin
    • Digital Twin App
      • Setup
        • Steps to Setup Digital Twin Capabilities
        • RenderDraw Relationship Settings
        • Visualization
      • Asset Search
      • Digital Twin LWC Component
        • Custom Component Interaction with Renderer
        • Digital Experience Tips and Tricks
Powered by GitBook
On this page
  1. Digital Twin
  2. Digital Twin App
  3. Digital Twin LWC Component

Custom Component Interaction with Renderer

PreviousDigital Twin LWC ComponentNextDigital Experience Tips and Tricks

Last updated 23 days ago

Digital Twin Action Metadata: Customizing Your DigitalTwin LWC Component Experience

As you dive deep into the immersive world of asset visualization with the RenderDraw Digital Twin package, we understand that customization is crucial. That's why we've introduced the Custom Metadata Type: RenderDraw Digital Twin Action, allowing Salesforce administrators to tailor the DigitalTwin component's UI to meet specific business needs.

Here's a quick guide to understanding and utilizing these settings:

Fields Overview:

  1. Label: Assign a unique name to the action

    1. This will be your reference point

  2. RenderDraw Digital Twin Action Name: Auto populates based on Label field

  3. Display in Popup: Decide where you want the action to display

    1. If set to true, your action will appear in a pop-up window that overlays the drawing

    2. If set to false, it will be neatly integrated into a sidebar alongside the drawing

  4. Flow Name: Input the API name of the Lightning flow you wish to display

    1. This is typically a screen flow tailored for the chosen action

  5. Action Label: Craft a user-friendly label

    1. This is what your users will see in the action menu when they wish to invoke your flow

  6. Action Icon: Define the look of your action using any Salesforce icon name

    1. This icon will be showcased in the action menu

  7. Order: Determine the sequence of your action in the context menu.

    1. A lower order will prioritize its position

  8. RenderDraw Digital Twin Settings: Link your action to a specific digital twin setting

    1. This dictates when your action will be displayed

Interacting with the DigitalTwin Component:

When designing your custom flows, remember to set up string input parameters for both recordId and contextId. These parameters are essential to retrieve relevant data and ensure seamless interaction between the flow and the DigitalTwin component.

Advanced: Interacting with the Renderer

For those looking to create even more dynamic interactions, our renderer's public API is at your disposal. Utilize the following format to call any of our public API methods:

const payload = {
	contextId: this.contextId,
	name: "showToastNotification",
	parameters: {
		title: this.title,
		mode: this.mode,
		message: this.message,
		messageTemplate: this.messageTemplate,
		iconName: this.iconName,
		type: this.type,
		duration: this.duration,
		messageTemplateData: this.messageTemplateData
	}
};
publish(this.messageContext, CANVAS_INTERACTION_CHANNEL, payload);

To facilitate these interactions, ensure you have the necessary imports in your module:

import { publish, subscribe, MessageContext } from "lightning/messageService";
import CANVAS_INTERACTION_CHANNEL from "@salesforce/messageChannel/RDraw__Canvas_Interaction__c";

The RenderDraw Digital Twin package offers you a world of customizability. By understanding and leveraging the Digital Twin Action metadata, you can enhance the user experience and meet the unique demands of your business. Dive in, customize, and let your DigitalTwin component truly reflect your vision.

👬