New answers tagged lightning-web-components
0
Another observation, the deploy command is case sensitive for LWC components. So for instance if you do:
sfdx force:source:deploy --sourcepath force-app/main/default/lwc/mylwccomponent
and the folder name is myLwcComponent it will fail with the error mentioned in the OP.
2
This is currently nothing more than an Idea (make sure you go vote for this!). Unfortunately, you can't do this today, nor is there a known timeline for this feature (future readers: if this comes out, remind me to edit this answer).
0
The component's size is only its own markup. In other words, the child component doesn't add to the parent component's total size. This is also why components should be as small and modular as possible, in order to avoid those limits.
0
You'll typically have to serialize any data you're bringing back from the server. Try changing your return type to a String and returning the serialized array to the client. Then JSON.parse() the returned string into an array in the client js.
UPDATE:
I misunderstood that the flow of your code is going from client to server. I believe adding an sObjectType ...
2
Since both templates - loading and fancyTemplate will be in same folder, they will be binded to the same js file explicitly. You, as a developer need not do anything. When recordId changes, it will automatically update in all templates when they load.
Here is the playground example
import { LightningElement, track } from 'lwc';
import custom1 from "./...
0
You can use GenerateUrl to get a link, then standard javascript to open it in a new tab. Note that GenerateUrl returns a Promise, so you either need to use async/await or Promise.then()
async handleDetalisClick(event) {
const url = await this[NavigationMixin.GenerateUrl]({
type: 'standard__recordPage',
attributes: {
recordId: ...
3
The standard LWC that's closest to lightning:select would be lightning-combobox (reference). You should be able to translate this implementation entirely to the combobox component as it supports an onchange event that would work like the Aura component you've shared.
Replacing the v.groupnumbers attribute will likely be a property in your LWC class:
<...
2
No, disconnectedCallback only works when the app is still loaded and the component is unloaded.
on close tab.
on browser close.
shut down the machine.
Use onunload to do any last second reactions. Note that the best you can probably do is store something in localStorage so you can pick up where you left off.
got disconnected from internet.
...
2
I checked this example disconnected callback gets called only when the parent component unloads it.
Check this playground
I have added if:true on the child component which is getting changed via checkbox on the parent. So whenever I uncheck the checkbox. The disconnected callback is getting called. But not when the events mentioned by you.
0
it's necessary dispatch a event,
this.dispatchEvent(new FlowAttributeChangeEvent('result', this.result));```
1
This limit indicates that your configuration file is too large. While not documented that I know of, this error isn't one you can bypass. You'll need to reduce the complexity of your metadata to fit within this limit, probably by using multiple components. It sounds like your current component is entirely too complex if you need a configuration file this ...
1
You don't set the actual id of an element. These are mutated at runtime to be globally unique, and are managed by the runtime. Instead, just modify the data so that you have an icon name:
this.data = [...data].map(datum => ({ ...datum, iconName: '...' }));
Then, when you want to change the icon:
this.data.find(row => row.Id === event.target.dataset....
0
It is not possible to use the expressions in HTML but you have to generate the id in JS Controller itself. You can set the attribute like this. Also, you should not use the Id attribute as a query selector(Ids manipulated by the framework). Either use class or data attribute
In your controller just do this.
This how you can generate the properties in JS
...
2
You can also use the other simple way by embedding icon in the lightning-button
<lightning-button variant="success" label="Next" title="Next" icon-name="utility:forward" icon-position="right" class="slds-m-left_x-small"></lightning-button>
More information : https://developer.salesforce.com/docs/component-library/bundle/lightning-button/example
...
1
Short answer is No.
From the documentation, This event has no default behavior that can be canceled. You can't call preventDefault() on this event.
You can customise only onload and onsubmit events. If you need more customized usage, you need to implement lightning-edit-form
0
You can use JSON.parse(response.data) to construct JS object out of your string.
1
Yes, use this to access other methods:
export default class CMD extends LightningElement {
A() {
this.B();
}
B() {
// do something //
}
}
0
It is not working because you defined surveyChoiceButton in survey-translation-child and you are using it in surveyQuestions.
Remove the below code from surveyQuestions and put it in survey-translation-child
<template if:true={surveyChoiceButton}>
<template
for:each={surveyQuestion.QuestionChoices}
for:...
1
You cannot achieve this with standard data types. However you can create a new data type by using custom LWC component and add double click behaviour in it. You can refer to How to use custom LWC lightning component in lightning-datatable for a simple example.
1
There's no way to add extra handlers to a Lightning component that doesn't support them. The standard LWC way of doing something would be to add an actions column (or a button column if you only need one button), and then handle the rowaction event to perform the requested action. Examples are included in the documentation.
2
You just need to add icon-name inside the ightning-tab.
<lightning-tab label="First Tab" icon-name={iconName}>
</lightning-tab>
export default class App extends LightningElement {
iconName;
connectedCallback() {
this.iconName = "utility:success";
}
2
I have been having the same issue today. Finally solved it by firing the FlowAttributeChangeEvent but outside the getter...before firing my FlowNavigationNextEvent.
2
Ok, I have also been struggle with this issue for today. I have two lwc components embedded in lightning flow. Both of them use "FlowAttributeChangeEvent" to communicate value back to the flow. After update to summer 20 on my scratch org both of them do not updated output attribute correctly. I fixed one of them by increase lwc api version from 47.0 to 49.0. ...
1
This requirement is going to force you to create a custom component. The lightning-tabset base component has a very limited API, and this feature isn't an option in that API.
If you like most of what you get with lightning-tabset, and don't want to start from scratch, you can refer to the LWC Base Component Recipes to learn more about how lightning-tabset ...
0
You will need the errors attribute in your template to trigger an error on a cell or multiple cells
<template>
<div class="app slds-p-around_x-large">
<br>
<br>
<lightning-datatable key-field="id" data={data} columns={columns} draft-values={draftValues} errors={errors}
oncellchange={handleCellchange} ...
3
The template page "User Settings" (accessible via settings/:userId) should be automatically included with a community. This page has an OOTB component called Customizable User Settings with a Change Password link on it that allows the user to change their password.
Keep in mind this is what I'm seeing in my Customer Service templated community, so ...
2
Yes, you need multiple events, but you can do this programmatically if you wanted to:
["apiOne", "apiTwo", "apiThree"].forEach((prop) =>
this.dispatchEvent(new FlowAttributeChangeEvent(prop, this[prop]))
);
Or, you could set an attribute on an input element, etc. The main advantage of JavaScript is is can be dynamic, so you don't necessarily need to ...
2
You will need to replace the whole "new record page" with a custom component. You can not just replace the small portion of it.
You can replace the whole "new popup", but not directly with LWC, you need to wrap your Lwc component into Aura Component.
Create an aura component, and implement these interfaces in it.
lightning:actionOverride,force:hasRecordId,...
2
You serialized it once, then deserialized it once. This has the net effect of doing nothing at all. Also, your wired method parameter is incorrect, so you're actually serializing the wrong object. Here's the recommended changes:
public static String processLoginResponse(List<String> labels, Object state){
And
wiredHistory({data, error}){
...
0
Thank you for the reply. My Aura Component was incorrect. needed to add recordId="{!v.recordId}"
1
You can use Json2Apex to create Apex class for your objects and JSON class deserialize method.
1
As of now, if you use variant="label-inline" on the lightning input field with the checkbox type field, the field label is aligned to the left side, and the checkbox is placed on the right side. There is no option to change that in standard lightning-input-field component. To get the label on the right side and checkbox on left, you need to build your own ...
0
There are few problems in your code
You are referring to {index} in the HTML, but you have not defined that like I have done in the below code.
you are not assigning the value of the field to the input.
you are not updating the value of the element at a particular index in the list.
The last one is not a problem but it's not proper as per naming conventions....
0
I forgot to pass event, that is why it was not working with => This works:
tableFilter.addEventListener('click', (event) => this.handleCustomFilterEvents(event));
handleCustomFilterEvents(objEvent){
if (objEvent !== undefined && objEvent !== null && objEvent.target !== undefined && objEvent.target !== null &&
...
0
Basic problem with your code is the function call doesn't get context of this properly.
tableFilter.addEventListener('click', () => this.handleCustomFilterEvents);
Apart from fat arrow function, you can use bind function to pass the context of this:
tableFilter.addEventListener('click', this.handleCustomFilterEvents.bind(this));
0
I would maybe use the Lightning Messaging Service instead of the LWC pubsub.
See for example https://releasenotes.docs.salesforce.com/en-us/summer20/release-notes/rn_lc_message_channel.htm
0
You should ensure that your post is properly formatted to receive a constructive answer.
36:3 is the '<' character, which is expected because you cannot use JSX with LWC (afaik).
Searching really quickly on the StackExchange lead me to believe this question or a quite similar one has been asked before (e.g. Modern JavaScript Frameworks (Angular Js, ...
2
Wire methods load their data asynchronously, so you'll go at least one render() cycle before the data is available. You do need to check for null values to avoid this error.
There's a handy utility method to avoid having to check for null values, etc:
import { getFieldValue } from 'lightning/uiRecordApi';
import CONTACTPHONEFIELD from '@salesforce/schema/...
0
I would suggest calling an Apex controller method for this feature.
I believe there is no builtin LWC functionality to fulfil your request.
Pseudo code could be:
Apex
@AuraEnabled(cacheable=true)
public static Map<Id, List<String>> getPicklistValuesForRecordTypes(List<Id> recordTypeIdList){
//...build the map by using Schema
}
LWC
//...
0
As @gNerb said to avoid performance issues, your data should not exceed a certain limit.
You can see the example below on this Playground
<lightning-input type="search" label="Search" onchange={handleSearchPhone}>
</lightning-input>
<lightning-datatable data={phones} columns={columns} key-field="id">
</lightning-...
1
You need a separate variable to show the filtered results. I wrote a complete example in this playground.
<template>
<lightning-card title="Filters">
<div class="slds-align_absolute-center">
<template for:each={alphabet} for:item="letter">
<a onclick={handleFilterChange} key={letter} data-filter={...
1
You'll want to look at the documentation, but basically you use the type of "actions", and specify a typeAttributes called rowActions. You can specify a name, label, and icon (and more).
1
First, I want to dissect this statement:
I already have the data which needs to be filtered
Salesforce typically places limits on how much data you can query for and store. You either don't have all the data, or are very likely to reach limits related issues and slow performance. You should never query for the full data set all at once.
Next to the ...
1
const selectedLabel = event.target.options.find(opt => opt.value === event.detail.value).label;
1
You cannot style the inner elements of the components if they're not exposed because of shadow DOM. But you can copy the open source version of the component and adapt it to your needs.
0
You can use .THIS .slds-form-element__control{
height:3rem
}
3
"Reactive" simply means that a change made by JavaScript will trigger a corresponding update in the UI. The inverse is not also true. You must somehow acquire/track the changes, usually via a change handler or by checking the values in the fields.
Example:
<input onchange={changeValueHandler} data-key={coreAttribute.key} type={coreAttribute....
2
This fails because the Model class is an inner class. It is probably a bug, but we hit this a while back and found:
instances of inner classes can be returned to the client but cannot be passed to the server
instances of top level classes can be passed both ways
As per sfdcfox's comment, we most often saw an internal server error when trying to pass an ...
4
You can use a single handler to capture the values in all of your inputs.
Here is my favorite approach that has 0 maintenance once you put it in, all you need to know is what "Field" and what "Value" and you can pump an object full of this information, just like a map with key and value.
This uses an object and bracket notation to assign the data to the ...
2
You would want to compare the set to another set:
System.assertEquals(
new Set<String>{'success'},
myMap.keySet(),
'Expected the set to contain one value called success'
);
Top 50 recent answers are included
