New answers tagged lightning-web-components
0
I have found when having this issue that causing the class to recompile will fix it. So just save the file again to force that to happen.
2
You can query the elements, filter by the checkbox, and then grab the data you want. This is pretty trivial:
this.checkedBoxesIds = [...this.template.querySelectorAll('lightning-input')]
.filter(element => element.checked)
.map(element => element.dataset.id);
Where [...iterable] copies an array or array-like element into a proper Array, Array....
1
If your data is sorting by text, then that means the data that came from the server was text. You'll want to convert it to numeric data before sorting, or use a primer function.
const numberPrimer = (value) => ((''+value).match(/^\d+(\.\d+)*/$)? parseFloat(value):value);
cloneData.sort(this.sortBy(sortedBy, sortDirection === 'asc' ? 1 : -1, numberPrimer));...
2
I got it. I had everything right but was trying to retrieve the recordid from the wrong component.
My component is inside another and it's this one which is on the record page.
Hope I can help someone so they won't waste as much time as me today...
3
["Relationship": "Subscriber", "memberId": "12345","MemberName": "Test Member"] is not a valid array. Arrays are indexed values, such as:
["Relationship", "Subscriber", "memberId", "12345","MemberName", "Test Member"]
While an Object would ...
0
As per case resolution from Salesforce, this is expected behaviour. Here is the gist of SF explanation:
The WYSIWYG nature of how our rich text editor displays content only applies to the Lightning Experience. If the output of our rich text editors is viewed in non-Lightning contexts (such as in an e-mail), there will be visual inconsistencies.
We have ...
0
Yes, We also get record id from ScreenType action.
Try This:
https://salesforce.stackexchange.com/a/352841/96522
0
Yes, We also get record id from ScreenType action.
HTML:
<template>
<lightning-quick-action-panel header="Confirmation">
<p class="slds-align_absolute-center">Are you sure to cancel this record?</p>
<div slot="footer">
<lightning-button variant="neutral" label="No&...
2
You event.target.value is used mainly for input elements, if you pass custom data like with aura you need to use event.detail
dispatchMoveItems = (event) => {
const passportFields = new CustomEvent('PPFields');
this.handleEvent(evnt);
this.dispatchEvent(passportFields);
}
handleEvent(event){
var wrapper = event.detail;
...
2
You've fallen for a common problem in JavaScript. In your LWC, the "field" property is out of scope, while in the codepen.io example, the variable field is in the "closure" for somefunction. You'll want to pass field to the other method so you can use it:
picklistChanged(event) {
event.stopPropagation();
...
0
Well first thing you might want to show all your code because it seems like you may be missing something since this shouldn't work
for (let field in updateItem) {
item[field] = updateItem[field];
}
For example this, in your array you wont have any key called 'field' you'll have rating because here:
let updatedItem = { Id: dataRecieved....
0
You should convert the Blob to an unencoded String and send that value instead.
Not sure how to do it directly on the JS (although it seems explained here in case you want to take a look), but if by any chance you can send the VersionData to a backend controller then you can use EncodingUtils.base64Encode(blob) to do so.
0
If you don't @track a variable, then a render cycle won't be triggered for the property unless you assign a new object to the variable. So, you have two choices; either add @track to your variable, or use an assignment that replaces the variable. So, your options are:
@track program;
Or:
this.program = [...this.program];
The latter, the spread operator, ...
-1
parameters = {};
connectedCallback() {
this.parameters = this.getQueryParameters();
console.log(this.parameters);
}
getQueryParameters() {
var params = {};
var search = location.search.substring(1);
if (search) {
params = JSON.parse('{"' + search.replace(/&/g, '","').replace(/=/g, '":"') + '"}'...
0
onload (action) => The action triggered when the form data is loaded.
Use onload method
handleOnLoad(event) {
var record = event.detail.records;
var fields = record[this.recordId].fields; // record['0010K000026Y******'].fields;
const accName = fields.Name.value;
alert(accName);
//const myfieldVal = fields.myfield__c.value;
//...
0
So i found the solution, creating a wired method on CurrentPageReference worked like a charm.
import { CurrentPageReference } from 'lightning/navigation';
@wire(CurrentPageReference)
method(data) {
doSomethingWithData(data)
};
1
No, you cannot pass in parameters to an iterator value. Further, you can't use "expressions" as you would in Aura anyways.
If you don't want/need a child component, you need to put the data to evaluate into the list:
<template iterator:it={myList}>
<template if:true={it.value.isTable}>
</template>
</template>
...
this....
1
you need to stop default submit action first then do your validation, if your validation pass then submit other wise skip the submission.
handleClickSaveEditedIncome(event){
event.preventDefault(); // prevent the submit action
const fields = event.detail.fields;
if(fields['Balance__c'] > 0){
this.template.querySelector('...
1
This is already supported since Summer 21
Check it here.
0
Yes, its possible by creating an external stylesheet i.e for eg:lwcCustomStyle.css(in this you can overwrite the css as per your needs) and storing the same in the static resource named lwcCustomStyle and then include the static resource in your LWC component.js as mentioned below.
import lwcCustomStyle from '@salesforce/resourceUrl/lwcCustomStyle';
import { ...
1
I struggled with this as well, and temporarily turning off the "Enable secure and persistent browser caching to improve performance" setting did not help.
What I did in the end: rename my LWC component ABC to ABCVyyyymmdd (so a date specific name). Of course, I had to change the references to my LWC as well, but in my case that was not a lot of ...
3
You don't need to escape Unicode in LWC. Use the literal character in your source code:
options = [
{ label: 'Product®', value: 'Product®' }
];
4
Use lightning-formatted-text
<select name="cars">
<template for:each={options} for:item="option">
<option value={option.value} key={option.value}>
<lightning-formatted-text value="{option.label}" ></lightning-formatted-text>
</option>
</template>
</...
0
You should be able to run your imperative Apex call from a getRecord adapter:
import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import { refreshApex } from '@salesforce/apex';
import myMethod from '@salesforce/apex/MyClass.myMethod';
export default class MyLWC extends LightningElement {
@api recordId;
...
1
If you navigate via standard convert button you will find out that standard convert process calls a standard component rather than a record page action.
runtime_sales_lead__convertDesktopConsole
Going via same concept, if you just call this from NavigationMixin, it works perfectly fine.
handleLeadConvert(){
this[NavigationMixin.Navigate]({
type: '...
3
The apex method requires a Contact as input parameter, but you're passing an object with these four properties that are not Contact's fields:
FNAME
LNAME
Phone
EMAIL
You could either edit both JS and HTML files renaming them with the right names (FirstName, LastName, Phone and Email) or change insertContact ({ con : this.rec }) to
const contact = {
...
0
It all centers around the getLabelValue method.
A getter can't render different values for in a list.
Also, you have made a sort of map function that mixed into a standard for loop.
It's also not clear where you are putting data - it looks like you are adding it to the comment var, but you seem to still be trying to iterate data despite it not being stored ...
1
Yes, you can. Just make sure that code that you use is licensed for you to use for commercial purposes. In this case, lwcRouter uses the MIT License, which means you can use it in your projects if you want to.
0
on the second page do this
@wire(CurrentPageReference)
setCurrentPageReference(currentPageReference) {
this.currentPageReference = currentPageReference;
if (this.currentPageReference) {
this.filterName = this.currentPageReference.state.filterName;
}
}
see if it helps.
7
this.activities.forEach(function(activity) {
Using a regular function like this changes the this context to the activities variable, which isn't what you meant. Use an arrow function instead.
this.activities.forEach((activity) => {
The arrow function automatically retains the this it was defined in (the component), preventing problems like this from ...
0
This isn't possible today, but there's an Idea you can vote on.
0
Couple of suggestions:
you don't need 2 apex methods, you can use 1 with a property that determins if the where clause is needed or not, for ex (this is just for reference purposes):
@AuraEnabled(cacheable = true)
public static List<Lead> getAllLeads(Some Property){
String query = 'some soql';
if(String.isNotBlank(Property)){
...
1
The value of your options is a number, while event.detail.value holds a string, so after selecting an option this.currentYear will hold a wrong value, i.e. '2020' instead of 2020.
The unary plus operator is the fastest way to convert it to a number:
handleChangeYear(event) {
this.currentYear = +event.detail.value;
}
0
We have a list of records!
Caspar and CyberJus were right about a lot here. What was preventing their suggestions from working was the li markup I was using. Below, you'll see I changed to span and div. HTML nerds, please explain why ul and li didn't work here; it seems it should have.
In the JS file, you'll see I now declare
activities = [];
Then, I assign ...
0
I turned off the Red Hat XML extension in my workspace and that problem vanished. The clue for me was "with code: xml(...)" in the Problems panel message.
1
It's helpful to look through Understand the Wire Service. You can return the results to a property or function as CyberJus highlighted and shown in those lwc-recipes linked. Depending on which you do, changes what you reference in your for:each. The following is from the doc and explains what is returned
A private property or function that receives the ...
1
You can use @wire in two ways, to a property or a function. You are wiring to a function, not a property.
If you want to use wiredActivities.data you have to use the single variable name as property
@wire (getAllEventActivities)
wiredActivities;
This way you have it is returning to a function wiredActivities. In this case you havent set any variable the ...
1
You are mixing the direct property wire technique with the method version.
Because you have a method, you need to explicitly store the data somewhere - in the example below, I'm setting it to activities
Then you just need to reference in the iterator in the template.
eg:
<template for:each={activities} for:item="activity">
code:
activities = ...
0
The issue was in the list of fields names. I used a statically type list of names rather than references to the fields
The field API names are case-sensitive when called in the wire adapter and thus, a single typo in the name (a capital O when it should have been lowercase) caused the issue.
Note, this lead to no error messages from the wire adapter. The ...
0
The lightning base components incorporate Lighting Design System (SLDS) markup and classes. The base components handle the details and then provide simple attributes that enable you to provide variations in style. If you look at SLDS, you can see the pieces they are using and the classes that enable variations they're utilizing. For your question:
Saying
<...
2
Use a button tag instead of span. Below code should work for you
<div class="slds-form-element">
<label class="slds-form-element__label" for="combobox-id-3">Relate To</label>
<div class="slds-form-element__control">
<div class="slds-combobox_container">
<...
0
Caspar's list was helpful. Per his suggestion, I changed to explicit version of @wired
@wire (getAllEventActivities) activities({data,error}){
if (data) {
console.log(data);
} else if (error) {
console.log(error);
}
}
On the browser console, it said I need to include cacheable in my Apex class.
Simply adding (cacheable=true) here ...
2
A few things to try:
Check your class runs from exec anon
Check profile permissions on your class
Check profile permissions on the returned object
Change to an imperative call
Change the handler to an explicit one, so you can log any errors to the console. This is likely to be your best bet, so do this first:
activities = [];
eventActivities({ error, data }...
1
Even though you ran npm update, your sfdx-lwc-jest node dependency must point to an older version. Your package.json will show this within devDependencies (I ran into a similar issue).
If you update your version to the most recent listed here within your package.json
"devDependencies": {
...
"@salesforce/sfdx-lwc-jest": "^1.0....
0
My suggestion would be to make a custom metadata type that has all the various settings you need for your components and add a record for each community.
Then in the component take a settings name parameter from the experience builder and pass it to some apex that looks for the appropriately named metadata record and sends back your config and finishes init.
...
0
JSON suffix error. It happened to me and I changed the repository name from "lwc" to "LWC" and solved the problem.
1
You, as you guessed, have to change the value yourself. lightning-formatted-address just displays it as you pass it.
You can choose to do that within the apex method or within the LWC.
To change it within the LWC, you'd have to clone the data if your apex method is cached as cached items are read-only. From there, it's just doing whatever logic you want (...
0
In new quick-action-panel cmp I am using spinner as this. slds-is-relative will remove the ugly rectangular shadow and thanks to style="min-height: 50vh" the spinner will be visible whole.
<lightning-quick-action-panel header="asd">
<div class="slds-is-relative" style="min-height: 50vh" if:true={spinner}&...
0
Both the methods will work on load, but the first method will always fetch the data when the passed parameter value is changed. As in the 2nd method, you are not passing anything it runs only 1 time.
0
I was not able to use the same code as there are some icons which I couldn't find, but I used this code:
<template>
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-id-1">Input Label</label>
<div class="slds-form-element__control slds-...
Top 50 recent answers are included
