> For the complete documentation index, see [llms.txt](https://docs.renderdraw.us/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.renderdraw.us/usage-scenarios/use-cases/2d/2d-admin-guide-clicks-not-code/change-your-layout-drawing-visuals-based-on-salesforce-data-in-a-datasource-query.md). # 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)