> This is part 1 of 3 of the full documentation (pages 1–100 of 204). > The content is paginated: fetch every part to see all of it. > Next part: https://docs.renderdraw.us/llms-full.txt/1 > Page index: https://docs.renderdraw.us/llms.txt # About RenderDraw Embark on a visual journey with RenderDraw, where Salesforce takes on a new dimension. Turn static data into interactive experiences. Whether it's 2D or 3D rendering, CAD conversion, or data utility, RenderDraw has it all. Our unique toolkit allows you to breathe life into Salesforce objects and records, making data engagement not just necessary but also enjoyable. ### Interactive 2D & 3D Renderers * **2D Canvas**: Unleash the power of interaction! Create drag-and-drop 2D images that interact with your Salesforce objects and records, turning data management into a delightful game. * **3D Renderers**: Step into the future of data visualization! Explode your products or BIM into interactive 3D, creating a visual spectacle that enchants and informs. * **CAD Conversion**: Streamline your workflow with our efficient CAD Conversion functionality. Choose between automated conversions for simplicity or manual conversions for the fine-tuning Salesforce admins crave. ### Tailored Data Utility Tiers #### Basic Tier * **Image Swiper**: Make image management effortless. Swipe through multiple images hosted on Salesforce or a remote file server. * **Flow Images**: Enrich your Salesforce Flows with images directly from Salesforce. * **QR Code Generation & Scanner**: Dynamically generate and scan QR codes for Salesforce Lightning flows or record pages. #### Advanced Tier * **360º Visual Tour**: Explore your data from all angles with virtual tours using consumer 360º cameras. * **DataTables**: Create Salesforce-native interactive Datatables by visually selecting objects and fields. * **AnnotateIt! Images**: Edit images (JPG, PNG, SVG) right in your browser. All edits save as new versions on Salesforce files. Update the related record Chatter feed for a complete communication loop. #### Pro Tier * **PDF Parser**: Extract images, text, or DataTables from PDFs. Attach the extracted elements to Salesforce records automatically. * **AnnotateIt! PDFs**: Annotate PDFs right within Salesforce for an enhanced workflow. * **CSV Importer**: Import your data smoothly and efficiently with our CSV importer. With RenderDraw for Salesforce, data visualization becomes an adventure. You have the map and the gear, and Salesforce is your terrain. Choose your path, let your imagination run wild, and embark on your visual adventure. Let's make data visualization not just insightful but delightful with RenderDraw! # What is RenderDraw? > RenderDraw is built natively in Salesforce, empowering your Sales and Service teams, as well as your customers, to visualize and interact with your products. > > By leveraging your existing 3D drawings or 2D images your path to digital transformation is simple, scalable, and maintainable by your internal team. > > Our Admin friendly platform allows your team to create and manage virtual reality scenes with clicks, not code. > > Our customers quickly see an increase in sales conversions, notice a reduction in configuration errors, and have a clear path to scale self-service. ## See us in action **Have 2 minutes?** Check out this video overview of our product: {% embed url="" %} ### Guides: Jump right in Follow our handy guides to get started on the basics as quickly as possible {% content-ref url="/pages/hiG1l8dHaFGnTi2I1wkJ" %} [Installation](/introduction/getting-started-with-renderdraw/installation) {% endcontent-ref %} ### More about us: Our philosophy # RenderDraw Philosophy Integrated interactive visuals for your Salesforce Data ## Background RenderDraw was created because a native solution didn't exist to serve the growing trend of using interactive 2D & 3D in business and manufacturing. Our founders have backgrounds in manufacturing, and understand that there is more to 3D than attempting to sell something shiny (although shiny is nice, and definitely helps sales). #### **Our philosophy is simple**. Using 2D & 3D interaction, we can improve every sales and service scenario for every employee and customer within the manufacturing industry. #### **Looking to empower your service team with product visuals for more accurate customer service?** Explode a diagram, view related documents, or get some perspective by slicing it in half. #### **Looking to increase conversions of sales for your products?** Add a fully interactive 3D scene to your B2B commerce or Community to let users/customers see what they are configuring before they buy. *Offering a visual guided-selling expereince can increase conversions by roughly 42%.* #### **Looking to scale self-serve for customers through Communities?** Securley display 3D diagrams, allowing for native user interaction and triggering of processes, within Salesforce, based on those interactions. **Our goal is to deliver world class tools that provide the best 2D and 3D experience, all directly within Salesforce.** ## Design RenderDraw was designed and created with Salesforce scale in mind. By utilizing our 3D relationship management system, *we provide a framework to relate and use your 3D models at scale.* With flexibility in mind we allow your Admin to fully customize how your products are shown in 3D with clicks not code. *Creating a low lift implementation and scaleable maintenance.* # Key features and benefits RenderDraw is a fully-featured 2D & 3D platform for Salesforce. It was designed to be used in dozens of scenarios, we've listed a few of the key features and benefits here.
Feature
FeatureBenefit

3D Visualization

  • Product visualization for Sales and Service scenarios
  • Pan, zoom, angle and turn your 3D Renderings, right in Salesforce
  • Relate Salesforce objects to a 3D rendering and display them as part of the record
  • Scene is set up and managed by default. Add drawings to Salesforce easily

Exploded Technical Diagrams

  • Provide a greater level of detail for your complex products, using the drawings you already have

Lightning Flow Enablement

  • Utilize your 3D models anywhere within Salesforce with Lightning Flow compatibility
  • Admins can create custom 3D experiences using drag-and-drop components in the flow builder

Community Enablement

  • Enable customers or partners to interact, upload, and preview 3D files
  • Utilize built-in Salesforce approval processes, along with 3D interactions to improve the buying and service experience
  • Offer an immersive, guided-selling expereince for your customers and partners

Salesforce Mobile Enablement

  • View, pan, explode and interact with 3D renderings on the go, right from the Salesforce Mobile Experience
  • Provide interactive product walkthroughs in sales situations
  • Expand and explode diagrams in detail for immersive field service experiences

Interaction Tracking

  • Update records in Salesforce based on whether or not your users have interacted with your 3D models
  • Report on data gathered from interaction events. Know how long a prospect looked at a product and when they lost interest.

Screenshots

  • After you pan, zoom and explode your renderings, you can take a screenshot of the rendering to include as collateral in your Sales or Service scenarios.
  • Annotate, markup, and provide speficic notes on these screen-shots directly in Salesforce.

Salesforce Files Enablement

  • Preview, interact and screenshot your 3D renderings that are stored within Salesforce Files
  • No file size limitation or external system communication required
  • File Selector component works with any record type, displaying and previewing any attached 3D file to a record

Developer Enabled

  • Our fully documented, managed and updated component sets are configured to be used with custom applications developed by any resource

Dynamic Rendering

  • Visualize configuration by adding, removing and changing components in a 3D scene based on input within Salesforce

Visualization Relationship Management

  • Manage how you visualize 3D as it relates to your objects and applications
  • Define conventions for ANY Salesforce object and relate them to a 3D file hosted elsewhere
  • Scale your Salesforce org's use of 3D drawings to hundreds of thousands by way of mapping to existing resources
# Getting Started with RenderDraw RenderDraw is a Salesforce application that enables visual interaction across many digital mediums for any object or app in Salesforce. To get started with RenderDraw, consult with our architects for a personalized guide or follow the guide below ### 1 - Installation RenderDraw is a native Salesforce application, requiring a standard installation using the install link provided with your welcome email. Follow the guide to install in your Sandbox environment to setup RenderDraw, then repeat for other environments such as production.
{% content-ref url="/pages/hiG1l8dHaFGnTi2I1wkJ" %} [Installation](/introduction/getting-started-with-renderdraw/installation) {% endcontent-ref %} ### 2 - Define your visual interaction use case RenderDraw provides several components to enhance the Salesforce experience by adding interactive visual aids. Now it's time to decide where to start with your first interaction. If you are already aware of your direct use case e.g. 3D Visualization for a CPQ configuration, this section can serve as inspiration for other potential use cases for your Salesforce orgs to ensure you get the most value out of your RenderDraw experience. #### Logical flow In order to plan out your use of RenderDraw, it would make sense to understand what components we have to offer. Follow this flow to understand which components and use cases you should focus on during your setup of RenderDraw.
#### General information for setup of RenderDraw {% content-ref url="/pages/ynkSja0cdnknPOJ6jzyU" %} [Relationships](/introduction/diving-deeper/relationships) {% endcontent-ref %} {% content-ref url="/pages/lwLkmYfS5cH6G3eD9mqM" %} [Supported Formats](/introduction/diving-deeper/renderdraw-architecture/supported-formats) {% endcontent-ref %} {% content-ref url="/pages/Uk62rvjuyISQ3SISFC6W" %} [Performance Considerations](/introduction/diving-deeper/performance-considerations) {% endcontent-ref %} {% content-ref url="/pages/NpDLUAMONxLqEAkMUg2i" %} [Development Resources](/introduction/diving-deeper/development-resources) {% endcontent-ref %} #### 3D Use Cases {% content-ref url="/pages/lwLkmYfS5cH6G3eD9mqM" %} [Supported Formats](/introduction/diving-deeper/renderdraw-architecture/supported-formats) {% endcontent-ref %} {% content-ref url="/pages/TM7fdjMbeKxsjJKcHp35" %} [Visual Scene Setup](/usage-scenarios/use-cases/3d/admin/setup-3d-scene/visual-scene-setup) {% endcontent-ref %} {% content-ref url="/pages/OETuN8hadTVJpQRpVWnF" %} [Product Visualization](/usage-scenarios/use-cases/3d/admin/examples/product-visualization) {% endcontent-ref %} {% content-ref url="/pages/L12RGQD08c4NUOaeez9w" %} [Setup of CAD Conversion](/introduction/getting-started-with-renderdraw/cad-conversion/setup-of-cad-conversion) {% endcontent-ref %} #### 2D Use Cases {% content-ref url="/pages/qpTWZten7vKDfdDxKHYF" %} [2D](/usage-scenarios/use-cases/2d) {% endcontent-ref %} {% content-ref url="/pages/f33LGLlDlJaGgGktXAVp" %} [2D Admin Guide (Clicks, not Code)](/usage-scenarios/use-cases/2d/2d-admin-guide-clicks-not-code) {% endcontent-ref %} ### 3 - Configure and Setup {% content-ref url="/pages/rMRFMQ9xcNkMVlaF20dn" %} [Adding Components to your Lightning Pages](/usage-scenarios/use-cases/3d/admin/adding-components-to-your-lightning-pages) {% endcontent-ref %} {% content-ref url="/pages/NN2Fd4o7cTrPkf7TA3t1" %} [Why Metadata Matters](/introduction/diving-deeper/relationships/why-metadata-matters) {% endcontent-ref %} ### 4 - Replicate and Maintain Setup Metadata Relationships for your drawings Copy your settings from one record to another by setting up relationships and fallbacks based on unique ids. Look at this migration guide and the Record Lookup component documentation for more information
# Installation This page summarizes the essentials you will need to know to start with RenderDraw. Here you can find all the best practices and tips to install, set up permissions, and request license extensions. ### Install 1. To install the latest version, contact a RenderDraw representative [here](https://calendly.com/d/dqm-zjb-nrh/renderdraw-intro-call) 1. Package install is standard from Salesforce AppExchange. 1. If an earlier version exists, upgrading is the same process 2. Install for **Admins only**, and wait for completion 1. **By default, RenderDraw is enabled for 14 days as a trial** 1. An extension request can be made below ### Apply Permission Sets 1. Once installed, ensure you add the proper permissions for your users 1. The **RenderDraw User** permission set allows *view and interact-only* access using the Simple Renderer Component 2. The **RenderDraw Admin** **User** permission set allows for *the setup of relationships, AdvancedRenderer Component, and 3D Scene Setup* 3. To learn more about permission sets from Salesforce, [click here](https://trailhead.salesforce.com/content/learn/modules/data_security/data_security_objects) 4. To view all RenderDraw related permission sets, [visit this page](/introduction/getting-started-with-renderdraw/renderdraw-permission-sets) ### Partner Org License Extension 1. To request a **license extension** for your partner dev org, click [here](mailto:support@renderdraw.us?subject=Salesforce%20Trial%20License%20Extension%20Request%20\&body=I'd%20like%20to%20request%20a%20license%20extension%20for%20RenderDraw%0D%0A%0D%0A\(Fill%20in%20this%20information\)%0D%0AOrg%20Id%3A%0D%0ACompany%20Name%3A%0D%0AOrg%20Description%3A%0D%0ADuration%20\(Default%2014%20Days%2C%20Max%2090%20Days\)%3A%0D%0A) 1. Must be an existing signed partner ### Trial Org License Extension 1. To request a **trial license** extension for your org, [click here](mailto:support@renderdraw.us?subject=Salesforce%20Trial%20License%20Extension%20Request%20\&body=I'd%20like%20to%20request%20a%20license%20extension%20for%20RenderDraw%0D%0A%0D%0A\(Fill%20in%20this%20information\)%0D%0AOrg%20Id%3A%0D%0ACompany%20Name%3A%0D%0AOrg%20Description%3A%0D%0ADuration%20\(Default%2014%20Days%2C%20Max%2090%20Days\)%3A%0D%0A) and fill out the information # Adding a RenderDraw License to a user's account {% embed url="" %} ## [Adding a RenderDraw license to a user](https://app.tango.us/app/workflow/756c4219-592d-463c-928b-d8c81b8730fc?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links) To use RenderDraw components, a user (either standard Salesforce or Experience cloud) must have a user license installed. Let's take a look at how to add this license to a user's account. *** #### 1. Start in the Setup screen #### 2. Type "installed" in the search window ![Type "installed" in the search window](https://images.tango.us/workflows/756c4219-592d-463c-928b-d8c81b8730fc/steps/99adfc4f-fdd3-4bde-b093-b5895bf3f2ae/6cea0152-643d-4d5d-a8a6-c1c74ceee5e2.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2500\&fp-y=0.2498\&fp-z=2.0000\&w=1200\&ar=2624%3A1476) #### 3. Click on Installed Packages ![Click on Installed Packages](https://images.tango.us/workflows/756c4219-592d-463c-928b-d8c81b8730fc/steps/f338e969-a108-4390-b3f4-f40f7242641d/8166410a-0920-4f63-b2d7-33d9a4ca2154.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2499\&fp-y=0.2498\&fp-z=2.0000\&w=1200\&ar=2624%3A1476) #### 4. Locate RenderDraw's package, and Click on Manage Licenses ![Locate RenderDraw's package, and Click on Manage Licenses](https://images.tango.us/workflows/756c4219-592d-463c-928b-d8c81b8730fc/steps/ea0c2d17-4faf-4773-9fa7-3bf01a40e470/1ec9404e-228a-400d-82a0-e097b8cfc877.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2624%3A1476) #### 5. Click on add Users ![Click on add Users](https://images.tango.us/workflows/756c4219-592d-463c-928b-d8c81b8730fc/steps/cdbc57f8-a45b-4f04-94e4-2151862bdc02/93919a15-0e3b-4496-8848-2e1f53361667.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3642\&fp-y=0.4090\&fp-z=2.0000\&w=1200\&ar=2624%3A1476) #### 6. Check the box next to the Available user's record to add the license ![Check the box next to the Available user's record to add the license](https://images.tango.us/workflows/756c4219-592d-463c-928b-d8c81b8730fc/steps/65ebf745-4658-4219-a669-e95b983a4b89/2b4978b5-ab29-4f33-8880-d2bb8a18328f.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2624%3A1476) #### 7. Submit Add Users… ![Submit Add Users…](https://images.tango.us/workflows/756c4219-592d-463c-928b-d8c81b8730fc/steps/4a2d39ea-1371-409c-9351-7f0d66b0c57d/097bbdaa-f9b4-4c93-bd9d-9fddb556deff.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2624%3A1476) #### 8. Excellent! Ready to add permission sets and start using RenderDraw ![Excellent! Ready to add permission sets and start using RenderDraw](https://images.tango.us/workflows/756c4219-592d-463c-928b-d8c81b8730fc/steps/4e9dac6c-48df-47e0-90b8-899179cdc234/9dfc9fca-66b0-4cf1-911c-c78677586585.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2624%3A1476) *** # RenderDraw Permission Sets By default, RenderDraw enables features to users based on permission sets. These enable granular control to features across the app. | Permission Set Name | Purpose | Included with License type | | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | | AnnotateIt User | Enable to allow the editing of images or PDFs with AnnotateIt! components | Data Utilites, 2D & 3D | | RenderDraw Admin | Setup and administer 2D and 3D scenes with Director components | 2D & 3D | | RenderDraw User | View and interact with Scenes created by RenderDraw Admin | 2D & 3D | | RenderDraw Integration User | For use with automated CAD Conversion, enables a Integration user to callout and convert files without interaction, e.g. email to lead with CAD attachments | 3D | | Standalone Component User | Allow end user to view standalone components such as maps, datatables and more alongside 2D/3D scenes or standalone | Data Utilities 2D & 3D | | Standalone Component Admin | Allow admin to setup Datatables, maps and other standalone components for consumption | Data Utilities, 2D & 3D | | Swiper Admin | Allows Admin users to setup a photo swiper for end users | Data Utilities, 2D & 3D | | Swiper User | Consume Swiper interactions as an end-user | Data Utilities, 2D & 3D | | Virtual Tour Admin | Allows Admins to setup 360º virtual tours for Salesforce records | Data Utilities, 2D & 3D | | Virtual Tour User | Allows users to interact with 360º interactive virtual tours | Data Utilities, 2D & 3D | # Using user access policies for automated permission set & License Assignment Your users will need licenses and permission sets to use underlying features of RenderDraw. This can be automated based off of profile or user types. Let's take a look at how that works. All RenderDraw users need to be licensed to access underlying functionality. Granular permissions, based on functionality and user type, are designed to ensure smooth interactions as you onboard users. {% embed url="" %} ## [Configuring RenderDraw User Access Policies in Salesforce](https://app.tango.us/app/workflow/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6?utm_source=markdown\&utm_medium=markdown\&utm_campaign=workflow%20export%20links) [View most recent version](https://app.tango.us/app/workflow/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6?utm_source=markdown\&utm_medium=markdown\&utm_campaign=workflow%20export%20links) *** ### # Salesforce #### 1. The point of the following steps is to ensure new users of given types are provided with the needed permission sets and licenses to run RenderDraw platform. We're taking a profile based approach for this guide, but you can also use other filtering criteria to ensure specified users have the ability to view an interact with RenderDraw on a regular basis without having to manually install or assigned permission sets. #### 2. To begin navigate to "Setup" in your org from there search for "User Management Settings". This is to ensure that user access policies are enabled for the org. #### 3. Click on "User Management Settings" ![Step 3 screenshot](https://images.tango.us/workflows/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6/steps/bc1295be-445a-4d05-a2eb-93ced5d0b616/9d089600-d606-4993-b0d6-04e024cb0d65.png?crop=focalpoint\&fit=crop\&fp-x=0.0737\&fp-y=0.3678\&fp-z=2.5415\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=82\&mark-y=353\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yODUmaD00MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 4. Scroll down in the pane and ensure that "User Access Policies" are enabled if they are not toggle to enable ![Step 4 screenshot](https://images.tango.us/workflows/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6/steps/7979bcb0-db29-45b5-b444-ef78007c5f8b/66387c5b-e890-416d-af04-ff10c783b811.png?crop=focalpoint\&fit=crop\&fp-x=0.5671\&fp-y=0.5567\&fp-z=1.1990\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=23\&mark-y=351\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTU0Jmg9NDUmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 5. Now that user access policies are enabled in the org, navigate to the quick search box and type in "User Access" and you'll see "User Access Policies" display on the left in the results ![Step 5 screenshot](https://images.tango.us/workflows/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6/steps/e54a85b0-0d7e-463a-8e72-54a8db997545/fc2801e2-fbe4-41a4-bbc1-aace36b737bb.png?crop=focalpoint\&fit=crop\&fp-x=0.0662\&fp-y=0.1058\&fp-z=2.3717\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=15\&mark-y=150\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zNDYmaD03NSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 6. Click on "User Access Policies" ![Step 6 screenshot](https://images.tango.us/workflows/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6/steps/665600ea-5799-4230-9469-ff636559d446/56d21f28-d9ff-4d15-a01d-8e743a44f3f2.png?crop=focalpoint\&fit=crop\&fp-x=0.0629\&fp-y=0.1861\&fp-z=2.6889\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=87\&mark-y=352\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMzImaD00NCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 7. From here, let's create a new user access policy for the RenderDraw users. Click "New User Access Policy". ![Step 7 screenshot](https://images.tango.us/workflows/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6/steps/9471ee43-336c-4962-a93b-c7b2621e93b0/0b04f07b-4ce8-4a0c-a4d9-6a68b77b7334.png?crop=focalpoint\&fit=crop\&fp-x=0.9380\&fp-y=0.1096\&fp-z=2.9885\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=796\&mark-y=206\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zNjMmaD03NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 8. Type "RenderDraw User" as the Policy Name. ![Step 8 screenshot](https://images.tango.us/workflows/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6/steps/258ea9f6-2336-4aad-a80c-368e4e74657f/c4c52d6c-496d-4c08-95a1-f664da3d77c3.png?crop=focalpoint\&fit=crop\&fp-x=0.4179\&fp-y=0.4144\&fp-z=2.1969\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=395\&mark-y=345\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MDkmaD01NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 9. Click on "Order" field. ![Step 9 screenshot](https://images.tango.us/workflows/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6/steps/4da7f246-e88b-4262-88d3-c007b1917aa4/1f0fae00-59b5-4e3c-9222-d4450f1802dc.png?crop=focalpoint\&fit=crop\&fp-x=0.4179\&fp-y=0.4885\&fp-z=2.1969\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=395\&mark-y=345\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MDkmaD01NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 10. Type "1" if you have no other user access policies. Otherwise, put in the number where you want this to run if you have other policies that should run prior to this. Make sure this comes after those. ![Step 10 screenshot](https://images.tango.us/workflows/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6/steps/926395b7-cd8a-4c11-be85-8b92fd7b9044/f0633fff-4339-403c-975a-65908bc7b06c.png?crop=focalpoint\&fit=crop\&fp-x=0.4179\&fp-y=0.4885\&fp-z=2.1969\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=395\&mark-y=345\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MDkmaD01NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 11. Now we have to apply a description so we understand what this does in the future. Type "A user that will need RenderDraw Permission Sets and Licenses" in the Description field. ![Step 11 screenshot](https://images.tango.us/workflows/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6/steps/24eb8cc1-82e9-424e-9077-b9ec210225a5/37e8c753-ec08-4727-a81e-c7a7c9ac610e.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5659\&fp-z=1.6146\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=291\&mark-y=345\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02MTkmaD01NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 12. Click "Save". ![Step 12 screenshot](https://images.tango.us/workflows/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6/steps/494003c9-a674-4615-9908-4de941e2db47/5face4ea-ce2a-4d2e-b006-11a4380fc305.png?crop=focalpoint\&fit=crop\&fp-x=0.6462\&fp-y=0.6375\&fp-z=2.9608\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=533\&mark-y=336\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMzQmaD03NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 13. Click on "RenderDraw\_User" under API Name column ![Step 13 screenshot](https://images.tango.us/workflows/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6/steps/d6b69f6d-f59d-408a-a455-f612140955a1/00fbd8bd-8984-44d5-941a-e97e745b7e22.png?crop=focalpoint\&fit=crop\&fp-x=0.3394\&fp-y=0.2654\&fp-z=2.7555\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=496\&mark-y=354\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMDgmaD00MCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 14. From the screen, this is where we're going to be able to edit the criteria or the details of the given policy. The criteria is going to be the selection on which we're going to be applying. In this case we are applying to certain profiles for a given user. ![Step 14 screenshot](https://images.tango.us/workflows/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6/steps/7a22e7b8-e7bf-41e7-a3a8-4738d4ae22fb/029b99eb-b478-44c2-ae20-df65ef17bb18.png?crop=focalpoint\&fit=crop\&fp-x=0.8886\&fp-y=0.1096\&fp-z=3.1325\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=405\&mark-y=234\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz03NTImaD00NSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 15. One supplied, we can now see the values based off of the profile in operator. We have several different values in this grouping and you'll have to select the ones that makes sense for your org. ![Step 15 screenshot](https://images.tango.us/workflows/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6/steps/2604712f-1574-4683-8ac6-10dc309f851f/618f1ec2-5fa6-4493-bfd6-fb08cbb5edbe.png?crop=focalpoint\&fit=crop\&fp-x=0.5671\&fp-y=0.4798\&fp-z=1.1623\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=4\&mark-y=319\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTkyJmg9MTEwJmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 16. Now let's choose what to do for the underlying profiles. Click on the "Actions" tab. ![Step 16 screenshot](https://images.tango.us/workflows/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6/steps/d5551efb-766b-49d2-9a0f-3fd58f72ec4d/48834ee4-a0e6-4a83-8f6f-5faf20058436.png?crop=focalpoint\&fit=crop\&fp-x=0.2346\&fp-y=0.4014\&fp-z=2.9296\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=529\&mark-y=329\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xNDEmaD05MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 17. From here you'll see that we granted permission sets in this case the RenderDraw user and a custom permission set. In addition we also granted a package license to the RenderDraw package your set up should look something similar to this, but it might not be identical. ![Step 17 screenshot](https://images.tango.us/workflows/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6/steps/84fbc96b-bdca-4822-bf07-820db285d17b/5dc14dc3-0da0-49f7-9fcd-b2f9339beefb.png?crop=focalpoint\&fit=crop\&fp-x=0.5671\&fp-y=0.4788\&fp-z=1.1623\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=4\&mark-y=320\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTkyJmg9MTA5JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 18. Click on "User Access Policy Components". ![Step 18 screenshot](https://images.tango.us/workflows/97a8f6e1-96bf-49ac-bab5-ee2be0270ec6/steps/bf409540-7820-4bdb-93e9-0e6be4571fcb/c5dded5b-61a8-411b-b441-c98fe75fe1ec.png?crop=focalpoint\&fit=crop\&fp-x=0.5671\&fp-y=0.3274\&fp-z=1.1614\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=3\&mark-y=239\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTkzJmg9OTEmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) ### # Once completed activate and then optionally apply the policy for the given users, you can filter and select the users that you want to apply this to, but this is a quick way to add the necessary permission to a group of users based off of the criteria selected the list of users displayed will be filtered down to meet the criteria and if you press "Apply" this will apply the underlying granted elements to those given users very quickly. # Relating Drawings to a Salesforce Record To setup a scalable 2D or 3D visualization project based on Salesforce data, we have first to relate the objects and their data. {% hint style="info" %} This is applicable to all 3D and 2D Scenarios, except for File Renderer Component, which requires no setup. We setup fields and relationships to those fields in 2D, 3D, Swiper and virtual tour scenarios {% endhint %} First, Add the appropriate field to your given object. {% embed url="" %} Then Create a relationship {% embed url="" %} Then add components to your screen via these instructions here: {% content-ref url="/pages/rMRFMQ9xcNkMVlaF20dn" %} [Adding Components to your Lightning Pages](/usage-scenarios/use-cases/3d/admin/adding-components-to-your-lightning-pages) {% endcontent-ref %} # CAD Conversion # Setup of CAD Conversion For most applications and usages of RenderDraw, our UI components provide easy CAD Conversions without requiring any Setup! Check out the setup here: {% content-ref url="/pages/2CFNFe3Z3w2xb6NZGfSr" %} [CAD Conversion UI within Salesforce](/usage-scenarios/use-cases/cad-conversion/cad-conversion-using-admin-ui/cad-conversion-ui-within-salesforce) {% endcontent-ref %} For the setup of systematic CAD Conversions, follow this guide while calling with your provided API key.
# Version 1 CAD Conversion V1 is meant strictly to provide a translation from a given CAD format to the destination GLB format used throughout RenderDraw. * [CAD Conversion API (Direct Use)](/introduction/getting-started-with-renderdraw/cad-conversion/version-1/cad-conversion-api-direct-use) * [Example input for Conversion](/introduction/getting-started-with-renderdraw/cad-conversion/version-1/cad-conversion-api-direct-use/example-input-for-conversion) # CAD Conversion API (Direct Use) CAD conversion API can be used directly by calling to the API endpoint using CURL requests from a local folder, or by calling through your Salesforce org # Example input for Conversion When sending the request to our conversion server, ensure they match the following format: ``` curl --url https://api.renderdraw.us/CAD -h "x-api-key:YOUR_CONVERSION_API_KEY" -F "files=@./test-files/TestArchive.zip" > test-result.zip ``` where the TestArchive.zip contains a CAD file of a supported format. This zip can also contain assemblies and their supporting component files, each file will be converted to the resulting format (GLB). The API will return a compressed collection of the converted 3D file, the JSON structure of the CAD file, and a 2D Snapshot image of the 3D file. Calling this API is only supported with 3D files at this time. {% hint style="info" %} RenderDraw API conversion only accepts POST requests {% endhint %} # Version 2 (proposal)
{% hint style="info" %} RenderDraw API conversion only accepts POST requests {% endhint %} ### Request This API will primarily convert input CAD files into a specified output format with various options for customization and data extraction. #### API Overview **Purpose:** Convert CAD files to different formats with options for screenshots, assembly modes, compression, and additional data extraction. #### Input Parameters 1. **CADFile** (`binary` or `Zip`): The input CAD file. Accepts either a binary CAD file or a Zip file containing a CAD assembly with its parts or subassemblies. 2. **DimensionType** (`string`): Indicates whether the CAD file is 3D or 2D. Accepted values: "3D", "2D". 3. **OutputFileType** (`string`): The desired output file type. Typically a GLB file. Other formats can be specified as needed. 4. **TakeScreenshot** (`boolean`): Specifies whether to take a 2D screenshot of the CAD model. Default is `false`. 5. **AssemblyMode** (`string`): Determines the level of detail in the assembly conversion. Options are: * "full": Includes all components. * "subassembliesOnly": Includes only subassemblies. * "unimodel": Consolidates into a single top-level model. 6. **CompressionLevel** (`integer`): Sets the compression level for the output 3D model. Range is 0-10, with 7 as default. 7. **OutputModel** (`boolean`): Whether to output the converted 3D CAD model. Default is `true`. 8. **OutputAssemblyInformation** (`boolean`): If `true`, outputs the JSON structure of the CAD model, including Product Manufacturing Information (PMI). Default is `true`. #### Sample API Calls **Call 1: Basic Conversion** ```json { "CADFile": "[Binary CAD File]", "DimensionType": "3D", "OutputFileType": "GLB", "TakeScreenshot": false, "AssemblyMode": "full", "CompressionLevel": 7, "OutputModel": true, "OutputAssemblyInformation": true } ``` **Response 1:** ```json { "status": "success", "convertedFile": "[URL to GLB File]", "assemblyInformation": "[JSON Structure]", "screenshot": null } ``` **Call 2: Subassembly with Screenshot** ```json { "CADFile": "[Zip File with Subassemblies]", "DimensionType": "3D", "OutputFileType": "GLB", "TakeScreenshot": true, "AssemblyMode": "subassembliesOnly", "CompressionLevel": 5, "OutputModel": true, "OutputAssemblyInformation": false } ``` **Response 2:** ```json { "status": "success", "convertedFile": "[URL to GLB File]", "assemblyInformation": null, "screenshot": "[URL to Screenshot Image]" } ``` #### Additional Notes * The API should handle various CAD file formats and be robust enough to process complex assemblies. * Error handling must be implemented, especially for unsupported file formats, corrupted files, or conversion errors. * Performance optimization is crucial, especially for large and complex CAD files. * Security considerations should include secure handling and storage of the input CAD files. * Consider providing a progress endpoint for monitoring the status of long-running conversions. * Documentation should be clear, comprehensive, and include examples for various use cases. * Optional features could include batch processing, additional output formats, and advanced compression options. This structure provides a comprehensive foundation for the v2 CAD Conversion API, catering to a range of needs from basic file conversions to complex assembly processing with additional data extraction capabilities. ### Response This approach ensures that the response is easily consumable by JavaScript applications. Here's the structure: #### Sample Response for Web API Service **Response Format:** ```json { "status": "success", "convertedFile": { "type": "GLB", "content": "[Base64 Encoded GLB File Data]", "fileName": "model.glb" }, "assemblyInformation": { "content": "[Serialized JSON Object with Assembly Information]" }, "screenshot": { "type": "Image", "content": "[Base64 Encoded Image Data]", // Only if TakeScreenshot is true "fileName": "screenshot.png" } } ``` #### Explanation: 1. **Status**: Indicates the success or failure of the API call. 2. **ConvertedFile**: * **Type**: Specifies the file type, GLB in this case. * **Content**: The GLB file data encoded in Base64 format, which JavaScript can easily decode. * **FileName**: Suggested name for the file when saved or processed by the client. 3. **AssemblyInformation**: * **Content**: The assembly information provided as a serialized JSON object. This format is native to JavaScript and can be easily parsed and manipulated. 4. **Screenshot** (Optional): * **Type**: Specifies the image format. * **Content**: The image data encoded in Base64, provided only if `TakeScreenshot` is set to true. * **FileName**: Suggested name for the screenshot file. #### Considerations: * **Serialization**: All components of the response are serialized, allowing for easy parsing and processing in JavaScript. * **Base64 Encoding**: While Base64 increases data size, it's a standard method for embedding binary data in JSON responses. JavaScript can handle Base64 encoding/decoding efficiently. * **File Names**: Including suggested file names can help clients manage downloaded data. * **Error Handling**: The API should include robust error handling and return meaningful error messages in a similar JSON structure. * **Documentation**: Detailed documentation should accompany the API, explaining the response structure and providing examples of how to handle the data in JavaScript. This approach aligns with the requirements of a web API service, ensuring that all data is returned in a format that can be serialized and utilized effectively in JavaScript-based applications. # Purpose
**Purpose** The CAD Conversion API is a powerful, versatile tool designed to streamline the process of converting CAD files into various formats, suitable for a wide range of applications. It is specifically tailored to meet the needs of professionals in engineering, architecture, manufacturing, and design, who require efficient and reliable conversion of CAD drawings and models. **Key Features** 1. **Versatile File Support**: Accepts a wide range of CAD file formats, both in binary and Zip file formats, containing assemblies, parts, or subassemblies. 2. **Multiple Dimension Types**: Catering to both 3D and 2D CAD files, the API provides flexibility for different types of projects and design needs. 3. **Customizable Output Formats**: Primarily converts files to GLB format, with the capability to support various other formats as per user requirements. 4. **Screenshot Capability**: This offers an option to capture and return a 2D screenshot of the CAD model, enhancing the visualization and presentation of the design. 5. **Assembly Mode Options**: Users can select from full assembly, subassemblies only, or a unified model, providing control over the level of detail in the output. 6. **Adjustable Compression**: Features compression level settings to balance between file size and quality, optimizing for both storage and performance. 7. **Comprehensive Output**: Besides the converted model, the API provides a detailed JSON structure of the CAD model, including Product Manufacturing Information (PMI), for in-depth analysis and use. **Benefits** 1. **Efficiency**: Automates the conversion process, saving time and resources that would otherwise be spent on manual conversion. 2. **Accuracy**: Maintains high fidelity in conversions, ensuring that the integrity of the original design is preserved. 3. **Flexibility**: The API's range of options and settings allows it to be tailored to specific project requirements, making it highly adaptable. 4. **Ease of Integration**: Designed to seamlessly integrate with existing systems and workflows, facilitating a smooth implementation in various environments. 5. **Accessibility**: By providing direct access to converted files and assembly information, the API enhances the accessibility and usability of CAD data. 6. **Scalability**: Capable of handling both small and large-scale conversion needs, making it suitable for individual professionals as well as large enterprises. This CAD Conversion API stands as a crucial tool for anyone needing to convert and manipulate CAD files efficiently. Its combination of versatility, accuracy, and user-friendly features make it an invaluable asset in the realm of CAD file management and utilization. # Sample File Input Conversion #### HTML with Additional Pickers ```html





``` #### Updated JavaScript with Fetch Request ```javascript document.getElementById('cadUploadForm').addEventListener('submit', function(event) { event.preventDefault(); // Prevents the form from submitting the traditional way let fileInput = document.getElementById('cadFilePicker'); let file = fileInput.files[0]; if (!file) { alert('Please select a CAD file.'); return; } // Construct FormData let formData = new FormData(); formData.append('CADFile', file); formData.append('DimensionType', document.getElementById('dimensionType').value); formData.append('OutputFileType', document.getElementById('outputFileType').value); formData.append('TakeScreenshot', document.getElementById('takeScreenshot').checked); formData.append('AssemblyMode', document.getElementById('assemblyMode').value); // Fetch request fetch('https://convert.renderdraw.us/CAD/2.0/', { method: 'POST', body: formData }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { console.log('Success:', data); // Handle the response data }) .catch(error => { console.error('Error:', error); }); }); ``` * The form (`
`) now includes additional input elements for various options. * Each option (Dimension Type, Output File Type, etc.) is represented by a dropdown or checkbox. * The JavaScript listens for the 'submit' event on the form. * It retrieves the values of all input elements and appends them to the `FormData`. * The `fetch` request then sends this data to your API. # Diving deeper RenderDraw was built to deal with cross-industry scenarios that no single company is likely to utilize. The diversity of use cases requires additional setup for some use-cases. This section of the documentation portal is dedicated to setup of more complex use-cases that might not be needed for the majority of out of the box uses. # RenderDraw Architecture RenderDraw is native to the Salesforce platform. With a single install, you have access to all of our components, which are then licensed by feature. Understanding your use case is critical to the success of your project with RenderDraw.
Simply put, RenderDraw can be used anywhere in Salesforce in any case. ### Answer these questions before beginning with RenderDraw To understand what we are attempting to add interactions to, we need to answer a few things: 1. Where are we going to store the media associated with our interaction? 1. By default, RenderDraw utilizes the Salesforce Files storage system, but it may make sense to host your files elsewhere, such as a CDN. Check out [Storage of your Drawings](/introduction/diving-deeper/renderdraw-architecture/storage-of-your-drawings) 2. What is the initial underlying use case? 1. Start small and work outwards. Pick a cloud and add visuals, expand as needed to other objects using metadata relationships for reference or by adding new interactions. Check out [Use Cases](/usage-scenarios/use-cases) 3. Who will be using the interaction? 1. Permission Sets are delivered based on Licensed features, each user will need to be assigned a license and the appropriate level of permission sets to utilize the interaction. Check out [Permissions / Authorization](/usage-scenarios/use-cases/other-apps/renderdraw-data-utilities/standard/annotateit-images/permissions-authorization) RenderDraw is meant to be additive across the entire Salesforce Landscape, and our components # RenderDraw Components RenderDraw is atypical in the idea that we provide dozens of interactable components and hundreds of components that can be used in development scenarios. Take a look at the standard interactive components below to get a better understanding of what usecases we can support. Remember these components can be related to any object inside of Salesforce, and bound to any Salesforce data within.
# Storage of your Drawings RenderDraw is a versatile 3D rendering platform that seamlessly integrates with Salesforce, offering both 2D and 3D canvas interfaces for various visualization needs. One of the key features of RenderDraw is its flexibility in file storage and integration, allowing users to store and manage their files using different options. ### Salesforce Files Integration RenderDraw provides direct integrations and components for storing files directly on Salesforce Files. This integration is particularly convenient for most users, as it allows them to keep their files within the Salesforce ecosystem, ensuring easy access and management. Benefits of using Salesforce Files: * Native integration with RenderDraw components * Seamless access to files within the Salesforce environment * Ideal for storing compressed 3D files and images ### Third-Party Storage Integration In addition to Salesforce Files, RenderDraw also supports file storage in popular third-party platforms such as Amazon S3, Azure, and Google Cloud. This flexibility allows organizations to leverage their existing file storage infrastructure or choose the platform that best suits their needs. Considerations for using third-party storage: * Large volumes of 3D files: If your organization deals with a significant number of 3D files, third-party storage can provide scalability and cost-effectiveness. * Existing drawing management systems: If you already have a drawing management system in place, integrating RenderDraw with your existing third-party storage can ensure a seamless workflow. ### File Compression and Optimization When working with large CAD files, RenderDraw automatically compresses and optimizes them during the conversion process. Original CAD files, which can be around 100MB in size, are compressed to the size of a large image (typically 2-5MB) after conversion. This compression ensures efficient storage and faster loading times within the RenderDraw platform. Images, on the other hand, are often better hosted directly in Salesforce Files. RenderDraw fetches these images natively, providing a smooth and integrated experience for users. ### Choosing the Right File Storage Option When deciding on the file storage option for your RenderDraw implementation, consider the following factors: * RenderDraw requires no setup for Salesforce Files option. There will be some setup required for storing files outside of the platform * File types and sizes: Evaluate the types and sizes of files you'll be working with, such as CAD files, images, and PDFs. * Storage capacity: Assess your storage requirements based on the volume of files you expect to manage. * Existing infrastructure: Consider your organization's existing file storage infrastructure and whether integrating RenderDraw with your current setup would be beneficial. * Access and collaboration: Determine the level of access and collaboration needed for your files within the RenderDraw platform. By leveraging the file storage and integration capabilities of RenderDraw, organizations can optimize their visualization workflows, ensure efficient file management, and seamlessly collaborate within the Salesforce ecosystem. # Connecting to your drawings Connecting to external file systems for drawings requires a one-time setup and then following a conventional approach to achieve a repeatable rendering experience for 3D files. > Note, this setup, and the setup of RenderDraw settings metadata are for conventional rendering relationships. This is not needed for directly rendering 3D files hosted within the Salesforce system ![](https://1083871259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW2NJcrdHUw4YcOz4UJN%2Fuploads%2F55thYgyqot2km8pbnaWs%2FRenderDraw%20Architecture%20-%20Storage%20Setup.png?alt=media\&token=ba349234-b187-4cb8-bc42-7c4bb2d41e6e) # Supported Formats #### 3D Formats: Unfortunately, modern browsers cannot natively render CAD files from leading software vendors. Fortunately, most CAD files can be converted to modern web standard WebGL 3D without much being lost in between. By default, we support the native formats listed below.
NativeConversion Supported
  • OBJ
  • STL
  • glTF
  • glb
p61hTKmwK2hP
  • 3D PDF
  • Collada
  • glTF
  • OBJ
  • STEP
  • USD
  • 3DS
  • DXF
  • IGES
  • PLY
  • STL
  • VRML
  • 3MF
  • FBX
  • JT
  • PRC
  • U3D
  • X3D
  • ACIS
  • Open CASCADE
  • Parasolid
  • Rhino
  • CATIA V5
  • CATIA V6 (3D XML)
  • DWG
  • Inventor
  • PTC Creo
  • Siemens NX
  • Solid Edge
  • Solidworks
  • DXF
  • FBX
  • Solidworks
  • PTC Creo
  • Siemens NX
  • X3D
  • 3MF
  • IFC
For the best experience possible, utilize professional drawing tools such as Solidworks or Siemens NX and give your components and subcomponents meaningful names within the drawings. **\*Batch auto conversion** or **CAD Conversion** utilizes an API to convert files and associated materials and textures to GLB format. This requires an additional subscription, or alternatively, you can utilize these methods to export to the native format: * [Solidworks convert to glb](https://help.solidworks.com/2019/english/SolidWorks/sldworks/t_export_using_extended_reality.htm) * [3DSMax conversion to GLTF](https://doc.babylonjs.com/resources/3dsmax) * [AutoDesk Inventor export (paid but reasonable)](https://apps.autodesk.com/INVNTOR/en/Detail/Index?id=6155426903769565235\&appLang=en\&os=Win64) * [AutoDesk Fusion Convert to OBJ or STL](https://knowledge.autodesk.com/support/fusion-360/learn-explore/caas/sfdcarticles/sfdcarticles/How-to-export-a-design-in-Fusion-360.html) Our CAD Conversion UI lets you convert files right inside Salesforce! Take a look at the use case here: {% content-ref url="/pages/2CFNFe3Z3w2xb6NZGfSr" %} [CAD Conversion UI within Salesforce](/usage-scenarios/use-cases/cad-conversion/cad-conversion-using-admin-ui/cad-conversion-ui-within-salesforce) {% endcontent-ref %} #### 2D Our 2D components can use most image formats, including png, jpg and SVG # Relationships Prior to starting, let's ensure we understand a couple of topics: * What is a RenderDraw Relationship * Why use Relationships If you are comfortable with why you'd want a relationship-based schema setup, let's create a relationship ### Create a Relationship Think of a RenderDraw relationship like a formula. This formula determines, by Object, how we are going to fetch your 3D files and related resources for a given Salesforce Object record. At the end of the day, we are looking for a file in a remote destination, from the example above, we can break down the URL into its composite parts. Based on a set of fields mapped with the relationship objects, we can compose a URL for every product record that exists for any company. The relationships are maintained alongside the data in Salesforce, so as the records in the Salesforce org gradually grow in number, the most up-to-date drawing is updated on each record by convention, ensuring a scalable experience for every record of that type. Let's prove this by adding a 3D interaction onto multiple record types Lightning pages. Then we'll update the filename reference and display the results on all references. ### Add 3D Drawing Field to objects Our primary purpose for this exercise is to visualize products, so we will start there. Let's add a text field named "3D Drawing" to the Product object. Since all of our intended visualizations are going to be product-focused, it makes sense to create a controlling field on the product object that will be referenced from our other intended visualization targets * Opportunity Product * Asset * Product ### The power of Salesforce lookups Creating fields in each individual linked object is a good way to reduce maintenance, so long as the same drawing will be used in each use case. Let's add a lookup to this field we just created on the product record to the Opportunity Product Object. Start by adding a custom field to our object. It will be a Formula. Our return type will be text. Remember we are attempting to build a URL. For the formula value, locate the Product relationship and the 3D Drawing field that we created as the return value. This was done in the advanced formula field. Now follow the same process for the Asset object type as well as any other related object you might want to display 3D drawings on.
### Create a RenderDraw Setting Let's jump in and create the needed relationships so we can link those fields we created to the Lightning components on each page. #### Setup > Go to setup by clicking the gear in the top right of the screen. Click Setup, and go to the search on the far left of the screen. Type in Metadata {.is-info} #### Search for Metadata > From there, we are creating a RenderDraw Setting, so lets select manage records for that type {.is-info} #### Manage the relationships > We can either manage any current setting, or create a new one. Lets create a new setting for the file server we saw above. Note we selected defaults for control and light settings, and provided the label **File Server** and the Base URL **** which was common among all of the files we looked at earlier. {.is-info} ### Create the relationship > Now that our RenderDraw Settings are created, we have the first part of the formula (URL Position 1) of the needed information to fetch a 3D file complete with the Base URL. {.is-info} Let's work on creating URL Position 2. Start by Searching again for metadata relationships, and selecting “Manage Relationships” on the RenderDraw Relationship type We can create the Product Relationship with the following values: * Entity: Product (The object we will be looking up values on, e.g. where to render) * Label: Something notable for when we have 20+ relationships later, typically this will have the object type in the Name. * Rendering File: What field on the Object will have the File within the URL (e.g. URL Part 3) * RenderDraw Setting: The reference to the Setting record we created last step (Think how are we going to create the full URL for the Product Record) * For this record and how we have our renderings setup on this server, we are going to use the rendering path override > The rendering path is not required to successfully call out to other servers. In simpler setups, this can be ignored. For this example, we are using the **Relative Rendering Path Override** value of "renderings/public/" because that never changes between all of our files and likely never will. If we had several subfolders, we could add the value of those subfolders into another field on the related object and look that up by setting the **Rendering Relative Path** field on this setup. {.is-info} Save that relationship and follow the process for your additional related objects. ### Render from your Relationship #### Add the product record Ensure you have the last portion of your URL written down and add your product record. Note the last portion of our URL (URL Position 3) is what is populating the 3D Drawing field. This is what will change per each record of this type. #### Add the Lightning Component Add a component to the record detail screen and save it using the Lightning App Builder An in-depth view of this process can be seen here follow this for each of the additional record types you choose to render on. Each will appear exactly the same as #### View Our 3D Drawing can now be seen on every related page we added it to. This drawing should look something similar to this: ## Relationship Strategies Using the right tool for the job is of the utmost importance to scale your 3D interactions. ### What are you visualizing? If you are planning to render a single product or scene for your entire org, you likely do not need a relationship strategy or a relationship at all. Relationships are for scaling 3D over the size of a particular object type. Most frequently, you will likely be visualizing products in either sales or service scenarios. This will happen at scale- there might be some time when you only have drawings for a subset of your actual products, and thats okay. > Pro-tip: if you are rendering 5 or more diffent drawings that are represented by the same object in Salesforce, setup a relationship. If not, A Lightning flow and direct URLs would suffice\ > {.is-success} ### Where are you going to want to render? Our default strategy when setting up product-related 3D to scale is based on the Product Object as we did above. With this in mind, we can potentially further re-utilize data to ensure when a new rendering path is available, we have a single source of truth for that product. Think of your objects relationally. Where are you going to put the Lightning Component?
Could it be used elsewhere? This is important to consider because most frequently, this reference will be created and set up by an integration tool or an APEX script. # Why Metadata Matters If you are hosting your drawings & files on a remote server, check out their URLs. For us it looks something like this for a single 3D product visualization scene ``` https://files.renderdraw.us/renderings/public/gltf/clubcar/dtest3/XRT_850draco-processed.gltf https://files.renderdraw.us/renderings/public/gltf/clubcar/dtest3/blob%3Ahttps%3A__sandbox%20image.png https://files.renderdraw.us/renderings/public/gltf/clubcar/dtest3/blob%3Ahttps%3A__sandbox%20image_1.png ``` Notice anything? Let's take a look another way ``` @startwbs * files.renderdraw.us ** renderings *** public **** gltf ***** clubcar ****** dtest3 ******* XRT_850draco-processed.gltf ******* blob%3Ahttps%3A__sandbox%20image.png ******* blob%3Ahttps%3A__sandbox%20image_1.png @endwbs ``` We are using remote resources like a file system in order to load 3D files for use with Salesforce. This is particularly useful when loading related assets such as textures and materials that are associated but not included in the converted 3D Drawing. In the files above, we are utilizing the same file server hosted at . From there we separate into “renderings” and “public” sub directories, and on and on until we reach our actual file to render, in this case **XRT\_850draco-processed.gltf**. All of these files relate to a single drawing, and when we attempt to scale storing these for every product your organization will ever have, it starts becoming daunting. At the end of the day, whenever we interact with data within Salesforce, there might be an associated 3D drawing that should be displayed. Let's take a look at how complex this can get by adding another 4 records to Salesforce that have representative 3D files & relationships. ``` Product 1: https://files.renderdraw.us/renderings/public/gltf/rockwell/6181P-19B3xxxxxx_1%20slot.glb Product 2: https://files.renderdraw.us/renderings/public/gltf/rockwell/PVP7S%20R1%2004_assy.glb Product 3: https://files.renderdraw.us/renderings/public/gltf/medtronics/PB560_Ventilator_(4096600).gltf Product 4: https://files.renderdraw.us/renderings/public/gltf/clubcar/dtest1/XRT_850draco-processed.glb https://files.renderdraw.us/renderings/public/gltf/clubcar/dtest1/blob%3Ahttps%3A__sandbox%20image.png https://files.renderdraw.us/renderings/public/gltf/clubcar/dtest1/blob%3Ahttps%3A__sandbox%20image_1.png ``` or visualized:
Notice how the size of the tree ballooned? Many times references to 3D files are many to one, so it can be said that for every record added to Salesforce of a given type that requires 3D visualization, at least one relationship must be maintained. Writing this relationship With RenderDraw's relationship management, these 3D drawings can be shared between different objects and usages within Salesforce. Common examples of this would be * 3D Visualization on a product object * Configuration on a Quote Line object * Self-Service on an Asset Item through a Salesforce Community. The underlying drawing doesn't change; only the use-case and object on Salesforce do. To scale our 3D experiences in Salesforce, we need to establish a common way to render all of a given records of its type. Creating a relationship leads to reproducible results at scale for Salesforce objects and related 3D drawings. # Advanced Metadata Relationships There are scenarios where it makes sense to render based on another record's setup. A good example of this is rendering a 3D model associated with an asset, whose 3D CAD file is linked to a product. We can re-utilize drawings multiple times across all use cases in the Salesforce ecosystem based on advanced relationships that are setup inside the RenderDraw Relationships metadata. #### Parent-Child Relationships There are two main relationships to consider, in the scenario above, the child record would be an Asset. In that case, we want to take a look at the parent relationship for reference to the related setup scene. Additional attributes can be applied on top of the base rendered setting, such as colors, backgrounds or events. For this type of relationship, take a look at [Parent-Child Relationships](/introduction/diving-deeper/relationships/why-metadata-matters/advanced-metadata-relationships/parent-child-relationships) #### Child Lookups On selection of an item, often times the subcomponents of a given 3D assembly are represented by a different object in the Salesforce system, or we need to do some matching on a given object's field data to the underlying 3D component name. To achieve this, we need to setup [Child Lookup](/introduction/diving-deeper/relationships/why-metadata-matters/advanced-metadata-relationships/child-lookup) fields on the relationship metadata record. # Child Lookup # Parent-Child Relationships # Record Management # Scene Settings Scene Settings are the data description of the 3D scene as your users will see it. If you setup a custom component and call our component APIs to create a 3D experience, you are manually describing the scene through attributes, and a series of API calls based on events. How does this scale? Spoiler alert: it doesn't. A custom component will most often describe a single scene, unless there is a custom data definition defined, in which case- godspeed\ For the majority of use cases, we will have more than one subject we should be As of app version 1.8, we create Scene settings version 1.0. This can be added to your object by first creating a **Scene Settings** lookup on your Relationship. This settings data is structured like this: ``` { "version": 1, "lastSaved": "", "sceneName": "Visualization", "attributes": {}, "actions": [{ "name": "onSceneLoaded", "steps": [] }], "text": [] } ``` Breaking this down a bit further, the version, lastSaved and sceneName are all internal, so setting those up is not needed by you. ``` { "version": 1, "lastSaved": "2020-10-14T20:08:51.893Z", "sceneName": "Visualization", "attributes": { "brandImageURL": "https://files.renderdraw.us/public/images/2020RDLogo.png", "spitShine": true }, "actions": [ { "name": "onSceneLoaded", "steps": [ { "method": "setupGround", "parameters": { "imageURL": "https://files.renderdraw.us/public/images/demoassets/customer%20demos/clubcar/Grass_001_COLOR2.jpg", "heightMapURL": "https://files.renderdraw.us/public/images/demoassets/customer%20demos/clubcar/Grass_001_ROUGH.jpg", "width": "12", "height": "12", "maxheight": "0.105", "minheight": "0.05", "subdivisions": "1000" } }, { "method": "addPhotoDome", "parameters": { "name": "defaultPhotoDome", "photoURL": "https://files.renderdraw.us/public/images/demoassets/customer%20demos/clubcar/pexels-philippe-perruchot-4298805.jpg", "size": "15", "limitCamera": true } } ] } ], "text": [ { "label": "XRT Body", "componentName": "Golf_Car_XRT_Body" }, { "label": "Replaceable XRT Seat", "componentName": "Golf_Car_XRT_Seat" } ] } ``` ## Parent Scene Settings More often than not, you won't be utilizing a single object for all of your 3D scenes. Most frequently, we start with product visualization, using the Product2 object. From there, there are dozens of objects in the Salesforce world that represent instances of a given product, such as Assets, Opportunity Products, Quote Lines, and many more. But setting up a scene for every Opportunity, Asset, or QuoteLine that uses your product and scene configuration would require an elaborate trigger system that no architect would approve, and no admin would want to maintain. We cant use a formula field, as text lookups cannot use the required Long text / text area data type- the solution? A new metadata field that allows us to utilize lookup relationships between the data objects, and determine the metadata record that contains the Scene Setup information. Sounds complex? It really isn't. Simply set up a Scene Settings field on your base object relationship, as we did in the steps above (In this case the Product relationship), and set up a child relationship object for a given object. For this example, we'll use Assets, as pretty much every Salesforce org has this object. For this relationship, we now have to populate # Performance Considerations RenderDraw uses the latest in web technologies to provide an in-browser rendering experience. In order for interactive 3D to be possible, we have to ensure both **WebGL** and **Hardware Acceleration** are enabled, where available. Mobile devices have this on by default, as do tablets, but computers, specifically Windows machines lag when **Hardware Acceleration** is not enabled. ### Enabling WebGL If your browser supports WebGL, follow these instructions to enable it: #### Chrome First, enable hardware acceleration: * Go to chrome://settings * Click the **+ Show advanced settings** button * In the **System** section, ensure the *'**use hardware acceleration when available'*** checkbox is checked (you'll need to relaunch Chrome for any changes to take effect) Second, inspect the status of WebGL: * Go to chrome://gpu * Inspect the **WebGL** item in the **Graphics Feature Status** list. The status will be one of the following: * *Hardware accelerated* — WebGL is enabled and hardware-accelerated (running on the graphics card). * *Software only, hardware acceleration unavailable* — WebGL is enabled, but running in software. See [here](http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome#TOC-Appendix-B:-The-Software-Compositor) for more info: "For software rendering of WebGL, Chrome uses [SwiftShader](https://www.transgaming.com/swiftshader), a software GL rasterizer." * *Unavailable* — WebGL is not available in hardware or software. If the status is not *"Hardware accelerated"*, then the **Problems Detected** list (below the **Graphics Feature Status** list) may explain why hardware acceleration is unavailable. Please consult this list before contacting our support team. If you have a display driver older than 2010, it may be the cause of the issue. Please update your display drivers and then go back to chrome://gpu again to look for problems. Please ensure you are not using an extension that may be disabling WebGL. #### Opera First, enable hardware acceleration: * Go to about:config * On the left hand menu, click "Browser" * Click the **Show advanced settings** checkbox * In the **System** section, ensure the **Use hardware acceleration when available** checkbox is checked (you'll need to relaunch Opera for any changes to take effect) #### Firefox First, enable WebGL: * Go to about:config * Search for webgl.disabled * Ensure that its value is false (any changes take effect immediately without relaunching Firefox) Second, inspect the status of WebGL: * Go to about:support * Inspect the **WebGL Renderer** row in the **Graphics** table: * If the status contains a graphics card manufacturer, model and driver (eg: *"NVIDIA Corporation -- NVIDIA GeForce GT 650M OpenGL Engine"*), then WebGL is enabled. * If the status is something like *"Blocked for your graphics card because of unresolved driver issues"* or *"Blocked for your graphics driver version"*, then your graphics card/driver is blacklisted. (Like Chrome, Firefox has a **Use hardware acceleration when available** checkbox, in **Preferences** > **Advanced** > **General** > **Browsing**. However, unlike Chrome, Firefox does not require this checkbox to be checked for WebGL to work.) #### Safari * Go to Safari's **Preferences** * Select the **Advanced** tab * Ensure that the **Show Develop menu in menu bar** checkbox is checked * In Safari's **Develop** menu, ensure that **Enable WebGL** is checked # Development Resources To better help understand and utilize the RenderDraw suite of applications, there are several sample files that can be utilized in a demo context. #### 3D Models | Resource | Link | | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | | Compressed, semi-complex 3D model of a golf Cart. | | | Converted 3D model from Solidworks part catalog (non shaded component) | | | Larger assembly 3D model converted from Solidworks part catalog | | # Using Components on LWR Digital Experiences There are additional steps needed to setup RenderDraw for Salesforce LWR templates with Digital Experiences ## [Enabling your pages for LWR Digital Experience](https://app.tango.us/app/workflow/2a3b9a3f-f1f0-4613-98db-5c0d2bf7627a?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links) ### # Go to the Digital Experience settings screen. Find the LWR Digital experience you want to use the RenderDraw Components on. #### 1. Click on Workspaces for the Digital Experience ![Click on Workspaces for the Digital Experience](https://images.tango.us/workflows/2a3b9a3f-f1f0-4613-98db-5c0d2bf7627a/steps/9c871a98-71fb-4af9-9535-263f6cde6bd9/3a4c8a09-4874-47ab-b36b-677f87a917dc.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2470\&fp-y=0.5725\&fp-z=2.8300\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=509\&mark-y=310\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xODEmaD01NCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 2. Click on Administration… ![Click on Administration…](https://images.tango.us/workflows/2a3b9a3f-f1f0-4613-98db-5c0d2bf7627a/steps/ff3d78d8-b08d-427e-9240-9cbfa27e0d60/0d386224-e7a2-424f-964d-a426a6452720.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5492\&fp-y=0.5000\&fp-z=1.7187\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=389\&mark-y=174\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MjMmaD0zMjcmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 3. Click on Pages ![Click on Pages](https://images.tango.us/workflows/2a3b9a3f-f1f0-4613-98db-5c0d2bf7627a/steps/23080106-8ed8-4c8f-8cac-d5f55994f5a9/f9426cde-c0e7-4a19-b716-1c6c24820b00.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1033\&fp-y=0.3957\&fp-z=1.9982\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=7\&mark-y=295\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00ODEmaD04NCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 4. Click on Go to Force.com. This will take us to the settings screen for the Digital Experience ![Click on Go to Force.com. This will take us to the settings screen for the Digital Experience](https://images.tango.us/workflows/2a3b9a3f-f1f0-4613-98db-5c0d2bf7627a/steps/ecda866b-2855-4e08-ac3c-de1756433458/6a86078f-e98c-430e-b689-ffef8a969ff4.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2976\&fp-y=0.6680\&fp-z=2.5105\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=452\&mark-y=312\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yOTYmaD01MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 5. We're in the Salesforce site details now ![We're in the Salesforce site details now](https://images.tango.us/workflows/2a3b9a3f-f1f0-4613-98db-5c0d2bf7627a/steps/af71cbe2-d69c-4f29-8bf3-ee1cb72c9bee/db3a67c4-0e1a-418e-887a-81b6a225e330.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4634\&fp-y=0.3875\&fp-z=1.2193\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=185\&mark-y=301\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz04MzAmaD0zNiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 6. Click on edit ![Click on edit](https://images.tango.us/workflows/2a3b9a3f-f1f0-4613-98db-5c0d2bf7627a/steps/ea10139c-0a1d-4db1-957d-723578ef64fe/26d8a2c4-9495-4eda-bd93-a240b9ce5280.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4466\&fp-y=0.5535\&fp-z=2.9710\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=543\&mark-y=301\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTQmaD03MyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 7. Scroll down to the Pages section. Click on from Available Visualforce Pages ![Scroll down to the Pages section. Click on from Available Visualforce Pages](https://images.tango.us/workflows/2a3b9a3f-f1f0-4613-98db-5c0d2bf7627a/steps/532f6e62-4738-4020-b1ee-dcd921316119/1ae27d44-4c58-4707-9d88-4c27d90e15e1.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2675\&fp-y=0.7182\&fp-z=2.1452\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=386\&mark-y=94\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MjgmaD00ODcmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 8. Select the related Pages. For 3D applications, we need PageRenderer ![Select the related Pages. For 3D applications, we need PageRenderer](https://images.tango.us/workflows/2a3b9a3f-f1f0-4613-98db-5c0d2bf7627a/steps/8e9b13b2-22fb-4cd7-94aa-40da1f250a7f/176b82a1-a41d-4ec1-8447-52ed1013d470.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3700\&fp-y=0.6856\&fp-z=3.0370\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=549\&mark-y=307\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMDMmaD02MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### For 3D Canvas operations, you'll need PageRenderer. For 2D Canvas operations, PageCanvas is needed. #### 9. Ensure you save the settings. ![Ensure you save the settings.](https://images.tango.us/workflows/2a3b9a3f-f1f0-4613-98db-5c0d2bf7627a/steps/292129ee-b23e-4fce-b23a-ce7ee1d4d0a7/662ea128-362b-4d1c-8a1d-65226add6135.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4371\&fp-y=0.4817\&fp-z=2.9239\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=537\&mark-y=296\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMjYmaD04MyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) # Utilizing Interactions within Lightning Flow Lightning flows enable RenderDraw components to be used in a broad array of use cases within the Salesforce platform. Essentially Screen flows can be used anywhere, so this is how we often integrate with different aspects of the platform. The majority of our components are enabled for Flow interaction and often require the same parameters for providing visual interaction as simply adding the appropriate component within your Screen Flow. Let's take a step-by-step look here. {% embed url="" %} # Using Externally Hosted Assets 1. Navigate to **Setup -> Trusted Domains** 2. Click **"New Trusted URL"** 3. Ensure "**connect-src"** is checked under CSP Directives 4. ```
``` 5. Leverage the "**External URL"** tab when uploading an asset 1. ```
``` # Fixing Common Issues ## Admin Issues ### Issues with Saving # Use Cases RenderDraw is a Salesforce-native application that can render 3D drawings in web-native format. Welcome to the world of RenderDraw - a Salesforce-native application that excels at rendering 2D, 3D, and CAD drawings in a web-native format. Our platform delivers an array of use cases, from product visualization to self-service in communities. Walk with us through these scenarios and discover how RenderDraw can illuminate your Salesforce experience. ### Primary Use Cases * **Product Visualization**: Bring your products to life in interactive 2D or 3D. Allow your customers and stakeholders to understand your product better with interactive rendering. * **Interactive Visual Configuration (Visual CPQ)**: Configure, price, and quote products interactively and visually. Enhance customer engagement with our Visual CPQ feature. * **Component Touch Interaction for Self-Service in Communities**: Empower your community users with interactive self-service. Let them explore, understand, and manage components interactively. * **CAD Conversion**: Streamline your workflows with automated or manual CAD conversion, allowing detailed views of complex data. * **Image Management**: Easily manage and edit images for your Salesforce flows and records with our image swiper, Flow Images, and AnnotateIt! Tools. * **Data Utility**: Leverage our Basic, Advanced, or Pro tiers to engage with your data in new, efficient, and interactive ways. * [**Part Finder**](/usage-scenarios/use-cases/2d/part-finder): Utilize our 2D Canvas components for a great experience on B2B or B2C digital experience, or right inside Salesforce Sales or Service cloud. ### RenderDraw Lightning Components Our components are versatile and compatible with Quick Actions, Lightning Pages, Record Pages, and Flow Screens. Whether it's the Simple Renderer, File Selector, or Advanced Renderer, RenderDraw components can be deployed for all page types and are available for flow screens. ### Salesforce Clouds Known Usages Include: * Salesforce Communities * Salesforce CPQ * Salesforce B2B Lightning E-commerce * Salesforce Sales Cloud * Salesforce Service Cloud * Salesforce Velocity * Other AppExchange Apps: Including Apptus CPQ, Conga CPQ, and more. ### Custom Development Our Lightning components are [Aura Components ](https://trailhead.salesforce.com/content/learn/modules/lex_dev_lc_basics)for the time being, and can be composed into advanced interaction components using Aura:Events and component methods/functions. Custom Development examples can be found [here](/usage-scenarios/use-cases/3d/developer/custom-3d-app-development-using-salesforce). ### Performance RenderDraw leverages the power of WebGL for smooth, high-performance visuals. For the best experience, ensure your browser's WebGL settings are turned on. RenderDraw uses WebGL and works best if you turn on your browser's [Hardware Acceleration.](https://www.howtogeek.com/412738/how-to-turn-hardware-acceleration-on-and-off-in-chrome/) Join the RenderDraw revolution today. Dive into the interactive world of Salesforce like never before and discover how we make data visualization insightful and delightful! # 2D Many interactive use cases within Salesforce and beyond are much better suited to 2D interaction, rather than forcing a 3D interaction. # Part Finder B2B and B2C experiences are made much better using RenderDraw Part Finder. Easily import current PDF Part catalogs, link drawings to records, and add selectable sections representing Salesforce records, all within our Managed Package offering.
# Data Setup for B2B ### There is a one-time, multi-step process to complete Setup once you have RenderDraw installed and ### Setup Fields & Metadata In order to get started we need to setup Relationships to our chosen objects. This is the same process for 2D and 3D, so following the guide at Relationships is fine. [Relationships](/introduction/diving-deeper/relationships) {% hint style="info" %} Ensure you populate the 2D Scene settings field in the metadata relationship {% endhint %} ### Create Custom Permission Sets Extend the RenderDraw User Permission set to include the following ### Add 2D Scene Editor to Chosen Catalog Page to edit the documents ### Create a containing Flow for the Product Catalog itself ### Add the Flow for the Product Catalog Detail page through the experience builder # Choose where you want to display your Product Catalogs There are typically two different data models for attaching spare parts catalogs within a B2B ### Product Category Based Model Setting up Product Catalogs based on the product category is a great way to utilize built in objects when starting with B2B LWR Digital Experiences.
**Pros** * No need for Custom object creation **Considerations** * Catalogs must be visible as read only (at least) to your users to access custom fields on the object ### Product Based Model with Custom Spare Parts Object There are times when it makes sense, especially if you already have custom objects or relationships to setup product catalog pages on Product detail pages or custom objects that represent Spare Parts hierarchies altogether.
**Pros** * No need to adjust **Considerations** # Setup Field on Catalog Object #### Creating a Custom Field in Salesforce: 2D Scene Settings Follow these steps to create a custom field in Salesforce that matches the "2D Scene Settings" field shown in the image. **Prerequisites** * You must have the necessary permissions to create and modify fields in Salesforce. **Step-by-Step Instructions** 1. **Navigate to Setup**: * Log in to your Salesforce account. * Click on the gear icon in the upper right corner and select "Setup." 2. **Go to Object Manager**: * In the Setup menu, find and click on "Object Manager." 3. **Select the Object**: * From the list of objects, find and select the object named `Category`. 4. **Fields & Relationships**: * In the left-hand sidebar, click on "Fields & Relationships." 5. **Create a New Field**: * Click on the "New" button to create a new field. 6. **Select Data Type**: * Choose "Long Text Area" as the data type. * Click "Next." 7. **Enter Field Details**: * **Field Label**: Enter `2D Scene Settings`. * **Field Name**: This will automatically populate based on the Field Label, but you can edit it if needed. Ensure it is `X2D_Scene_Settings`. * **Length**: Enter `131,072`. * **Number of Visible Lines**: Enter `3`. 8. **Set Field-Level Security**: * Click "Next" to proceed to the Field-Level Security settings. * Adjust the field visibility settings as required for your organization. * Click "Next." 9. **Add to Page Layouts**: * This is a hidden field only for internal settings, so we avoid adding it to any layouts. * Click "Save" to create the field. 10. **Verification**: * After saving, verify that the field has been created correctly by navigating to the "Fields & Relationships" section of the `Category` object. * Ensure the field appears as expected and matches the details shown in the provided image. **Additional Notes** * **Data Sensitivity Level**: Set according to your organization's data handling policies. * **Compliance Categorization**: Ensure this field complies with your organization's compliance requirements. * **Created By** and **Modified By**: These fields will automatically show the user who created and last modified the field along with the timestamp. By following these steps, you will create a "2D Scene Settings" field in Salesforce that matches the one shown in the image. # Setup Group and Files ### Setup public group Based on roles of your buyers, let's setup a public group that contains the proper roles # Parse PDF Catalogs to attach images # Base setup for initial catalog page ### Setup base scene ### Setup Environment Options ### Setup Background Image Save # 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) There are several instances where 2D interactions are a better representation of the data in your Salesforce Org. An admin can setup 2D scenes, relate the data objects to visuals and provide a better interaction for common tasks like configuration, floorplan layouts and interactive 2D scenes. # Setup 2D Scene Settings for a record Let's take a look at Creating 2D Scene settings on a record. {% embed url="" %} Broken down further, follow along here: ## [Create your 2D Scene settings on a record](https://app.tango.us/app/workflow/a1a684f2-73d1-48bd-a30f-dda0196127be?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links) *** #### 1. Go to a page where the RenderDraw 2D Scene Director has been Added You will see this screen and action if your Metadata settings are set up for the record type. If not, view the section on Metadata setup within the documentation portal to add a field and relationship where we can store your settings. ![Go to a page where the RenderDraw 2D Scene Director has been Added](https://images.tango.us/public/screenshot_c1b64ee2-82ea-46da-9baa-8d2e0568e36b.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4999\&fp-y=0.5043\&fp-z=1.6672\&w=1200\&ar=3416%3A1958) #### 2. Click on Setup Admin Settings for this record ![Click on Setup Admin Settings for this record](https://images.tango.us/public/screenshot_484c52a7-8ece-4fe6-91d4-c9155f7f9809.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.7237\&fp-z=2.2286\&w=1200\&ar=3416%3A1958) #### 3. Once setup, your screen should look like this, you are now ready to setup the scene. If the 2D Canvas component is passed this record id, these scene settings will load automatically. Setup the scene with Droppable Areas, Draggable Items and DropZones, Layout Elements for retail or layouts, or selectable shapes for visualization ![Once setup, your screen should look like this, you are now ready to setup the scene.](https://images.tango.us/public/image_efda7a86-58bd-4d83-bc32-e9ebcb8778c6.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=3324%3A1470) *** # Add a background image to your scene Want something other than a plain background for your scene? Upload an image for a nice base prior to adding in overlays {% embed url="" fullWidth="true" %} ### # Navigate to your 2D scene Go to where your 2D scene component has been added to a record page #### 1. From Admin component, Click on Environment Options ![From Admin component, Click on Environment Options](https://images.tango.us/workflows/72b3b004-2dba-4a1c-b2a8-df345ea42848/steps/099a5a42-f410-408a-8851-110fba6c8b0d/46aef0c3-0b49-435c-aa48-6c79c2c642d3.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3751\&fp-y=0.5093\&fp-z=1.3320\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=58\&mark-y=324\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMDYmaD00OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 2. For this example, let's upload an image. Click on File ![For this example, let's upload an image. Click on File](https://images.tango.us/workflows/72b3b004-2dba-4a1c-b2a8-df345ea42848/steps/b49e1ff3-ea65-4ae8-a219-d47944f41be4/dc48d40d-267e-4b3e-bb4f-414d2d9b1bf6.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=277\&mark-y=223\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz01OCZoPTM3JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 3. Upload your image ![Upload your image](https://images.tango.us/workflows/72b3b004-2dba-4a1c-b2a8-df345ea42848/steps/c241ecdf-fdfa-482b-a39c-3e3e8cd64bd4/c75c2b67-72be-4736-ae3e-81e99d169a8a.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2138\&fp-y=0.5454\&fp-z=3.2031\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=587\&mark-y=324\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNiZoPTI2JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 4. Once uploaded, click done. ![Once uploaded, click done.](https://images.tango.us/workflows/72b3b004-2dba-4a1c-b2a8-df345ea42848/steps/2f378276-9dfe-4d83-a94e-0eb38d0b1cbd/ae778102-c503-469a-b614-f06a43002cac.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=814\&mark-y=362\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz02OCZoPTM3JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 5. Now the background image is selectable in the list, select it. ![Now the background image is selectable in the list, select it.](https://images.tango.us/workflows/72b3b004-2dba-4a1c-b2a8-df345ea42848/steps/78cd7d52-0907-4a4f-89a1-df7a2e53c3de/5ba43e1a-fd4f-4b92-9903-d2dcaa505e3a.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4996\&fp-y=0.5935\&fp-z=1.2640\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=159\&mark-y=312\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz04ODImaD01MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 6. Click on Update to update settings for the scene ![Click on Update to update settings for the scene](https://images.tango.us/workflows/72b3b004-2dba-4a1c-b2a8-df345ea42848/steps/b52b87d7-221e-4945-97a1-fd38801dcc0f/6e35f94c-c2f8-44a6-902c-a670f9ad3e2e.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=71\&mark-y=558\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz03OSZoPTM3JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 7. Click on Save to save your settings ![Click on Save to save your settings](https://images.tango.us/workflows/72b3b004-2dba-4a1c-b2a8-df345ea42848/steps/9c199c1d-04a7-4da1-a5f4-c0ddadc25daa/720bb1cc-8c4c-4502-b096-fb1fecda9a8b.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=135\&mark-y=470\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz02NSZoPTM3JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 8. Refresh your record, navigate back to your Admin component ![Refresh your record, navigate back to your Admin component](https://images.tango.us/workflows/72b3b004-2dba-4a1c-b2a8-df345ea42848/steps/abe00998-e4e4-4e52-8088-63f062d50788/efb3d4ef-8ac9-4371-b004-8cd9b726ce82.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2514\&fp-y=0.3671\&fp-z=2.0000\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=447\&mark-y=402\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMDMmaD03NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 9. Now your background image is set, continue setting up your scene ![Now your background image is set, continue setting up your scene](https://images.tango.us/workflows/72b3b004-2dba-4a1c-b2a8-df345ea42848/steps/2223f312-ad79-4529-988d-00ed768ba0a6/dde9dd86-69b0-4e11-8026-2c616b95dd53.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=211\&mark-y=240\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz01NzMmaD00NTkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) # Adding Droppable Areas and Drop Zones to a Scene For an interactive preview, click through below {% embed url="" %} Otherwise, follow along here: ## [Create Droppable Area and Drop Zone](https://app.tango.us/app/workflow/7373d6cd-b7a4-4899-ad4e-c2f3a343f5b3?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links) For advanced 2D usage, such as configuration or creating a planogram, we need to have an element that can handle adding sub-objects or components into it. Enter the Droppable Area. The Droppable Area typically represents an assembly that would have suboptions that need to be selected, but it can also represent a shelf for retail, or warehouse storage racks for inventory management. #### 1. Start on a screen with the 2D Admin Component #### 2. Click on Droppable Area Templates ![Click on Droppable Area Templates](https://images.tango.us/public/screenshot_8f4cbd44-2da1-4050-a5c6-82c16909d08e.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1377\&fp-y=0.5807\&fp-z=1.8959\&w=1200\&ar=3416%3A1958) #### 3. Click on Add Droppable Area Template ![Click on Add Droppable Area Template](https://images.tango.us/public/screenshot_70352652-fc5d-4960-a569-bbe99c15c2c6.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1376\&fp-y=0.7033\&fp-z=2.3481\&w=1200\&ar=3416%3A1958) #### 4. Add a name to the Droppable Area ![Add a name to the Droppable Area](https://images.tango.us/public/screenshot_b6bff617-4c25-46e8-abaf-9ed0d7e28698.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1765\&fp-y=0.2564\&fp-z=2.1339\&w=1200\&ar=3416%3A1958) #### 5. Look over other options provided for the Droppable area ![Look over other options provided for the Droppable area](https://images.tango.us/public/screenshot_3f35c405-a14e-4b70-b5b1-4df3688c15cd.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=3416%3A1958) #### 6. Paste the URL to your image ![Paste the URL to your image](https://images.tango.us/public/screenshot_b9852bf0-7d25-42ec-991f-02c5110c0921.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2679\&fp-y=0.3493\&fp-z=1.5354\&w=1200\&ar=3416%3A1958) #### 7. If needed, Click on Drop Zones ![If needed, Click on Drop Zones](https://images.tango.us/public/screenshot_a92cb53e-f77e-48b4-bd3d-e2eb23669e08.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2228\&fp-y=0.5863\&fp-z=1.6971\&w=1200\&ar=3416%3A1958) #### 8. Click on Add new Drop Zone ![Click on Add new Drop Zone](https://images.tango.us/public/screenshot_79d297c7-2ce1-467d-821b-4aa819d33aa0.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4054\&fp-y=0.5802\&fp-z=2.5630\&w=1200\&ar=3416%3A1958) #### 9. Drag highlighted element ![Drag highlighted element](https://images.tango.us/public/screenshot_544ace5d-b03c-4c1c-8b50-9b6ee1d3e895.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.8782\&fp-y=1.5322\&fp-z=1.0000\&w=1200\&ar=3416%3A1958) #### 10. Review all options for the added Drop Zone once Added ![Review all options for the added Drop Zone once Added](https://images.tango.us/public/screenshot_51ff7a5e-9f83-48b9-8575-4dce608ff21e.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.8782\&fp-y=1.5322\&fp-z=1.0000\&w=1200\&ar=3416%3A1958) #### 11. Adjust the look and feel of the Drop Zone by changing the color or opacity ![Adjust the look and feel of the Drop Zone by changing the color or opacity](https://images.tango.us/public/screenshot_a8151c7b-5d8c-4bfb-ba5a-06b2ff47b12b.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3645\&fp-y=0.4752\&fp-z=2.5515\&w=1200\&ar=3416%3A1958) #### 12. If Required, Toggle Require a dropped item in this zone to "Active" ![If Required, Toggle Require a dropped item in this zone to "Active"](https://images.tango.us/public/screenshot_56c334ea-b257-4b47-954f-5d89e16d07e0.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3182\&fp-y=0.4949\&fp-z=3.3220\&w=1200\&ar=3416%3A1958) #### 13. You can Search and associate this Drop Zone to a Record in Salesforce! Let's link this with a CPQ Product Feature ![You can Search and associate this Drop Zone to a Record in Salesforce!](https://images.tango.us/public/screenshot_6141c2d3-0ed8-4d70-a09a-9cd9cf894495.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3776\&fp-y=0.4683\&fp-z=2.3908\&w=1200\&ar=3416%3A1958) #### 14. Make the selection of the Record Type ![Make the selection of the Record Type](https://images.tango.us/public/screenshot_dc4c7023-a623-4694-b3bf-816521ff168c.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3870\&fp-y=0.5051\&fp-z=2.6021\&w=1200\&ar=3416%3A1958) #### 15. Search for the record you want to link this to by it's name ![Search for the record you want to link this to by it's name](https://images.tango.us/public/screenshot_a2e02b9b-a37f-47bc-aff0-3b8390d7bfd1.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3776\&fp-y=0.4683\&fp-z=2.3908\&w=1200\&ar=3416%3A1958) #### 16. Scroll and Click on the option that you are looking for ![Scroll and Click on the option that you are looking for](https://images.tango.us/public/screenshot_46be04a5-6bfe-43e6-8ac0-f740ef396683.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3753\&fp-y=0.6164\&fp-z=2.3975\&w=1200\&ar=3416%3A1958) #### 17. Click on Update Droppable Area to update that Droppable Area to your Scene Settings ![Click on Update Droppable Area to update that Droppable Area to your Scene Settings](https://images.tango.us/public/screenshot_16586d1a-30e6-44fb-8a3e-254f27d31af3.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.8609\&fp-y=0.8585\&fp-z=4.0000\&w=1200\&ar=3416%3A1958) #### 18. Click on Save to Save the Scene Settings ![Click on Save to Save the Scene Settings](https://images.tango.us/public/screenshot_2dbb974e-c494-4552-a0f4-b7c6f4f478ad.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2283\&fp-y=0.9106\&fp-z=2.9684\&w=1200\&ar=3416%3A1958) *** # Adding Draggable Items to a Scene For an interactive preview, click through below {% embed url="" %} Otherwise, follow along here: ## [Create Draggable Item Templates](https://app.tango.us/app/workflow/60f752c1-79be-4655-8568-b0b1da50c079?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links) #### 1. Click on Draggable Item Template ![Click on Draggable Item Template](https://images.tango.us/public/screenshot_3e34d7f0-4494-4b84-bc60-f7ee2bd873cf.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1376\&fp-y=0.7172\&fp-z=1.8949\&w=1200\&ar=3456%3A1998) #### 2. Click on Add Draggable Item Templates ![Click on Add Draggable Item Templates](https://images.tango.us/public/screenshot_073f53bf-50aa-494a-82e1-300aa0a91695.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1376\&fp-y=0.9309\&fp-z=2.3386\&w=1200\&ar=3456%3A1998) #### 3. Click on \*Name ![Click on \*Name](https://images.tango.us/public/screenshot_87ebf9d4-0a1c-47f0-8429-2d4acd7fd5bb.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2080\&fp-y=0.3253\&fp-z=1.8297\&w=1200\&ar=3456%3A1998) #### 4. Review the Draggable Item Template create At a minimum, we need a name, label, height and width, and background image. Optionally, you can relate this to Salesforce records and allow the removal of this item by using the context menu (right-click remove) ![Review the Draggable Item Template create](https://images.tango.us/public/screenshot_551cec24-a065-4381-a109-d8bbf3fbd543.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=3456%3A1998) #### 5. Add a name for reference later ![Add a name for reference later](https://images.tango.us/public/screenshot_d6d121b7-223a-41ab-a917-1d76e7879b06.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2080\&fp-y=0.3253\&fp-z=1.8297\&w=1200\&ar=3456%3A1998) #### 6. Add a Label for the item within the Draggable Item list ![Add a Label for the item within the Draggable Item list](https://images.tango.us/public/screenshot_bbc079ec-5fbc-4224-94fe-13f0a9f10912.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4685\&fp-y=0.3253\&fp-z=1.8297\&w=1200\&ar=3456%3A1998) #### 7. Paste "" into input ![Paste "https://storage.googleapis.com/files.renderdraw.us/public/images/pro/retail/juulBlushGold.png" into input](https://images.tango.us/public/screenshot_410fc197-4186-46d0-b0e0-a15f3f0a1bef.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3383\&fp-y=0.4054\&fp-z=1.2392\&w=1200\&ar=3456%3A1998) #### 8. Click on dialog #### 9. Check Allow Removal if this should be allowed to be removed. Remember, this is removed through the context menu (when a user right-clicks) ![Check Allow Removal if this should be allowed to be removed.](https://images.tango.us/public/screenshot_c9859dd4-e939-4552-9a39-d50f6833d254.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0845\&fp-y=0.4344\&fp-z=3.3222\&w=1200\&ar=3456%3A1998) #### 10. Click on Update Draggable Item to Save After updating the template, ensure you save your Scene settings ![Click on Update Draggable Item to Save](https://images.tango.us/public/edited_image_09d75aff-3d63-4dda-b355-18b0b7da0cc4.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=931%3A438) *** # Relating Components to Salesforce Data Using our Record Lookup component, you can relate images that are draggable on the screen to Salesforce Data Records. Here's a visual look at how to relate subcomponents to Salesforce Data elements {% embed url="" %} RenderDraw allows for the relating of: * Droppable Areas * DropZones * Draggable Items * Rooms (Layouts) To Salesforce records. Previously, relating these objects was done by copying and pasting record Ids into a text field associated with each visual element. This was combersome, and led to issues when it came to migrating visuals from one org to another. Enter our Record Picker component. Easily search and relate elements to their appropriate Salesforce Records. From there, setup fallback unique fields to plan ahead for migrations. Let's take a closer look at this component in action: ![](https://1083871259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW2NJcrdHUw4YcOz4UJN%2Fuploads%2F7Dv6J8LCrVUZxRYSpIts%2FRenderDraw%20Architecture%20-%20Record%20Picker%20UI%20walkthrough.png?alt=media\&token=db7e0933-247f-4e81-9b8f-8e173435bc9c) {% hint style="info" %} Any object you hope to search for needs to be set up for searching in the object manager. Simply edit the object and check the "Allow Search" field and your object will be displayed while searching using the Record Picker component within RenderDraw {% endhint %} # Add a DataSource to a 2D scene to bind data {% embed url="" %} ## [Enable a DataSource for your 2D Scene](https://app.tango.us/app/workflow/98de4a7e-93bb-4baf-a19f-f6014a4ea853?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links) #### 1. Go to a page or workflow with the 2D Scene Admin component added to it. #### 2. Let's enable the Data Source definition! Click on Show all Environment Options ![Let's enable the Data Source definition! Click on Show all Environment Options](https://images.tango.us/public/screenshot_4b1df6a1-6001-4667-b391-afea5287a969.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1376\&fp-y=0.4680\&fp-z=2.3578\&w=1200\&ar=3456%3A1998) #### 3. Click on Menu Options ![Click on Menu Options](https://images.tango.us/public/screenshot_151019e0-bd5b-4c72-93c8-f6f24d9b10b9.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1376\&fp-y=0.3989\&fp-z=1.9117\&w=1200\&ar=3456%3A1998) #### 4. Check Show Data Source Menu ![Check Show Data Source Menu](https://images.tango.us/public/screenshot_4374c67b-43a6-461d-9f9d-622c3c30347d.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0396\&fp-y=0.5155\&fp-z=3.3222\&w=1200\&ar=3456%3A1998) #### 5. Click the back arrow to return to the main Scene Settings ![Click the back arrow to return to the main Scene Settings](https://images.tango.us/public/screenshot_7313f13b-982e-4ff1-93f3-9263dcdc161d.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0237\&fp-y=0.3398\&fp-z=3.1745\&w=1200\&ar=3456%3A1998) #### 6. Scroll Down, Click on Edit Data Source for this Record ![Scroll Down, Click on Edit Data Source for this Record](https://images.tango.us/public/screenshot_755c2dfe-f7e5-452b-9a4d-b773024bce17.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0897\&fp-y=0.8123\&fp-z=2.3151\&w=1200\&ar=3456%3A1998) #### 7. Click on Select an Option ![Click on Select an Option](https://images.tango.us/public/screenshot_ad033e5c-3b02-4111-8252-7c06e87622b9.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.2017\&fp-z=1.0790\&w=1200\&ar=3456%3A1998) #### 8. Click on Product ![Click on Product](https://images.tango.us/public/screenshot_ad2a0970-7288-46e6-9579-a2bef4676668.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5081\&fp-y=0.4967\&fp-z=1.1073\&w=1200\&ar=3456%3A1998) #### 9. Click on option ![Click on option](https://images.tango.us/public/screenshot_cfdcf750-3d9f-4c21-a4be-34b57d72ae69.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2716\&fp-y=0.3749\&fp-z=1.4096\&w=1200\&ar=3456%3A1998) #### 10. Click on option ![Click on option](https://images.tango.us/public/screenshot_f978eee7-bc39-4648-b267-716e1e610996.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2716\&fp-y=0.4114\&fp-z=1.4096\&w=1200\&ar=3456%3A1998) #### 11. Click on option ![Click on option](https://images.tango.us/public/screenshot_576d6ae9-40b6-4eb1-9543-8401f0fdcfbe.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2716\&fp-y=0.4484\&fp-z=1.4096\&w=1200\&ar=3456%3A1998) #### 12. Click on option ![Click on option](https://images.tango.us/public/screenshot_ebb9400b-822c-49f7-bad6-e3828c2ca196.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2716\&fp-y=0.4855\&fp-z=1.4096\&w=1200\&ar=3456%3A1998) #### 13. You can hold select and click lower in the list to select multiple fields within the list ![You can hold select and click lower in the list to select multiple fields within the list](https://images.tango.us/public/screenshot_95e0c902-63ae-4ef4-ac20-987325673fd4.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2716\&fp-y=0.4810\&fp-z=1.4096\&w=1200\&ar=3456%3A1998) #### 14. Click on the right arrow to select the fields for the query ![Click on the right arrow to select the fields for the query](https://images.tango.us/public/screenshot_344da039-859f-4fad-9884-cdc9b1a4f255.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4884\&fp-y=0.3504\&fp-z=3.1745\&w=1200\&ar=3456%3A1998) #### 15. Let's add conditions ![Let's add conditions](https://images.tango.us/public/screenshot_9727b241-9274-4b06-a5ad-0f21edb2eb06.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3720\&fp-y=0.6066\&fp-z=1.1142\&w=1200\&ar=3456%3A1998) #### 16. select the condition type, for this example we'll select AND meaning all must be true OR condition would be only one condition would be true ![select the condition type, for this example we'll select AND meaning all must be true](https://images.tango.us/public/screenshot_e53f3fe9-ca50-4aae-9163-3c8468d32b81.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3801\&fp-y=0.6474\&fp-z=1.1544\&w=1200\&ar=3456%3A1998) #### 17. Click on Add Condition ![Click on Add Condition](https://images.tango.us/public/screenshot_0f61fca1-f4fb-45cc-971f-079c0c5e76e2.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.7193\&fp-y=0.6066\&fp-z=3.0118\&w=1200\&ar=3456%3A1998) #### 18. Let's Select a field for the condition, Click on Select an Option under Query Resource ![Let's Select a field for the condition, Click on Select an Option under Query Resource](https://images.tango.us/public/screenshot_9999abe9-235a-43f8-91bd-6aeb1b114622.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2179\&fp-y=0.7072\&fp-z=1.6852\&w=1200\&ar=3456%3A1998) #### 19. Select a field, To match by the record id passed into this component, Click on the ID field ![Select a field, To match by the record id passed into this component, Click on the ID field](https://images.tango.us/public/screenshot_937753f6-3bb0-4f58-8134-8b440d1c92df.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2260\&fp-y=0.7480\&fp-z=1.7789\&w=1200\&ar=3456%3A1998) #### 20. Select an operator, an operator provides logical elements for comparison, like equals greater than etc. ![Select an operator, an operator provides logical elements for comparison, like equals greater than etc.](https://images.tango.us/public/screenshot_0c263761-60c3-4a44-9e99-77af12bd90ff.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4076\&fp-y=0.7072\&fp-z=2.7921\&w=1200\&ar=3456%3A1998) #### 21. For this example, we'll select "Equals" ![For this example, we'll select "Equals"](https://images.tango.us/public/screenshot_4a15de8a-3ff0-4ede-93ad-da562bc8b21b.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4734\&fp-y=0.7480\&fp-z=2.1862\&w=1200\&ar=3456%3A1998) #### 22. To dynamically pass the RecordId passed into this component, you can type {!RecordId} ![To dynamically pass the RecordId passed into this component, you can type {!RecordId}](https://images.tango.us/public/screenshot_f0d34892-80cd-4eec-ac03-77aa01b22f91.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.7127\&fp-y=0.7072\&fp-z=2.3040\&w=1200\&ar=3456%3A1998) #### 23. Let's see if it worked! Click on Preview Data Result ![Let's see if it worked! Click on Preview Data Result](https://images.tango.us/public/screenshot_8e526ac1-4c4d-456c-a636-6a3af29a2e65.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3927\&fp-y=0.8879\&fp-z=2.8125\&w=1200\&ar=3456%3A1998) #### 24. Click on Test Data Model to run the Query ![Click on Test Data Model to run the Query](https://images.tango.us/public/screenshot_9808ad5d-0659-43d8-ace7-e087170102fe.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4676\&fp-y=0.8884\&fp-z=2.7411\&w=1200\&ar=3456%3A1998) #### 25. Results will be displayed on the right hand pane, you can adjust columns by dragging their edges. ![Results will be displayed on the right hand pane, you can adjust columns by dragging their edges.](https://images.tango.us/public/screenshot_e2ec78ef-400d-44ee-b42a-7f36cbfe6e2c.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.6212\&fp-y=0.1657\&fp-z=2.9318\&w=1200\&ar=3456%3A1998) #### 26. If you are happy with the DataSource, Click on Update ![If you are happy with the DataSource, Click on Update](https://images.tango.us/public/screenshot_b3a428e0-4f15-42b7-b7ad-a9e7b4398093.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5723\&fp-y=0.8879\&fp-z=2.9418\&w=1200\&ar=3456%3A1998) #### 27. You have successfully added and updated the Data Source. This DataSource will be queried on the load within the component *** # Adding Layout Drawing menu to your component (Floorplan & Spatial Drawing) Adding Layout Walls and Areas is a great way to give your users spatial awareness of the scale of your products or what an area looks like. After adding your 2D scene, here's how you can set it up {% embed url="" %} *** ​ #### 1. Navigate to your 2D Scene. Click on Environment Options from the admin component ![Navigate to your 2D Scene. Click on Environment Options from the admin component](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/4f457358-709b-491f-b1fe-3ff937458e44/7c8a48c7-3e42-4c46-8042-11499c1ca2d1.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1322\&fp-y=0.3862\&fp-z=2.3320\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=190\&mark-y=295\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zNjAmaD04NSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 2. Click on Menu Options ![Click on Menu Options](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/0907a0d4-251d-4de8-aa36-dc81ecf8e01c/bf7514da-dbea-4acd-9dbf-548c74e40900.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1482\&fp-y=0.3496\&fp-z=2.2140\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=192\&mark-y=285\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MDMmaD0xMDUmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 3. Click on Show Layout Drawing Menu ![Click on Show Layout Drawing Menu](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/1c56e3b1-ef48-4efb-8a2f-eab03fa66153/eee45f67-b783-4ec4-b915-8489ae7915a2.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4009\&fp-y=0.4424\&fp-z=2.9951\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=567\&mark-y=303\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02NiZoPTY4JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 4. Optionally, if you want non-admin users to be able to draw, click on Show Non-Admin User Layout Drawing Menu Help Info ![Optionally, if you want non-admin users to be able to draw, click on Show Non-Admin User Layout Drawing Menu Help Info](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/5c2f07db-d422-4527-b9bf-a1e5817e6350/a1129c35-363e-438f-9adb-15124024dfe7.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3832\&fp-y=0.4807\&fp-z=2.9966\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=919\&mark-y=316\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02NiZoPTY5JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 5. If you want your end-users to have a 3D preview of your layouts by clicking a button, Click on Show 3D Preview button Info ![If you want your end-users to have a 3D preview of your layouts by clicking a button, Click on Show 3D Preview button Info](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/53ed9e65-8362-43f6-9473-7caa23021539/c815262c-09a4-4a72-9960-a7b7caf8bf88.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4154\&fp-y=0.5111\&fp-z=1.9966\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=509\&mark-y=403\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00NCZoPTQ2JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 6. Click on Update to close the window. ![Click on Update to close the window.](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/f4f84362-b4e2-45ff-b1d4-8738e25d95aa/46c7bc40-0a71-4ffc-8e4e-d42f664a4855.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0922\&fp-y=0.8537\&fp-z=2.7356\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=195\&mark-y=355\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMTUmaD0xMDAmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 7. Now we notice a Layout menu Item ![Now we notice a Layout menu Item](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/6bf34df7-f5bc-4c86-a95b-17adf53d53e8/2934b16c-dd0f-4365-ab25-86da5aa13892.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1319\&fp-y=0.5705\&fp-z=1.8132\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=13\&mark-y=294\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01NDcmaD04NiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 8. Layouts consist of Areas and Walls. Areas are typically representative of rooms ![Layouts consist of Areas and Walls. Areas are typically representative of rooms](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/00cf01a8-b817-4a7a-a202-38f4e15a0721/2a41abe7-d9a9-44a1-b5ae-963140c26238.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1319\&fp-y=0.6301\&fp-z=1.8754\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=34\&mark-y=293\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01MjUmaD04OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 9. Walls can be drawn and resized. A measurement of the length of the wall is shown alongside the wall. This measurement can be changed to metric in the environment setup of this component. ![Walls can be drawn and resized. A measurement of the length of the wall is shown alongside the wall. This measurement can be changed to metric in the environment setup of this component.](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/0813751c-dd30-4e87-a3bf-27419a6ca291/3604c858-36cb-4d96-b327-5ba9e54227a3.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1319\&fp-y=0.7507\&fp-z=1.8754\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=34\&mark-y=315\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01MjUmaD04OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 10. To draw as an admin, Click Start Drawing Walls in the left side menu. ![To draw as an admin, Click Start Drawing Walls in the left side menu.](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/303a026e-b669-4098-8bff-e422c67c1480/a52a9897-dd41-44f1-92a3-2088978d3976.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3649\&fp-y=0.6410\&fp-z=1.3699\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=40\&mark-y=467\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMDAmaD01MCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 11. Simply click and drag to create a wall. Once done, you can let go of your cursor. ![Simply click and drag to create a wall. Once done, you can let go of your cursor.](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/a7d49a08-5da6-4baf-944c-4d8444cd71a9/a4184103-cf66-4c6e-bdd1-ec2ea42f199e.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.6227\&fp-y=0.7547\&fp-z=1.3360\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=5\&mark-y=147\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTkwJmg9NjEzJmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 12. If you added 3D preview, Here's where your users will see it ![If you added 3D preview, Here's where your users will see it](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/6e9703e2-6393-48f8-a933-ab538dab7c21/f0d71a14-4a8f-4f41-8d6c-91c69a10958a.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4295\&fp-y=0.3862\&fp-z=2.5010\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=450\&mark-y=292\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMDAmaD05MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 13. Now we see our layout in 3D, walls and linked 3D models ![Now we see our layout in 3D, walls and linked 3D models](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/33d7f4ca-1fd0-4f1c-b584-53835eab4dc3/068db2d6-b861-4ed6-b69f-d7b5e508b651.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.6227\&fp-y=0.6633\&fp-z=1.3360\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=5\&mark-y=64\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTkwJmg9NjE1JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 14. Don't forget to save your settings. Click on Save to ensure the menus are set up properly for your user experience. ![Don't forget to save your settings. Click on Save to ensure the menus are set up properly for your user experience.](https://images.tango.us/workflows/601784aa-a12b-4edb-8aff-c74acf7a7455/steps/e7f692d6-3d51-4d28-9c4f-e776853b2743/9679d91e-4ad2-464e-92f3-307d8843aa05.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2153\&fp-y=0.9702\&fp-z=2.8239\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=508\&mark-y=567\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xODMmaD0xMDMmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) # Linking your clicks to Actions / Flows Visuals are nice, but without interactions, they are just pretty. Let's take a look at how we can add interactions By default, we don't call any flows, but we allow you to map your Screen flows to a set of interaction events within our 2D Canvas Component. Remember to include input parameters in your **active** flows. Select the appropriate flow under the **Environment Options - Default Related Objects & Actions** tab.
### Canvas Changed Event This event is called any time the canvas is changed. This includes if the canvas has items loading on start. We pass a CanvasScene object named **canvas** and can accept menubarText errorText successText as output depending on what happens in your flow. This can either be displayed or hidden based on the checkbox "visual display in popup" ### List Item Clicked Event When displaying the list of Draggable items or Droppable areas, this flow will be displayed when a list item is clicked. This is typically great for displaying information for items before their being added to the canvas. We pass **recordId,** which is required on your flow. ### Droppable Area Clicked Event When a Droppable Area is clicked, the flow displays in a popup. We pass **recordId,** which is required on your flow. ### Draggable Item Clicked Event When a Draggable Item is clicked, the flow displays in a popup. We pass **recordId,** which is required on your flow. ### Selectable Shape Clicked Event When a Selectable Shape is clicked, the flow displays in a popup. We pass **recordId,** which is required on your flow. ### Clickable Image Clicked Event When a Clickable Image is clicked, the flow displays in a popup. We pass **recordId,** which is required on your flow. # Visual Rules engine
### Overview Our custom 2D Canvas Logic Engine provides a powerful and intuitive way to create interactive graphics and animations. By combining visual programming elements with traditional coding concepts, this engine allows developers of all skill levels to build complex logic flows for canvas-based applications. ### Key Components #### Logic Blocks The engine uses a block-based programming interface, similar to Scratch or Blockly. Key logic blocks include: * **If**: Conditional statements * **Do**: Action blocks for executing code * **And**: Logical AND operator * **Not**: Logical NOT operator * **True/False**: Boolean values * **Null**: Null value * **Test**: Conditional testing (if true/if false) #### Loop Structures * **For Each**: Iterate over lists or collections of items #### Variables * Custom variables can be defined and used throughout the logic flow #### Functions * Custom functions can be created to encapsulate reusable logic ### Special Features #### Droppable Areas The engine includes a "Get Droppable Areas" function, which allows for dynamic interaction with the canvas. This can be used for: * Drag and drop functionality * Collision detection * Interactive elements within the canvas ### Example: Basic Logic Flow ``` CopyGet Droppable Areas for each item (k) in list do if (condition) do (action) ``` This basic structure allows for iterating through a list of items (potentially canvas elements), checking conditions, and performing actions based on those conditions. ### Best Practices 1. **Modular Design**: Break complex logic into smaller, reusable functions. 2. **Clear Naming**: Use descriptive names for variables and functions to enhance readability. 3. **Comment Your Logic**: Add comments to explain complex logic flows. 4. **Test Incrementally**: Build and test your logic in small steps to ensure each component works as expected. ### Advanced Techniques 1. **State Management**: Use variables to track the state of your canvas elements. 2. **Event Handling**: Implement custom event listeners to respond to user interactions. 3. **Animation Loops**: Utilize the engine's loop structures to create smooth animations. 4. **Dynamic Element Creation**: Use logic to dynamically generate and manipulate canvas elements. ### Conclusion Our 2D Canvas Logic Engine provides a flexible and powerful toolset for creating interactive canvas-based applications. By combining visual programming concepts with the versatility of a 2D canvas, developers can quickly prototype and build complex graphics and games with ease. For more detailed information on specific functions or advanced usage, please refer to our API documentation or contact our support team. # Hover Actions and Popovers RenderDraw's 2D scene editor component enhances your visual representation by offering dynamic hover information display functionalities. These features are designed to provide immediate, contextual information, improving user experience and interaction with 2D layouts or entities. ### Overview RenderDraw integrates seamlessly with Salesforce, allowing users to link 2D entities to Salesforce records. Through intuitive hover actions, users can access a variety of information and navigate Salesforce records directly from the 2D scene editor. This document outlines the capabilities and configuration options available for hover information displays. #### Key Features * **Hover-Over Information**: Displays the name of the element or linked Salesforce record details on hover. * **Salesforce Record Component Display**: Shows default record components from Salesforce for linked entities. * **Navigation to Records**: Enables navigation to the linked Salesforce record, supporting both digital experiences and internal Salesforce navigation. * **Custom Lightning Flow**: Administrators can select a Lightning flow to display information in a popover linked to the element's location on hover. #### Setting Up Hover Actions
Hover actions are additional to click actions and can be configured in the 2D scene editor's environment options. Here's how to set them up: 1. **Access the 2D Scene Editor**: Open your environment with RenderDraw installed and navigate to the 2D scene editor component. 2. **Configure Environment Options**: Locate the environment options panel. Here, you will find settings for enabling or customizing hover and click actions. 3. **Hover Information Settings**: Within the environment options, you can specify what information is displayed on hover. Options include: * Displaying the element's name. * Showing Salesforce record components for linked entities. * Configuring navigation to the Salesforce record or digital experience. 4. **Custom Lightning Flow**: To set up a custom Lightning flow, select the desired flow from the available options. Ensure you specify the `recordId` to pass to the flow, facilitating a contextual information display on hover. 5. **Save Your Configuration**: After configuring the hover information settings, save your changes. Ensure to test the hover functionality to confirm that the information displays correctly and as expected.
### Additional Notes * **Popover Location**: The information popover is dynamically positioned based on the element's location in the 2D scene, ensuring optimal visibility and user experience. * **Admin Focus**: These features are designed with an administrative focus, allowing for easy setup and customization without the need for extensive 3D visual expertise. * **Compatibility**: The hover information display features are compatible with standard Salesforce records and custom Lightning flows, offering flexibility in how information is presented. For more detailed guidance on configuring and utilizing these features, please refer to the specific sections in the RenderDraw documentation or contact our support team for personalized assistance. \\ # Change your Layout Drawing visuals based on Salesforce Data in a DataSource query Need to modify the color or opacity of a Layout Area for a particular Dataset? Here's how! Prior to this, ensure your Layout Areas are linked to their Salesforce Records. This is how we match your data to your visuals in 2D. Additionally, you can also pass a canvas item to load data into the Component {% embed url="" %} *** ​ #### 1. From your 2D scene, Click on Environment Options ![From your 2D scene, Click on Environment Options](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/8f8ef2b3-5a89-4d56-a1e5-bc8151dcd9af/c97cd50c-0cfe-4bff-849c-ee0b8b3279bc.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1322\&fp-y=0.3862\&fp-z=2.3320\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=190\&mark-y=295\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zNjAmaD04NSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 2. Click on Menu Options ![Click on Menu Options](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/921c9e07-f81a-4f4e-b210-d5d8ff5b3213/213b7cf7-2312-4cbe-8d7b-1322278fb1cc.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1482\&fp-y=0.3496\&fp-z=2.2140\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=192\&mark-y=285\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MDMmaD0xMDUmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 3. Check Show Data Source Menu. This allows us to edit the Data Source query. ![Check Show Data Source Menu. This allows us to edit the Data Source query.](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/6df5c7f5-943b-4d9f-88cd-b3291fd5991a/7b78a8ad-ab29-4dd4-aa13-db735fca0a27.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2428\&fp-y=0.5142\&fp-z=3.2031\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=587\&mark-y=324\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNiZoPTI2JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 4. Optionally, Click on Show Edit Data Source Menu Button to non-admin Users to add a DataSource button to the menu bar (non admin as well) ![Optionally, Click on Show Edit Data Source Menu Button to non-admin Users to add a DataSource button to the menu bar (non admin as well)](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/6917cf3c-3308-4fae-b3a3-fc17d8290cc7/f829cc6d-f94f-481f-b295-eb121878c15f.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5343\&fp-y=0.5766\&fp-z=2.9951\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=567\&mark-y=303\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02NiZoPTY4JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 5. Click on Update ![Click on Update](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/0838258e-6329-46b7-940f-94cb01e9b904/4030b884-800f-438c-b15e-e1643182196d.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0922\&fp-y=0.8537\&fp-z=2.7356\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=195\&mark-y=355\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMTUmaD0xMDAmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 6. Now we see a new menu item. Click on Data Source ![Now we see a new menu item. Click on Data Source](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/c7906952-2127-48a4-941b-5cc56e14ab48/7298ba9f-ecdf-4d71-8cbb-17f34009c665.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1319\&fp-y=0.6314\&fp-z=1.8132\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=13\&mark-y=294\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01NDcmaD04NiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 7. Click on Edit Data Source for this Record ![Click on Edit Data Source for this Record](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/684b39f3-bbef-4d15-817f-e4397cdde447/7cfbc9bf-c689-4970-865b-ca22704046c0.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1052\&fp-y=0.6829\&fp-z=2.0839\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=38\&mark-y=299\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00NTAmaD03NiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 8. Here's where we get the Salesforce records to act on. Let's choose an object. Click on Select an Option ![Here's where we get the Salesforce records to act on. Let's choose an object. Click on Select an Option](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/411ac47e-845f-48d5-a070-ab6f1343fdf7/bf3db658-731f-4cb2-bf57-b94f7cc5939d.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5004\&fp-y=0.2859\&fp-z=1.0772\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=46\&mark-y=188\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTA4Jmg9MzkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 9. Today we'll use Product ![Today we'll use Product](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/e0820df8-6581-4f09-b6cb-b4ee9628082b/07827341-c852-4783-903f-6ec90029c940.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5004\&fp-y=0.6186\&fp-z=1.0781\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=46\&mark-y=376\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTA3Jmg9NDImZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 10. Now we select fields. For this case, we just need to check for active products which will be done in the filters section. ![Now we select fields. For this case, we just need to check for active products which will be done in the filters section.](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/f876fc42-5c49-451a-92e5-026ba8a99398/26339afe-740f-49bc-b337-8fdcf0b3ada6.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2721\&fp-y=0.5508\&fp-z=1.4298\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=124\&mark-y=308\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02ODUmaD01OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 11. Click on Product Name so we can see which products are active. ![Click on Product Name so we can see which products are active.](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/369f106e-72df-4f18-9f84-396f2d53e969/f3076b30-5126-48fb-874b-103c29e96a43.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2721\&fp-y=0.6009\&fp-z=1.4298\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=124\&mark-y=308\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02ODUmaD01OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 12. Click on Move selection to the selected field ![Click on Move selection to the selected field](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/f6be60cd-115b-451f-9e03-373407b4e004/2330a240-aa62-4bb7-ad0d-aafe67b7a964.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4848\&fp-y=0.5678\&fp-z=2.8233\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=548\&mark-y=286\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMDMmaD0xMDMmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 13. Now let's add our conditions to pull records back. Remember we only want active products for this example. Click on Add Condition ![Now let's add our conditions to pull records back. Remember we only want active products for this example. Click on Add Condition](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/ac5cfcc8-2f8d-47b2-b272-cbe8a1e7b69e/c1535b8e-a8e0-447f-8cb0-eb61ab7c3a6a.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5518\&fp-y=0.6558\&fp-z=2.5153\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=453\&mark-y=291\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yOTQmaD05MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 14. Select a resource (field) from the query ![Select a resource (field) from the query](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/7334fe1c-f940-49e2-8a0b-72e6920b976b/2630365b-4e21-41ac-a44a-00caa46fce74.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2077\&fp-y=0.7588\&fp-z=1.7860\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=167\&mark-y=352\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01NTcmaD02NSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 15. Click on Active ![Click on Active](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/66aef046-88aa-4575-a97e-815d54531792/0482d6fe-ae08-4784-b43f-f199a13e515a.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2077\&fp-y=0.7337\&fp-z=1.7909\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=169\&mark-y=318\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01NTUmaD03MCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 16. Select your operator, in this case we want active products, so Click on Equals ![Select your operator, in this case we want active products, so Click on Equals](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/85c2be7c-774e-4bd6-820b-4dedfe5b1b79/ee797e44-8da5-4be0-ab3c-f72d874adaec.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4276\&fp-y=0.7161\&fp-z=2.1107\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=380\&mark-y=296\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00NDAmaD04MyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 17. Check Value… True ![Check Value… True](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/bf558092-ce8e-495a-aac1-57c45ac58337/ef342b98-ba6d-422d-8744-6d980b62cf54.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5049\&fp-y=0.5318\&fp-z=1.2047\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=617\&mark-y=412\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMCZoPTEwJmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 18. Click on Verify Query to see the results. ![Click on Verify Query to see the results.](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/b21a5191-2407-4bf9-9c66-444353fd0ff8/5beed9a1-888e-4d6c-bc8e-de56d1a1644d.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4550\&fp-y=0.7995\&fp-z=2.6473\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=477\&mark-y=289\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNDcmaD05NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 19. The results appear in a datatable to the right. Looks Good! ![The results appear in a datatable to the right. Looks Good!](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/70a63ec5-0cfb-413f-818a-dbccba7cc184/522234c1-e06b-4a25-af2a-aa5afe950f78.png?fm=png\&crop=focalpoint\&fit=crop\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8) #### 20. Click on Update to go back ![Click on Update to go back](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/52471b0a-5c9c-44f2-9165-96bb2d8c30d7/9ef23c1a-fc97-4919-9e69-3a65d73663e3.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.8838\&fp-y=0.7995\&fp-z=4.0000\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=501\&mark-y=264\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yODImaD0xNDYmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 21. Now let's do something with this. Remember DataSource queries are run when the component(s) are loaded. Click on Layout ![Now let's do something with this. Remember DataSource queries are run when the component(s) are loaded. Click on Layout](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/5a4d99f3-46d5-4a25-8042-982cd3127408/6122bf32-0c50-4117-83b1-14a6705f8188.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1319\&fp-y=0.5705\&fp-z=1.8132\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=13\&mark-y=294\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01NDcmaD04NiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 22. Click on Areas ![Click on Areas](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/3812b15b-1797-4896-a62e-8c08fc7ae53a/6a4edc60-0de9-4234-b07c-088a9875cb68.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1319\&fp-y=0.6301\&fp-z=1.8754\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=34\&mark-y=293\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01MjUmaD04OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 23. Click on Show menu ![Click on Show menu](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/a85673c9-5f8c-4bc1-8c2e-5fe39075d443/aedd4c38-2ad1-47ad-ba06-3c2a895da593.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2302\&fp-y=0.6816\&fp-z=2.8941\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=547\&mark-y=285\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMDYmaD0xMDYmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 24. Click on Related Actions ![Click on Related Actions](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/b4703484-80b3-4313-bf0c-313694d89890/49ed3b63-b7e7-444c-b7d0-c858c5d59012.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1764\&fp-y=0.7358\&fp-z=2.2913\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=298\&mark-y=293\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zNzUmaD04OCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 25. Click on DataSource Actions ![Click on DataSource Actions](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/8de52d70-6472-4b45-801f-395b36313ac9/3be3f811-9b55-4b03-ba98-79d64e07491b.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=316\&mark-y=136\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTQlMkNGRjc0NDImdz0xMTcmaD00NCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 26. We have options here. If the items added to the screen are in the resulting data query (linked Area to record that is returned) we call these actions ![We have options here. If the items added to the screen are in the resulting data query (linked Area to record that is returned) we call these actions](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/92639ead-5474-4467-b992-c3dd935017e3/68e3f016-049c-4d2c-ab48-063be655ace5.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2454\&fp-y=0.3089\&fp-z=2.2102\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=398\&mark-y=285\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MDQmaD0xMDUmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 27. To Add an option, click the plus ![To Add an option, click the plus](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/c533b92d-4be2-4c39-9d05-121485ac5683/08af8079-b932-483c-a044-9b2fb01280d2.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.7005\&fp-y=0.3908\&fp-z=1.8246\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=745\&mark-y=247\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz04NyZoPTY3JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 28. For this example, let's change the color ![For this example, let's change the color](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/738b3637-2228-411d-8614-afdb1ccc99cd/d925e45c-b5b9-4081-a50d-911c582d0d8b.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.7504\&fp-y=0.4444\&fp-z=2.8018\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=412\&mark-y=284\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zNzcmaD0xMDgmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 29. We pick a color ![We pick a color](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/aa2f4d5a-3b56-4c70-ba64-aab98a224b03/70d543fe-6fe3-4f13-beef-052ae970cc0b.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5004\&fp-y=0.4894\&fp-z=2.0587\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=584\&mark-y=315\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zOCZoPTM4JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 30. Click on Done ![Click on Done](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/c5292add-9c69-4794-ac8d-431e8255505e/ca13a669-9cde-4685-b810-0039e79e3e50.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4668\&fp-y=0.7791\&fp-z=2.6420\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=476\&mark-y=289\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNDkmaD05NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 31. Now let's add a color if the product is not active in the query results. Click on Elements Not In Results ![Now let's add a color if the product is not active in the query results. Click on Elements Not In Results](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/2894d73c-0b50-4ca6-9469-8d0b53abb6f3/942659b3-8934-41d4-a710-3daafb06f11e.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2450\&fp-y=0.3686\&fp-z=2.2140\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=399\&mark-y=285\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MDMmaD0xMDUmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 32. Click on Show menu ![Click on Show menu](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/06dfdddc-9ea6-4bde-ae58-30fd00d9989c/aa21c225-3be0-4ba6-b9f9-25b8adf4a83a.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.7866\&fp-y=0.3442\&fp-z=2.8233\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=533\&mark-y=286\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMzQmaD0xMDMmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 33. Click on Change Color ![Click on Change Color](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/f2649f7f-1659-47bf-87da-2e639f01d7df/15517429-ecad-4fb8-93e5-f4fe06cfcaf8.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.7504\&fp-y=0.4444\&fp-z=2.8018\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=412\&mark-y=284\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zNzcmaD0xMDgmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 34. Choose the color ![Choose the color](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/019d5555-0988-4a57-bfc2-5c557c85196a/67debdc2-9f60-4d2a-a09e-0558bbcba46f.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5015\&fp-y=0.4919\&fp-z=3.0572\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=572\&mark-y=310\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01NiZoPTU2JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 35. Click on Done to apply. ![Click on Done to apply.](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/828b2def-e58d-4819-8f8b-66d863dfa42f/24bb5804-3e73-45df-9f9b-fd719e0b8549.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4668\&fp-y=0.7791\&fp-z=2.6420\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=476\&mark-y=289\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNDkmaD05NyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 36. Click on Save to push the changes to the component. ![Click on Save to push the changes to the component.](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/45479401-6659-4bd9-8ecc-ec4eccb94b4f/31f8c575-0fee-4f8f-8107-3e19100589e0.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.7984\&fp-y=0.8631\&fp-z=4.0000\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=470\&mark-y=264\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNjAmaD0xNDYmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 37. Remember to Save your settings. After following these steps, the active product-related areas will be Green, while those not in the result from the data source query will show a red overlay. ![Remember to Save your settings. After following these steps, the active product-related areas will be Green, while those not in the result from the data source query will show a red overlay.](https://images.tango.us/workflows/439dd5c3-8153-46ce-a579-e91043bf6776/steps/5fff232b-4f19-40e2-a8c6-25f2dd404bee/7ef4bf7b-779c-46e3-9ab5-93cb4261c671.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2153\&fp-y=0.9661\&fp-z=2.8239\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=508\&mark-y=559\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xODMmaD0xMDMmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) # Enable users to take snapshots {% embed url="" %} ## [2D Admin - Enable users to take a snapshot](https://app.tango.us/app/workflow/019bbdb5-efdf-4fec-9143-3ee243f1da89?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links) #### 1. Go to the page where the Admin 2D component has been added #### 2. Go to the environment settings of the scene ![Go to the environment settings of the scene](https://images.tango.us/workflows/019bbdb5-efdf-4fec-9143-3ee243f1da89/steps/3aac57f7-18f1-43a6-99d8-2a22dfa33c67/44bf79be-8ba7-4788-a364-f48b609a2383.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1784\&fp-y=0.5044\&fp-z=1.6743\&w=1200\&ar=2624%3A1476) #### 3. Click on "Show all Environment Options" button to see all options ![Click on "Show all Environment Options" button to see all options](https://images.tango.us/workflows/019bbdb5-efdf-4fec-9143-3ee243f1da89/steps/c25da822-6eed-42d3-bc30-a309444c422d/f859bdb6-2372-4c0d-8746-efb7bd3f696f.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1785\&fp-y=0.5278\&fp-z=1.6605\&w=1200\&ar=2624%3A1476) #### 4. Go to the Menu Options; if it's not expanded, expand it to see all options ![Go to the Menu Options; if it's not expanded, expand it to see all options](https://images.tango.us/workflows/019bbdb5-efdf-4fec-9143-3ee243f1da89/steps/0a748c5e-7deb-4211-addb-4c349b43b283/9a79a24c-ba94-446e-8543-e66479b960ef.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2342\&fp-y=0.4456\&fp-z=2.1102\&w=1200\&ar=2624%3A1476) #### 5. Ensure the "Show Take Snapshot Button" is checked ![Ensure the "Show Take Snapshot Button" is checked](https://images.tango.us/workflows/019bbdb5-efdf-4fec-9143-3ee243f1da89/steps/e6c6cc2a-c9b5-446a-ab48-7a0f24ce26e0/c1749cde-0847-4e44-9589-ebb02502297d.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1692\&fp-y=0.5075\&fp-z=3.1620\&w=1200\&ar=2624%3A1476) #### 6. Go back to the main options context menu. ![Go back to the main options context menu.](https://images.tango.us/workflows/019bbdb5-efdf-4fec-9143-3ee243f1da89/steps/87475afb-5f84-4592-9b9f-5a4c9995f705/3d742b96-870b-44ab-befe-3edd90bb424b.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0252\&fp-y=0.3662\&fp-z=3.1418\&w=1200\&ar=2624%3A1476) #### 7. Click on Save ![Click on Save](https://images.tango.us/workflows/019bbdb5-efdf-4fec-9143-3ee243f1da89/steps/b787f26b-fc7d-4aff-9c4c-685cb87064cf/421f9252-e984-4854-a2e4-06fc61c5dbd7.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3077\&fp-y=0.6799\&fp-z=2.9543\&w=1200\&ar=2624%3A1476) #### 8. An alert dialog will confirm this menu item will be added the next time the user views the component. ![An alert dialog will confirm this menu item will be added the next time the user views the component.](https://images.tango.us/workflows/019bbdb5-efdf-4fec-9143-3ee243f1da89/steps/1c1f3825-c282-4fee-a5b3-05fd7daccc29/8d7ffb49-1598-4527-9b29-062956f092b3.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&fp-z=1.0000\&w=1200\&ar=2624%3A1476) *** # 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. ## Automated Layout Area Detection using OCR The Optical Character Recognition (OCR) feature in our application allows administrators to automatically detect and create layout areas on a 2D canvas based on the text content of the background image. This powerful capability eliminates the need for manual drawing and significantly reduces the time and effort required to define layout areas. ### Benefits * **Saves Hundreds of Hours**: By automating the process of detecting and creating layout areas, administrators can save a substantial amount of time compared to manually drawing each area. This efficiency gain is particularly valuable when dealing with complex layouts or a large number of images. * **Increased Accuracy**: The OCR technology accurately identifies the text elements on the image and creates precise layout areas around them. This reduces the chances of human error and ensures consistent results across multiple images. * **Enhanced Productivity**: With the automated OCR process, administrators can quickly process a batch of images and generate layout areas in a matter of minutes. This enables them to focus on other important tasks and streamlines the overall workflow. ### How to Use 1. **Navigate to the 2D Canvas**: Open the desired 2D canvas that contains the background image you want to process. 2. **Access the Layout Menu**: Click on the "Layout" option in the top menu to access the layout-related features. 3. **Initiate OCR Process**: From the layout menu, select "Add via OCR" to start the automated layout area detection process. 4. **Process OCR**: Click on the "Process OCR" button to begin analyzing the background image and extracting the text elements. 5. **Review and Confirm**: Once the OCR process is complete, review the detected layout areas. You can update the names of the areas if needed, hover over each row to see the corresponding area on the canvas, and remove any unwanted areas. When you are satisfied with the results, click on "Finish" to add the layout areas to the canvas. 6. **Close the Menu**: After adding the layout areas, click on the "Close" button to exit the layout menu. 7. **Link Areas to Records (Optional)**: If desired, you can establish relationships between the layout areas and specific records. Click on the "Areas" option and select an area. Search for the desired record by object and record name. The available objects can be set globally through the scene's environment settings under "Default related objects". 8. **Repeat as Needed**: Repeat the process for other layout areas or images as required. By following these steps, administrators can harness the power of OCR to automatically detect and create layout areas on their 2D canvases. This feature significantly reduces the manual effort involved and enables efficient processing of multiple images. ### Conclusion The automated layout area detection using OCR is a game-changer for administrators working with 2D canvases. By eliminating the need for manual drawing and leveraging accurate text recognition, this feature saves countless hours and enhances productivity. Embrace this powerful capability to streamline your workflow and unlock new possibilities in your application. # Enable Azure OCR in your Remote Site settings & Metadata Before you get started adding your clickable regions, you have to make sure we can call the Einstein API. {% embed url="" %} ## [Using Microsoft Azure Portal for Managing Keys and APIs for Azure AI Services](https://app.tango.us/app/workflow/2cf3b148-a65c-448e-8234-6966d7c81189?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links) Creation Date: May 24, 2024Created By: Erik Pilgrim[View most recent version](https://app.tango.us/app/workflow/2cf3b148-a65c-448e-8234-6966d7c81189?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links)​ *** ​ ### [# Microsoft Azure portal (PWA)](https://portal.azure.com/#home) #### 1. Click on your OCR resource, if one does not exist Create a new Document Intelligence Resource Create a resource at ![Click on your OCR resource, if one does not exist Create a new Document Intelligence Resource](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/03037b37-7b88-47a1-a047-67ed41352cfd/58d5b09c-4114-4585-9199-1e22a092e7b2.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1216\&fp-y=0.6498\&fp-z=2.5048\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=216\&mark-y=436\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yOTgmaD04NSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 2. Click on Copy to clipboard the value for Endpoint for this demo, ours is ![Click on Copy to clipboard the value for Endpoint for this demo, ours is https://rdcentralocr.cognitiveservices.azure.com/](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/3c3ef17c-7ade-4346-b331-cec4582742af/6f391ded-b955-432e-b831-7ee5c337b290.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.9651\&fp-y=0.4378\&fp-z=2.9089\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=1017\&mark-y=417\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMjImaD0xMjImZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) ### # Salesforce #### 3. Click on Quick Find ![Click on Quick Find](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/05958837-5253-49d7-bb37-57a10c1d0ba8/c79a3ac9-69e7-486b-9deb-f3ec8be67ec8.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0938\&fp-y=0.2168\&fp-z=2.1175\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=19\&mark-y=260\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MzgmaD05NSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 4. Click on Trusted URLs ![Click on Trusted URLs](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/4be2602e-9bdb-4d95-9e3d-ed593c8948d1/c2a6c907-86ed-4d40-ad6f-cf5c35818822.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0724\&fp-y=0.7141\&fp-z=2.7130\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=124\&mark-y=300\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMjMmaD02OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 5. Click on New Trusted URL ![Click on New Trusted URL](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/0fd2a067-8089-4537-bbdc-0df4661345c4/2c0b1037-1036-49ce-8f65-9bd1067dbbe4.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5957\&fp-y=0.7647\&fp-z=2.6526\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=477\&mark-y=298\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNDUmaD03MyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 6. Type "renderdrawocr" ![Type "renderdrawocr"](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/62bff4fd-afde-40ed-ad20-866b2f37158e/293469f9-9cca-4da1-b3a6-97dc61f1c75f.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4688\&fp-y=0.6450\&fp-z=1.9249\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=346\&mark-y=309\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01MDcmaD01MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 7. Type your OCR endpoint, ours is "" ![Type your OCR endpoint, ours is "https://rdcentralocr.cognitiveservices.azure.com"](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/773e4ca0-98f8-4bc3-93d5-b48365b3d65d/ec9f72fa-150b-4739-a56c-43d756b71308.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5705\&fp-y=0.6806\&fp-z=1.5600\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=204\&mark-y=315\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz03OTImaD00MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 8. Check connect-src (scripts) ![Check connect-src (scripts)](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/0d22d48e-b161-4beb-9556-0f1e0f605cde/55e29129-fd26-4b7c-9a6b-42bd5ef33637.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3700\&fp-y=0.6847\&fp-z=3.0420\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=571\&mark-y=305\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01OCZoPTU4JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 9. Check frame-src (iframe content) ![Check frame-src (iframe content)](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/6dd7da66-eafe-48ae-ab85-9638f302bd66/e313821a-2fac-4f6b-8ed0-0c7bbbe1f2ec.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.3700\&fp-y=0.7531\&fp-z=3.1645\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=570\&mark-y=304\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02MSZoPTYxJmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 10. Click on Save ![Click on Save](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/f02e3e62-1766-42d4-93e9-b0abdd2cc46a/9707cf1b-c47a-44c2-bb3d-5e7422b30c58.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4573\&fp-y=0.9453\&fp-z=2.9845\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=537\&mark-y=518\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMjYmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) ### [# Go back to your Microsoft Azure portal](https://portal.azure.com/#@erikpilgrimrenderdraw.onmicrosoft.com/resource/subscriptions/1d597bcb-347c-44b7-b5f8-a1f21b9ee35c/resourceGroups/CVRetailMFG/providers/Microsoft.CognitiveServices/accounts/RDCentralOCR/overview) #### 11. Click on Click here to manage keys ![Click on Click here to manage keys](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/03457a21-aa2a-4e76-97c1-a04f164152c3/72ca7e97-d106-4696-937b-31cd3eda8d77.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.7470\&fp-y=0.4090\&fp-z=2.9800\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=385\&mark-y=299\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MzEmaD03MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 12. Click on These keys are used to access your Azure AI services API. Do not share your keys. Store them securely– for example, using Azure Key Vault. We also recommend regenerating these keys regularly. Only one key is necessary to make an API call. When regenerating the first key,… ![Click on These keys are used to access your Azure AI services API. Do not share your keys. Store them securely– for example, using Azure Key Vault. We also recommend regenerating these keys regularly. Only one key is necessary to make an API call. When regenerating the first key,…](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/32c71d10-27c8-4212-b50e-1cce8e1ec813/a96b77b7-11d7-4361-95bf-c4f32e154ccc.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.7374\&fp-y=0.5335\&fp-z=2.9089\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=559\&mark-y=292\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz04MiZoPTg1JmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) #### 13. Go back to your Salesforce Instance. We need to add an OCR Metadata entry for RenderDraw #### 14. Type "custom metadata" ![Type "custom metadata"](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/3a66439f-c354-44bd-805c-661b41506a71/8b69929f-760c-4ffa-a780-4cde8872d812.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0938\&fp-y=0.2168\&fp-z=2.1175\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=19\&mark-y=260\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MzgmaD05NSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 15. Click on Custom Metadata Types ![Click on Custom Metadata Types](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/26bf927d-2970-4403-8caf-158130c39ba7/a165ba0f-2b7d-4fd5-af64-62286efa2dcd.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0972\&fp-y=0.3256\&fp-z=2.3915\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=109\&mark-y=304\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzkmaD02MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 16. Navigate to RenderDraw OCR Setting ![Click on Del | Manage Records](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/a394cc1d-382b-4867-8084-562a1de585c6/ee5d9086-0209-4e2a-8688-7586cf8926da.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2626\&fp-y=0.8386\&fp-z=2.5010\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=450\&mark-y=348\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMDAmaD0xMDEmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 17. Click on Manage Records ![Click on Manage Records](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/290bd097-7675-44aa-878b-7926fdc57f9d/d3994c94-712c-4c7e-841c-f2a897b7fa07.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2725\&fp-y=0.8406\&fp-z=2.6852\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=483\&mark-y=357\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yMzMmaD01MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 18. Click on New ![Click on New](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/bd4189a1-2616-4732-b295-f46a31106edc/55825c7f-6889-402d-9627-b000e2ae5b0c.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5941\&fp-y=0.4514\&fp-z=2.9322\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=542\&mark-y=294\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTUmaD04MCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 19. Paste your key into the API Key text area ![Paste your key into the API Key text area](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/9d7ec398-fec9-400d-92eb-c0c0590142e2/fe6bf458-d436-4d34-ae06-dbbc0680460d.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4573\&fp-y=0.6084\&fp-z=2.0135\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=362\&mark-y=283\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00NzUmaD0xMDImZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) ### [# Microsoft Azure portal (PWA)](https://portal.azure.com/#@erikpilgrimrenderdraw.onmicrosoft.com/resource/subscriptions/1d597bcb-347c-44b7-b5f8-a1f21b9ee35c/resourceGroups/CVRetailMFG/providers/Microsoft.CognitiveServices/accounts/RDCentralOCR/cskeys) #### 20. Click on These keys are used to access your Azure AI services API. Do not share your keys. Store them securely– for example, using Azure Key Vault. We also recommend regenerating these keys regularly. Only one key is necessary to make an API call. When regenerating the first key,… ![Click on These keys are used to access your Azure AI services API. Do not share your keys. Store them securely– for example, using Azure Key Vault. We also recommend regenerating these keys regularly. Only one key is necessary to make an API call. When regenerating the first key,…](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/05db515c-8bf0-4e04-af04-78a662148b00/6c8b7d61-7e05-489a-8f1f-6051e09bc746.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.7256\&fp-y=0.7811\&fp-z=3.4987\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=552\&mark-y=289\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz05NiZoPTkwJmZpdD1jcm9wJmNvcm5lci1yYWRpdXM9MTA%3D) ### # Salesforce #### 21. Paste "" into input ![Paste "https://rdcentralocr.cognitiveservices.azure.com/" into input](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/25eadba2-918f-47d3-a6da-6f0f8d547855/2f641281-6414-4e5c-956b-72d021bd52f7.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4181\&fp-y=0.6631\&fp-z=2.3915\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=430\&mark-y=302\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzkmaD02NSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 22. Type "AzureOCR" ![Type "AzureOCR"](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/b38e1fb8-ffec-4f8d-ac2b-0f9412aa7cd2/799625c6-8942-4a41-8bf6-6d3684eb1a5f.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4181\&fp-y=0.5181\&fp-z=2.3915\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=430\&mark-y=302\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMzkmaD02NSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 23. Click on Save ![Click on Save](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/59ba3373-1f8b-4842-8ca4-4bb035a56cb9/e2164e6a-a1f5-43d7-b3ff-f7c68e898dc4.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4573\&fp-y=0.7671\&fp-z=2.9845\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=537\&mark-y=293\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMjYmaD04MyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 24. Type "remote" ![Type "remote"](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/40247752-42c3-4278-b472-c5e6be5b4733/c800d516-d45c-4f53-8ec4-10beaef9846d.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0938\&fp-y=0.2168\&fp-z=2.1175\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=19\&mark-y=260\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MzgmaD05NSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 25. Click on Remote Site Settings ![Click on Remote Site Settings](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/b7ac5160-d189-445e-a125-987efc84f5e9/c99cfa01-ca7c-4e09-8402-93a6875f2e84.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0896\&fp-y=0.4118\&fp-z=2.4820\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=114\&mark-y=303\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMDYmaD02NCZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 26. Click on New Remote Site ![Click on New Remote Site](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/6cbf003b-cd48-422c-9b8e-85ffb708d93e/38cb662a-f6cf-42c2-932d-0959564fa525.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5957\&fp-y=0.5212\&fp-z=2.6634\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=479\&mark-y=298\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNDEmaD03MyZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 27. Type "Azure\_OCR" ![Type "Azure\_OCR"](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/f262ff50-b108-496e-a4e4-c1e5f23e5bc4/58baab1d-537f-49fb-b243-c660fd76edfc.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4688\&fp-y=0.5192\&fp-z=1.9249\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=346\&mark-y=309\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01MDcmaD01MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 28. Paste "" into input ![Paste "https://rdcentralocr.cognitiveservices.azure.com/" into input](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/54ca624d-ff2e-4cb9-9f98-8d04d590f2a2/3618a008-e416-4035-8480-7a834a9404e1.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5705\&fp-y=0.5547\&fp-z=1.5600\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=204\&mark-y=314\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz03OTImaD00MSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 29. Click on Save ![Click on Save](https://images.tango.us/workflows/2cf3b148-a65c-448e-8234-6966d7c81189/steps/d5299248-68fd-48b0-ad2a-f4ffc6032a6e/afccb0d7-e257-4a0c-a517-1e5e9e8b1c75.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4573\&fp-y=0.7839\&fp-z=2.9845\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=537\&mark-y=293\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMjYmaD04MiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 30. Now your Salesforce instance is setup for OCR with Azure + RenderDraw # Add Layout Areas using OCR {% embed url="" %} ## [Adding Layout Areas using OCR Process](https://app.tango.us/app/workflow/100eb309-2d39-45a4-9479-07a2bf87bc31?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links) Creation Date: May 24, 2024Created By: Erik Pilgrim[View most recent version](https://app.tango.us/app/workflow/100eb309-2d39-45a4-9479-07a2bf87bc31?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links)​ *** ​ ### # Navigate to a 2D Canvas with a background image added in Salesforce #### 1. Click on Layout ![Click on Layout](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/49f84e73-8b54-44de-bdfc-a352ec10dfcc/aaba4679-21a6-477f-892c-85b66d0f9523.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1489\&fp-y=0.8140\&fp-z=1.8410\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=60\&mark-y=566\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01MzcmaD0xMjUmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 2. Click on Show menu ![Click on Show menu](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/f1590755-5a3d-4c2c-88b7-0466645aa3e0/8a07b4ed-37ef-48ea-83a3-0b21aff7c2ce.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.2219\&fp-y=0.8817\&fp-z=2.9195\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=526\&mark-y=552\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xNDkmaD0xNDkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 3. Click on Add via OCR ![Click on Add via OCR](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/cc2c8e28-3924-4631-a4ba-c4667a42bfd9/b0263a8f-caed-47a3-be29-ad873101840e.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1565\&fp-y=0.8297\&fp-z=2.1222\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=181\&mark-y=554\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MzYmaD0xMTQmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 4. Click on Process OCR ![Click on Process OCR](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/cc624c7b-6304-433c-8b54-c33da3028104/c4f9f479-5852-4e45-8ccb-2838fb91cf92.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.8179\&fp-y=0.7784\&fp-z=4.0000\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=286\&mark-y=374\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz02MjgmaD0yMDkmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 5. Confirm the Areas, update names where required, hover over rows to see each area and remove if needed. Once completed press finish to add the areas. ![Confirm the Areas, update names where required, hover over rows to see each area and remove if needed. Once completed press finish to add the areas.](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/b7049cd9-9592-447e-9e06-b8ecb245add0/8956f5e2-eea4-442d-9f41-5c4ac39a3c1b.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.8263\&fp-z=1.0776\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=47\&mark-y=744\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xMTA3Jmg9NjgmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 6. Click on Close ![Click on Close](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/f015755e-0dc9-4209-ac8d-4c8f4eab0826/7435fe3b-ca44-4178-969e-472968a93e24.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.9411\&fp-y=0.0807\&fp-z=2.8191\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=927\&mark-y=144\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0xNDgmaD0xNDgmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 7. Now let's add a relationship for our areas. Click on Areas ![Now let's add a relationship for our areas. Click on Areas](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/ad68114c-983b-49d3-bf31-52210571c4cb/edfdd218-69e0-454c-a75b-8f3555c3b44d.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0862\&fp-y=0.5732\&fp-z=2.3332\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=113\&mark-y=335\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yNTYmaD0yODcmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D) #### 8. Click on an area ![Click on an area](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/beb20d50-852a-4915-b507-2deec202a538/71d34a17-76c5-472d-aac6-1cb3973ff054.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1794\&fp-y=0.6813\&fp-z=2.4253\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=359\&mark-y=434\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0zMjcmaD04OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 9. Link with the record by searching for Records by object and record. Objects can be set globally through the scene's environment settings > Default related objects ![Link with the record by searching for Records by object and record. Objects can be set globally through the scene's environment settings > Default related objects](https://images.tango.us/workflows/100eb309-2d39-45a4-9479-07a2bf87bc31/steps/84dc1c9d-810b-400c-bbe7-48cf614d9ab9/31fdf664-2932-4d0a-a471-c69c809f95c3.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1559\&fp-y=0.9343\&fp-z=1.8903\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8\&mark-x=94\&mark-y=788\&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz01MTkmaD05OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw) #### 10. Repeat as needed # Data interaction within a Flow When you need to update an intertaction within a 2D screen, often it is wise to use a Salesforce Lightning Flow ### From the Configuration of the scene, make sure you setup the scene for use within a Lightning flow
1. Ensure you have the show next option selected; this will allow the user to see the proceed button (shown as save) **a.** Optionally set the text and the icon for the next button. The icons are available at 2. Check the "Use with Lightning flow" option to ensure that when a user presses proceed, the Canvas object is generated and sent to the next step of the lightning flow 3. The Next button has been displayed to the user for interaction. {% hint style="info" %} You can redirect the user flow to the 2D canvas within a flow if you modify the Canvas object properties. The canvas will redraw based on the properties passed {% endhint %} Our interactions pass a apex object back and forth, and this object is detailed here: [Canvas](/api-documentation/data-objects-used-throughout-the-suite/canvas) This Canvas object contains the latest information from the canvas directly. The standard data flow goes something like this: Where we are using the Canvas object as a variable and mapping properties from it's sub-objects (in this case, draggable items) into products in a custom configuration scenario. Setting up a Canvas object is as simple as defining the variable: ![](https://1083871259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW2NJcrdHUw4YcOz4UJN%2Fuploads%2Fuj6qWLGN61OKddhxk3TS%2Fimage.png?alt=media\&token=7c73bca0-c84c-4a47-903d-8b06be407c18) and then mapping before and after the canvas interaction ![](https://1083871259-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW2NJcrdHUw4YcOz4UJN%2Fuploads%2FSvq3DfMu7UXLsWctlDiy%2Fimage.png?alt=media\&token=f0f9c0ee-04f1-4b1b-b95a-98ce58fa0f4f) # Modifying Canvas with APEX ``` public with sharing class Test_CanvasTransform { public Test_CanvasTransform() { } @InvocableMethod public static List getTestCanvas() { try { RDraw.Canvas can = new RDraw.Canvas(); can.id = 'abc123'; can.name = 'Test Canvas'; can.placedDroppableAreas = new List(); for (Integer i = 0; i < 4; i++) { RDraw.DroppableArea da = new RDraw.DroppableArea(); da.id = 'da' + i; da.name = 'Droppable Area ' + i; da.sortingEnabled = true; da.sortingDirection = 'end'; da.recordId = '01tDP00000AO113YAD'; da.draggableItems = new List(); for (Integer j = 0; j < 5; j++) { RDraw.BaseCanvasItem bci = new RDraw.BaseCanvasItem(); String recordId = Math.Mod(j, 2) == 0 ? '01tDP00000APsFIYA1' : '01tDP00000APsFcYAL'; bci.id = 'bci' + j; bci.name = 'Base Canvas Item ' + j; bci.recordId = recordId; da.draggableItems.add(bci); } can.placedDroppableAreas.add(da); } List canList = new List(); canList.add(can); return canList; } catch (Exception e) { throw new AuraHandledException(e.getMessage()); } } ``` } # 2D User Guide # Take a snapshot Take a snapshot of the 2D environment and attach it to a Salesforce Record {% embed url="" %} ## [2D - Taking a snapshot](https://app.tango.us/app/workflow/bbc1c6b4-bde7-461d-9da9-f56d157afce7?utm_source=magicCopy\&utm_medium=magicCopy\&utm_campaign=workflow%20export%20links) #### 1. Go to Your record on Salesforce page where the 2D component has been added. Ensure the user has the RenderDraw User permission set #### 2. Add your items to the screen either by data with the passed in Canvas, or by dragging and dropping. ![Add your items to the screen either by data with the passed in Canvas, or by dragging and dropping.](https://images.tango.us/workflows/bbc1c6b4-bde7-461d-9da9-f56d157afce7/steps/341d83cc-1d3c-4bd6-a659-1039bf7f4f42/8a7c9220-24ef-4860-813a-7fbaf89923fc.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4998\&fp-y=0.3137\&fp-z=1.0178\&w=1200\&ar=2624%3A1476) #### 3. Select "on" ![Select "on"](https://images.tango.us/workflows/bbc1c6b4-bde7-461d-9da9-f56d157afce7/steps/2541c707-8ca1-4850-a0ea-223d2df56949/45156dd2-13d7-4464-a075-70ad749407be.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.0175\&fp-y=0.4031\&fp-z=3.3333\&w=1200\&ar=2624%3A1476) #### 4. Once ready to take a snapshot, view the toolbar on the 2D component ![Once ready to take a snapshot, view the toolbar on the 2D component](https://images.tango.us/workflows/bbc1c6b4-bde7-461d-9da9-f56d157afce7/steps/fbaa4adf-454a-4431-8ab7-0e29b738776a/73a843bc-6399-4155-ac7b-953f3261a47c.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4998\&fp-y=0.3333\&fp-z=1.0178\&w=1200\&ar=2624%3A1476) #### 5. Select the snapshot button if this button isn't here, ensure your 2D scene settings were properly setup with the "show take snapshot button" selected in the environment options ![Select the snapshot button](https://images.tango.us/workflows/bbc1c6b4-bde7-461d-9da9-f56d157afce7/steps/6d14edf7-5065-4e03-a86e-f8ed32ec3ab0/9f2ab2a3-3dcf-4363-ab52-960cc68a24ce.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.1079\&fp-y=0.3327\&fp-z=3.1620\&w=1200\&ar=2624%3A1476) #### 6. Once the preview dialog opens, either download or attach the image to a record ![Once the preview dialog opens, either download or attach the image to a record](https://images.tango.us/workflows/bbc1c6b4-bde7-461d-9da9-f56d157afce7/steps/d2bec06b-3ec2-4cb1-965b-c14b01b5e144/e409d7aa-2628-42fa-8710-db23fd51eac1.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5522\&fp-z=1.1328\&w=1200\&ar=2624%3A1476) #### 7. Click on Attach the image to a record ![Click on Attach the image to a record](https://images.tango.us/workflows/bbc1c6b4-bde7-461d-9da9-f56d157afce7/steps/9024ddd0-52dc-438d-a2d9-fa1627b36e28/b8c5aea0-d913-4bd5-9ab9-41a32f7c61dd.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5783\&fp-y=0.8757\&fp-z=2.2774\&w=1200\&ar=2624%3A1476) #### 8. The updated dialog opens, this is where you can rename the file and select the file type ![The updated dialog opens, this is where you can rename the file and select the file type](https://images.tango.us/workflows/bbc1c6b4-bde7-461d-9da9-f56d157afce7/steps/4c106d54-1eaa-436c-8772-c71acecac8e1/1d71df2c-b4c1-49d0-b5ba-4102f9565925.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5268\&fp-z=1.5245\&w=1200\&ar=2624%3A1476) #### 9. Find your record by searching for the object and name of the record to associate ![Find your record by searching for the object and name of the record to associate](https://images.tango.us/workflows/bbc1c6b4-bde7-461d-9da9-f56d157afce7/steps/ab59ca3d-9ff6-4c89-a646-ee82e92cf8c9/7bb165b7-4755-4bca-aa38-aa36141ea5f4.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4950\&fp-y=0.4604\&fp-z=1.6916\&w=1200\&ar=2624%3A1476) #### 10. Click on Add File to Record ![Click on Add File to Record](https://images.tango.us/workflows/bbc1c6b4-bde7-461d-9da9-f56d157afce7/steps/0f1e7bd4-cd53-4696-88e5-85a7cb3a37d9/ae3e20ac-400c-4b87-9a72-bfd6d07122ac.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.6330\&fp-y=0.6494\&fp-z=2.5746\&w=1200\&ar=2624%3A1476) #### 11. A confirmation message will confirm the snapshot was saved ![A confirmation message will confirm the snapshot was saved](https://images.tango.us/workflows/bbc1c6b4-bde7-461d-9da9-f56d157afce7/steps/46ebc1b0-361e-4658-86fe-def74ccfd2ad/261ce779-e95f-4706-a11a-2087647c645a.png?fm=png\&crop=focalpoint\&fit=crop\&fp-x=0.4788\&fp-y=0.1301\&fp-z=2.0955\&w=1200\&ar=2624%3A1476) *** # 3D # Admin # Adding Components to your Lightning Pages Adding our prebuilt, LWC components to your record pages is as easy as dragging and dropping in the lightning app builder (Edit page screen) Follow this interactive guide to add components to your Salesforce Record Pages. {% embed url="" %} {% hint style="info" %} Admin components are setting up scenes whether they are 2D or 3D and generally shouldnt be exposed to your end users.\ \ The most commonly used components for end user viewing are 3D Scene and 2D Scene, with their admin components having Director in the name {% endhint %} \ [Adding RenderDraw Lightning components to Screen](https://app.tango.us/app/workflow/898ba93f-c0ea-4cc9-a4d8-886863ed6bd0?utm_source=markdown\&utm_medium=markdown\&utm_campaign=workflow%20export%20links) **Creation Date:** Jul 15, 2022\ **Created By:** Erik Pilgrim\ [View most recent version](https://app.tango.us/app/workflow/898ba93f-c0ea-4cc9-a4d8-886863ed6bd0?utm_source=markdown\&utm_medium=markdown\&utm_campaign=workflow%20export%20links) *** #### 1. Go to the Lightning or Record Page where you have setup Metadata #### 2. Drag the appropriate RenderDraw component ![Step 2 screenshot](https://images.tango.us/public/edited_image_f7a66be4-866b-420d-9b38-566a00dd24c0.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5000\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8) #### 3. To activate the view (if this isn't the default) Click on Activation... ![Step 3 screenshot](https://images.tango.us/public/screenshot_995eb0d3-09be-4a86-b98a-fdbf354989af.png?crop=focalpoint\&fit=crop\&fp-x=0.9093\&fp-y=0.0891\&fp-z=2.9628\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8) #### 4. Confirm it is activated, if not, activate for the form factor needed ![Step 4 screenshot](https://images.tango.us/public/screenshot_6f951690-344f-4ab8-bc3d-6353c0c1a124.png?crop=focalpoint\&fit=crop\&fp-x=0.5000\&fp-y=0.5873\&fp-z=1.2508\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8) #### 5. Click on Close ![Step 5 screenshot](https://images.tango.us/public/screenshot_2266e8d1-d80c-430f-ab66-465fe06cb2a5.png?crop=focalpoint\&fit=crop\&fp-x=0.7874\&fp-y=0.8253\&fp-z=4.0000\&w=1200\&border=2%2CF4F2F7\&border-radius=8%2C8%2C8%2C8\&border-radius-inner=8%2C8%2C8%2C8) #### 6. Go back, your component will be added to the page # Examples # Field Service and Self Service # Interactive Product Guidance Custom Explosion Studio enables the creation of dynamic, visual step-by-step guides for field service technicians, customer support, and end customers **Prerequisites** 1. Base RenderDraw setup completed 1. Instructions here: [Getting Started With RenderDraw](/introduction/getting-started-with-renderdraw) **Set Up A Guided Product Explosion** 1. Navigate to the desired Product record 1. ```
``` 2. Navigate to RenderDraw 3D Admin tab (created earlier in general setup) 1. ```
``` 3. Navigate to sub tab called "Custom Explosion Studio" 1. \\
4. Click "Add Custom Explosion" 1. ```
``` 5. Create/Add A Frame and click the pencil icon to edit the specific frame 1. ```
``` 6. Adjust camera, click on specific piece of model and/or use the Elements tab to find the specific piece of the model, and create annotation to describe the given step or area 1. Annotations can reference text, image url, video url, or other link 1. ```
``` 7. Click "Set Camera" and Click "Save" 1. ```
``` 8. Repeat to create as many frame as neccessary # Asset Management # Product Visualization # Setup for 3D Visual Configuration Scenarios # Salesforce CPQ Setup External Configurator The integration between RenderDraw and Salesforce CPQ is delivered via managed package and installed and used through the product configuration flow. **Prerequisites:** * RenderDraw package is [installed](/introduction/getting-started-with-renderdraw/installation) and ready to use within product records * Salesforce CPQ is installed, and configured for use (catalog, pricing, etc.) * External Configuration is enabled for products being visualize via RenderDraw # Setup Logic for Interactions The integration between RenderDraw and Salesforce CPQ is powered by RenderDraw subscribing to CPQ's Lightning Messaging Service (LMS) messages and taking action based on the content. **Tasks:** 1. Within RenderDraw component on Product record, navigate to the "**Logic**" tab: 1. ```
``` 2. Click "**Add Interaction Event**" 1. ```
``` 3. Add "**Name**" for your event and select one of 3 event **Type** 1. **Note**: The naming convention should mirror CPQ "Features" and "Options" 2. The event types perform the following: 1. Focus: An event that highlights or maneuvers the scene to a specific area 2. Change: An event that performs various actions that change a node, mesh, texture, material within the 3D model 3. Focus Lost: An event that performs the inverse of Focus event 3. ```
``` 4. For event type **Focus**: 1. Create a new "**Action Item**" and optionally rename it 1. ```
``` 2. In the "**Steps**" section of the Action, click "**Add Step**" and select "Camera" tab, click "**Position and Aim Camera**", click "**Select**" 1. ```
``` 3. Click "**Set Visually**" and position camera to your desired location, click "**Get Camera Position & Aim**", and click "**Set Input Parameters"**: 1. ```
``` 2\. ```
``` 4. Click "**Save Changes**" 1. ```
``` 5. For event type **Focus Lost:** 1. No need to create any actions, just ensure your event matches the naming convention of the **Product Feature** 2. ```
``` 6. For event type **Change**: 1. Create a new "**Action Item"** and name it to match the naming convention of the **Product Option** you wish to target: 1. ```
``` 2. Under the **"Conditions"** section, create a condition, or multiple, that inform this action of what to look for to execute: 1. ```
``` 3. Under the **"Steps"** section, click **"Add Step"** to add the step(s) to take as a result of the condition(s) being met: 1. ```
``` 7. Click **"Save Changes"** 1. ```
``` # Salesforce Revenue Cloud Advanced (RCA) Setup External Configurator The integration between RenderDraw and Salesforce RCA is delivered via managed package and installed and used through the product configuration flow. **Prerequisites:** * RenderDraw main package **and** RCA add-on package are [installed](/introduction/getting-started-with-renderdraw/installation) and ready to use within product records * Salesforce RCA is installed, and configured for use (catalog, pricing, etc.) **Tasks:** * Add 2D/3D Visual Scene Setup component to Product layout * Extend the Product Configuration Flow, * Add RenderDraw for Revenue Cloud component to flow * Connect properties from data manager * Assign newly created Product configuration flow to products with visuals * Use the Visual Logic Generator button to generate the visual logic based on the Revenue Cloud data model * Step by step guide below: {% embed url="" %} # Setup Logic for Interactions The integration between RenderDraw and Salesforce RCA is powered by RenderDraw subscribing to RCA's messages and taking action based on the content. **Tasks:** 1. Within RenderDraw component on Product record, navigate to the "**Logic**" tab: 1. ```
``` 2. Click "**Add Interaction Event**" 1. ```
``` 3. Add "**Name**" for your event and select one of 3 event **Type** 1. **Note**: The naming convention should mirror RCA Product "Attributes" and/or "Options" 2. The event types perform the following: 1. Focus: An event that highlights or maneuvers the scene to a specific area 2. Change: An event that performs various actions that change a node, mesh, texture, material within the 3D model 3. Focus Lost: An event that performs the inverse of Focus event 3. ```
``` 4. For event type **Focus**: 1. Create a new "**Action Item**" and optionally rename it 1. ```
``` 2. In the "**Steps**" section of the Action, click "**Add Step**" and select "Camera" tab, click "**Position and Aim Camera**", click "**Select**" 1. ```
``` 3. Click "**Set Visually**" and position camera to your desired location, click "**Get Camera Position & Aim**", and click "**Set Input Parameters"**: 1. ```
``` 2\. ```
``` 4. Click "**Save Changes**" 1. ```
``` 5. For event type **Focus Lost:** 1. No need to create any actions, just ensure your event matches the naming convention of the **Product Attribute and/or Option** 2. ```
``` 6. For event type **Change**: 1. Create a new "**Action Item"** and name it to match the naming convention of the **Product Attribute and/or Option** you wish to target: 1. ```
``` 2. Under the **"Conditions"** section, create a condition, or multiple, that inform this action of what to look for to execute: 1. ```
``` 3. Under the **"Steps"** section, click **"Add Step"** to add the step(s) to take as a result of the condition(s) being met: 1. ```
``` 7. Click **"Save Changes"** 1. ```
``` # Revenue Cloud Addon - Administrator Guide This guide provides setup instructions and functionality documentation for administrators deploying the Revenue Cloud visual configuration components. ### Table of Contents 1. [Component Overview](https://file+.vscode-resource.vscode-cdn.net/Users/erikpilgrim/revenueCloudAddon/ADMIN_GUIDE.md#component-overview) 2. [Visual Logic Generator - Quick Action Setup](https://file+.vscode-resource.vscode-cdn.net/Users/erikpilgrim/revenueCloudAddon/ADMIN_GUIDE.md#visual-logic-generator) 3. [Revenue Cloud Configuration - Flow Integration](https://file+.vscode-resource.vscode-cdn.net/Users/erikpilgrim/revenueCloudAddon/ADMIN_GUIDE.md#revenue-cloud-configuration) 4. [Revenue Cloud Bulk Generator](https://file+.vscode-resource.vscode-cdn.net/Users/erikpilgrim/revenueCloudAddon/ADMIN_GUIDE.md#revenue-cloud-bulk-generator) 5. [Apex Helper Class](https://file+.vscode-resource.vscode-cdn.net/Users/erikpilgrim/revenueCloudAddon/ADMIN_GUIDE.md#apex-helper-class) *** ### Component Overview This package contains three Lightning Web Components designed to enhance Salesforce Revenue Cloud with visual 2D/3D product configuration capabilities: | Component | Type | Purpose | | -------------------------------- | ------------------------------ | --------------------------------------------------------------------- | | **Visual Logic Generator** | Quick Action | Generate visual logic for individual products with interactive scenes | | **Revenue Cloud Configuration** | Flow Screen / Custom Component | Real-time 2D/3D visualization during product configuration | | **Revenue Cloud Bulk Generator** | Standalone Tool | Batch generate visual logic for multiple products simultaneously | All components integrate with the **RDraw** namespace for rendering capabilities. *** ### Visual Logic Generator #### Purpose The Visual Logic Generator is a wizard-based tool that automates the creation of visual interaction logic for Product2 records. It generates change events for product attributes and product-related components, linking them to 2D or 3D scene interactions. #### Use Case Use this component when configuring individual products that require visual representation during the quote/order process. The component reads product attributes, picklist values, and product components, then generates interaction events that control visual scene behavior. #### Setup Instructions **Step 1: Add as Quick Action to Product2** 1. Navigate to **Setup → Object Manager → Product2** 2. Select **Buttons, Links, and Actions** 3. Click **New Action** 4. Configure the action: * **Action Type**: Lightning Component * **Lightning Component**: `c:visualLogicGenerator` * **Height**: 600 * **Label**: "Generate Visual Logic" * **Name**: `Generate_Visual_Logic` 5. Click **Save** **Step 2: Add Action to Product2 Page Layout** 1. Navigate to **Setup → Object Manager → Product2 → Page Layouts** 2. Select the page layout(s) where you want the action available 3. Click **Layout Properties → Quick Actions** 4. Drag the **Generate Visual Logic** action into the **Salesforce Mobile and Lightning Experience Actions** section 5. Click **Save** **Step 3: Verify Prerequisites** Ensure the following data exists: * Product must have a relationship to RDraw scene settings field (typically `RDraw__X3DSceneSettings__c` or `RDraw__2DSceneSettings__c`) * Product has attributes defined via: * Product Classification → Attribute Definitions * Direct Product Attribute Definitions * Product has Product Related Components configured (optional) #### How to Use 1. Navigate to a **Product2** record 2. Click the **Generate Visual Logic** quick action button 3. Follow the wizard steps: **Phase 1: Select Visual Scene Type** * Choose between **2D Scene** or **3D Scene** * This determines which scene settings field will be updated **Phase 2: Pick Options** * Select whether to generate logic for: * **Product Attributes** (includes picklist values) * **Product Related Components** (includes child products) * Configure options: * **Generate Both Conditions**: Creates both checked/unchecked states for components **Phase 3: Pick Values** * Review the list of available attributes and component groups * Check the boxes for items you want to include in generation * Use **Select All** / **Select None** for bulk selection * **Selected Count** shows your current selections **Phase 4: Generate Logic** * Review the generation plan showing: * Attributes to add * Picklist values to process * Component groups to add * Estimated time saved (10 min per attribute, 5 min per value, etc.) * Click **Next** to generate **Phase 5: Review** * Review generated interaction events and actions * View any collision warnings (existing interactions with same names) * Click **Save** to persist the scene settings to the product record * Click **Close** when complete #### Key Features * **Collision Detection**: Warns if interaction events already exist with the same name * **Picklist Integration**: Automatically fetches picklist values and creates actions for each * **Component Grouping**: Groups related product components by ProductComponentGroup * **Time Estimation**: Calculates estimated manual configuration time saved * **Notifications**: Real-time status updates during processing #### Field Mappings The component interacts with these Salesforce objects: * `Product2` - Source product record * `AttributeDefinition` - Product attributes * `AttributePicklistValue` - Picklist options * `ProductRelatedComponent` - Child product relationships * `ProductComponentGroup` - Component groupings *** ### Revenue Cloud Configuration #### Purpose The Revenue Cloud Configuration component provides real-time 2D/3D visualization within the Salesforce Revenue Cloud product configurator. As users select options, attributes, and components, the visual scene updates dynamically. #### Use Case Embed this component in: * Lightning Flows (Product Configuration screens) * Custom configurator pages * Quote Line Editor customizations It displays a visual representation that updates based on: * Attribute field changes * Product component selections * Transaction item updates #### Setup Instructions **Option 1: Add to Lightning Flow (Recommended)** 1. Navigate to **Setup → Flows** 2. Open or create a Product Configuration flow 3. Add a **Screen** element where you want visualization 4. Add a **Lightning Web Component** to the screen: * Component: RDrawConfig`:revenueCloudConfiguration` 5. Configure the component properties: | Property | Type | Description | Example | | ----------------------- | --------------- | -------------------------------------- | -------------------------------------------------- | | `configuratorContext` | Apex Object | Product configurator context from flow | `{!ConfiguratorContext}` | | `salesTransactionItems` | Apex Collection | Current quote line items | `{!SalesTransactionItems}` | | `optionGroups` | Apex Collection | Available option groups | `{!OptionGroups}` | | `renderContext` | String | Rendering mode | `"3D"` or `"2D"` | | `visualUpdateType` | String | Update trigger type | `"both"`, `"inputChange"`, or `"transactionItems"` | | `size` | String | Component size | `"Medium"`, `"Large"`, `"Jumbo"` | | `allowPinning` | Boolean | Enable pin to viewport | `true` or `false` | | `overrideRecordId` | String | Optional Product2 ID override | Product2 record ID | 6. Wire the configurator context variables to the component inputs 7. Save and activate the flow **Option 2: Add to Custom Lightning Page** 1. Navigate to the **Lightning App Builder** 2. Open the Product Configuration page or create a custom page 3. Drag the **revenueCloudConfiguration** component onto the page 4. Configure the component properties in the right panel 5. Set up visibility rules if needed 6. Save and activate the page #### Component Properties Explained **`configuratorContext`** * Receives the product configuration session context * Contains current product, transaction line ID, and configuration state * Automatically populated by Revenue Cloud flows **`salesTransactionItems`** * Array of transaction line items (quote lines) * Component watches for changes and updates visualization accordingly * Includes attributes, components, quantities, and selections **`renderContext`** * `"3D"` - Displays 3D canvas renderer * `"2D"` - Displays 2D canvas renderer **`visualUpdateType`** * `"both"` - Updates on both input changes AND transaction item changes (default) * `"inputChange"` - Only updates when attribute/component fields change manually * `"transactionItems"` - Only updates when transaction items array changes **`allowPinning`** * When `true`, displays a pin icon that fixes the canvas to the viewport * Useful for keeping visualization visible while scrolling through options #### How It Works **Interaction Flow** 1. **Initialization** * Component loads change detection * Subscribes to Message channels * Fetches Product from configuratorContext or quote line item 2. **Change Detection** * Monitors `salesTransactionItems` for changes * Detects additions, deletions, and edits to transaction items * Processes changes sequentially with 100ms delay between updates 3. **Visual Updates** * Retrieves attribute definitions and picklist values * Maps attribute/component IDs to interaction event names * Raises interaction events on the canvas (2D or 3D) * Canvas renderer applies visual logic (show/hide, transform, etc.) **Message Channel Integration** The component subscribes to Standard Revenue Cloud notification channel When attribute values or component selections change: 1. Notification is published to message channel 2. Component receives notification 3. Component calls `updateVisualLogicForAttribute()` or `updateVisualLogicForProductRelatedComponent()` 4. Canvas interaction event is raised 5. Visual scene updates based on scene settings #### Advanced Configuration **Custom Interaction Events** Scene settings (stored in `RDraw__X3DSceneSettings__c` or `RDraw__2DSceneSettings__c`) define interaction events: ```json { "interactions": [ { "id": "unique-id", "name": "Color", "type": "change", "actions": [ { "name": "Red Selected", "condition": { "and": [ { "resource": "value", "operator": "==", "value": "Red" } ] }, "steps": [ { "method": "setColor", "objectId": "body", "color": "#FF0000" } ] } ] } ] } ``` The component raises events using: ```javascript canvas.raiseInteractionEvent( "Color", // Event name "change", // Action type "Color", // Field name "Red", // Field value [] // Key-value pairs ); ``` **Pinning Behavior** When pinned: * Component fixes to viewport at 58% left, 18% top * Maintains position during page scroll * Useful for long configuration forms #### Troubleshooting **Canvas doesn't update:** * Verify `visualUpdateType` is set correctly * Check that Product2Id is resolved from configuratorContext * Ensure scene settings exist on the product record * Check browser console for error messages **Attribute changes don't reflect:** * Verify attribute exists on the product * Check that picklist values are correctly mapped * Ensure interaction event names match attribute names in scene settings **Performance issues:** * Reduce transaction item processing frequency * Use `visualUpdateType="transactionItems"` to disable input change monitoring * Check for large scene settings with many interactions *** ### Revenue Cloud Bulk Generator #### Purpose The Revenue Cloud Bulk Generator is a standalone tool for generating visual logic across multiple products simultaneously. It's optimized for bulk operations on 100-1000+ products. #### Use Case Use this tool when: * Deploying visual configuration to an existing product catalog * Standardizing visual logic across product families * Migrating products to visual configuration * Applying common interaction patterns to multiple products #### Setup Instructions **Add as Utility Bar Component (Recommended)** 1. Navigate to **Setup → App Manager** 2. Select your Lightning app (e.g., "Sales Console") 3. Click **Utility Items (Desktop)** 4. Click **Add Utility Item** 5. Configure: * **Utility Item**: Lightning Component * **Lightning Component API Name**: `RDrawConfig:revenueCloudBulkGenerator` * **Label**: "Bulk Visual Logic" * **Icon**: `task` * **Panel Width**: 600 * **Panel Height**: 600 6. Click **Save** **Add to Custom Tab (Alternative)** 1. Navigate to **Setup → Tabs** 2. Click **New** under Lightning Component Tabs 3. Configure: * **Lightning Component**: RDrawConfig`:revenueCloudBulkGenerator` * **Tab Label**: "Bulk Visual Logic Generator" * **Tab Name**: `Bulk_Visual_Logic_Generator` * **Tab Style**: Select an icon 4. Click **Save** 5. Add the tab to relevant apps #### How to Use **Phase 1: Select Products** 1. **Load Products**: Component automatically loads up to 2000 active products 2. **Search**: Filter by product name or code 3. **Filter by Classification**: Select a specific product classification 4. **Select Products**: * Check individual product checkboxes * Use **Select All** to select all filtered products * **Selected Count** shows total selections **Tips:** * Use classification filter to process product families together * Search for specific product codes to target subsets * Select 10-50 products initially to test your configuration **Phase 2: Configure Attributes & Components** The component analyzes selected products to identify common elements. **Common Attributes Tab** * Shows attributes present in >50% of selected products * Select attributes to include in generation * Use **Select All** / **Deselect All** for bulk selection * Each attribute shows: * Label and description * Developer name * Occurrence count across products **Common Components Tab** * Shows component groups present in >50% of selected products * Select component groups to include * Component groups represent ProductComponentGroup records * Each group may contain multiple child products **Product-Specific Configuration Tab** * Shows products with unique attributes not found in others * These attributes are automatically included * Informational only - no action required **Analysis Logic:** * Threshold: 50% occurrence (e.g., if 10 products selected, attribute must appear in 5+) * Product-specific attributes below threshold are auto-included per product * Component groups are matched by `ProductComponentGroup.Name` **Phase 3: Select Default Actions** Configure renderer method templates to apply to all generated interactions. 1. Click **Add Renderer Method Template** 2. Select methods from the modal: * Camera movements * Object transformations * Color changes * Visibility toggles * Custom renderer methods 3. Methods are added as steps to every action in every interaction 4. Remove methods by clicking the delete icon **Example:** If you add a "Rotate Camera" method: * Every attribute value change will trigger camera rotation * Every component selection will trigger camera rotation * Useful for standardized visual feedback **Phase 4: Review & Generate** **Generation Summary** * Products: Total count of products to process * Common Attributes: Count of attributes per product * Common Component Groups: Count of component groups per product * Renderer Methods: Count of methods per action * Estimated Time: Calculation based on 5 sec/product + 2 sec/attribute + 2 sec/component **Generation Process** 1. Click **Start Generation** 2. Monitor progress bar and status 3. View current product being processed 4. Process continues until all products complete **Progress Indicators:** * **Progress Bar**: Overall completion percentage * **Product Index**: "Processing product X of Y" * **Product Name**: Current product being processed * **Status Message**: Current operation **Completion Summary:** * **Successfully Generated**: Count of products updated * **Failed**: Count of products with errors * **Failed Products List**: Product names and error messages #### Generation Details For each product, the component: 1. **Loads Scene Settings** * Retrieves existing scene settings from product record * Creates default structure if none exists 2. **Checks for Collisions** * Identifies existing interactions with matching names * Skips generation for collisions to prevent overwriting 3. **Generates Attribute Interactions** * Creates change event for each selected attribute * Fetches picklist values if attribute has a picklist * Creates action item for each picklist value with condition 4. **Generates Component Interactions** * Creates change event for each selected component group * Creates checked/unchecked actions for each child product * Sets label and value conditions 5. **Applies Renderer Methods** * Adds selected renderer method steps to each action * Methods execute in order when action condition is met 6. **Saves Scene Settings** * Serializes scene settings to JSON * Updates product record field via `updateSceneSetup` Apex method #### Data Caching The component caches data to improve performance: * **Product Attribute Cache**: Stores attributes per Product2Id * **Product Component Cache**: Stores components per Product2Id * **Picklist Value Cache**: Stores picklist values per PicklistId Caching reduces redundant Apex calls during bulk processing. #### Error Handling Common errors and solutions: | Error | Cause | Solution | | ------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------- | | "Could not load scene settings" | Product missing RDraw field relationship | Verify product has scene settings field configured | | "Could not get render context" | RDraw renderer context not configured | Check RDraw\_\_RenderContext\_\_c metadata | | "Insufficient permissions" | User lacks FLS/CRUD on objects | Grant read access to Product2, AttributeDefinition, ProductRelatedComponent | | "No attributes found" | Product has no attributes | Add attributes via classification or direct assignment | #### Performance Considerations **Batch Size Recommendations:** * **10-50 products**: Interactive testing and configuration refinement * **50-200 products**: Small-scale deployments * **200-1000 products**: Large-scale rollouts (monitor governor limits) * **1000+ products**: Consider breaking into multiple sessions **Governor Limits:** * Component runs in user context (not async) * Stay under Apex CPU time limits (\~10 seconds per transaction) * 100ms delay between products prevents overwhelming the platform * Total runtime: \~0.5-2 seconds per product **Optimization Tips:** * Process products with similar classifications together * Pre-load picklist values by running picklist queries before bulk processing * Run during off-peak hours for large batches * Monitor debug logs for performance bottlenecks *** ### Apex Helper Class #### UTIL\_ConfigHelper Located at: `force-app/main/default/classes/UTIL_ConfigHelper.cls` This Apex class provides utility methods for retrieving product configuration data. **Key Methods** **`getProductAttributesForProduct(String product2Id)`** * Returns all active attributes for a product * Includes attributes from product classification and direct product attributes * Cacheable for Lightning components * Returns: `List` **`getPicklistValuesForPicklistIds(List picklistIds)`** * Batch retrieves picklist values for multiple picklists * Used by bulk generator for performance * Returns: `List` **`getPicklistValuesForPicklistId(String Id)`** * Retrieves picklist values for a single picklist * Returns: `List` **`getProductRelatedComponentsFromProduct(String productId)`** * Returns all product components for a parent product * Includes child product details and component groups * Returns: `List` **`getChildProductForRelatedComponentId(String Id)`** * Retrieves child product details for a component relationship * Returns: `Product2` **`getProduct2IdFromQuoteLineItem(String quoteLineItemId)`** * Extracts Product2Id from a QuoteLineItem * Used by revenueCloudConfiguration component * Returns: `String` (Product2Id) **`getProductsForBulkGeneration(Integer limitRecords, String searchTerm, String classificationId)`** * Queries active products for bulk operations * Supports filtering by search term and classification * Maximum 2000 records * Cacheable * Returns: `List` **Security Features** All methods include: * **CRUD Checks**: Validates object accessibility * **FLS Checks**: Validates field-level security * **USER\_MODE Queries**: Enforces record-level security * **Input Validation**: Prevents null/invalid parameters * **Error Handling**: Returns AuraHandledException with clear messages **Test Coverage** The class includes comprehensive test support: * `@TestVisible` annotations on helper methods * Test-specific query logic * Mock data handling * Security permission testing *** ### Best Practices #### General Guidelines 1. **Start Small**: Test on 5-10 products before bulk operations 2. **Backup Scene Settings**: Export existing scene settings before regenerating 3. **Use Classifications**: Organize products by classification for consistent configuration 4. **Document Naming Conventions**: Use consistent names for interaction events and actions 5. **Monitor Performance**: Watch for governor limit warnings in large operations #### Naming Conventions **Interaction Event Names:** * Use attribute DisplayName or DeveloperName * Use component group name for component interactions * Examples: "Color", "Size", "Wheels", "Accessories" **Action Item Names:** * Descriptive names for conditions * Examples: "Red Selected", "Large Size", "Sport Package Added" **Renderer Method Names:** * Match method names in RDraw renderer * Examples: "setColor", "toggleVisibility", "rotateObject", "moveCamera" #### Security Considerations 1. **User Permissions**: Ensure users have: * Read on Product2, AttributeDefinition, ProductRelatedComponent * Edit on Product2 (for updating scene settings) * Access to RDraw custom objects 2. **Sharing Rules**: Verify product records are visible to configuration users 3. **Field-Level Security**: Grant access to: * `RDraw__X3DSceneSettings__c` * `RDraw__2DSceneSettings__c` * Product2 custom fields referenced in configurations #### Maintenance **Regular Tasks:** * Review and clean up unused interaction events * Update renderer methods when RDraw versions change * Refresh bulk generation when new products are added * Monitor error logs for configuration issues **Version Control:** * Track scene settings in source control as custom metadata * Document renderer method libraries * Maintain changelog for configuration updates *** ### Troubleshooting #### Common Issues **Quick Action doesn't appear:** * Verify action is added to page layout * Check user profile has access to Lightning Components * Ensure RDraw namespace is installed **Flow component shows blank canvas:** * Verify configuratorContext is wired correctly * Check that Product2Id is resolved * Ensure scene settings exist on product * Verify user has read access to scene settings field **Bulk generation fails:** * Check for governor limit exceptions in debug logs * Reduce batch size * Verify all products have required field relationships * Ensure user has edit permissions on Product2 **Visual updates don't trigger:** * Verify interaction event names match scene settings * Check attribute/component names match exactly * Review console logs for change detection * Ensure canvas is fully loaded before changes #### Debug Tips 1. **Enable Debug Mode**: Set `debug = true` in visualLogicGenerator 2. **Monitor Console**: Check browser console for detailed logs 3. **Review Notifications**: Watch component notification messages 4. **Check Apex Logs**: Review Apex logs for server-side errors 5. **Validate Scene Settings**: Export and validate JSON structure *** ### Support For issues, questions, or feature requests: 1. Check debug logs and browser console 2. Verify all prerequisites and permissions 3. Test with simplified configuration 4. Contact your Salesforce administrator or implementation partner *** ### Appendix #### Required Salesforce Objects * Product2 * AttributeDefinition * AttributePicklistValue * ProductRelatedComponent * ProductComponentGroup * ProductClassificationAttr * QuoteLineItem (for flow integration) #### Required RDraw Objects (Namespace: RDraw) * RDraw\_\_RenderContext\_\_c * RDraw\_\_X3DSceneSettings\_\_c * RDraw\_\_2DSceneSettings\_\_c * RDraw\_\_RendererMethodTemplate\_\_c #### Required Permissions **Object Permissions:** * Read: All listed objects above * Edit: Product2 (for scene settings updates) **System Permissions:** * View Setup and Configuration (for admins) * Customize Application (for admins) #### Change Log | Version | Date | Changes | | ------- | ---- | --------------- | | 1.0 | 2024 | Initial release | *** # Conga CPQ # Custom Configuration Scenarios # 3D Product Photography # RenderDraw Templates for Product Personalization There are many use cases for which an end user would like to add specific text or imagery to products within Salesforce. This provides a repeatable use-case for having end-users provide information that can be saved as an image or applied as a dynamic decal. Follow the steps on the following pages to setup templates and apply them via decals. # Create a Design Template Create a Design Template by following these steps: ***Please Note: The names and inputs used in the steps are for example purposes only.*** {% embed url="" %} # Add Decal Region to 3D Model {% embed url="" %} # Add Custom Fonts to Templates 1. Navigate to **Setup** -> **Static Resources** 1. ```
``` 2. Click "**New**" 1. ```
``` 3. Add a Name with the suffix **\_Font at the end of the name** 4. Upload font file 5. Click Save 1. ```
``` # Setup 3D Scene # Visual Scene Setup Setting up a visual takes more than just putting a component on the screen. We want to create an environment where the user is immersed while showing off products or visuals to the fullest extent. To do this within Salesforce, an Admin needs to be able to set up and control every aspect of the visual itself, including what to do when a user clicks on an element, what to do when a scene is loaded, or what custom logic should fire when you interact with a scene or our components. There are five main categories of Visual Scenes: * Actions - Want to change something about the camera, scene, or model * Interaction Events - Need to visualize a configuration? Need to isolate elements when an asset is selected? Interaction Events represent any dynamic interaction. * Grouping - Sometimes the components on a 3D model are not grouped within the assembly or model itself. When you need to do things like showing or hiding several elements at the same time, a group makes a lot of sense. * Labeling - Need users to understand what they are looking at at a glance? Adding custom labels is easy using our labeling tab. Simply select elements in the scene, update the label, and the next time the scene loads within Salesforce, BAM labels * Attributes (Look & Feel) - Want to change the scene's color? Set a background image? Add in a brand logo? This is the category of elements that will allow you to do so. Set once and forget it- these elements typically don't change after the initial setup # Interaction Events --- [Next Page](https://docs.renderdraw.us/llms-full.txt/1)