New answers tagged lightning-web-components
2
The Lightning Design System provides a component blueprint dedicated to horizontal description lists.
For you code, you should use :
<dl class="slds-dl_horizontal">
<dt class='slds-item_label slds-text-color_weak slds-var-p-bottom_x-small' title='tyrufhdff hgyhgffghg'>
tyrufhdff hgyhgffghg sfsdfsdfdsfsdfsdf
</dt&...
1
#JS#
` import { LightningElement,wire} from 'lwc';
//import apex method
export default class Sample extends LightningElement {
@track items = []; //this will hold key, value pair
@track value = ''; //initialize combo box value
@track chosenValue = '';
@wire(getRecords)
wiredRecords({ error, data }) {
if (data) {
...
0
There are two problems with your code.
You are missing this keyword while passing some attributes to the imperative function
handleClick(event) {
newPrice({
entryDate: this.datefld,
enqName: this.enquiry,
proj: this.projSelected, // this was missing on this line
unit: this.unitSelected,// this was missing on this line
...
3
The Standard DOM event raised by LWC Component cannot be overridden by its CustomEvent which has the same name or not. It is also impossible to "mute" dispatching the Standard DOM events.
However to distinguish between the Standard DOM event and the CustomEvent dispatched by LWC Component for the event listener Component you can use
The isTrusted ...
0
It is called lightning-combobox
https://developer.salesforce.com/docs/component-library/bundle/lightning-combobox/example
you can make dynamic values for options in the controller
<template>
<lightning-combobox
name="progress"
label="Status"
value={value}
placeholder="...
0
I solved my problem by creating an aura component and eliminating the flow screen altogether by wrapping the LWC component with an aura:component. This allowed me to then passed in the record id into the LWC component as shown below:
<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" >
<c:...
1
That's expected. The classes do not impose their values on to the style attribute of DOM element. If you want to know the style, use getComputedStyle instead:
let style = window.getComputedStyle(this.template.querySelector('.dropdown'));
console.log(style.display); // should output "none"
Demo
<template>
<div class="dropdown slds-...
1
This is resolved in the Winter 21 release. A new method allows you to notify the runtime that a record has definitely changed and needs to be refreshed:
import { LightningElement, wire } from 'lwc';
import { getRecord, getRecordNotifyChange } from 'lightning/uiRecordApi';
import apexUpdateRecord from '@salesforce/apex/Controller.apexUpdateRecord';
export ...
1
Assuming bankId is set correctly to the recordId, then if you want to only query for that record, you need to add a WHERE clause to your query:
@AuraEnabled(Cacheable = true)
public static List<Bank_Account__c> getId(Id bankId){
return [
SELECT Id
,Name
,Account_Type__c
,Sort_Code__c
,...
2
As mentioned in the documentation
The native HTML element provides two events,
input and change. The lightning-input component provides two custom
events, change, and commit.
The component's change event behaves the same as the native input and
change events together. It fires whenever you change the input value,
as the element's input event does. It also ...
1
Create a property that controls the render state of your spinner and set it's default value to true.
JS
@track isLoading = true;
@wire(/*METHOD*/)
wireThings(response) {
const wiredMethod = response;
const {data,error} = response;
if(data) {
this.isLoading = false;
}
if(error) {
this.isLoading = false;
console....
0
I can see in the documentation that this seems to be possible. Can anyone highlight why it was not working for me or now it is possible?
https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/documentation
1
You can use data attributes to pass in extra information. Here's a simple playground:
<template>
<div key={outer.key} for:each={data} for:item="outer" for:index="outerIndex">
Outer key: {outer.key}
<div onclick={handleClick} key={inner} for:each={outer.data} for:item="inner" for:index="...
0
You should add in state the navigationLocation attribute. I have resolved the problem for the backgroundContext by adding it (see the linked question for the details and a full example).
0
I have just resolved the same problem. In the state attribute, you should add navigationLocation: 'DETAIL'. The state attributes are nearly undocumented. I have found that i should put DETAIL value in navigationLocation by inspecting the URL generated after a click on the standard edit button of the view page.
Here is a complete example :
...
0
Please refer the sample code to dynamically create the input fields based on user input.
<aura:component >
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:attribute name="keywords" type="List" />
<aura:iteration items="{!v.keywords}" var="item"&...
0
Try setting window.scrollTo(0, 500); when you close the modal pop up
Here is the link for your reference. https://www.w3schools.com/JSREF/met_win_scrollto.asp
2
Date() actually returns the current date time, you can see that the issue is with the time when you preview your component in the playground.
Assuming you want to just restrict by the current day you need replace your todaysDate() method with something like this:
get todaysDate() {
var today = new Date();
var dd = String(today.getDate())....
0
Did you create your component via the right click context menu in VS Code? It's possible that there's a missing configuration file either among the component files or in your local project. Try recreating the component through that method and make sure the files are saved locally.
0
While your requirement isn't directly possible with the standard LWC datatable, you could take one of the following alternate approaches. Option 1 would be the easiest alternative and implementing Option 2 is beyond the scope of this answer (you could explore more, if interested).
Option 1:
Using selectedRows attribute and rowselection event handler, clear ...
0
You would need to expose a method in the child component to check the values:
@api validate() {
return [...this.template.querySelectorAll('lightning-input')].every(field => field.checkValidity());
}
And then your parent can check if it's valid:
handleClick(event) {
if(this.template.querySelector('c-shipping-address-details').validate()) {
this....
0
After 24 hours of getting stuck in this step I realised that in the JS Code I have passed the values in map as
return{
label:type.name, \\Should be type.Name
value:type.id \\Should be type.Id
};
Turns out I missed the case sensitivity on Name and Id
return{
label:type.Name,
value:type.Id
};
This ...
0
The easiest solution is to create a new Apex Class via VS Code as per sfdcdox's answer above, then copy the contents of your file 'LightningComponentBundle' into it. Delete the original from Project and Org and then rename your new class as needed.
Alternatively you can create the class via the developer console in your org and then retrieve the metadata as ...
0
Consider building a custom combobox component, if you need text wrapping. Easiest approach would be to create a replica of the base components involved. You can check out the source code here for baseCombobox & baseComboboxItem components. A one line code change (i.e., remove the slds-truncate) in your replicated custom component's inline.html file of ...
3
then block only ensures this.apex1(); , this.apex2();, this.apex3(); that the method is called in order. But there is no order when it gets executed.
apex1() contains an async method. the async method will execute independently.hence you are getting the behavior.
Have a look at https://javascript.info/async-await
async/await functions in LWC
2
Optional Chaining also knew as Safe Navigation Operator is a feature of ECMA 2020 (11th edition),
But LWC supports only below versions of ECMA Script as of now(Winter 2021)
ES6 (ECMAScript 2015)
ES7 (ECMAScript 2016)
ES8 (ECMAScript 2017)—excluding Shared Memory and Atomics
ES9 (ECMAScript 2018)—including only Object Spread Properties (not Object Rest ...
0
I would suggest a ready made tool LWC formatter to do the job.
0
Call you apex method from uiRecordApi wire service using connectedCallback(). Ensure the apex class method should not be annotated with (cacheable = true)
import getLoanDetails from '@salesforce/apex/LoanCtrl.getLoanDetails';
import { getRecord } from 'lightning/uiRecordApi';
@wire(getRecord, { recordId: '$recordId', fields: 'Loan__c.Name' })
wiredGetRecord(...
3
No. All libraries are loaded in strict mode as a security feature. You will need to either fix the library to be strict mode compliant (use eslint for help with this), or use an alternative library. Most reasonably written libraries can be made strict-mode compatible with minimal changes to the code base, but without knowing more, it's hard to tell if it ...
1
This feature isn't installed by default.
You can add it via:
sfdx force:lightning:lwc:test:setup
Or:
npm install
npm install @salesforce/sfdx-lwc-jest --save-dev
(The first npm install is not a typo; this is used to install all other named packages in package.json and their dependencies.)
Once installed, the command should then work as documented.
You can ...
0
You don't need two properties here. Just write one getter to function to set the visibility conditionally.
get isFirst(){
return this.first === 'Youth' ? true : false;
}
In the HTML
<template if:true={isFirst}>
<div>This is for Youth</div>
</template>
<template if:false={isFirst}>
<div>This is for old</div&...
2
This warning should not automatically fail your security review. However, your package will need additional analysis to determine if there is any actual XSS vectors. As long as you're following best practices, your package could still pass security review. You should direct specific questions to Partner Support.
1
Starting in Winter '21, you'll be able to use getRecordNotifyChange() function to refresh your record page from a lightning web component.
getRecordNotifyChange is working almost the same way force:refreshView did, except it takes a list of recordId which makes it a little bit more flexible:
import { LightningElement, wire } from 'lwc';
import { getRecord, ...
0
Starting in Winter '21, you'll be able to use getRecordNotifyChange() function to refresh your record page from a lightning web component.
getRecordNotifyChange is working almost the same way force:refreshView did, except it takes a list of recordId which makes it a little bit more flexible:
import { LightningElement, wire } from 'lwc';
import { getRecord, ...
0
You can call both cacheable and non-cacheable Apex methods imperatively. To refresh the cache for a cacheable method, call the method again. Refresh View works for wire and aura components only.
1
It looks like the this context is lost inside messagecallback function and it generates an error while dispatching the event.
Try binding the this context by changing to subscribe('/event/Asset_Change_Event__e', -1, messageCallback.bind(this)).then(response => {
1
Another way I found of doing what Sanket was referring to above:
navigateToNew() {
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: this.objectName,
actionName: 'new'
},
state: {
nooverride: 1,
...
0
Someone shared this link with me: https://www.youtube.com/watch?v=r6p3TZCtsYE&feature=youtu.be and it solves the problem easily. It seems to be a bug in Salesforce CLI or Deployment runtime, which is not detecting the dependencies correctly.
To summarise the above video in one line: "One has to deploy the whole LWC folder to get rid of this issue, ...
1
The error means you're missing a metadata file. On the file explorer, click on the New File button, and name it:
ChangePasswordController.cls-meta.xml
And give it the following contents:
<?xml version="1.0" encoding="UTF-8'?>
<ApexClass xmlns="http://soap.sforce.com/2006/04">
<apiVersion>49.0</apiVersion>
...
1
i tried to replicate your issue in my org without a namespace and i was able to do so. Initially i have created a component with just two files:- css and meta.xml file. This component got successfully deployed.
After creating other component to import the css module, tried to deploy it. Got the same error as you.
Once i added the js file in style component,...
0
You can use localStorage but yes that is not a right solution. I would suggest to create a status picklist field and keep the status as Draft till you want to create the record. In real, you will be creating the record but you will use status draft to identify the record you want to show next time users open the same form.
1
You can achieve by using pagereference as Web Page Type in lightning navigation.
this[NavigationMixin.Navigate]({
type: 'standard__webPage',
attributes: {
url: '/lightning/o/Contact/new?count=2&nooverride=1&useRecordTypeCheck=1&navigationLocation=RELATED_LIST'
}
});
When you use ...
0
Add slds-truncate to your wrapper elements to force ellipses to appear when the text is too large to fit its area. It is generally advisable to add a title to those elements so the entire text can be seen when hovered over with the mouse.
Example:
<div class="slds-truncate" title="Stuart Upifen=htyfudiuigj">
Stuart Upifen=...
1
You need to maintain the state of the values in the controller. And to do that, you need to pass in the new values from the loop into the controller via an onchange event, and then update the array in the controller. To identify the record to update, you can set the name of the input to be the data.id, and use event.target.name to then lookup the id in the ...
0
I figured it out, though this solution requires a lot of flattening in order to match the shape of LWC's datatable structure because I think SOQL does not allow aliasing. For example, Contact.FirstName => FirstName, and Contact.Account.Name => AccountName
Apparently the Developer Console just shows "Object" for Contact.Account.Name but this ...
2
You don't add another SELECT statement to join parent fields.
SELECT Account.Name, Contact.Name FROM AccountContactRelation
0
even I face the same issue. Where you able to find the solution for it? Thanks
0
No. You can't apply CSS to inner elements of a component. This is because of the Shadow DOM. If you want to do something like this, you'll have to write your own custom component, and even then, you'll need to write the extra CSS/logic into the child component, again because of the Shadow DOM. It specifically restricts the ability of parents to modify the ...
0
When you call apex, it is called &asynchronously*. This means that the child connectedCallback happens before the Apex call completes. You can see the same problem if you write this:
@track res;
connectedCallback() {
getRecords()
.then(data => {
this.res = data;
console.log('res'+JSON.stringify(this.res));
console.log('...
0
Refer this it may be helpful:
https://salesforcediaries.com/2019/07/24/lwc-communication-part-1-passing-data-from-parent-to-child-component/
and if you want ot pass from connectedCallback then you should refer the same name and it should be used as attribute and pass the value to Child component. you can share html as well for better answer.
Top 50 recent answers are included
