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

---

​

1. From your 2D scene, Click on Environment Options

2. Click on Menu Options

3. Check Show Data Source Menu. This allows us to edit the Data Source query.

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)

5. Click on Update

6. Now we see a new menu item. Click on Data Source

7. Click on Edit Data Source for this Record

8. Here's where we get the Salesforce records to act on. Let's choose an object. Click on Select an Option

9. Today we'll use Product

10. Now we select fields. For this case, we just need to check for active products which will be done in the filters section.

11. Click on Product Name so we can see which products are active.

12. Click on Move selection to the selected field

13. Now let's add our conditions to pull records back. Remember we only want active products for this example. Click on Add Condition

14. Select a resource (field) from the query

15. Click on Active

16. Select your operator, in this case we want active products, so Click on Equals

17. Check Value… True

18. Click on Verify Query to see the results.

19. The results appear in a datatable to the right. Looks Good!

20. Click on Update to go back

21. Now let's do something with this. Remember DataSource queries are run when the component(s) are loaded. Click on Layout

22. Click on Areas

23. Click on Show menu

24. Click on Related Actions

25. Click on DataSource Actions

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

27. To Add an option, click the plus

28. For this example, let's change the color

29. We pick a color

30. Click on Done

31. Now let's add a color if the product is not active in the query results. Click on Elements Not In Results

32. Click on Show menu

33. Click on Change Color

34. Choose the color

35. Click on Done to apply.

36. Click on Save to push the changes to the component.

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.