8

In Winter '18, they added an ability to control access to Apex REST Services that is distinct from the API Enabled permission on profiles that provides access to the provided APIs. This allows you to set up a profile that does not have access to the standard APIs, but gives you access to Apex REST Services. The user will also need access to the apex class ...


7

The easiest mechanism for sharing JS and CSS code between LWCs across a single project is essentially create an LWC for each (the JS and the CSS). Each LWC contains just the code artifact for the JS or CSS code. In other words, they're LWC's without HTML templates. The one will have your XML metadata descriptor and a JS module, the other will have the ...


6

You need to move all the expressions into js. This is done on purpose to make the code more testable as mentioned in documentation Example Html <div class={divClass}></div> JS get divClass() { return this.showleftDiv ? 'slds-size_4-of-6' : 'slds-size_6-of-6'; }


5

Don’t use ID selectors with querySelector. The IDs that you define in HTML templates may be transformed into globally unique values when the template is rendered. If you use an ID selector in JavaScript, it won’t match the transformed ID. You can add a data attribute and query on it Example: Html <path class="slds-progress-ring__path" data-id="...


5

Yes, you can. To share CSS style rules, create a module that contains only a CSS file. Import the style rules from that CSS file into the CSS files of other Lightning web components. You can import style rules from multiple CSS modules. The imported style rules are applied to the template just like non-imported style rules. Lightning Web ...


4

I found a pretty nifty way of doing this very simple process, which I wanted to share: HTML: <lightning-input value={test} data-id="test" onkeyup={valueChange} onkeydown={valueChange} variant="label-hidden"></lightning-input> JS: @track test; valueChange(event) { this[event.target.dataset.id] = event.target.value; } Doing this ...


4

In base component value is masked after save as mentioned in the documentation To mask the value while typing you can add CSS property -webkit-text-security: disc to mask input. sample.html <template> <lightning-card title="Account Edit"> <lightning-record-edit-form object-api-name="Account"> <lightning-...


4

You should Disable Caching. This has obvious performance penalties, but should show the latest version of your code. From Setup, enter Session in the Quick Find box, and then select Session Settings. Deselect the checkbox for “Enable secure and persistent browser caching to improve performance”. Click Save.


4

Because of the locker service, JSPdf is not supported in LWC. Check my answer to generate pdf in LWC using standard browser API.


4

One way to figure whats the actual error is by handling the AuraEnabled exception . This would reveal why it is failing and will not give a GACK. public with sharing CaseWithSubjectServive { @AuraEnabled public static Id createCaseWithSubjects(Case newCase, List<Subject__c> subjects) { try { System.debug('Entered method'); //this will ...


4

You need to use this to access member attributes. this.fullName = this.firstName + " " + this.lastName; Note also that neither variable will be available in connectedCallback(), as the data is loaded asynchronously. Use this instead: get fullName() { return `${this.firstName} ${this.lastName}`; } I made a Playground that demonstrates this idea. ...


4

The reason why if:true={value} equals false because 0 value is falsy. if:true directive expects boolean context, thus making type coercion. I'd recommend you to use getters. In your case, it can be looked like (if you expect the value property of number type): @track value = 0; get hasValue() { return typeof value === 'number' && isFinite(value);...


4

While looks there is no component which is very similar to aura version there is api thats of BETA quality. There is a lightning/uiListApi module to get List views data and metadata in LWC. Note that as of today it is under BETA. There is also a sample code in the trailhead recipe repo import { LightningElement, wire } from 'lwc'; import { getListUi } ...


3

QuickAction Api is not available in LWC yet. You have to wrap an aura component around your LWC. Fire an event from LWC, aura component will capture it and then call quick action API. https://developer.salesforce.com/docs/component-library/documentation/en/48.0/lwc/lwc.events_sending_to_aura_components


3

As I said before, you can't alter the inner styles of the component. The previous solution only worked because it was in Aura. Fortunately, in LWC, you can use SVG directly, and this means we have a very simple solution. We can directly reference the SVG file and style it. Here's a playground for you. And here's the example source: CSS .red { fill: ...


3

The "this" pointer in an LWC function is the LWC component. If you want the element that was clicked, you need to update the method thus: openCloseSection(event) { let parentClassList = event.target.closest(".my-section").classList; ... }


3

Just found the answer in red lettering in the Developer Console: aura_proddebug.js:4763 Error: [LWC error]: Invalid tabindex value 7479 in template for [object:vm undefined (10)]. This attribute must be set to 0 or -1. so I had to add another property for the tabindex: get tabIndex() { // Positive tabindex is an error in LWC ...


3

Looks to me like you are missing "this" references: .then(result => { this.apexJobInfoData = result.JobInfo.length===0?null:result.JobInfo; this.error = undefined; if(this.apexJobInfoData!=null){ // HERE this.apexJobInfoData.forEach((element) => { // HERE TOO if(element.JobType === '...


3

The form action tag only accepts a url if you need to provide a query parameter you need to specify it as input element of hidden type Example <div class="slds-no-flex"> <form action={replyToEmailLink} method="GET"> <input type="hidden" name="cc" value="nobody@mozilla.org" /> <button type="submit" class="slds-button slds-...


3

Because event.detail.files is always a list. Try this instead: this.uploadedFiles = [...this.uploadedFiles, ...event.detail.files];


3

When using iteration you nee to set up the Key for the iterator Then the usage of data attribute is as follows Assume you are using data-id the you are accessing that attribute in js code event.target.dataset.id if the data attribute is like data-key then you will access it by event.target.dataset.key Similarly I have update the code in the ...


3

The compiler does a lot of "magic" to ensure compatibility and Locker API consistency across all browsers. For example, decorators are experimental, so to provide a consistent experience, it applies a patch to make them work. As a side effect of that example quirk, the only decorators allowed are @api, @track, and @wire. You cannot write a custom decorator ...


3

Found the answer in this Test Lightning Web Components documentation: To run all test cases in a Jest test file, click the play icon on the menu bar in the top right corner of the editor window. i.e. the green arrow:


3

You can't get into the compilation and delivery phases for LWC and therefore cannot apply your own obfuscation. It seems clear to me that you simply need to ensure that the client code (i.e. the LWC) never receives data that it shouldn't make available to the user by enforcing security concerns in your Apex - without doing this you would never pass a ...


3

Can you post the code? When iterating through a collection for rendering lists the unique id key is required. Sample below; <!-- helloForEach.html --> <template> <lightning-card title="HelloForEach" icon-name="custom:custom14"> <ul class="slds-m-around_medium"> <template for:each={contacts} for:item="...


3

Both methods will take (approximately) the same amount of time to load. In fact, the "three method" approach may even be faster than using just one method. Unlike Aura, LWC can leverage multiple threads (up to six) to fetch data from the server. All things being equal, this means that there will be some performance gain as threads can overlap each other, ...


3

You shouldn't be putting a plain button in a list for that purpose. Use an action menu, and specify the actions dynamically using getRowActions, as demonstrated in the docs. this.columns = [ // Other column data here { type: 'action', typeAttributes: { rowActions: this.getRowActions } }, ] ... getRowActions(row, doneCallback) { ...


3

The documentation contains clear examples of each. It helps to have a more complicated example to work with. If you only think in terms of A and B, the other models have no meaning (and thus, would seem pointless). You need at least 3 levels of nested components to see any meaning at all. parent-component <template> <div onnotify={...


3

For force:refreshView to work, you need to wait until your apex class returns; before this, the changes haven't been committed to the database yet. We use setCallback to accomplish this task. ({ updateCaseClose_helper: function(c, e, h) { var action = c.get("c.updateCheck"); action.setParams({ caseId: c.get("v.recordId") }); action.setCallback(...


3

Code must be written inside the body of the class; if you read carefully the error message indicates the same. Mostly constants can be declared before the class and after imports: import { LightningElement,track } from 'lwc'; export default class HelloWorld extends LightningElement { @track greeting ='World'; changeHandler(event) { this....


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