> 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/add-a-datasource-to-a-2d-scene-to-bind-data.md).

# Add a DataSource to a 2D scene to bind data

{% embed url="<https://app.tango.us/app/workflow/Enable-a-DataSource-for-your-2D-Scene-98de4a7e93bb4bafa19ff6014a4ea853>" %}

## [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

***