# 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

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET 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?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.