---
keyword: [Extend, Presentation Components, UI components]
nav: wcp_docs
parent_url: /wcp_docs/
title: >-
Reference: valueOutBinding Samples
layout: subsection
---
The `valueOutBinding` attribute enables you to bind tag values to outbound fields in the JSON request body that the page submits to an outbound endpoint. In general, bind the tag value to an outbound field using this string format in the `valueOutBinding` attribute:
```
outboundEndpointName.fieldPath
```
The `fieldPath` specifies the field in the JSON request body. Specifying the `fieldPath` can be tricky if the JSON request body contains lists and multiple field levels. This reference provides sample tags with `valueOutBinding` values and their corresponding outbound data.
## Sample Tags with valueOutBinding and Outbound Data
- 2 `text` tags with different child fields in `valueOutBinding`:
```
{
"type": "text",
"value": "Lorem",
"valueOutBinding": "outboundEndPoint.data.field1"
},
{
"type": "text",
"value": "Ipsum",
"valueOutBinding": "outboundEndPoint.data.field2"
}
```
Outbound data:
```
{
"data":{
"field1":"Lorem",
"field2":"Ipsum"}
}
```
- 2 `text` tags with different parent fields in `valueOutBinding`:
```
{
"type": "text",
"value": "Lorem",
"valueOutBinding": "outboundEndpointName.data"
},
{
"type": "text",
"value": "Ipsum",
"valueOutBinding": "outboundEndpointName.alsoData"
}
```
Outbound data:
```
{"data":"Lorem",
"alsoData":"Ipsum"}
```
- 2 `text` tags with the same `valueOutBinding`:
```
{
"type": "text",
"value": "Lorem",
"valueOutBinding": "outboundEndPoint.data"
},
{
"type": "text",
"value": "Ipsum",
"valueOutBinding": "outboundEndPoint.data"
}
```
The outbound data only includes the value from the second tag because the `valueOutBinding` with the second value overrides the first:
```
{"data":"Ipsum"}
```
- Assume that the user selected all values on this `instanceList` that sends all values to `data`:
```
{
"type": "instanceList",
"multiSelect": "true",
"instanceList": [
{"id": "1", "descriptor": "Lorem"},
{"id": "2", "descriptor": "Ipsum"},
{"id": "3", "descriptor": "Dolor"}
],
"valueOutBinding": "outboundEndpointName.data"
}
```
Outbound data:
```
{
"data":
["Lorem",
"Ipsum",
"Dolor"]
}
```
- Assume that the user selected all values on this `instanceList` that sends all values to `data[]`:
```
{
"type": "instanceList",
"multiSelect": "true",
"instanceList": [
{"id": "1", "descriptor": "Lorem"},
{"id": "2", "descriptor": "Ipsum"},
{"id": "3", "descriptor": "Dolor"}
],
"valueOutBinding": "outboundEndpointName.data[]"
}
```
Outbound data:
```
{
"data[0]":"Lorem",
"data[1]":"Ipsum",
"data[2]":"Dolor"
}
```
- Assume that the user selected all values on this `instanceList` that sends all values to `data[].field`:
```
{
"type": "instanceList",
"multiSelect": "true",
"instanceList": [
{"id": "1", "descriptor": "Lorem"},
{"id": "2", "descriptor": "Ipsum"},
{"id": "3", "descriptor": "Dolor"}
],
"valueOutBinding": "outboundEndpointName.data[].field"
}
```
Outbound data:
```
{
"data":[
{"field":"Lorem"},
{"field":"Ipsum"},
{"field":"Dolor"}]
}
```
- Assume that the user selected all values on this `instanceList` that sends all values to `data[].field.subField`:
```
{
"type": "instanceList",
"multiSelect": "true",
"instanceList": [
{"id": "1", "descriptor": "Lorem"},
{"id": "2", "descriptor": "Ipsum"},
{"id": "3", "descriptor": "Dolor"}
],
"valueOutBinding": "outboundEndpointName.data[].field.subField"
}
```
Outbound data:
```
{
"data":[
{"field":
{"subField":"Lorem"}},
{"field":
{"subField":"Ipsum"}},
{"field":
{"subField":"Dolor"}}
]
}
```
- Assume that the user selected all values on both `instanceList` tags that send all values to separate fields in `data[]`:
```
{
"type": "instanceList",
"multiSelect": "true",
"instanceList": [
{"id": "1", "descriptor": "Lorem"},
{"id": "2", "descriptor": "Ipsum"},
{"id": "3", "descriptor": "Dolor"}
],
"valueOutBinding": "outboundEndpointName1.data[].LoremIpsum"
},
{
"type": "instanceList",
"multiSelect": "true",
"instanceList": [
{"id": "1", "descriptor": "I"},
{"id": "5", "descriptor": "V"},
{"id": "10", "descriptor": "X"}
],
"valueOutBinding": "outboundEndpointName1.data[].Numerals"
}
```
Outbound data:
```
{
"data":[
{"LoremIpsum":"Lorem",
"Numerals":"I"},
{"LoremIpsum":"Ipsum",
"Numerals":"V"},
{"LoremIpsum":"Dolor",
"Numerals":"X"}
]
}
```
- A `grid` that sends all values to `data[]`:
Note that `isArrayOutBinding` is false, by default.
```
{
"type": "grid",
"rowVariableName": "rowData",
"rows": "<% gridData.data %>",
"columns": [
{
"type": "column",
"columnId": "col0",
"cellTemplate": {
"type": "text",
"value": "<% rowData.row[0].value %>",
"valueOutBinding":
"outboundEndpointName.data[].column1"
}
},
{
"type": "column",
"columnId": "col1",
"cellTemplate": {
"type": "text",
"value": "<% rowData.row[1].value %>",
"valueOutBinding":
"outboundEndpointName.data[].column2"
}
}
]
}
```
Assume that the grid contains these values:
```
column1 column2
01 11
02 12
```
Outbound data for the first row:
```
{
"data":[
{"column1":"01", "column2":"11"}
]
}
```
Outbound data for the second row:
```
{
"data":[
{"column1":"02", "column2":"12"}
]
}
```
- A `grid` that sends all these values to `data[]`:
Note that `isArrayOutBinding` is true.
```
{
"type": "grid",
"rowVariableName": "rowData",
"isArrayOutBinding": "true",
"rows": "<% gridData.data %>",
"columns": [
{
"type": "column",
"columnId": "col0",
"cellTemplate": {
"type": "text",
"value": "<% rowData.col0.value %>",
"valueOutBinding":
"outboundEndpointName.data[].column1"
}
},
{
"type": "column",
"columnId": "col1",
"cellTemplate": {
"type": "text",
"value": "<% rowData.col1.value %>",
"valueOutBinding":
"outboundEndpointName.data[].column2"
}
}
]
}
```
Assume that the grid contains these values:
```
column1 column2
01 11
02 12
```
Outbound data:
```
{
"data":[
{"column1":"01", "column2":"11"},
{"column1":"02","column2":"12"}
]
}
```
- A `grid` that sends the selected row to `data[]`:
Note that `isArrayOutBinding` is false.
```
{
"type": "grid",
"rowVariableName": "rowData",
"rows": "<% gridData.data %>",
"selectionEnabled": "true",
"maxRowSelection": 1,
"currentRowVariable": "currentRow",
"columns": [
{
"type": "column",
"columnId": "col0",
"cellTemplate": {
"type": "text",
"value": "<% rowData.row[0].value %>"
}
}
]
}
```
The `onSend` event handler in this sample outbound endpoint references the currentRow variable. The `onSend` event handler sends the current row data if the current row is selected:
```
{
"baseUrlType": "testServer",
"authType": "noauth",
"name": "updateSkills",
"url": "/post",
"onSend": "<%
if (currentRow.selected) {
self.data.column0 = currentRow.childrenMap.col0.value;
}
self.data
%>"
}
```
Assume that the grid contains these values, and that the user selected the first row:
```
column0
01
02
```
Outbound data:
```
{
"data":[
{"column0":"01"}
]
}
```
### Related Information
[Concept: Submitting Data](/wcp_docs/rmd1572291186381.html)