8

those rules have nothing to do with blocked functionalities - they will still work even if highlighted in the editor / running linter. They are meant to highlight common practices / code style etc. to you - not more. If it annoys you you can disable those hints eiter globally or for specific lines via inline comments or configuration in the .eslintrc.json =>...


7

The data you get from wire service is in the form as below: { "apiName": "Account", "childRelationships": { }, "fields": { "Name": { "displayValue": null, "value": "University of Boston" }, "POC_Datetime__c": { "displayValue": "8/7/2019 8:02 PM", "value": "2019-08-08T03:02:37.000Z" }, "Phone": { "...


7

No, it's not possible. You can only use getters for specifying a value, such as: <div class={classes}> ... get classes() { return `my-class ${this.dynamicClass}`; } You can read more about this in the documentation.


6

Firstly, a very nicely framed question! Here is what we found to be best after brain-storming: Apex methods should be used ONLY for getting the data and for DML statements. In short, it should be used only as a communication layer between component and database and nothing more - no more modification of data in apex. All the modifications to the data-...


6

When LWC actually calls some Apex, the AuraEnabled results are serialized to JSON, allowing it to be transported over HTTP (AJAX) to the client. That means the whole object (at least the AuraEnabled parts) is walked, during the serialization, to access all property values at that time. This means your properties will all get read (and therefore all your lazy ...


6

You should not use "../utils/utils" for imports from modules. It should be 'c/utils'. Implementation: Create utils module: sfdx force:lightning:component:create --type lwc -n utils -d force-app/main/default/lwc Delete utils.html file. Put below code in utils.js: // mortage.js const getTermOptions = () => { return [ { label: '20 years', ...


5

This basically boils down to the main differences between Aura and LWC. Lets visit some of the practical differences: Aura is not truly component based framework. For example, when you define some styles on class my-class in 1 component, then those styles would apply to some other component in same window which uses the same class my-class. This would not ...


5

this.template.querySelector will identify only the 1st component/element. When you need to identify all the components/elements, you need to use querySelectorAll. You can try below: this.template.querySelectorAll('c-child').forEach((comp) => comp.showError()); Also for more learning, you can check below links: https://salesforcesas.home.blog/2019/07/...


5

this refers to the default class and not window. Container component (not owner) can add event listeners and access elements directly on this and not template. So, we should use this.addEventListener and this.querySelector Owner component has to add event-listeners and identification through template. So, we should use this.template.addEventListener and this....


5

Okay looks like documentation is a bit messed. This is what I found by trying all pester - Stays for 3 seconds, No close symbol sticky - Stays infinitely or Until you press the close button dismissable - Stays for 3 seconds, you can close it by pressing close button.


4

Step 1 : create custom component as follows. pocCustomComp.html : <template> <div> Id: {recordId} </div> <lightning-file-upload label="Upload" name="fileUploader" accept={acceptedFormats} record-id={recordId} ...


4

Firstly, document. is not allowed in LWC because of locker-service. You should be using this.template. to identify the elements in HTML. Instead, you can add something like this: import { LightningElement, wire, api, track } from 'lwc'; export default class SomeClass extends LightningElement { // some other code connectedCallback() { ...


4

There are some fundamental issues with the code. The return type is a string as per your backend apex class and hence first thing is to parse the response into Javascript object .In your case the API is returning an Array and hence you will need an Array variable . Here is how the correct JS code looks like import { LightningElement, track, wire } from '...


4

It is possible to access and change the styling of inner elements of standard component with static resource - as shown in answer by @BlackCat I see that you have created component various for testing this. If you try to inspect the element created: <c-various c-various_various-host=""> <div c-various_various="" class="row slds-m-...


4

When you implement wire service, it will always be invoked the first time when its registered while component initialisation. Then it will return { data: undefined, error: undefined } However it will be invoked again only when dynamic variable recordId changes as wire is dependent on it. So, you can safely use if(this.recordId) inside the functions which ...


4

JavaScript is a case-sensitive language. The method is called isNaN().


4

I've just had similar issue like 30 minutes ago and I found this topic. Basically what you need to do is add :host { display: table-cell; } to your child component and remove surrounding <td> if you have one. Also add key attribute to your c-my-custom-table-cell: <table> <template for:each={list} for:item={item}> <c-...


4

keyboard up / down events normally should cross the shadow boundary. One important thing is that if you want to listen on div elements that they need a tabindex in order to be "selectable". On this playground you can see the lwc-recipes modal component which has a direct key up listener. Click on button => shows modal (and get autofocused) => pressing ...


4

From the docs: You can also pass the parameters listed in this Request Parameters table. Which links to the UI Api Docs which lists the q parameter - so i would assume it is already supported (and documented). If it is not working its either a bug or there is an other issue i guess


4

You need array of objects. In each object, you can add a boolean which conveys the conditional rendering. Pls check below example: poc.html <template> <template for:each={hoursMain} for:item="h"> <template if:false={h.isHour12}> <div key={h.hour} class="slds-theme_success">Work</div> </...


4

To make sure you have access to class variables, bind this to the function: { type: 'action', typeAttributes: { rowActions: this.getRowActions.bind(this) } },


4

Wire service caching depends on the apex method parameters. For same parameters' values, the same apex method invoked from multiple components will have only 1 apex call. For same apex method but different parameters values, there will be a separate server call to get response. It will be better understood when explained with example. Consider a ...


3

I am not really sure what you expect as answer to your Post (because there is basically no question). While your points are maybe true it is something nobody can change - Salesforce Development was always more restrictive than other places. You may want to look on its evolvement though (s-controls, visualforce, aura etc.) - you will see that things are still ...


3

This is actually not exclusive to LWC. Its the standard of Web Components. You need to use slots to achieve that. However there are limitations to slots in LWC. You can create c-my-modal as below: <template> <h1>Add content to slot</h1> <div> <slot></slot> </div> </template> Also for ...


3

This is how you do it in LWC. You can pass components into another components using <slot> tag. Unnamed Slots This example has an unnamed slot. An unnamed slot is a placeholder for any markup that a parent component passes into the body of c-slot-demo. <!-- slotDemo.html --> <template> <h1>Add content to slot</h1> <...


3

Have you tried using the <lightning-icon> tag? Documentation can be found here. For your code, the HTML should look something like this: (you should modify the component call a little bit, so your text for "icon" satisfies the specification (i.e. "action:approval") <template if:true={icon}> <lightning-icon icon-name={icon} alternative-...


3

It does not hurt to have your libraries in package.json and have package.json stored in your github repository for the project or even in the static resource. Although as a best practice I recommend you have separate folder in your project where you keep your JavaScript source including third party and then use a bundler like webpack and build a minified ...


3

You can't import the @salesforce-ux/design-system directly via require. If you look at the package.json, there is no main or module field designating the module entry point. The current SLDS version is not compatible with the native shadow DOM (some selectors will attempt to style elements in different shadow trees). We are currently working on a new ...


3

singleAccount is declared by initialising to null. So even before wired function gets back the data, the template is trying to display singleAccount.Name which is throwing error. Change it to: @track singleAccount = {}; Now its initialised Object, so you will not get error. As Martin Lezer, pointed, you can also include empty check <template if:true={...


3

You need to specify the min and max attributes. E.g. <lightning-input type="date" name="input8" label="Date field with min and max values" value="2017-09-07" min="2017-09-05" max="2017-09-22" ></lightning-input> See https://developer.salesforce.com/docs/component-library/bundle/lightning-input/example


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