Hot answers tagged

16

Having played a little with lightning web component during pilot, I think yes sooner or later everyone will be using lightning web components to build their apps. To begin with currently what i know is it lacks support for communities or flows and many other areas (Official docs are yet to be released so we will come more when docs go out on 17th Dec). ...


15

The documentation covers this explicitly: To compute a value for a property, use a JavaScript getter. For example, to convert the name to all uppercase letters, use a getter function in the JavaScript class, not an expression in the template. Getters are much more powerful than expressions because they’re JavaScript functions. Getters also enable ...


10

My take on this. I have only been playing around with LWC since it was officially announced yesterday. I am not sure if a broader audience would have a detailed hands-on in LWC unless they were part of Pilot. With LWC announced only yesterday, it still has a long way to go before it can be widely adapted. Going through the documentation this morning, ...


10

Badge is relatively very simple component. However, the main difference even for simple component is that lightning base components are loaded as custom components and you cannot reach into the DOM for customisation. For example, in lightning:badge, you cannot have hyperlink, but using raw HTML, you can have hyperlink as everything is in your hands. Sample: ...


9

Probably not, as there's no mention of this fix being "versioned" (meaning, dependent on the API version). Unfortunately, this is a case of using the wrong workaround for a Salesforce bug. The value should have been converted to a String in the JS code by the developer, or used JSON encoding, etc. Note that this bug is already being deployed, so it's too ...


9

LWC follows the "web standards breakthroughs of the last five years", which means it resembles coding similar to React and other languages that have moved on to ES6+. There is a learning curve, as things have changed (for the better!). Having Aura familiarity isn't a bad thing, though. While things have changed, they've done so in a mostly predictable ...


9

A "helper" class would be a utility component. For example, you can write the following code: import { ShowToastEvent } from 'lightning/platformShowToastEvent'; // This is the testUtil component function showToast(inpval) { const event = new ShowToastEvent({ title: 'Get Help', message: 'Input val changed.'+ inpval, }); this....


8

Turns out the component had a css file that only contained '/**/'. I deleted the file and all is working again.


7

It's allowed because a Boolean is already a Boolean; the syntax for an if statement reads if(condition), where condition is a Boolean value. It's considered a best practice to always initialize your variables (e.g. read Say No To Null). In the majority of cases, nulls are handled automatically, but developers should take care of situations where it may have ...


7

Yes, Aura components will work with LWC. In fact, Salesforce has already internally been using LWC for a year now! All those standard components you've used, like lightning:button, are actually LWC components, and you didn't even notice. Aura will be used for the foreseeable future, as it is still the core base of Lightning Components; it's only the higher-...


6

I had this issue myself today as well. In my case, I had a Quick Action Lightning Aura Component which enveloped a Lightning Web Component (because there is currently no way of using a Lightning Web Component as a Quick Action).. What I did is set up my Aura Component to catch 'close' events: <!-- aura/auraComponent/auraComponent.cmp --> <aura:...


6

For reasons I don't understand, you have to invoke the setMessage method to output a custom message on the client-side: String m = 'My cusom msg here'; AuraHandledException e = new AuraHandledException(m); e.setMessage(m); throw e;


6

@AuraEnabled methods are static for the same reason that Visualforce remoting methods are static: because those architectures don't maintain any state on the server. State would be represented as an object instance to which a member function is bound. In both paradigms - Aura and Visualforce remoting -, state is kept on the client in JavaScript. Since ...


5

The {! pair starts the expression (and } terminates the expression) rather than the ! character negating the expression. So use e.g.: <aura:if isTrue="{! notequals(ch.sumchans__StandalonePrice__c, 0) }"> or: <aura:if isTrue="{! !equals(ch.sumchans__StandalonePrice__c, 0) }">


5

Yes you should be able to do this by wrapping up the LWC base component in a custom LWC Component. You can use custom LWC component in an Aura Component. Use this link to understand how to use custom LWC in aura component: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.interop_aura_composition This way you should be able to use ...


5

To remove lightning:datatable header you can apply attribute hideTableHeader For instance: <lightning:datatable keyField="id" hideTableHeader="true" />


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

Using the component makes the code marginally more readable, and you get "free upgrades" if SLDS ever changes its specification of a badge. You're always free to use whichever you like. I would personally use the component as a matter of preference, since it is more consistent to read component code than raw HTML, especially in a larger component.


4

To add on top of @sfdcfox. You got your answer in the blog itself. Coexistence and interoperability: With the addition of Lightning Web Components, there are now two ways(but not the only way!) to build Lightning components: Aura Components, leveraging its own component model, templates, and modular development programming model. Lightning Web Components, ...


4

I was at a LWC presentation last night, and I think this recipe might get you on the right track: https://github.com/trailheadapps/easy-spaces-lwc/blob/develop/es-space-mgmt/main/default/lwc/customerTile/customerTile.js The parent List component creates child tiles - notice how the getter references the object and customer object that are passed in to set ...


4

On top of others answers salesforce had a good documentation in the developer guide about migration too. The programming model for Lightning Web Components is fundamentally different than the model for Aura components. Migrating a component is not a line-by-line conversion, and it's a good opportunity to revisit your component's design. Before you migrate ...


4

You can not do it as of now. The developer guide clearly mentions it. Migrate Interfaces Implementing an Aura interface enables you to receive context data or to surface your custom component in different contexts, such as in the Lightning App Builder or Community Builder. To receive context data in a Lightning web component, import the ...


4

The equivalent of using aura:id and component.find() in LWC is to use a standard DOM query selector like this: const element = this.template.querySelector('selector'); element.doSomething(); We do have a restrictions to that standard behavior: you cannot use the id attribute as a selector as these are autogenerated by the framework. You are free to use any ...


4

I have found the LWC docs to offload some of this to the MDN docs, so bringing this one layer higher (in the actual LWC docs would be nice) would have made it easier for us. In scenarios where there are two components of the same type on your template, the equivalent to aura:id is to use a data-id tag and select it like this: this.template.querySelector('[...


4

There is a yet undocumented state property that helps here: this[NavigationMixin.Navigate]({ type: 'standard__objectPage', attributes: { objectApiName: this.type, actionName: 'new' }, state: { nooverride: '1' } });


4

You can you dataset attribute to get the current clicked div. <div data-id="thisDiv" aura:id="thisDiv">Click Me!</div> clickHandler : function(component, event, helper) { var id = event.currentTarget.dataset.id; //it will return thisDiv var getTargetedButton = component.find(id); //it will return the source button }


4

As another possible issue, you have a naming convention error. LWC automatically forces the LWC Class name to Pascal Case, but you have a dueling format right now: LWC class of HelloWorld <- this is Pascal Case LWC JS of helloworld.js <- This is not, it should be helloWorld, capital W. Template of helloworld.html (embedded in aura) I just tried this ...


4

The issue was where I was creating the event from import { LightningElement } from 'lwc'; export default class HelloWorld extends LightningElement { constructor(){ super() window.addEventListener("message", this.fireEvent, false, { once: true }); } } Should be... import { LightningElement } from 'lwc'; export ...


4

A class can implement a static, Aura enabled, method, and still implement the Schedulable interface. But best practice is to create a controller with your @AuraEnabled method that calls a class that implements the Schedulable interface. global class MySchedulableController implements Schedulable { // runs a scheduled job at midnight Sept. 3rd. 2022 ...


4

You can use below method where you can pass objectName and comma separated picklist fields (even single field is fine) to get map of object and its picklist values of value and label: @AuraEnabled public static Map<String, Map<String,String>> getPicklistValues(String objectName, String picklistFields) { if(string.isNotBlank(picklistFields))...


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