New answers tagged lightning-web-components
1
I got it! I had used the lightning card which was adding a border. After removing it, the outline is gone.
0
The issue is that you can't have Capital Letters in event name. Change closeQuickAction to either closequickaction or close_quick_action and it should work, sometimes LWC doesn't show it as error, but it'll never work with capital letters
0
Try event.detail.value instead event.target.value
0
Below code illustrate how to redirect on VFPage from LWC
import { LightningElement,api,track,wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
export default class redirectToVFPage extends NavigationMixin(LightningElement)
{
redirectToVFPage(event)
{
const urlWithVFandParameter = '/apex/YourVFPageName?pram=dummydata';
...
0
In this approach, we hide default buttons of the record form and create our own
Copy paste this code it's working fine
we have to override CSS :
Create a CSS file and add in static resource
File Content :
.recordForm .slds-align_absolute-center{
display:none;
}
Import That static resource file in your component
import { loadStyle } from 'lightning/...
0
As per the standard documentation, there should not be any way to fire change event without the necessary permission.
This is how it works:
For the standard /data/ChangeEvents channel and custom channels, user permissions are enforced on event delivery. Users can subscribe to the /data/ChangeEvents channel or to any custom channel regardless of their entity ...
2
I think the most likely source of error is your capitalization in the querySelector.
You have this.template.querySelector("c-transaction-Invoice-Payment").handlePayments();
But I suspect it's more likely to be:
this.template.querySelector("c-transaction-invoice-payment").handlePayments();
0
Your @AuraEnabled method should have been List<Map<Integer,Object>>
You had it as List<Map<String,Object>>
Here is my working code passing the below object literal to the server - it works with no probs.
objArray = [{
0:{Agent_Mobile_number: "999999999999",
Call_Date: "2021-05-08",
Call_Remarks: &...
0
I have also been in this situation and finally I am able to go past this situation without using Aura. We don't have any OOB LWC events that listen to standard show toast events/refresh events but I have used a platform event that will get fired on record update/create and we can subscribe to that event in our LWC component and refresh the lightning-...
0
Finally I am able to go past this situation. We don't have any OOB LWC events that listen to standard show toast events but I have used a platform event that will get fired on record update/create and we can subscribe to that event in our LWC component and refresh the lightning-datatable once the save is commited and successful. To know more on how to do ...
4
I had experienced the same a while back, and learned that this is a limitation with locker service as mentioned by @sfdcfox.
You can find the explanation is documented as well:
Arrays Proxied When Passed to Child Components
A page that’s using a component that passes a large array of objects through layers of child components can become unresponsive
...
4
Use Array methods instead, for this causes the Locker Service security filter method to apply only once. Note that this is a Locker Service problem, not a LWC problem. If you use LWC OSS, you'll find your code would perform perfectly well (as I'll demonstrate below).
@api stuff;
handleClick() {
let newItems = this.stuff.filter(item => (item.prop3 % 2 =...
0
I built and tested my own version that I have verified to work (on Accounts)
Child HTML:
<template>
<lightning-button title="refresh records" icon-name="utility:refresh" icon-position="center" onclick={handleRefresh} class="slds-m-left_x-small"></lightning-button>
<div class="slds-grid ...
2
Strictly speaking, no, but you could upload files to a primary record, and then use the uploadfinished event to get a list of files, including the documentId, and then create a corresponding list of ContentDocumentLink elements to link the files to any other contacts you'd like as a second step.
4
If you need to customize the functionality, look and feel of the form, you are better off using the lightning-record-edit-form. You will have greater flexibility as to ordering the fields and placing, adding/removing buttons.
0
No, you cannot show the standard change record type window in LWC.
If you want then you can create a similar custom UI in LWC by querying the Lead record types in Apex and then pass into the .js class in order make the LWC dynamic.
0
By the way, my bad, I am using this component embedded in a VF page through an aura wrapper app so what I was trying to do wouldn't work. I will make it work with slds-notify instead.
0
Include the field LastViewedDate in the SOQL. This field is blank on creation and stamped with the date when the record is viewd the first time. And upon subsequent record views updated with the most recent view date.
List<Orders__c> ModifiedOrder = [Select ID, LastViewedDate , LastModifiedDate from Orders__c where ID = :ids];
0
<lightning-checkbox-group class="checkboxClass"
name="Checkbox Group"
label="Checkbox Group"
options={options}
value={value}
onchange={handleChange}></lightning-checkbox-...
0
long story short,
On Vote object, we have lookup relation to Knowledge_ka object,
On Both Knowledge_kav, Knowledge_ka objects we have articleNumber field. So, to find the vote count,
select id,ArticleNumber from Knowledge__kav where id='Knowledge__kav_Record_Id'
select id,ArticleNumber from Knowledge__ka where ArticleNumber='...
0
<lightning-checkbox-group class="checkboxClass"
name="Checkbox Group"
label="Checkbox Group"
options={options}
value={value}
onchange={handleChange}></lightning-checkbox-...
0
Thx for all the great comments and especially @sfdcfox for linking me to How can i use var() in css in LWC?, it was the hint I needed.
2 weeks and dozen distractions later... something like this if you want to keep the default values in CSS.
Apex
@AuraEnabled(cacheable=true)
public static Calendar__c getSetting(){
return Calendar__c.getInstance();
}
JS
@...
3
You will need to write your own checkbox group. I took the SLDS core checkbox group and added a few styles to cause it to span 4 wide before wrapping around (feel free to fix this to suit your needs).
The checkbox code is as follows:
<template>
<fieldset class="slds-form-element">
<legend class="slds-form-element__legend ...
2
You cannot use JSX in an LWC component. You can however, develop an application in react that is completely independent from LWC to achieve your needs and/or use that developed application within an lwc, given that you upload it as a static resource and load it in your LWC. However, you wont be able to use JSX from within your lwc component, as stated before....
1
The code for yesButton() contains a number of mistakes.
var Return_Shipment__c = component.get("v.Return_Shipment__c");
This component attribute is never populated and has no default value, so it is always null and following code cannot work.
Return_Shipment__c.Final_Approved__c == false;
== is a comparison (and in JavaScript, you usually ...
1
Any component a parent can get direct access to, it can communicate with, and a child can communicate with its direct parent and, optionally, other elements directly in between itself and its direct parent (using { bubbles: true, composed: false }). You can read more in Configure Event Propagation.
For anything else, including siblings, cousins, etc, you ...
1
You have to use the canvas method of the JsBarcode library as described in the doc. I have tried with a simple code as below and was able to generate the Barcode.
barcodeGenerator.html
<template>
<lightning-card title="Generate Barcode">
<lightning-layout>
<div class="slds-p-around_small" >
...
1
I wouldn't know how to accomplish this programmatically, but it is possible with a few clicks.
Use custom Global Actions to call a Lightning Component to create a new record without a relationship to another record:
Use a Visualforce page, Lightning component, or a canvas app to create global custom actions for tasks that don’t require users to use records ...
4
As the error states:
Lightning Web Components quick actions are not supported for this entity (emphasis mine)
That means that you can use LWCs as Quick Actions, but not on Work Orders. The documentation also says:
NOTE LWC quick actions are currently supported only on record pages.
LWCs only recently gained any Quick Action support, and it will likely ...
2
@api variables are set before connectedCallback() (and are thus available in connectedCallback(), whilst @wire methods don't get a chance to fire until after connectedCallback() is done executing (or, effectively, the first render() call finishes executing). This is implicitly guaranteed in the LWC Component Lifecycle and @wire documentation. It's not really ...
1
If you set up your @wire arguments to be reactive, then it doesn't matter when the @api attributes get set, they will flow through. Understand the Wire Service:
We call the wire service reactive in part because it supports reactive variables, which are prefixed with $. If a reactive variable changes, the wire service provisions new data. We say “provisions” ...
0
first, it would be important to know what type your getToken method is returning from apex. (String, Map<String,Object>, List, etc, etc...)
this will allow you to understand what the client receives, and how to handle the response.
based on the above, you might, or might not need to parse the string in order to convert it to an object. if you are ...
0
I have checked your code and I found some minor mistakes in your code. That's why you are not getting the data. I have modified the code for you.
------------------------HTML-----------------------------------
<template>
<div class="slds-form-element">
<label class="slds-form-element__label">
<template if:...
0
the documentation for the lightning-checkbox-group demonstrates exactly how to do so, code snippet included as well as usage notes. Since you have not shared your template or JS file, it's hard to tell what you are doing wrong.
to get checked values onchange, you can use:
e.detail.value
this will create an array of selecte values which you can use to do ...
1
I tried like below, and it worked fine for me
jsPdfInitialized = false;
renderedCallback(){
console.log('renderedCallback start');
if (this.jsPdfInitialized) {
return;
}
this.jsPdfInitialized = true;
loadScript(this, jsPDFScript)
.then(() => {
console.log('then');
...
-1
Javier, thanks for your pointers.
I finally got it to work in another context.
the reassignment worked like this..
this.displayResults = [...this.displayResults, this.searchResult];
The component gets rerendered and captures the new elements.
1
As per the documentation:
Objects passed to a component are read-only. To mutate the data, a component should make a shallow copy of the objects it wants to mutate.
This, in part, makes handling shared caching of the responses easier and more efficient within the LWC framework. Recall that the cached values can in principle be shared by many LWC instances ...
1
Whatever order is specified in the SOSL will be the returned types in the same order. If you want to check the sobjectType, you can check the item in each list:
this.searchResults.push({Name: resultItem.Name, RecType: resultItem.sobjectType, RecUrl: baseUrl + resultItem.Id });
Note that you really should be using Array.prototype.map instead of Array....
0
SOLVED!
In the following Javascript section...
const casesColumns = [
{label: 'Case', fieldname: 'FSL_In_Jeopardy_Reason__c', type: 'text'},
{label: 'Owner', fieldname: 'OwnerName', type: 'text'},
{label: 'Call Id', fieldname: 'Call_Id__c', type: 'text'}
];
...fieldname should be changed to fieldName, with a capital N.
2
If you need recordId to be set externally - and internally (using @api) - and I'm not sure you do, then you would generally use getter/setter combo and a private internal var. Eg:
_recordId
@api
get recordId() {
return this._recordId;
}
set recordId(value) {
this._recordId = value;
}
You would then use this._recordId for all other references to recordId....
0
After some inspiration from this answer, I found that the ProcessInstanceHistory object can be accessed via the StepsAndWorkItems relationship on ProcessInstance.
I did need to assume the first step in the process is named "Approval Request Submitted" by default since that entry seems to have no ProcessNode.Name, however.
My Apex method ended up ...
0
val.Reason__c.controllerValues[k] should have been v.Reason__c.controllerValues[val]. Two mistakes in a row (plus a stray )) means you were simply getting the wrong property from the wrong object. When programming, you should avoid similar variables (e.g. v/val/k/key). This is almost certainly the problem.
let v = {"Reason__c": {
"...
1
From the lightning-record-edit-form documentation:
When you submit the form, the component fires the custom events in
this order.
click if you use the onclick event handler on the button
submit
success or error
You can edit the field values programmatically using
the onsubmit event handler or selectively handle any of the custom
events. See Overriding ...
0
In your printJobsContainer.js file it should be downloadPDF() not just downloadPDF.
And for just downloading the pdf file you don't need to call Apex Controller, you can simply change your js function like
generatePdf(event){
var url = '/apex/envelopes';
window.open(url);
}
and this will download your pdf.
0
You can use download.js to implement this functionality. The main idea is to convert the PDF into Base64 encoded String and pass it to the download method of download.js. Which will show the file download window upon the same screen.
I tried to modify your code as below and it is working.
printJobsContainer.html
<template>
<lightning-card title=&...
0
Not my code, forget where I got it from...
Controller:
titleColor;
isFirstRender;
renderedCallback() {
if (!this.isFirstRender) {
return;
}
this.isFirstRender = false;
var bodyStyles = document.body.style;
bodyStyles.setProperty('--titleColor', this.titleColor);
}
CSS:
.control-...
1
Learning Resources
You should review the LWC documentation, JS, and Trailhead, as others have already pointed out multiple issues with your code:
Build LWC Trail in Trailhead
LWC Developer Guide
Single Selection LWC Lightning Datatable
You'll want to filter out the newly selected rows of the table using a previous selected variable. In order to choose the ...
1
Through trial and error I found a config that seems to work, basically upgrading eslint-plugin-lwc and eslint-config-lwc to 1.0.0 (and downgrading eslint-plugin-jest to avoid a dependency version issue:
"devDependencies": {
"@babel/core": "^7.13.16",
"@babel/eslint-parser": "^7.13.14",
"@...
1
Your problem is that id values in Lightning are modified to be globally unique, so it can be challenging to get the Id fragment correct. It is true that SVGs are restricted, but this is mostly just a mismatched ID problem. I don't have a specific solution to this problem, as only ID values are supported, and LWC "manages" them for us, making it ...
2
Your code has multiple issues. You're creating multiple lightning-data-tables, but then you only have a single preSelectedRows variable. You're assigning your slice to a local variable, not a variable bound to the table. Your slice method should use two parameters to get just the first entry (0,1).
I haven't built your entire thing of code, but the ...
Top 50 recent answers are included
