New answers tagged lightning-web-components
0
Under Session Settings for Whitelisted Domains for Visualforce Inline Frames make sure you add the org's base domain (not the visualforce domain). That is the domain that is whitelisted to present the Visualforce iframe.
Example: https://yourdomainname.lightning.force.com
0
Force refresh view in LWC
I think the top upvoted answer in that question is really relevant here. It doesn't seem there's a quick, simple way to force a refresh of the overall page/view when there's a lwc on it (or being called). The answer in that question esssentailly suggest wrapping your lwc in an aura component, creating a custom event you can send ...
2
Salesforce does not provide pubsub module yet out of box. So you will have to create the pubsub lwc component in your project and deploy it along .
The pubsub component can be downloaded from here
0
You can use this post.
HTML:
<lightning-button label="Get Browser" onclick={printBrowser}></lightning-button>
<div lwc:dom="manual" data-print></div>
JS:
printBrowser() {
navigator.sayswho = (function() {
var ua = navigator.userAgent,
tem,
M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?...
0
I opened a support case this morning and discussed the problem with them. A little while later the problem seems to have been fixed.
Maybe it had something to do with the support case but yesterday, I did post the problem on Github and (obviously) this question on Stack Exchange. Somebody must have been listening.
7
Only Aura components are exposed for querying by SOQL but LWC components are not exposed for querying (But can query from tooling API - shown in answer by @OlehBerehovskyi). However, you find both Aura and LWC in Setup > Quick find > Lightning Components.
Notice the Type column which gives info of Aura/LWC. Also you can get CreatedBy, CreatedDate and ...
10
To get CreatedBy, CreatedDate, LastModifiedDate fields values of your LWC bundle you can perform Tooling API request of the LightningComponentBundle
Also, you can use your Developer Console, and perform SOQL query with Tooling API:
SELECT Id, DeveloperName, CreatedBy.Name, CreatedDate, LastModifiedDate
FROM LightningComponentBundle
/* Optional filters */
1
I had the same issue, and resolved it by doing the below, try this:
this.dispatchEvent(
new ShowToastEvent({
title: 'Get Help',
message: 'Salesforce documentation is available in the app.',
variant: 'warning',
mode: 'pester'
})
);
0
For the time being, I replaced the input-field with a input-rich-text and handled the loading & saving of the data separate from the record-edit-form saving the rest of my data.
0
Another way to get the label, iterate with options and match the value to find the label.
statusOptions = [
{value: 'new', label: 'New'},
{value: 'in-progress', label: 'In Progress'},
{value: 'finished', label: 'Finished'}
];
handleChange(event) {
const selectedOption = event.detail.value;
var ...
3
You do not have direct way of getting label (as you get only selected value in event.detail). You need to depend on all options (simply get it from event.target) and filter based on selected value. You can use below:
JS:
@track selectedLabel;
get options() {
return [
{ label: 'New', value: 'new' },
{ label: 'In Progress', value: '...
6
async/await syntax is fully supported by LWC. However, as it was introduced in ES8 in old browsers, this syntax is transpiled down to ES5, which can cause performance issues if the code is executed many times.
the await keyword is only valid inside async functions
In your case to make your code deployable with using async/await syntax you can use 3 ...
3
You should download those files and save them in a zip file and upload in Static resources.
Then you should use import { loadStyle, loadScript } to load the resources in LWC component. PFB example:
import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript, loadStyle } from 'lightning/...
2
Create another apex method getProducts which accepts pricebookId as parameter and returns list of products. Now in LWC js, implement wire service on that apex method which depends on dynamic property $pricebookId. As this is dynamic property, this wired service is invoked again when the property changes and not undefined.
pricebookChange(event) {
...
3
You could embed your LWC in a Visualforcepage, and create a VF action instead. For doing so you'd have to embed your LWC in an aura:app —instead of an aura:component.
Here's a pseudo-code —you may need to adjust it:
The Aura app (myAuraApp)
<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="c:myLWC"/> <!--...
4
You can check this documentation Set Properties on Child Components.
NOTE Property names in JavaScript are in camel case while HTML
attribute names are in kebab case (dash-separated) to match HTML
standards. In todoApp.html, the item-name attribute in markup maps to
the itemName JavaScript property of c-todo-item.
Your code should be like:
<c-...
0
If you need to set something specific to each loop (iteration), you need to set the condition on loop variable (in each object).
HTML:
<lightning-button label="Toggle Type" onclick={toggleType}></lightning-button>
<lightning-record-edit-form object-api-name="Account">
<template for:each={fields} for:item="fld">
...
0
Not invalidating the cache ended up being a known bug per salesforce support request. I had to fall back to Apex. My code looks like:
import LookupIt from
'@salesforce/apex/CaseLookupController.LookupIt';
import DeleteIt from
'@salesforce/apex/CaseLookupController.DeleteIt';
import StoreIt from
'@salesforce/apex/CaseLookupController.StoreIt';
Then for ...
0
I ended up writing custom Apex and stripping out the submit button.
3
HTML5 Video tag requires specific format and youtube videos are not mp4 format always. Hence youtube never recommends to use this tag.They have built api to support embedding youtube videos.
Salesforce dev evangelist has already built one here using embed api and you can adopt the approach.
If you are interested in reading why using video tags may not be ...
2
The command is lwc-create-app.
you have create first not lwc.
Should work if you change the order
2
Have a read of this article on SFDC Monkey that covers this exact issue! (I've used this and it works great)
http://sfdcmonkey.com/2018/05/05/multiline-toast-message-lightning-component/
0
LWCs are not supported in Flows. You will need to wrap it within an aura component if you want to use LWCs within a Flow.
Refer to the documentation for more details on unsupported experience and tools.
3
No. As of today its not available. You can keep checking the documentation Base Components: Aura Vs Lightning Web Components to know:
The table lists usage differences between Aura base components and
their Lightning web component counterparts.
3
Added based on comments
You are actually getting data but if you are logging directly, it returns proxy object in which the data will not be accessible directly, so you need to log the stringified data.
@wire(getActiveMaterials)
wiredpcMaterials({ error, data }) {
if (data) {
this.aidata = data;
// eslint-disable-next-line no-console
...
4
You would normally upload a ZIP file, and use it in the manner described in the docs:
import TRAILHEAD_CHARACTERS from '@salesforce/resourceUrl/trailhead_characters';
// ...
einsteinUrl = TRAILHEAD_CHARACTERS + '/images/einstein.png';
Loading a dynamic resource name directly is not supported; this is because the compiler will verify the resource name ...
2
It is because toast is not available for Mobile App
If you check the documentation, it says that toast is just available for Lightning Experience (one container) only
Comparatively, when you check the docs of pill, it is available for all containers - Lightning Experience, Lightning Communities, Salesforce Mobile App, Standalone Lightning App
0
My guess would be that the documentation is probably missing the "required" tag on the property attribute, as most PageReference types have a required actionName.
PageReference Types
3
Wooooow, I finally figured it out. Changing
{
type: 'comm__namedPage',
attributes: {
pageName: yourPageName
}
}
to
{
type: 'comm__namedPage',
attributes: {
pageName: yourPageName,
actionName: 'view'
}
}
fixed it. How? No idea. Did I spend hours on this and am now going to go weep silently in a corner? Yes.
2
To make the components available in flow screens, edit the lightning web component configuration file to include a target of lightning_FlowScreen. For example:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>45.0</apiVersion>
<isExposed>true</...
1
Note that a third party library function gets attached to a window object in salesforce when referenced from static resource.
The key is notice how i use window variable.
const AWS = window.AWS;
The below should work
import { LightningElement, track } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import AWS_SDK from '@...
3
I believe you need to slightly redesign this to behave as you're expecting it to. The way I'm reading this, your back-end call will never fire because your geolocation variables will not be set by the time it gets there. Here's a quick example:
connectedCallback(){
this.getLocation().then(res => {
// process coordinates/perform back-end call ...
-1
I haven't seen this type of error message before but suggest you also check that you have set the return properties/members as (at)AuraEnabled in your Apex code. Missing this on the newValue would mean this is always undefined on the client.
4
Your Apex appears to be crashing and/or not returning a value, resulting in the aforementioned error. As a related note, your method is being called inappropriately because your parameters are blank. The if statement is incorrect:
a !== undefined || a !== ''
This statement is always true. This is because of the truth table for OR:
Left Side
...
0
This is possible, either by loading CSS using loadStyle or using a hacky workaround. Check the blog post to know more about these approaches in detail:
https://hellosnl.blogspot.com/2019/07/lwc-override-css-of-standard-lightning-components.html
1
The base component is using the proper CSS and matches the SLDS blueprint: https://www.lightningdesignsystem.com/components/button-icons/#With-a-Dropdown The issue is that the button menu that you are calling "native" is actually NOT using the correct SLDS styling. I will file a bug on the team to fix.
1
You implemented correctly in LWC of dispatching event. However callback function is not meant for adding some event handlers. You should add event listener directly. Below is the code with changes needed in vf page:
<script>
document.addEventListener("dosearch", function(event){
console.log('vf event data window listener => ', event.detail);
});...
4
Although it is true that you have to just mention the attribute to make it true in LWC, this is applicable only to pass static value true and if you want to make it dynamic you can bind it to tracked property in LWC also (like Aura).
show-row-number-column={enableRowNumber}
Here show-row-number-column will become true or false depending on tracked property ...
2
Lightning Web Components have always been 1 way as indicated in the documentation:
Data Binding Behavior Differences With Aura
The data binding between components for property values is one-way.
To communicate down from a parent component to a child component, set a property or call a method on the child component.
To communicate up from a ...
0
Opened a case with Salesforce regarding this issue and they told me it's going to be fixed with the Winter '20 Patch 6.0 on Tuesday, Sept. 17, 2019.
1
The force:editRecord does not allow you to pre-define any value other recordid of the record to be update. As a workaround:-
You can use quick action of type update a record by pre-define a value
for the field you are looking for. It will give you the picklist value
selected by default when you click on the button. Based on the user
interaction with ...
4
You can use getObjectInfo to fetch the data types. You should use data.fields.fieldName.dataType.
Sample code:
import { LightningElement, wire, api, track } from 'lwc';
import OPPORTUNITY_OBJECT from '@salesforce/schema/Opportunity';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
export default class Poc extends LightningElement {
@wire(...
0
I believe your question is fully addressed by the documentation:
Errors can be captured by handling the error custom event. You can then display those in a toast.
Creating records simply requires you not to pass an ID, just the object type.
1
The problem is not because of cache. Initially (before changing values) when you change record-id the values in all input-fields will also reflect correct record values but when you change any of the inputs, it becomes dirty and will no longer reflect the values according to the changes in form (record-id) and to get the changes appropriately reflect the ...
0
I think you need to get rid of this line:
recordInput.fields = fields;
That line is not there if you check out the documentation:
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.reference_update_record
I was able to get updateRecord to work using the documentation as an example.
2
PROBLEM:
data.fields.$fieldName.value will not work as you will not have any field with api name $fieldName.
UNDERSTANDING:
You can use refer to Object Documentation:
Consider below object:
var object = {
foo: 'bar',
age: 42,
baz: {myProp: 12}
}
You can get values either by DOT notation or square brackets as below:
object.foo; // "bar"
object['...
3
Added based on comments
You need to modify the dynamic property mapStringParam in change handler of strToPass so that wire service is invoked whenever dynamic property is changed. Below is code:
@api
get strToPass() {
return this._strToPass;
}
set strToPass(value) {
this._strToPass = value;
this.mapStringParam = { key: this.strToPass };
}
@...
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:
...
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
In lightning:badge, there is not much difference.
Suppose there is scenario where you have a form and you want to build upload document functionality in form, then it will be to difficult if you are using native HTML tag and you need to write all logic manually so that it will work.
But if you are using lightning:fileUpload tag, here you need to give some ...
Top 50 recent answers are included
