Configure a Data Source for your Page
Essential knowledge
Changed on:
23 Sept 2024
Overview
In order to show data in the Storage Areas List, we need to configure a data source.Components on a page can reference a data source from a query defined on the Page Component.First, we'll configure a page query, to retrieve the currently active Location's associated Storage Areas.The`data` object on the Page Route takes a `query` and a `variables` object for defining a GraphQL Query.`"data": {``"query": "query locationStorageAreas ($locationRef: String!) { location (ref: $locationRef) { id ref storageAreas { edges { node { id name status type } } } } }",``"variables": {``"locationRef": "{{activeLocation.ref}}"``}``}`You'll notice the use of a special variable called `{{activeLocation.ref}}` above. Since this Web App Context is "location", you can access the currently active context using the `activeLocation` object. This provides access to the Location Id, Ref, and Primary Address.Once the Page query is defined, go to the Component configuration, and add a `dataSource` field. The `dataSource` for the list should be set to the `storageAreas` connection on the `location` query path: `location.storageAreas` `"dataSource": "location.storageAreas"`With the data source configured, all that's left is to update the fields to be displayed in the list with dynamic values. We'll display the Name, Type, and Status from the Storage Area.This is done by specifying the field of each node in the Storage Areas connection: `{{node.name}}` `"attributes": [``{``"label": "Name",``"value": "{{node.name}}"``},``{``"label": "Type",``"value": "{{node.type}}"``},``{``"label": "Status",``"value": "{{node.status}}"``}``]`See this in action in the video below...Note: This video does not have audio.