Hot answers tagged

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; ...


5

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 ...


5

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 { ...


5

setAttribute is for setting HTML attributes. For component attributes, use direct assignment: event.target.iconName='utility:check" If you use query selectors, just remember that if it's not an HTML component, use the direct assignment method.


4

You don't have to manually apply onclick event listener to <lightning-button>. But you can handle this or any other event in the container component. Just define the function handleNext: <!--container.html--> <template> <lightning-button class="slds-m-left_small nav-button" label="Next" ...


3

You should use onload event to fetch the record details. Also you cannot get the label and field API name directly - you need to get them separately. <lightning-record-view-form record-id={recordId} object-api-name="Account" onload={handleLoad}> <lightning-output-field ...


3

Stumbled across the answer as I was writing up the question. You can access an element's style properties ( ...drum roll... ) via its style property. return Promise.resolve() .then(() => { // This passes expect(layout.style.backgroundColor).toBe('yellow'); })


3

The usual way to address this is to hold the "read-only-ness" as tracked state (a change to it causes refresh of the UI) and to then conditionally render the input with or without the required read-only flag. app.html <template> <div class="slds-grid"> <div class="slds-col"> <lightning-radio-group name="...


3

[Wire service] always return object with properties data and error. Initially, it returns with both undefined and so if you dont put conditions then you will get errors as you cant access Name of undefined. You can implement as below: @wire(getCaseDetails, { caseId: '$recordId' }) consList({ data, error }) { if (data) { this.realCase = { ...data ...


2

This is not possible directly. You can check this answer Requote LWC is enforcing the shadow DOM style scoping, so you can't currently style other Elements outside your shadow tree. That being said, there is the on-going ::part and ::theme proposal that would allow components to safely expose some of their internals outside their shadow ...


2

Using record edit form small POC below: <template> <lightning-record-edit-form record-id="003XXXXXXXXXXXXXXX" object-api-name="Contact"> <lightning-messages> </lightning-messages> <span>Custom label value</span> <lightning-input-field field-name="Email" variant="label-hidden"&...


1

Just set the value to undefined like so: <template> <lightning-radio-group name="radioGroup" label="Radio Group" options={options} value={value} onchange={handleRadioChange} type="radio"></lightning-radio-group> &...


1

You can't access information you don't have access to. This is a security feature, and a core principle of Web Components in general (allowing components to protect their contents). I wrote a Playground example that demonstrates this. As I stated in my comment, you won't be able to access the shadow root of the the lightning namespace components and its ...


1

You can use the same attribute that you set in UI - fieldName and outerText for output value, but yes, probably getting value with load event handler is better import { LightningElement} from 'lwc'; export default class SampleRecordViewForm extends LightningElement { handleDetailsClick() { const outputFields = this.template.querySelectorAll('...


1

In the base component stubs Salesforce provides, checkValidity() is provided as an empty function that returns undefined for inputs and comboboxes. According to the theory of testing that Salesforce puts forward, you want to avoid any dependencies on the internals of the lightning-input and lightning-combobox base components, such as what their methods ...


1

It seems like you are trying to hide the button wherever SME_Document_Collection_Mode__c is Login via link. Modifying the columns will affect the whole table as each object in columns define the structure of whole column and not single cell in column. You can implement one more column at run time which will decide which class to append. Below is the sample: ...


1

Your theory is correct. When you use a component tag (whether custom or by LWC), it creates a Shadow DOM for its internal structure. This shadow DOM is not something that you can access or modify via DOM manipulation and this is by design. In your case, lightning-record-form is the tag and the label tags are part of its internal shadow DOM. You can read ...


1

I found a solution for my requirement here. I directly returned the this CSS line color:variableName from Apex class itself. I stored this value in a variable in JS, and then used that variable in HTML as inline CSS. It works perfectly.


1

You can use the JavaScript getters to compute the css value. But, as you have the elements showing in a loop, I would suggest you create a child component to show the details and have getters dynamic css. childComponent.html <template> <div class={totalCardsClass}> {consumer.Total_PAN_Cards__c} </div> </template> ...


1

What you are doing looks about right. However, since you are using "parameters.data" and want to track a change in parameters.data, you need to change the way you initialize the tracked value, like: @track parameters = { data: undefined }; By using the inline object definition in the initializer for this tracked property you direct the LWC compiler to ...


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