9

In LWC, we usually do not create dynamic nodes this way. It is idiomatic in LWC to use a repeating template (for:each and for:item) and only change the data that drives the template, rather than clone the template itself. Here, I present what you'd do in LWC. Playground css .note { margin-bottom: 10px; background-color: yellow; width: 100px; ...


7

The issue here might be because your getUsersAccounts() method returns a List<Account> and you're trying to get a field from an Array and not from an Object within your wired function: location: { Street: data.BillingStreet, City: data.BillingCity, PostalCode: data.BillingPostalCode, State: data.BillingState, Country: data....


7

Just use icon-position="right" attribute:


6

You are talking about event reparenting. Check this question - event.getSource() alternative in LWC? (considering origin reparenting). Consider below components chain in LWC: <c:parent> <c:child> <c:grandChild> When event is fired by grandChild, you can access all the data- attributes and any other attributes directly in ...


6

Currently, there is no native solution for replacing custom labels tokens with dynamic values in LWC. But you can implement similar functionality using pure js. Let's create some service LWC component IntlService to be able to reuse its functionality from everywhere: class IntlService { static format(stringToFormat, ...formattingArguments) { if ...


6

I'd be surprised if they don't have this approach documented anywhere. It's pretty standard in other web frameworks, but works for a different kind of communication paradigm to events. Events keep everything loosely coupled, and if you needed later on to support communications with a component outside of the hierarchy then you'd be good to go, but there are ...


6

Firstly, this is not documented. As a thumb-rule, salesforce always insists to use ONLY what is documented. So, this may some day be made invalid by salesforce the sameway they did Prevent Creation of Function Expressions in Dynamically Created Aura Components (Critical Update). Although passing function expressions in attributes (properties) of dynamically ...


5

you can prepare data before passing to lightning:datatable @wire(getAddress, { LeadID: '$recordId' }) wired(result) { this.refreshTable = result; if (result.data) { let preparedAddresses = []; result.data.forEach(address => { let preparedAddress = {}; preparedAddress.Account_Id = address.AccountId.Id; ...


5

Yes, @AuraEnabled(cacheable=true) and setStorable are the same thing. As of API 44.0, Storable Actions have been replaced with @AuraEnabled(cacheable=true). The change was made so that the act of caching would be centralized instead of requiring it in multiple places in JS. Documentation Prior to API version 44.0, to cache data returned from an Apex ...


5

The only reason spinner may not be showing up is because your javascript calculations (like this counting code) before switching page is taking 3-4 seconds. You need to check for such calculations. Regarding the best practices, whether its 3 pages or 10 pages, what you are trying to implement is known as wizard and you can keep the code simple, maintainable ...


4

To use @wire to call an Apex method, you must annotate the Apex method with @AuraEnabled(cacheable=true). Certainly, you have forgotten the cacheable=true. Also in the html file, instead of using record.employerAddress.propertyName use record.data.employerAddress.propertyName. Like below <template> <lightning-card title="People"> &...


4

This seems to be a bug related to slds-table_col-bordered. In the lightning-datatable documentation, I could not find any example using this border to be honest. I replicated the issue on this LWC Playground: https://developer.salesforce.com/docs/component-library/tools/playground/xQ4KLIxJh/27/edit


4

I did a quick test and it is indeed possible to upload a file using guest user in a community. Below are further details on your specific questions. Is it possible to upload files as a guest user in a community? Yes. Or does this checkbox/setting only work with the aura component file:upload? The Org setting is applicable for LWC as well. Could I ...


4

You can use this component. Sample: (Notice how we got CreatedBy.Name below) <template> <c-datatable config={config}> </c-datatable> </template> and its JS: import { LightningElement, track } from 'lwc'; export default class PocTable extends LightningElement { config = { objectName: "Account", ...


4

You can simply rewrite your jsfiddle jQuery snipper to LWC next way: <template> <div class="container" lwc:dom="manual"></div> <button onclick={onAddNoteButtonClick}>Add note</button> </template> .note { margin-bottom: 10px; background-color: yellow; width: 100px; height: 100px; } import { ...


4

Triggering any @track variable results in all merge fields being recalculated to see if the DOM needs to be updated. Only nodes that actually have changed values result in those nodes being updated in the DOM. This is why, when you remove the last @track, nothing gets updated, otherwise everything gets updated when capitalFullName is updated. I wouldn't say ...


4

Pass a JS Object direct into detail const selectedEvent = new CustomEvent('custevent', { detail: { type: "Fiat", model:"500", color:"white" } }); Access the object in your listener method and get the value from object as:- hndlecustEvent(event) { this.value1 = event.detail.type; this.value2 = event.detail.model; }...


4

renderedCallback called after every render of the component. This lifecycle hook is specific to Lightning Web Components, it isn’t from the HTML custom elements specification. This hook flows from child to parent. Let's understand it better. See the below code:- import { LightningElement, track, wire } from 'lwc'; import getContactList from '@salesforce/...


3

From the documentation of VF security : Permission for a Visualforce page is checked at the top level only. Once users can access a page, they can execute all Apex that’s associated with the page. This includes: The controller for the page and any Apex classes called from the controller class. Any extension classes for the page and any ...


3

What you can do is to transform the resulting list of OpportunityLineItem into another array of objects using the map function like below. @track error; @track records; @wire(getOpportunityLineItem) wiregetOpportunityInfo(result) { const { data, error } = result; if(data) { this.records= data.map(row => { ...


3

You can manipulate the returned data from your apex controller and then point that property as your edited data to your lightning-datatable. This is for aura but the idea is the same: action.setCallback(this, $A.getCallback(function (response) { let state = response.getState(); if (state === "SUCCESS") { let resultData = ...


3

Try using this code. Html code - <template> <input class="input1" type="number"> </template> And Css Code - .input1::-webkit-outer-spin-button{ -webkit-appearance: none; } .input1::-webkit-inner-spin-button{ -webkit-appearance: none; }


3

So, if you use chrome inspect, and force state of focus on the div, it will change color. On your div, there is no indication saying that the element can be focused. You have to explcitly specify that it can be. We use tabindex on div to specify that it can be focussed. tabindex="0" means that the element should be focusable in sequential keyboard ...


3

Here's a Playground that demonstrates how to set an onchange handler like what you're asking for: import { LightningElement, track } from 'lwc'; export default class App extends LightningElement { @track rows; connectedCallback() { this.rows = [{id:0,value:''},{id:1,value:''},{id:2,value:''}]; } handleChange(event) { this....


3

CustomEvent's provide the detail field for it to avoid any conflict with other event properties. while The target property of the Event interface is a reference to the object that dispatched the event. as per https://developer.mozilla.org/en-US/docs/Web/API/Event/target


3

If you're using the standard record Id API, it should be recordId, not RecordId (case-sensitive), and you should be using a reactive parameter: @api recordId; @wire(getOpportunityLineItems, {oppId: '$recordId'})


3

Well, you are basically punching a hole through the Shadow DOM semantics that LWC provides for you. LWC's native Shadow DOM parity is a work-in-progress, but I think it's close enough that you might not see any difference in browsers that have good Shadow DOM support. However, I would assume that things will break in browsers that lag in this area (did you ...


3

It might be the case that you need to add a reference to the specific package in your package.xml, alongside the wildcard (*) that's collecting the LWCs that you can see. For help amending the package.xml, I'd refer to the Packages section of this official samples doc. I'm guessing it'd look like this: <types> <members>*</members> &...


3

Remove the (cacheable=true) from the Apex for your 'verifyEndate' method. This way the information you want will always be fresh when the component is loaded.


3

As you are using <template if:true={expanded}>, the body of this template will be removed from DOM when the condition becomes false. So, you can use a div with hide or show as below: <div class={wrapClasses}> <lightning-input>....</lightning-input> <lightning-input>....</lightning-input> </div> JS: get ...


Only top voted, non community-wiki answers of a minimum length are eligible