Questions tagged [lightning-web-components]

This tag is for questions related to JavaScript, CSS, or Markup when used in the Lightning Web Component (LWC) programming model, or for questions of interoperability between LWC and the original Aura-based lightning components.

1,646 questions with no upvoted or accepted answers
Filter by
Sorted by
Tagged with
3
votes
1answer
106 views

LWC optional chaining “array?.length' in expression causes output of ”[object Object]"

Context: In my LWC, I have an array that may not be defined, and I want to check its length. So I use the optional chaining arr?.length to not error if the array is undefined. I also want to default ...
3
votes
0answers
147 views

Call Screen Flow from LWC in Partner Community

I have some LWC buttons on a Partner Community and I want to call Screen Flow. My plan was to wrap the LWC in an Aura Component, send a customEvent from LWC, get the customEvent in the Aura Component ...
3
votes
0answers
106 views

Declaratively mocking a custom LWC in a single unit test

The approaches suggested of using jestconfig module mapper or the mocks folder work well if you have a single mock per component you are testing, but not if you have to build how your parent component ...
3
votes
1answer
90 views

How to replicate the functionality of delivered “File Engagement” lwc card?

In our org we have a need to programmatically replicate the functionality of delivered “File Engagement” component/card. Here is a snapshot from our live org, on a ContentDocument view page: Since ...
3
votes
0answers
40 views

Use native record save to fire LWC logic

I'm developing a custom UI using an LWC that will be displayed on a lightning record page. It allows the user to answer a few questions, determines whether a handful of fields are required based on ...
3
votes
0answers
217 views

Showing custom notification in Community | Theme : Build your own || Custom apex notifications

I want to show custom notification through apex in the community. Community is having custom theme(all lightning components). I know how to trigger apex custom notifications for the internal users. ...
3
votes
0answers
210 views

Launch In-App Guidance on demand from Aura/LWC

Is it possible to launch In-App guidance on-demand via Code? For example, check the following screenshot: Highlighted "help" buttons need to launch the In-App Guidance prompt, configured ...
3
votes
0answers
127 views

Debug Mode Broken in Winter 2021

With the advent of Winter 2021, Debug Mode appears to be broken in orgs. A page layout that renders fine for a user with Debug Mode unchecked receives the following error when Debug Mode is checked: &...
3
votes
1answer
332 views

Using third party javascript library in LWC without a static resource

My question is similar to this. It seems we need to upload the Javascript library as a static resource before we can use it in LWC. I've got a payment gateway JS library which I need to use via CDN ...
3
votes
0answers
70 views

LeaftLet map is not loading in LWC

I have a simple leaflet map in LWC, libraries are loading successfully, however, the map is not rendering. Am I missing anything wrong? <template> <div class="map-root" lwc:dom=&...
3
votes
0answers
810 views

What is fqn attribute in LightningComponentBundle?

What is the fqn attribute in the LightningComponentBundle element? I can't find it documented anywhere. Is this the unique identifier by which Salesforce manages the element? Would that be the ...
3
votes
1answer
502 views

lightning-record-edit-form: display text field as a custom picklist?

I've created a custom object where the user manually enters a locale value (ex: en_US, es). Instead of letting the user manually enter a locale, I'd like to provide the user with a combo box of valid ...
3
votes
0answers
112 views

sfdx force:source:push error Push Failed. [XML parse error]

I created lwc for embbeding in Community and push it to a scratch org by using the command "sfdx force:source:push" but I got the error: Error parsing file: LWC Metadata Xml Parser: ParseError at [...
3
votes
0answers
291 views

Prevent Visual Flow Screen from Clearing When Clicking Next

I have a visual flow screen with a mix of out-of-the-box and custom Lightning Web Components on it. Some of the OOTB components are marked required and one of the LWCs has a validate() method that ...
3
votes
0answers
112 views

LWC-base-components-recipes issue, Summer 20' release, assert.js

I am using textarea base component, this had to go with lots of other dependencies to my org. Unfortunately after summer 20' release I had to comment out code in assert.js today: export function ...
3
votes
1answer
64 views

LWC -Get PicklistOptions based on the RecordTypes

Let's Consider I have One Picklist Field, based on the RecordType the picklist options are there. I am using lightning/uiObjectInfoApi to get ObjectInfo in that I will get a list of RecordTypeInfos -...
3
votes
0answers
2k views

LWC: Unable to fetch custom field through the schema

I have a LWC component in which I am trying to pull the metadata from the schema so I can use updateRecord. I've done this before for a different custom object(and it worked) but this time I am ...
3
votes
3answers
774 views

LWC Navigation Mixin not replacing current page?

When i try to navigate to a webpage it's loading in a new page. I want to replace current page url with the navigation URL. It' not working with below code. can anyone tell how to replace current page?...
3
votes
0answers
783 views

LWC - Jest test for Apex calls in wired function

We have a class that calls the getRecord uiAPI and then using the result makes an APEX call to get more details from another custom object. import { LightningElement, api, wire, track } from 'lwc'; ...
3
votes
0answers
459 views

Lighting Data Table with large data set lagging on chrome browser

So I have this requirement to show folder and report as a hierarchy in LWC (used lightning tree for the same with custom icons for folders and reports.) and on click of any report, we fetch the report ...
3
votes
0answers
1k views

How to Display Reports using LWC?

How can I display reports using Lightninig Web Components?
3
votes
0answers
794 views

Print only table data in Lightning Web Component(lwc)

When I click on the button I need to print the only table data. Ex: this.template.querySelector('.tablecls'); I tried the below options Option 1 window.print(); The above option is printing the ...
3
votes
1answer
283 views

Custom LWC Component for Offline Support

I am trying to implement a new embedded service deployment and I want the Offline Support just to be some text with a hyperlink to our contact us page. I don't see an option to replace the offline ...
3
votes
0answers
2k views

Setting a max height for datatable in LWC?

I know when you specify a div with a height around your datatable you get a nice scrollable table: <div style="height: 300px:"> <lightning-datatable various-params></lightning-...
3
votes
0answers
202 views

LWC datatable multiple row actions open at same time

Experiencing this issue above. The error is when I click on many row actions it won't close the previous one and then you will have many open. I'm trying to find a solution to close all and open the ...
3
votes
0answers
575 views

How to set Language for entire LWC component like visualforce page

In visualforce page we can set the language using language attribute like this. <apex:page id="myr_Page" language="{!userDTO.userlanguage}" > I know that we can use the below way to set the ...
3
votes
1answer
201 views

Styling an Embedded LWC on Flow screen

Is it possible to match the width of the standard screen elements that flow provides out of the box (like "Date" & "Type")? My custom LWC (Products) seems to be taking up 100% of the real estate ...
3
votes
0answers
392 views

WebSockets and Lightning Web Component

I'm attempting to use the JsSIP library to build a softphone with LWC. I've created the CSP records for my websocket server, but I still can't connect for some reason. Every time it attempts to ...
3
votes
0answers
293 views

Pass data to web component (angular 6) inside LWC (Lightning Web Component)

I have Angular 8 app defined as web component and I have Lightning Web Component (LWC) app. Inside LWC I am trying to pass data into web component through the property of DOM element like this....
3
votes
0answers
349 views

Highlight modified fields in LWC

I have a complex UI that renders multiple <lightning-input> fields. When the user edits these fields, I store the originalValue (usually passed through an @api property), the newValue and the ...
3
votes
2answers
1k views

Salesforce: Drag & Drop not working in lightning web components or drop events are not triggering

I have a Lightning web component to drag one div into other dropzones (div). But the ondrop & ondragover events are not firing. Here is my code <template> <div class="draggable" ...
3
votes
0answers
534 views

Modal being rendered in wrong position on lightning web component's mobile page

What I want I'm trying to show a modal to warn the user when the service he is trying to reach is offline. This salesforce page is accessed by Salesforce1 through a tablet. How I did I've created a ...
3
votes
2answers
1k views

How to show custom error message in lightning-file-upload in lightning web component

I need to show a custom error message in lightning-file-upload when we tried to upload the unacceptable format of the file. <lightning-file-upload label="Attach receipt" ...
3
votes
1answer
699 views

Having Trouble Setting Up ESLint on IntelliJ IDEA (LWC)

I used npm init to create a package.json file on the root of my project, I then installed locally: npm install eslint babel-eslint @lwc/eslint-plugin-lwc --save-dev npm install eslint @salesforce/...
3
votes
0answers
1k views

Get check if a LWC is in a community

I am building a LWC that uses the pageReference that is not available in Communities. Is there a way to check what context you are in from the LWC, whether it's in a community, a record page, or ...
3
votes
2answers
326 views

SFDX CLI initial deployment failure: chicken and egg?

Using the latest sfdx CLI version (sfdx-cli/7.22.0-de5c6ecff8 win32-x64 node-v10.15.3) I am now facing a problem with initial deployment (force:source:push) to a scratch org. Scenario: We have an ...
3
votes
2answers
657 views

Open LWC as a full page without salesforce header

I have a button on Lightning Record page. On click i am redirecting to a LWC. Is there anyway where i can redirect or open the LWC in a full screen page. As of now it is opening with salesforce main ...
3
votes
0answers
427 views

Page break CSS not working in lightning LWC Salesforce

I am trying to do page break in LWC. But it is not working. Below is the code . How to do page break in lightning while printing the page to pdf. <template> <div> <lightning-...
3
votes
1answer
3k views

How can I test the click of a button that calls an Apex method, and makes the component show a toast?

The component itself, when loaded, queries some data from the database. Then, depending on what it finds, loads the specific template. One of those has a button, which will call the server again, and ...
3
votes
1answer
2k views

Lightning Web Components file preview does not work on mobile version

I created a component in LWC which uses standard Salesforce file preview. It is perfectly working on desktop but nothing happens when I press file name on mobile version. My html code is below: &...
3
votes
1answer
1k views

Is there a way to use a private custom lwc Component (isExposed=false) in a flexipage that will be deployed in a managed package?

We are an ISV partner and are working on a managed package that we will release soon. We are mostly using LWC components and found that if we try to include one of our custom LWC component into a ...
3
votes
0answers
103 views

Able to Modilfy @API in compone.js in Lightning Web Component

As per documentation at https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.js_props_public which states A component that declares a public property can set only its ...
3
votes
1answer
1k views

Lightning Web Component displaying cached source from previous deploy

During development of Lightning Web Components I have seen on multiple occasions an issue where the compiled source in the browser does not match the source deployed to the org, but instead matches an ...
2
votes
0answers
23 views

Why is saveOptions member of UI API Record Layout response always empty?

I am retrieving Layout information via UI API. I have tried this both with the lightning UiApi adapter: import { getRecordUi } from 'lightning/uiRecordApi'; @wire(getRecordUi, {recordIds: "$...
2
votes
0answers
37 views

How to combine lightning-quick-action-panel and slds-modal_large?

I want to pop-up a modal LWC using a quick action, without any Aura components. This should be possible since Summer'21. I am currently using an Aura component that does the pop-up and at the same ...
2
votes
1answer
53 views

Markup to present a spinner in a lightning-quick-action-panel quick action?

Now that quick actions can be created using LWCs, the lightning-quick-action-panel component makes consistent styling easy: <template> <lightning-quick-action-panel header={headerText}>...
2
votes
0answers
36 views

tooltip / lightning helptext appears in wrong location, misaligned

I have a fairly simple template: <template> <div> Some text here <lightning-helptext content="I am incorrectly aligned"></lightning-helptext> &...
2
votes
0answers
31 views

LWC SecureWindow's window.scrollX and window.scrollY returning 0 regardless of scroll amount?

I'm noticing that window.scrollX and window.scrollY are returning 0 from the Locker Service's SecureWindow wrapper regardless of how far the window is scrolled in either direction. Not only does it ...
2
votes
0answers
43 views

`lightning-formatted-date-time` 24-hour time bug

How do I display a time in 24-hour format? The documentation suggests hour12="false" should do it, but this isn't working, as detailed below. foo.js: import { LightningElement } from "...
2
votes
0answers
28 views

Return Record Id of newly created Record After Using NavigationMixIn.Navigate

I have created a button in a custom LWC that when clicked, the below js runs. This opens the standard salesforce new record create modal and the user can then enter information to create a new record. ...

1
2
3 4 5
33