New answers tagged javascript
1
add this in goToTop function remove everything else
this.template.querySelector('.test').scrollTop=0;
and in the html class assign class name test like
<div class='test' style="overflow: auto; position: fixed; top: 0; left: 0; right: 0; bottom: 0; " onscroll={onScroll}>
0
I was able to retrieve and set the value of a picklist via the following code:
HTML
<template>
<div >
<!-- Start project list -->
<template if:true={projects.data}>
<lightning-input type="search"
class="slds-hidden"
onchange={handleSearchTermChange}
...
0
A component event will not be caught by child components and while an application event will be caught, it's very expensive and inefficient - it really should be only used when absolutely necessary - ie communication between unconnected sibling components for example.
To communicate with a child, you can use an attribute (with or without a change handler) ...
6
This is explained in enough detail here. Here's the core of it:
A module can export a single default function or variable.
// myFunction.js
export default myFunction () { ··· }
The component that imports the function chooses a name to refer to the default export. It doesn't have to be the name of the function or JavaScript file, that’s just a ...
3
A typical reason for regex too complicated is when the target string is > 1 MB
The String class has three methods:
someString.replace(target,replacement)
someString.replaceAll(regex,replacement)
someString.replaceFirst(regex,replacement)
Your application is trying to replace data:image/png;base64, with simply ,
If your application is OK with replacing ...
0
an apex:commandButton submits the form. This happens in parallel to the call to the onclick function, creating a race condition.
See also http://salesforce.stackexchange.com/questions/29400/calling-apexactionfunction-on-apexcommandbuttons-onclick-event
if you use <input type="button"> it will most likely work. Interestingly it does not work for me ...
2
You used value instead of checked in body checkboxes.
<td>
<lightning-input type="checkbox" variant="label-hidden"
checked={lineItem.includedInAutomatedSupplies}
data-key={lineItem.lineItemId} label="dataCheckbox" onchange={dataChekChange}>
</lightning-input>
</td>
...
-2
As above
//get today's date
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
however, if your local time format is different (e.g. UK), change the order.
today = yyyy + '-' + mm + '-' + dd;
You can also add a time if your ...
0
Developed this component, in github.
It creates a custom confirmation dialog, allows custom title, tagline and body, handles the Esc key press to close it and best of all: will call back to your confirmation function, so no need to duplicate code everywhere.
<c:modal_confirmation title="Modal Confirmation Box"
tagline="This is a ...
1
I don't know for sure about the different environments issue (Sandbox vs Production), but one issue that I'm pretty sure of is that there is a case sensitivity mismatch here. In the prereq object, I see that the field is defined as:
Other_Academic_institution__c
However, in the console log and commented out if statement, you have the field defined as:
...
3
The reason you are not able to get percentage is because the wired data is immutable. So, you can get the clone as below after which it should work:
if (data) {
this.lineItemData = [...data];
}
I assume data here is the list of records and so using [...]
You do not need key on all tds .
Even if you use label-hidden variant, you need to put label for ...
2
The problem in the second JS, HTML is you have defined benchmarks as
if(data){this.benchmarks = data}
So you should be accessing it in HTML like
<template>
<template if:true={benchmarks}>
<lightning-card title="Overall Benchmark Values">
<template for:each={benchmarks} for:item='benchmark'>
<p key={...
1
The Field API structure is like
{
"fieldApiName":"Type",
"objectApiName":"Account"
}
I updated the code it may help you and it is working as expected to me.
HTML Code
<template>
<div if:true={options}>
<lightning-combobox
label={picklistlabel}
value={value}
placeholder="--...
0
You cannot dynamically import a field like this:
import CUSTOM_FIELD from '@salesforce/schema/Object__c.Field_Name__c';
In general, I would recommend using lightning-record-form with lightning input field to achieve the requested functionality.
1
You can render a different datatable with checkboxes displayed attribute depending on a button on the component.
To mass edit your rows, you can use checkboxes. The checkbox at the first low level if clicked, will select all remaining rows.
Attribute I mention is hideCheckboxColumn, here's a sample code to get the selected row below.
handleClickAdd() ...
6
This is a great question. Actually, it's more of a Javascript question than a LWC related question.
Quite simply because the answer is not related to LWC but to pure Javascript.
You just need to use the below code:
if(var){
}
In fact, Javascript will check if the var value is not undefined, not null and not an empty string.
EDIT
If we had to compare ...
2
Found the fix.
Had to use [0] for the response.
var content = Platform.Function.ParseJSON(result.Response[0]);
2
Your JavaScript button is too complex to be converted to a Lightning component in an automated way. The Lightning component produced by the conversion tool is essentially a placeholder.
You have two real options here. One is to work with a developer to build a Lightning component replicating this functionality. The other is to reconceive the functionality ...
5
What they mean is javascript is loosely typed language and so for any given property you can assign any type of object like boolean, string or any other object and so it is better to have checks for the type of properties passed from parent components using typeof whenever necessary. Also note:
You should always initialize the variables or else they will be ...
1
For any custom component, you can take the code reference from lightning design system.
Created a playground link for you with sample code.
Output:
However note that you still need to handle events like open/close picklist, selection/deselection of options, etc.,.
1
You get the data from getRecord wire service in below format:
{
"apiName": "Account",
"childRelationships": {
},
"fields": {
"Name": {
"displayValue": null,
"value": "University of Boston"
},
"POC_Datetime__c": {
"displayValue": "8/7/2019 8:02 PM",
"value": "2019-08-08T03:02:37.000Z"
},
"Phone": {
"...
0
I'm not sure why this works but here is the code that got the date-time field to display correctly...
----------JavaScript----------
import { LightningElement, api, wire } from 'lwc';
import { getRecord, getFieldDisplayValue } from 'lightning/uiRecordApi';
/* Importing fields */
import OPPORTUNITY_RELIST_DATE_TIME_FIELD from '@salesforce/schema/...
0
You need to make sure that none of the imported JavaScript files reference external URLs (e.g. CDNs) since Salesforce disallows such access as a security measure. This is probably why the all JS file fails to load. Also note that export and import statements cannot appear in the main JS static resource you load using loadScript.
Additionally, your template ...
4
Yes, absolutely. You can create your own custom component with any tags/content you want and render it in a table cell for that column.
Step 1 : create custom component
Step 2 : Create a new component which extends datatable
Step 3 : We can use the component (that extended datatable) where-ever we want
Full details here: How to use custom LWC lightning ...
2
CurrentPageReference isn't Apex Wire. Use registerTestWireAdapter(CurrentPageReference) instead of Apex Wire :)
0
You've got a couple of issues happening.
First, keep in mind that SDLS Modals only include CSS styles, but not the Javascript necessary to implement most of the keyboard and focus requirements. The issue you linked to will most likely get closed because SLDS would not include the necessary javascript.
Unfortunately, there is not an LWC equivalent to the ...
2
When you have any doubts with respect to SecureWindow or SecureDocument, you can check Locker API Viewer.
requestAnimationFrame is supported for API 46. As LWC as a framework is not yet stabilized/fully mature as of today, we are getting console warnings/errors even for standard features. We need not worry as long as the documentation supports our ...
5
Looks like Aura strips out JSON nulls.
You can use the workaround of sending String from Aura-enabled method and then parsing them in javascript
@AuraEnabled
public static String returnMapWithNull() {
Map<String,String> strMap = new Map<String,String>();
strMap.put('a',null);
strMap.put('b','Test');
return JSON.serialize(strMap);...
1
Yes. Salesforce does provide a mechanism in Apex to check the FLS for field for the current running user:
https://developer.salesforce.com/docs/atlas.en-us.apexcode.meta/apexcode/apex_classes_perms_enforcing.htm
There is also the FieldPermission SObject as well you can query against:
https://developer.salesforce.com/docs/atlas.en-us.api.meta/api/...
1
Ignoring any other issues with the code, there is a fundamental difference between an arrow function and a regular function: the "this" instance (and other bindings).
An arrow function does NOT change the "this" binding, so in the original code, "this" refers to the component. However, when changing to use a regular function, "this" changes.
Take a look at ...
0
(quoteLines != null) {
quoteLines.forEach(function (line) {
let productName = line.record["SBQQ__ProductName__c"];
if(productName == 'test'){
console.log('I have test!');
}
});
}
1
As you want to navigate to standard object record page Report, you will not need href attribute. You can directly use Record Page navigation on click. Below is how you can implement:
HTML:
<a onclick={redirectToReport}>View Report</a>
JS:
redirectToReport(evt) {
evt.preventDefault();
evt.stopPropagation();
this[NavigationMixin....
2
After playing with this for a couple hours, it was the smallest thing to get it to cooperate.
I started by pulling down the entire lwc-recepies repo. Then I copied their d3 folder to my home directory and compressed (zipped) it into a .zip file, which I uploaded to Salesforce as a static resource.
I tried using the initialization routine for d3 from the ...
3
You cannot directly set .innerHTML property of HTMLElement unless you container element has been enabled lwc:dom="manual" directive. HTML Template Directives
<template>
<div class="email-text" lwc:dom="manual"></div>
</template>
import { LightningElement } from 'lwc';
export default class App extends LightningElement {
...
0
Ok, pretty basic, I just made sure the divs were loaded before running $Lightning.createComponent. Not sure why it didn't work if there was too much delay.
2
You can't use the markup {!$Resource.MyJavascriptFile} in your actual static resource since Salesforce will not interpret that. It only evaluates that markup in the actual Visualforce page. However, you can still reference code from another static resource file just by calling it directly once they are both loaded in the VF page.
3
You cannot stop that, also it's not recommended to manipulate dom based on ID, as the framework replaces custom id to globally unique id in the page.
So to get element you have two options.
Get it by class query selector.
get it by Data attribute.
Here are the examples for the same.
Class.
let div = this.template.querySelector('.popup');
Using the data ...
1
It appears you want to highlight a card/element in an iteration and you are adding a class to highlight and removing that class to all other cards.
Here is the Playground Link I have created for you.
Below is the explanation:
"component" doesn't appear to be a valid parameter any longer, what is
the equivalent in LWC?
You should use querySelectorAll ...
1
you need to pass the function by reference and not invoke it directly while declaration. Later it will be invoked when the event is triggered. PFB:
connectedCallback() {
window.addEventListener('resize', this.myFunction);
}
@track count = 0;
myFunction = () => {
this.count = this.count += 1;
console.log('resized => ', this.count);
};
Here ...
1
Here is the code with explanation:
// declare your array
let myarr = [{"key":"January","intMon":0,"value":0},{"key":" February","intMon":1,"value":0},{"key":" March","intMon":2,"value":0},{"key":" April","intMon":3,"value":0},{"key":" May","intMon":4,"value":0},{"key":" June","intMon":5,"value":0},{"key":" July","intMon":6,"value":0},{"key":" August","...
3
Hopefully you figured out this problem Calvin, I've been trying to work it out myself and found this, which helped solve it for me...
https://developer.salesforce.com/forums/?id=9062I000000g555QAA
Start with this promise, then call getEnclosingUtilityId, and inside that promise register the onUtilityClick event handler...
doInit : function(component){
...
1
You can define a span with data- attribute with category as value and set it the same way you are getting selected rows. Here is Playground link.
<span class="slds-badge slds-badge_inverse" >
SELECTED ITEMS PER TABLE -
<span data-count={table.category}>0</span>
</span>
JS:
getSelections() {
// ---- ...
0
Please add extra parameters for the helper method showToast and set 'message' ,'title' dynamically from there.
showToast : function(component, event, helper,messageStr,titleStr,typeStr) {
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
"title": titleStr,
"message": messageStr,
"type":...
0
Okay I realized my mistake.
In my lightning controller:
for(var j=0; j<options.length; j++){
finaloptions.push({'label':options[j],'value':options[j]});
returnVal[i].finaloptionList.push(finaloptions);
}
The above code was inserting an array inside an array. I ...
0
Client side validation and Server side validation both have advantage and dis-advantage.
Client-side validation is responsive in terms of user experience but when you see the security concern, you would like to do server-side validation too when required because you can protect against the malicious user, who can easily bypass your JavaScript and submit ...
0
i have done some Customization based on our conversation in comments area about your Question,i got
following Apex Response in to JsController. let me know if any further customization needed.
{
"section1":[
{
"finaloptionList":[
],
"optionList":[
"Strongly Disagree",
"Agree"
...
0
lightning:radioGroup is itself a container to show the Radio Buttons using attribute for Options. In your code basically you are showing a list of "empty" radio groups by iterating through aura:iteration.
See the Salesforce example as below. You need to specify the options in an attribute.
<aura:component>
<aura:attribute name="options" type=...
1
Don't define a default attribute. This causes the attribute to default to null.
Eg
<aura:attribute name="selectedObj" type="Object" />
1
You can only call your apex method in the lwc with @auraEnabled annotations.
You can create a simple apex class and a method using the site class and then you can call in.
The documentation link is here
All the supported lwc modules are documented here
Top 50 recent answers are included
