New answers tagged lightning-web-components
0
If your component was already added to the page before you added the design attributes, I do not believe the defaults would be picked up - I think they are only assessed when the page is edited, and possibly only when the component is added. Try editing the page in experience builder and see if you can edit the properties directly in the inspector. ...
2
Your promiseCache function isn't waiting for the results, so it returns null. You need to wait (using await):
async function promiseCache(promise, params) {
params = params || {};
promiseCache.cache = promiseCache.cache || new Map();
promiseCache[promise] = promiseCache[promise] || {};
const hash = JSON.stringify(params);
if (!...
3
You can do this today by adding your own "+ Add New" option to the end of your array of options, then in the change handler inspecting the selected value and handling the create new action you want to take.
Something like this:
get options() {
return [
{ label: 'New', value: 'new' },
{ label: 'In Progress', value: 'inProgress' },...
-1
So, Sergio Alcocer's answer works. adding a display:flex to the div containing the input and the h1 did the trick. Thanks Sergio!
0
In order to obtain a new blank form, you have to overwrite recordId and mode.
Just replace these lines at handleReset method:
const editForm = this.template.querySelector('lightning-record-form');
editForm.recordId = null;
editForm.mode = 'edit';
4
In order to use community tokens you need to extend forceCommunity:base and should work.
In order to debug your component and check if everything work currently you can open Inspector and check your component in the list of styles you should see something like
:root {
--lwc-brandLogoImage: url('')
}
this would allow you to verify that CSS tokens are ...
2
I'd refactor your code so that you don't need to worry about it. Yes, you can indeed make the columns dynamic, you just need a mechanism for that. Here's a possible solution:
public with sharing class ObjectController {
public class Column {
@AuraEnabled public String fieldName;
@AuraEnabled public String fieldLabel;
@AuraEnabled ...
2
You should use LWC when possible, as it is much faster performance-wise, and easier to develop, than Aura. However, Aura is the underlying runtime, and it provides core features that won't be in LWC. Namely, it provides the top-level container framework (Lightning Apps) that LWC wasn't designed for.
Even if every component in Salesforce was LWC, it'd still ...
1
Try to use
import '@lwc/synthetic-shadow';
in your index.js
0
I think both LWC and Lightning Components/Aura Components are based on the JavaScript framework, although as you stated LWC is clearly preferred over Aura.
You need to understand that there are certain things that are present in Lightning components that are not yet present in the Lightning web components.
Even in the article, you have stated you can see ...
0
Simple oversight. I figured it out this weekend. I was missing a space:
import FIRST_NAME from'@salesforce/schema/Contact.FirstName';
should be:
import FIRST_NAME from '@salesforce/schema/Contact.FirstName';
3
Try something like this
<div id="variants" class="slds-p-vertical_x-small slds-grid slds-grid_vertical-align-center">
<lightning-icon icon-name="utility:info" alternative-text="Info!" variant="info" class="slds-col"
...
0
I'll answer the easier question first.
There are no performance disadvantages as far as I'm aware to using data service.js, but this approach is usually not used in parent-child case for the 2 main reasons.
It does reduce the readability of the HTML, because you can't see where properties are used in rendering.
You have other options better designed for it (...
0
This issue was resolved with Spring 21 release.
4
It depends on how the query is used. When passing to Apex, make sure you use inherited sharing on the class, and Security.stripInaccessible to ensure users can't see fields/records they're not supposed to. In addition, make sure the user doesn't have access to any unnecessary fields or objects. As long as your configuration is perfectly secure, constructing ...
0
Yes you can by using lightning-accordion Styling Hooks, for example refer the below code
.css
.accordionClass{
--sds-c-accordion-heading-font-size:1.5rem;
}
.html
<lightning-accordion allow-multiple-sections-open active-section-name={activeSections} class="accordionClass">
<lightning-accordion-section name="...
1
Neither is strictly better when comparing all features.
Apex is better in terms of security (no authentication info needs to be sent to browser), and does not have to worry about CORS restrictions, but does have severe limits to ingress and egress bandwidth, callout timeout limits, and CPU limits. In addition, you cannot access resources not available to the ...
0
Not Possible on the standard page.
3
The Navigator's mediaDevices property is not available with Locker Service. however, here is an idea posted a few years ago which you can upvote
Make navigator.mediaDevices available in Lightning Components API (WebRTC)
This might be confusing, given that Salesforce's Locker API Viewer documentation states otherwise, but the property itself returns undefined....
0
The property for the field name is fieldName, not field, which is why you didn't see any data. I also cleaned up unnecessary code for you. Also, please note that JavaScript is very cAsE-sEnSiTiVe. You need to make sure you capitalize everything correctly. In this case, you used type: "Email", but it should have been type: "email". I haven'...
0
You need to recreate the array using ES6 spread operator. LWC Data Table does not refresh view unless array is created. I've updated wiredContacts method with the fix.
@wire (getrelatedlist, { recordId: "$recordId"})
wiredContacts({ data }) {
if (data) {
//recreated array using spread operator
this.data = [...data];
}
...
0
Nothing of the mentioned worked for me.
Ended up just resetting the org password and creating a new VS Code SFDX project. Only then the Auth Org worked. I also matched the Node version to SF CLI, but unsure if that contributed to the success.
0
I would check out this link.They are able to create a reusable lookup field. I would then append a value '+ New Record' that when selected opens a model to create a new record. Then you can capture the new record Id and place that into the lookup field.
You can also look at this example.
Either way, append an option to the drop down then look for onchange to ...
0
A third-party library can access a DOM element with lwc:dom="manual":
<div lwc:dom="manual">
...
someLibrary(this.template.querySelector('div'));
Read more in the documentation.
0
The solution is to write your own component. Unfortunately, some features just aren't possible in the built-in components, so you need to write your own. There's no real alternative at this time.
0
Since the ContentVersionHistory isn't working I have an uneasy feeling that the way to get the information is from the EventLogFile for Content Transfer. This would likely be a paid feature to access that data.
The docs do indicate that the VersionRenditionDownload Transaction_Type would track the file previews, which agrees with the Spring '19 release notes ...
0
It seems the answer is don't try to do this since the PDF renderer won't likely understand the CSS anyway. I've abandoned all hope here and have resigned myself to creating a second layout VFP strictly for PDF generation. It's clumsy and annoying but it seems to work as long as you keep the css simple and at the level it can understand (2.1 or less).
I ...
1
Here is simplified version of code which works.
HTML:
<template>
<tbody>
<template if:true={actualResults}>
<template for:each={actualResults} for:item="keyValue">
<tr key={keyValue.key}>
<td scope="col" style={keyValue.styleColor}>
...
0
You need to @track the variable for the changes to appear, or copy the array.
@track headerArray;
Or:
this.headerArray = [...this.headerArray, { ...rowTemplate } ];
Where rowTemplate is an object that contains whatever properties you need for the row.
1
The draftValues attribute can be read at any time. You don't need an event to get the draft values.
handleSaveClick() {
let draftValueJSON = JSON.stringify(
this.template.querySelector('lightning-datatable').draftValues
);
// Do something with draftValueJSON //
}
1
Instead of adding a checked attribute to the first input radio, bind it with the input property as:
<input
onchange={handleRadioChange}
type="radio"
data-id="option-1"
name="radio-option"
value="monthlyPrice"
checked={monthlyOption}
/>
Then in the controller, you can initialize the ...
0
I did some changes and it worked for me. Also, it is mentioned in the documentation that the local actions that fire force or lightning events might not work properly when you run the flow from: Flow Builder, Flow detail pages, or list views, Web tabs, Custom buttons and links.
I have created sample flow that captures the attributes and launched it from ...
0
On closer inspection, I found out that the @wire-decorated function gets called immediately when the component loads, before there is an actual response. data and error are both undefined in that call. So my assumption that the function only got called based on a true data/error response was misplaced.
Rewriting my LWC like this, now the test passes:
@wire(...
0
The clue is in the exception message.
When using JSON.deserializeUntyped a JSON object, like {"property": "value"}, is converted to an Apex Map<String, Object>. However, a JSON array, like [1, 2, 3] or [{...}, {...}], is converted to an Apex List<Object>.
Since your JSON is a JSON array at the outermost level parsing it will ...
0
Yes you can do that.
If you are at the object record detail page ,you can add a related list - single. After adding select Object of which you need to show the data to the related list. The columns needs to be configured under page layout of master object > Page layout> releated LIst and wrench icon.
Object > Record Detail Page - Drag and drop ...
2
Can any LWC be hosted on any external website built on Wix or
SquareSpace or whatever?
Depends on how much control your website provides to use Lightning Out Technology.
It is clearly documented what capabilities your web container needs to provide
Verify that the remote web container, or origin server, supports these requirements.
Ability to modify the ...
3
LWC comes in two flavors: Salesforce-only and Open Source Software (OSS). You generally have three options regarding LWC outside of Salesforce.
No Authentication
If you don't need any access to Salesforce, and you just want to use the tech, OSS provides the ability to run your own custom LWC apps. You can also use lightning-base-components to emulate most of ...
3
The term "reactive" applies to redrawing the UI/templates every time a reactive variable is modified.
Variables are not reactive within the JavaScript short of using an explicit setter; this is how JavaScript (and most languages) work; there has to be some sort of syntax to let the runtime know that the variable needs to be tracked for other ...
6
From 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" instead of "requests" or "fetches" because if the data exists in the client cache, a network ...
3
In addition to reduced server side code, lightning/ui*Api leverages Lightning Data Service, so will enforce CRUD and FLS rules and bring about other benefits that can be read here: https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.data_ui_api
Lightning modules like ui*Api should be used for simple use cases to reduce the amount ...
3
You can use lightning-input type="number", also
If you don't specify step, the default value of 1 allows users to enter only integers.
so you will have only Integers as you wanted (assumed from your pattern).
Link to SF documentation.
2
It looks like you're declaring mapResult but not actually adding any objects to the array, nor adding the styleColor attribute to any of those objects:
Assuming your Apex is returning a List of records...
this.actualResults = [...result].map(e => {
// You may have to "clone" each element in "result" array if you get an immutable ...
0
EDIT 2: You can't call validation rules separately from DML operations: Fire Validation Rule from Apex
Please see Trigger Order of Execution: https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_triggers_order_of_execution.htm
If you are attempting to use lightning-record-edit-form as a form to collect valid input without saving to ...
1
You'll want to return "this.previousData.Income__c" in your:
get previousIncome()
When using the "getRecord" imported method, you are using the User Interface API, which will return a uniquely formatted data object: https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_responses_record.htm
You can use all the other UI ...
0
Because the Promise is an asynchronous operation, you may be trying to use LeaderLine before the script has been loaded.
Depending on how you're calling the randomLine(e) function, you may want to either wrap your page in an if:true={isScriptLoaded}, or call random from withn the Promise.then() function.
I'd need more information about how/when the ...
1
Though getRecordNotifyChange() should update the cache but you can also try setting a timeout using old way to refresh the related components. Try with both settimeout and without. You can also try putting this in promise received from navigation.
setTimeout(() => {
eval("$A.get('e.force:refreshView').fire();");
}, 3000);
0
I favor using fetch over XMLHttpRequest since fetch allows to work with Promises easily.
import MYJSON from '@salesforce/resourceUrl/myjsonfile';
connectedCallback() {
fetch(MYJSON)
.then((response) => response.json())
.then((data) => console.log(data));
}
0
You can add those calculated fields in the onsubmit event of the record-edit-form.
HTML
<lightning-record-edit-form
record-id={recordId}
object-api-name={objectApiName}
onsubmit={handleSubmit}
...
>
...
</lightning-record-edit-form>
JS
handleSubmit(event){
event.preventDefault(); // stop the form from ...
0
I have used slds class in my code and it is working.
<ol class="slds-list_ordered">
<template for:each={morningBreakFast} for:item="item">
<li key={item}> {item}</li>
</template>
</ol>
for more information please refer below vertical list article from slds,
https:...
1
you can try this, it will work ! :
:host {
--sds-c-card-color-background: #a1d6e4;
}
Top 50 recent answers are included
