Is it not possible to get a parent field in a datatable column specification, for a Lightning Web Component? The Next CEO of Stack Overflow2019 Community Moderator ElectionRetrieve shared data extension column names with SSJS marketing cloudGet the values of checkboxes (in a lightning component)Lightning Component works on Sandbox but not on ProductionWhy Lightning Web ComponentNot able to render dynamic Lightning Web ComponentSalesforce Lightning Web ComponentLightning Web Component for table rows and cellsLightning web component object referenceUnable to set component outside of FileReader().onloadSyntax to dynamically set nested property?
How to get regions to plot as graphics
Anatomically Correct Strange Women In Ponds Distributing Swords
Customer Requests (Sometimes) Drive Me Bonkers!
Anatomically Correct Mesopelagic Aves
Was a professor correct to chastise me for writing "Prof. X" rather than "Professor X"?
Should I tutor a student who I know has cheated on their homework?
Is it safe to use c_str() on a temporary string?
When airplanes disconnect from a tanker during air to air refueling, why do they bank so sharply to the right?
What is meant by a M next to a roman numeral?
Increase performance creating Mandelbrot set in python
How do I construct this japanese bowl?
Is it okay to store user locations?
How do spells that require an ability check vs. the caster's spell save DC work?
Why do professional authors make "consistency" mistakes? And how to avoid them?
How to safely derail a train during transit?
What is the purpose of the Evocation wizard's Potent Cantrip feature?
If the heap is initialized for security, then why is the stack uninitialized?
Term for the "extreme-extension" version of a straw man fallacy?
What does this shorthand mean?
Why here is plural "We went to the movies last night."
How do I get the green key off the shelf in the Dobby level of Lego Harry Potter 2?
Does the Brexit deal have to be agreed by both Houses?
Horror movie/show or scene where a horse creature opens its mouth really wide and devours a man in a stables
Why does C# sound extremely flat when saxophone is tuned to G?
Is it not possible to get a parent field in a datatable column specification, for a Lightning Web Component?
The Next CEO of Stack Overflow2019 Community Moderator ElectionRetrieve shared data extension column names with SSJS marketing cloudGet the values of checkboxes (in a lightning component)Lightning Component works on Sandbox but not on ProductionWhy Lightning Web ComponentNot able to render dynamic Lightning Web ComponentSalesforce Lightning Web ComponentLightning Web Component for table rows and cellsLightning web component object referenceUnable to set component outside of FileReader().onloadSyntax to dynamically set nested property?
Working with a prototype of a lightning web component, I get that the datatable, just like its Aura brother, needs the columns to be manually specified.
That being said, I have the following specification for a datatable that receives pricebook entries:
const columns = [
label: 'Name', fieldName: 'Product2.Name'
]
The names do not display on the component, but if I use a forEach
to list the data retrieved by the component, I get the products names, like in:
connectedCallback()
getProducts( pricebookId: this.pricebookId, countLimit: 4 )
.then(result =>
this.products = result
this.products.forEach(p =>
console.log(p.Product2) // Proxy object is displayed
console.log(p.Product2.Name) // The name is displayed
);
this.tableIsLoading = false
)
.catch(error =>
console.error(error)
)
If the datatable component does not support this, then the correct way of dealing with this is to work with the retrieved data, and build a new list with direct access to the data (no parent-child objects), or to edit the current data and include fields that I can access?
For example, should I iterate the result
data and add a productName
attribute to the elements, and then set 'productName'
as the attribute on the column
variable?
Edit: just noticed that you can't iterate the data list and create a new productName
property. You end up with a TypeError: 'set' on proxy: trap returned falsish for property 'productName'
.
javascript lightning-web-components
add a comment |
Working with a prototype of a lightning web component, I get that the datatable, just like its Aura brother, needs the columns to be manually specified.
That being said, I have the following specification for a datatable that receives pricebook entries:
const columns = [
label: 'Name', fieldName: 'Product2.Name'
]
The names do not display on the component, but if I use a forEach
to list the data retrieved by the component, I get the products names, like in:
connectedCallback()
getProducts( pricebookId: this.pricebookId, countLimit: 4 )
.then(result =>
this.products = result
this.products.forEach(p =>
console.log(p.Product2) // Proxy object is displayed
console.log(p.Product2.Name) // The name is displayed
);
this.tableIsLoading = false
)
.catch(error =>
console.error(error)
)
If the datatable component does not support this, then the correct way of dealing with this is to work with the retrieved data, and build a new list with direct access to the data (no parent-child objects), or to edit the current data and include fields that I can access?
For example, should I iterate the result
data and add a productName
attribute to the elements, and then set 'productName'
as the attribute on the column
variable?
Edit: just noticed that you can't iterate the data list and create a new productName
property. You end up with a TypeError: 'set' on proxy: trap returned falsish for property 'productName'
.
javascript lightning-web-components
add a comment |
Working with a prototype of a lightning web component, I get that the datatable, just like its Aura brother, needs the columns to be manually specified.
That being said, I have the following specification for a datatable that receives pricebook entries:
const columns = [
label: 'Name', fieldName: 'Product2.Name'
]
The names do not display on the component, but if I use a forEach
to list the data retrieved by the component, I get the products names, like in:
connectedCallback()
getProducts( pricebookId: this.pricebookId, countLimit: 4 )
.then(result =>
this.products = result
this.products.forEach(p =>
console.log(p.Product2) // Proxy object is displayed
console.log(p.Product2.Name) // The name is displayed
);
this.tableIsLoading = false
)
.catch(error =>
console.error(error)
)
If the datatable component does not support this, then the correct way of dealing with this is to work with the retrieved data, and build a new list with direct access to the data (no parent-child objects), or to edit the current data and include fields that I can access?
For example, should I iterate the result
data and add a productName
attribute to the elements, and then set 'productName'
as the attribute on the column
variable?
Edit: just noticed that you can't iterate the data list and create a new productName
property. You end up with a TypeError: 'set' on proxy: trap returned falsish for property 'productName'
.
javascript lightning-web-components
Working with a prototype of a lightning web component, I get that the datatable, just like its Aura brother, needs the columns to be manually specified.
That being said, I have the following specification for a datatable that receives pricebook entries:
const columns = [
label: 'Name', fieldName: 'Product2.Name'
]
The names do not display on the component, but if I use a forEach
to list the data retrieved by the component, I get the products names, like in:
connectedCallback()
getProducts( pricebookId: this.pricebookId, countLimit: 4 )
.then(result =>
this.products = result
this.products.forEach(p =>
console.log(p.Product2) // Proxy object is displayed
console.log(p.Product2.Name) // The name is displayed
);
this.tableIsLoading = false
)
.catch(error =>
console.error(error)
)
If the datatable component does not support this, then the correct way of dealing with this is to work with the retrieved data, and build a new list with direct access to the data (no parent-child objects), or to edit the current data and include fields that I can access?
For example, should I iterate the result
data and add a productName
attribute to the elements, and then set 'productName'
as the attribute on the column
variable?
Edit: just noticed that you can't iterate the data list and create a new productName
property. You end up with a TypeError: 'set' on proxy: trap returned falsish for property 'productName'
.
javascript lightning-web-components
javascript lightning-web-components
edited 2 days ago
Renato Oliveira
asked 2 days ago
Renato OliveiraRenato Oliveira
5,02211955
5,02211955
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The lightning:datatable assumes that the field name is not an object, but you can have a period in a field name.
Consider this data:
[ 'Product.Name': 'Hello' , 'Product': 'Name': 'World' }]
If you had data like this, the output in lightning:datatable would be "Hello", not "World".
Here's a copy-paste example for you:
<aura:application extends="force:slds">
<!-- attributes -->
<aura:attribute name="data" type="List" default="['Product.Name':'Hello', 'Product':'Name':'World','id':'5']"/>
<aura:attribute name="columns" type="List" default="[ 'label':'Product Name','fieldName':'Product.Name']" />
<!-- the container element determine the height of the datatable -->
<div style="height: 300px">
<lightning:datatable
keyField="id"
data="! v.data "
columns="! v.columns "
hideCheckboxColumn="true"/>
</div>
</aura:application>
This is true for both the Aura and Web component versions.
So, to answer your question, yes, you will need to do some post-processing on your data. It can be as simple as:
this.products = result.map(
record => Object.assign(
"Product2.Name": record.Product2.Name ,
record
)
);
That doesn't seem to work. I get aTypeError: 'set' on proxy: trap returned falsish for property 'Product2.Name'
inside the forEach.
– Renato Oliveira
2 days ago
@RenatoOliveira My aura demo works correctly; let me set up a lwc real quick, I'll be back.
– sfdcfox
2 days ago
1
@RenatoOliveira Network issues, but I came up with a working demo for LWC-style JS as well. Let me know if that helps.
– sfdcfox
2 days ago
2
That worked. That's really nice, usingmap
andassign
to avoid the proxy issues.
– Renato Oliveira
2 days ago
1
@RenatoOliveira I am not sure what accepted best practices are, but I too flatten my datatable data. However, I tend to avoid dot notation in flattening just because it's typically associated with JS object properties. You might consider usage of _ in place of .
– tsalb
yesterday
|
show 1 more comment
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "459"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f255418%2fis-it-not-possible-to-get-a-parent-field-in-a-datatable-column-specification-fo%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The lightning:datatable assumes that the field name is not an object, but you can have a period in a field name.
Consider this data:
[ 'Product.Name': 'Hello' , 'Product': 'Name': 'World' }]
If you had data like this, the output in lightning:datatable would be "Hello", not "World".
Here's a copy-paste example for you:
<aura:application extends="force:slds">
<!-- attributes -->
<aura:attribute name="data" type="List" default="['Product.Name':'Hello', 'Product':'Name':'World','id':'5']"/>
<aura:attribute name="columns" type="List" default="[ 'label':'Product Name','fieldName':'Product.Name']" />
<!-- the container element determine the height of the datatable -->
<div style="height: 300px">
<lightning:datatable
keyField="id"
data="! v.data "
columns="! v.columns "
hideCheckboxColumn="true"/>
</div>
</aura:application>
This is true for both the Aura and Web component versions.
So, to answer your question, yes, you will need to do some post-processing on your data. It can be as simple as:
this.products = result.map(
record => Object.assign(
"Product2.Name": record.Product2.Name ,
record
)
);
That doesn't seem to work. I get aTypeError: 'set' on proxy: trap returned falsish for property 'Product2.Name'
inside the forEach.
– Renato Oliveira
2 days ago
@RenatoOliveira My aura demo works correctly; let me set up a lwc real quick, I'll be back.
– sfdcfox
2 days ago
1
@RenatoOliveira Network issues, but I came up with a working demo for LWC-style JS as well. Let me know if that helps.
– sfdcfox
2 days ago
2
That worked. That's really nice, usingmap
andassign
to avoid the proxy issues.
– Renato Oliveira
2 days ago
1
@RenatoOliveira I am not sure what accepted best practices are, but I too flatten my datatable data. However, I tend to avoid dot notation in flattening just because it's typically associated with JS object properties. You might consider usage of _ in place of .
– tsalb
yesterday
|
show 1 more comment
The lightning:datatable assumes that the field name is not an object, but you can have a period in a field name.
Consider this data:
[ 'Product.Name': 'Hello' , 'Product': 'Name': 'World' }]
If you had data like this, the output in lightning:datatable would be "Hello", not "World".
Here's a copy-paste example for you:
<aura:application extends="force:slds">
<!-- attributes -->
<aura:attribute name="data" type="List" default="['Product.Name':'Hello', 'Product':'Name':'World','id':'5']"/>
<aura:attribute name="columns" type="List" default="[ 'label':'Product Name','fieldName':'Product.Name']" />
<!-- the container element determine the height of the datatable -->
<div style="height: 300px">
<lightning:datatable
keyField="id"
data="! v.data "
columns="! v.columns "
hideCheckboxColumn="true"/>
</div>
</aura:application>
This is true for both the Aura and Web component versions.
So, to answer your question, yes, you will need to do some post-processing on your data. It can be as simple as:
this.products = result.map(
record => Object.assign(
"Product2.Name": record.Product2.Name ,
record
)
);
That doesn't seem to work. I get aTypeError: 'set' on proxy: trap returned falsish for property 'Product2.Name'
inside the forEach.
– Renato Oliveira
2 days ago
@RenatoOliveira My aura demo works correctly; let me set up a lwc real quick, I'll be back.
– sfdcfox
2 days ago
1
@RenatoOliveira Network issues, but I came up with a working demo for LWC-style JS as well. Let me know if that helps.
– sfdcfox
2 days ago
2
That worked. That's really nice, usingmap
andassign
to avoid the proxy issues.
– Renato Oliveira
2 days ago
1
@RenatoOliveira I am not sure what accepted best practices are, but I too flatten my datatable data. However, I tend to avoid dot notation in flattening just because it's typically associated with JS object properties. You might consider usage of _ in place of .
– tsalb
yesterday
|
show 1 more comment
The lightning:datatable assumes that the field name is not an object, but you can have a period in a field name.
Consider this data:
[ 'Product.Name': 'Hello' , 'Product': 'Name': 'World' }]
If you had data like this, the output in lightning:datatable would be "Hello", not "World".
Here's a copy-paste example for you:
<aura:application extends="force:slds">
<!-- attributes -->
<aura:attribute name="data" type="List" default="['Product.Name':'Hello', 'Product':'Name':'World','id':'5']"/>
<aura:attribute name="columns" type="List" default="[ 'label':'Product Name','fieldName':'Product.Name']" />
<!-- the container element determine the height of the datatable -->
<div style="height: 300px">
<lightning:datatable
keyField="id"
data="! v.data "
columns="! v.columns "
hideCheckboxColumn="true"/>
</div>
</aura:application>
This is true for both the Aura and Web component versions.
So, to answer your question, yes, you will need to do some post-processing on your data. It can be as simple as:
this.products = result.map(
record => Object.assign(
"Product2.Name": record.Product2.Name ,
record
)
);
The lightning:datatable assumes that the field name is not an object, but you can have a period in a field name.
Consider this data:
[ 'Product.Name': 'Hello' , 'Product': 'Name': 'World' }]
If you had data like this, the output in lightning:datatable would be "Hello", not "World".
Here's a copy-paste example for you:
<aura:application extends="force:slds">
<!-- attributes -->
<aura:attribute name="data" type="List" default="['Product.Name':'Hello', 'Product':'Name':'World','id':'5']"/>
<aura:attribute name="columns" type="List" default="[ 'label':'Product Name','fieldName':'Product.Name']" />
<!-- the container element determine the height of the datatable -->
<div style="height: 300px">
<lightning:datatable
keyField="id"
data="! v.data "
columns="! v.columns "
hideCheckboxColumn="true"/>
</div>
</aura:application>
This is true for both the Aura and Web component versions.
So, to answer your question, yes, you will need to do some post-processing on your data. It can be as simple as:
this.products = result.map(
record => Object.assign(
"Product2.Name": record.Product2.Name ,
record
)
);
edited 2 days ago
answered 2 days ago
sfdcfoxsfdcfox
262k12209453
262k12209453
That doesn't seem to work. I get aTypeError: 'set' on proxy: trap returned falsish for property 'Product2.Name'
inside the forEach.
– Renato Oliveira
2 days ago
@RenatoOliveira My aura demo works correctly; let me set up a lwc real quick, I'll be back.
– sfdcfox
2 days ago
1
@RenatoOliveira Network issues, but I came up with a working demo for LWC-style JS as well. Let me know if that helps.
– sfdcfox
2 days ago
2
That worked. That's really nice, usingmap
andassign
to avoid the proxy issues.
– Renato Oliveira
2 days ago
1
@RenatoOliveira I am not sure what accepted best practices are, but I too flatten my datatable data. However, I tend to avoid dot notation in flattening just because it's typically associated with JS object properties. You might consider usage of _ in place of .
– tsalb
yesterday
|
show 1 more comment
That doesn't seem to work. I get aTypeError: 'set' on proxy: trap returned falsish for property 'Product2.Name'
inside the forEach.
– Renato Oliveira
2 days ago
@RenatoOliveira My aura demo works correctly; let me set up a lwc real quick, I'll be back.
– sfdcfox
2 days ago
1
@RenatoOliveira Network issues, but I came up with a working demo for LWC-style JS as well. Let me know if that helps.
– sfdcfox
2 days ago
2
That worked. That's really nice, usingmap
andassign
to avoid the proxy issues.
– Renato Oliveira
2 days ago
1
@RenatoOliveira I am not sure what accepted best practices are, but I too flatten my datatable data. However, I tend to avoid dot notation in flattening just because it's typically associated with JS object properties. You might consider usage of _ in place of .
– tsalb
yesterday
That doesn't seem to work. I get a
TypeError: 'set' on proxy: trap returned falsish for property 'Product2.Name'
inside the forEach.– Renato Oliveira
2 days ago
That doesn't seem to work. I get a
TypeError: 'set' on proxy: trap returned falsish for property 'Product2.Name'
inside the forEach.– Renato Oliveira
2 days ago
@RenatoOliveira My aura demo works correctly; let me set up a lwc real quick, I'll be back.
– sfdcfox
2 days ago
@RenatoOliveira My aura demo works correctly; let me set up a lwc real quick, I'll be back.
– sfdcfox
2 days ago
1
1
@RenatoOliveira Network issues, but I came up with a working demo for LWC-style JS as well. Let me know if that helps.
– sfdcfox
2 days ago
@RenatoOliveira Network issues, but I came up with a working demo for LWC-style JS as well. Let me know if that helps.
– sfdcfox
2 days ago
2
2
That worked. That's really nice, using
map
and assign
to avoid the proxy issues.– Renato Oliveira
2 days ago
That worked. That's really nice, using
map
and assign
to avoid the proxy issues.– Renato Oliveira
2 days ago
1
1
@RenatoOliveira I am not sure what accepted best practices are, but I too flatten my datatable data. However, I tend to avoid dot notation in flattening just because it's typically associated with JS object properties. You might consider usage of _ in place of .
– tsalb
yesterday
@RenatoOliveira I am not sure what accepted best practices are, but I too flatten my datatable data. However, I tend to avoid dot notation in flattening just because it's typically associated with JS object properties. You might consider usage of _ in place of .
– tsalb
yesterday
|
show 1 more comment
Thanks for contributing an answer to Salesforce Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsalesforce.stackexchange.com%2fquestions%2f255418%2fis-it-not-possible-to-get-a-parent-field-in-a-datatable-column-specification-fo%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown