New answers tagged lightning-web-components
0
You can add following condition in lwc component:
<template if:true={reloadMap} >
<c:mapComponent></c:mapComponent>
</template>
Make the reloadMap attribute to false and make it true then it will rendered the mapComponent.
0
Finally I found an answer to this.
I used the 'lightning/uiRecordApi' for this. Its like a wired adapter to get invoked for each time whenever there is changes in the record. There are so many standard methods defined. Please refer this link.
I used getRecord method in my form.
Here is my sample code which worked for me.
import { LightningElement, api, ...
0
If files is undefined, you get an error in the template (you do so here when there's an error). Instead, just check to see if it has a value:
<template if:true={files}>
Also, arguably, you shouldn't return "null" when there's no records; that will show an error when no error actually occurred. Your error panel will probably give errors itself in that ...
0
Do you want lightning-file-upload in lwc ?
A lightning-file-upload component provides an easy and integrated way for users to upload multiple files. The file uploader includes drag-and-drop functionality and filtering by file types.
Below is the code for your reference
<template>
<lightning-file-upload
label="Attach receipt"
...
1
Thank you for your interest in accessing the Task object from UI API.
My name is Jonathan Au. I'm the PM for UI API. I'd like to let you know that this object is on our radar, but due to some complications related to the internal implementation of Task, enabling this object for UI API is not a straightforward process.
At this time, we do not have a ...
0
Yes, you are right. The number you are getting is in milliseconds "65700000". We need to convert it to time format in js itself. I used the below method to do so.
// Convert milliseconds into 'h:mm a' time format
msToTime(s){
let ms = s % 1000;
s = (s - ms) / 1000;
let secs = s % 60;
s = (s - secs) / 60;
let mins =...
1
Exactly that: 'Error message to be displayed when the value is too long.'
Check this link
Id you have a field that have set a maximum number of characters you can add this attribute message-when-too-long to your tag to inform the user of that issue for that particular field.
2
Turned out the problem is how AuraEnabled handles the namespaces. Currently, it's just impossible to use nested classes in namespaced Aura.
This is true for regular (non-LWC) Aura as well, but has a workaround.
I posted an idea to Salesforce to fix that.
I'm also talking to the TE team and partner support on this. They should get it to the platform team.
...
0
We do something similar with the following, and I know this works. In the meta:
<targetConfig targets="lightning__RecordPage">
<property name="definitionName" label="Definition Name" type="String" required="true" datasource="apex://ScheduleDefinitionPickList"/>
<property name="minimumHeight" label="Minimum Height" type="...
1
Hi i have used following code -
APEX Class -
@AuraEnabled(cacheable=true)
public static Date getDate(Date dt)
{
System.Debug('dt '+dt);
return dt;
}
and JS Code -
@wire(getDate,{dt:"2019-12-31"})
date({data})
{ if(data){
console.log("Data"+JSON.stringify(data));
}
}
or
@wire(getDate,{dt:new Date("2019-...
2
The first thing is your apex method return value is wrong. Your method expect a string value to return but you are returning a date value.
The correct code is:-
@AuraEnabled(cacheable = true)
public static string apexMethod(Date z) {
return String.valueOf(z);
}
Now, to call it from LWC, You can pass a date object value as parameter from JavaScript ...
2
I have made slight change to your code.
Check out this Playground LINK
Use height : 90vh i.e - 90% of viewport
0
For lightning-input working as a currency you should use :
type="number"
formatter="currency"
step= (say) "0.01"
For example -
<lightning-input type="number" name="input1" label="Enter a currency" formatter="currency" value={val} onchange={setVal} step="0.01"></lightning-input>
Take a good idea of "step" attribute from here - Lightning:...
1
From the documentation there is a custom event named error that is emited upon failure.
https://developer.salesforce.com/docs/component-library/bundle/lightning:recordEditForm/example
For including the error message just add lightning-messages immediately before or after the lightning-edit-form
You can also override and manually capture it .
In your ...
1
Assigning a variable to another variable doesn't make a copy. You need to actually copy it:
let records = [...this.objectList];
Array.prototype.sort sorts the current Array; it does not copy the array before sorting.
0
I found a fix.
Lightning and Aura components use Secure Wrappers, so we are not able to use features like getElementsByClassName or getElementById. See more: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.security_locker_global_access
But instead should be used query selectors on shadow DOM:
this.template.querySelectorAll('....
2
I was able to find an answer on the Developer Docs forum for a work-around. I was surprised how challenging it was to find a solution in the Salesforce LWC docs, so I'm not sure if this is the recommended approach, but it's the best I've been able to find! You will need to import the updateRecord method from the lightning/uiRecordApi. Then, you can call this ...
0
You can use javascript's CSSStyleSheet.insertRule() in order to override any css properties. In your LWC controller:
connectedCallback() {
this._overrideCss('lightning-helptext .slds-button_icon{ color: inherit }');
}
_overrideCss(cssRule) {
const style = document.createElement('style');
document.head.appendChild(style);
style.sheet....
6
It's a known issue in the CLI and Salesforce is working towards the fix.
The fix is scheduled to go out today (USA PST hours)
Check th details here below
https://github.com/forcedotcom/cli/issues/216
FYI - This issue is now fixed as per release notes
https://developer.salesforce.com/media/salesforce-cli/releasenotes.html
To get the fix run sfdx update
0
Try setting a proxy. In my case the first command helped.
$ npm config set proxy http://example:port
$ npm config set https-proxy http://example:port
0
As of Chrome 65 this is no longer possible for cross-origin hrefs.
You're actually incredibly close. I made it work using the snippet below. Setting the boolean 'download' attribute for the anchor tag seems important for jpgs, and I'm not sure why, but it doesn't work if you append/ set target to self.
let downloadElement = document.createElement('a');
...
0
You can use the data- attribute of an HTML component.
Everything that is passed to data-* attributes is converted to a
string.
<template>
<header class="header">
<h1 class="header_logo"><img src="" alt="Logo"></h1>
<ul class="header_nav">
<template for:each={megaMenuData} for:item="...
0
Pass the value attribute in lightning button icon tag .
Refer the below code for your reference
HTML -
<template for:each={registrations.data} for:item="record">
<lightning-layout-item key={record.Id} size="4" class="slds-p-around_x-small">
<lightning-card title={record.Name__c} class="registration-tile">
<div slot="...
0
One workaround I did was to fire a custom event from lwc and listen it in the parent aura component and call component.destroy() there. I hope this will be helpful for some people who are struggling like me.
This solution did not solve my original problem though.
2
Generic SObject and SObject[] are not yet supported at the interface between LWC and Flow (TLDR: You can't get there from here). We're working on it right now, though, and hope to get it into Summer '20. You can get an early taste for some of the experience by looking at how we implemented it for Apex Invocable Actions in Spring '20
We don't have any short-...
0
to modify any buildin input you have to have your css in a stylesheet as static resource and loaded once the component load. something similar to example in this page
https://newstechnologystuff.com/2019/03/16/use-static-resource-in-lightning-web-component/
-1
I was able to override the standard styling of a slds class.
For example, on a quick action modal there is a class called "slds-modal__container".
Keep in mind this is a hack, I'm sure it will be pulled by salesforce at some point but for now it solves the issue I had.
By creating a static resource with the following:
.slds-modal__container{
max-...
0
As you've observed, the built-in component needs a record to work with. However, there are open source versions (try searching for "lwc lookup field github") that you could modify to work without a record.
Check out this-
https://github.com/amitghadage/Lwc-Lookup-
And follow this for your Reference --
https://developer.salesforce.com/docs/component-...
1
I have resolved this by using the following component on AppExchange:
https://appexchange.salesforce.com/appxListingDetail?listingId=a0N3A00000EJc1NUAT&modal=where_to_install_package
0
It looks like you have to ditch lightning-record-edit-form and use getObjectInfo from uiObjectInfoApi and getRecord from uiRecordApi
I have created a custom-record-edit-form earlier that fetches data and metadata, you can refer it.
Markup:
<template>
<template if:true={complexAccount}>
<template for:each={complexAccount} for:...
2
LWC is enforcing the shadow DOM style scoping, so you can't currently style other Elements outside your shadow tree.
LWC specifically restricts the parent from messing with the child component's presentation via the use of Shadow DOM.
That being said, there is the on-going ::part and ::theme proposal that would allow components to safely expose some of ...
3
On the assumption you are talking LWC rather than Aura (since you reference "lightning-input" rather than "lightning:input"), LWC specifically restricts the parent from messing with the child component's presentation via the use of Shadow DOM.
As per the lightning-input documentation, there are no exposed means to apply the styling you wish to apply. The ...
-1
Update your CSS file as:
.THIS .textInput{
color: Black;
font-weight: bold;
}
Also, input text as, <lightning:input label="Email" class="textInput" value={!rec.Name} onchange={!c.handleNameChange}></lightning:input>
1
Well my colleague managed to look for a solution for this using the import NavigationMixin:
HTML:
<a onclick={navigateToRecordViewPage} data-id={*lookup id*} target="_blank">{*lookup field*}</a>
JS:
import { NavigationMixin } from 'lightning/navigation';
add *** extends NavigationMixin(LightningElement)
method:
navigateToRecordViewPage(...
3
No. If you want to "dynamically" create an LWC you actually have to dynamically create an Aura component that statically wraps the LWC component.
1
This is now supported in spring 20. Here is a code sample for you.
this[NavigationMixin.Navigate]({
type: 'standard__objectPage',
attributes: {
objectApiName: 'Account',
actionName: 'new'
},
state : {
nooverride: '1',
...
3
Playground does not support components like lightning-record-edit-form or any other base components that requires a Salesforce connection.
You will need to use an IDE like vscode extension for Salesforce and Salesforce CLI to connect your local machine to actual Salesforce org to verify and play with components that require Salesforce UI API or Salesforce ...
1
Try chaging the value={value} property of the Combobox with value={reportId}
I think this should solve the problem as you are blanking this.reportId when you clear the search input.
0
Below video explains how to build an external dashboard with LWC.
https://trailhead.salesforce.com/live/videos/a2r3k000001WFJ2/codelive:-building-an-external-dashboard-with-lwc/
3
IMHO this is bad programming practice; you should separate responsibilities and concerns into various different classes. By all means have common code, in a separate class used by the Visualforce controller and the Aura Enabled methods used by your LWC, but don't mix the Visualforce and LWC code directly in the same class. Doing so makes it harder to ...
0
You can conditionally show forms/components by using one of the conditional statements:
<c-my-component if:true={isFirstFormVisible} />
or
<c-my-component if:false={isFirstFormHidden} />
More information can be found in the documentation:
https://developer.salesforce.com/docs/component-library/documentation/lwc/create_conditional
and
https://...
0
Set the property if:true={controlBoolean} on the form that you want to display after the click.
Then set the controlBoolean as true when clicking the button icon on the onclick function.
You can find more info in the next link:
https://developer.salesforce.com/docs/component-library/documentation/lwc/create_conditional
1
c-child component lies between If condition, Therefore child component got reinitiated whenever condition matches.
1
When the component is removed from the DOM (via if:true), it is destroyed and the values within are lost. You'll want to pass the value back to the parent to save it for later.
I've updated your code to demonstrate this.
app.html
<c-child value={value} onchange={updateValue}
onscreenonenext={handleOnScreenNext}
>
app.js
@track ...
0
Look like, we need to define the all @api values in our meta XML file as well.
Refer the below link for more details.
https://www.salesforcecodecrack.com/2019/04/how-to-design-attributes-in-lightning.html
Supporting Objects:
https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_get_started_supported_objects.htm#...
0
Firstly, forEach in js does not implicitly capture this, you have to pass it like so:
Array.forEach(x => {}, this);
However, and most likely, this is a known limitation where even with @track array elements are not observed.
Use spread operator, changing this code here:
let newObjects = [];
getSupportedObjects({ eventType: this.selectedEventType })
...
0
I don't think you have for: loops in LWC, however if you use child components you can sort of do what you want based on index.
Step 1. Define a child component
js
import { LightningElement, track, api } from 'lwc';
export default class ChildComponent extends LightningElement {
@api index;
get shouldDisplay() {
return this.index <= 4;
...
0
@Renato Oliveira is actually correct.
The @api decorator serves two purposes:
1. It allows the other components pass data and call methods to a child component
2. It allows the user in the Lightning Page Builder to define values for properties only IF the properties are exposed via the metadata of the LightningComponentBundle.
Here's the sample config ...
0
After much back and forth with Salesforce on this, it has been raised as a platform issue. You can follow the resolution of this at the following Known Issues link:
https://success.salesforce.com/issues_view?id=a1p3A000001YoFLQA0
3
Create an array of 4 items in the JavaScript controller (that is run the loop up to the number there) and reference that much like contacts in your HTML example.
Top 50 recent answers are included
