onChangeListener for lookup field is not getting Fired in Lightning Record Edit Form - salesforce

I am trying to access the keywords typed in a lookup or master-detail field in lightning-record-edit-form using lightning-input-field and based on the value entered in that lookup I want to update picklist value to active or Inactive. Below is the code
<template>
<lightning-card>
<lightning-record-edit-form object-api-name="Opportunity_Bidder__c">
<lightning-input-field field-name="Opportunity_Name__c" onchange={onOpportunitySelected}>
</lightning-input-field>
<lightning-input-field field-name="Bid_c" onchange={onOpportunitySelected}>
</lightning-input-field>
<lightning-button type="submit" variant="brand" label="Create"></lightning-button>
</lightning-record-edit-form>
</lightning-card>
onOpportunitySelected(event){
alert('alert called');
this.opportunityName = event.target.value;
}
The issue is that onOpportunitySelected method is not called when user is typing in Opportunity_Name__c. However, its being called on other fields like textfield or any other field than lookup or master-detail field
I am new to salesforce, can anybody tell me that is it achievable using lightning-input-field for lookup or I need to customize lookup like here
To re-iterate "OnChange wont work on Lookup or Master-Detail fields in Lightning-record-edit-form ?"
Thanks in Advance

Related

OnChange "Custom lookup field" value placed inside "lightning-record-edit-form" creating records

Below is the sample code structure I am using in my Aura CMP,
<lightning-record-edit-form object-api-name="Case" record-id={recordId} recordTypeId="012">
<lightning-input-field field-name={nameField}></lightning-input-field>
<c:customLookup sObjectApiName="Account" ></c:customLookup>
<lightning-input-field field-name={descriptionField}></lightning-input-field>
</lightning-record-edit-form>
<lightning:button variant="brand" label="SAVE" onclick="{}"/>
Expecting insertion of Case on the 'Save' button,
but Ask here is:
Each time I change the value of c:customLookup, lightning-record-edit-form inserting that many duplicate records in the backend,
Solution: Because of the above issue, I moved c:customLookup outside the lightning-record-edit-form for now.
but what if I want to use c:customLookup inside the form and how to prevent that insert record automation / any reason why lightning-record-edit-form behaves like this?

retrieve sql record from webservice and view on textbox

i am creating a web app in which i want to see my record on different textboxes
[{"attendee1":"o","attendee2":"p","totalmale":"2","totalfemale":"2","unit1":"o","unitd1":"o","unit2":"o","unitd2":"o","unit3":"o","unitd3":"o","unit4":"o","unitd4":"o","unit5":"o","unitd5":"o","remarks":"o"}]
this is how my records are coming from webservice when i supply a parameter((string id)) how i need to retrieve the record and show the record on my textbox with the help of AngularJS
this is my js file
$http.get('/frmattendencerptqed.asmx/getuprec', {
params: {
id: $scope.updateparam.comsonvinid
}
})
now what i need to do when i want to print the records in different textboxes
my textboxes are in input field
<input type="text" ng-model="attendee1" />
this is how all my textboxes are
i need your help what i need to do when i want to show the record on my textboxes
According to the data you provided i made small example for you.in this you need to assign your result to a scope variable like below
$scope.something=your result;
from this fetch your value and assign to your model,here i am taking attendee1 and assigning to model
$scope.attendee1=$scope.something[0].attendee1;
like this you need to give what ever you want from that result.
Demo

Google tag manager button reference

I'm trying to get google tag manager to track a couple of different buttons on a site. We're currently unable to change the site to aid with this, so we have to find a solution solely with tag manager.
There are several buttons on the site all with the same format as to the two below.. they all have "submit" as the type and a unique term for value so I'm trying to use the tag manager Form Listener which picks up on type="submit". Is there any variable I can use to pull the value field into my event so I can create individual goals in analytics?
etc etc
Any help is greatly appreciated.
You can use built-in variable "Click Element", then create custom JS-variable:
function(){
try{
return {{element}}.getAttribute("value"); //I am not sure now if it is {{element}} or {{Click Element}}
}catch(err){}
}
This will give you a value attribute of clicked button.
Maybe a useful link by Simo Ahava:
http://www.simoahava.com/analytics/track-form-engagement-with-google-tag-manager/#3
You can use built-in auto-event variable Element Attribute to get value. And be sure to use click tracking and not form tracking, because you want to track button clicks and not form submissions.

Initializing ngModel with data - AngularJS Bootstrap bs-select

I am maintaining a site that allows users to create a profile of sorts that will allow them to broadcast activities to a feed. I implement ng-grid to keep track of all the profiles that are created, and have created two buttons that allow users to create/edit these profiles. My only problem right now is, when users select a row on the grid and attempt to edit that specific row, the drop-down menu is not auto-populated with the data from ngModel.
This is the part of the form I am having trouble with:
<select ng-model="source.canSendTo" ng-options="value.name for value in sourceCanSendTo" data-style="btn" bs-select></select>
And within the controller, I have sourceCanSendTo defined as:
$scope.sourceCanSendTo = [ {"id":"abc", "name": "ABC"}, {"id":bcd", "name": "BCD"} ... ];
On row selection, I simply set source = the selected item, and console.logs show that all the data is there. The other parts of the form are being populated properly (mainly s), and console.log($scope.source.canSendTo) shows that the original data is there, it's just that select is defaulted to being blank...how would I go about trying to pre-select certain elements on the drop-down select I currently have?
For example, if the profile has 'abc', 'bcd' selected, how can I make it so that when I edit that profile, the drop down box shows 'abc,bcd' instead of just "Nothing Selected"?
Edit: I previously responded to a comment inquiring about bs-select, saying that it simply controlled some CSS elements of the drop down box - seems like this is completely incorrect after a quick google search when everything else led to dead ends. Does anyone have any idea how to properly initialize the model with data so that when I preload my form, the 'can send to' drop down select actually has the selected options selected, as opposed to saying "Nothing Selected"? Thanks in advance for all help!
As you are binding source.canSendTo to the name (value.name) of sourceCanSendTo then you just need to initially have an structure binding the names which had been saved, something like this:
source.canSendTo = ['abc', 'bcd']; //And all the selected values
So you need to construct your source.canSendTo property to this structure.
PS: If you show how you bring your data from the server, I can help you to construct the source.canSendTo property.
$scope.canSendTo must be initialized with a reference to the selected option.
var initialSelection = 0;
$scope.source = { canSendTo : [ {"id":"abc", "name": "ABC"}, {"id":bcd", "name": "BCD"} ... ] };
$scope.canSendTo = $scope.source.canSendTo[initialSelection];
Finally found out what was wrong with my code - seems like the data being stored in the model wasn't the same as what was in ngOptions, played around a bit with ngOptions and managed to get something that works. Working snippet of code:
<select ng-model="sendTo.name" ng-option="value.name as value.name for value in sourceCanSendTo" data-style="btn" multiple bs-select>
(Realized that the variable being used for ngModel was a fairly ambiguous in terms of naming convention, changed it)

web2py - Dropdown menu

I'm trying to have a dropdown menu for the user to select the database table. I have defined few tables in db.py and I want the user the to select a particular table from a dropdown menu and insert entries. Right now I use SQLFORM:
def index():
form=SQLFORM(db.selectedtable) #want to change the table name#
if form.process().accepted:
response.flash = 'form accepted'
elif form.errors:
response.flash = 'form has errors'
else:
response.flash = 'please fill out the form'
return dict(form=form)
I need the user to select 'selectedtable' value from a dropdown list that shows all the available tables in the DB. I do not necessarily want to retrieve the table values from DB. I am OK with defining a list with the available tables and the dropdown menu can pull the table names from that list.
So far I only found IS_IN_DB to automatically create a dropdown and PluginDropdown() but that does not serve my purpose. If soemebody can direct me to the proper way of handling this task I'd be really thankful.
Regards.
Update:
After Anthony's suggession I tried the following with , as I'm not that familiar with JS.
{{extend 'layout.html'}}
{{select='NONE'}}
<form>
<select>
{{for item in TOOLS:}}
<option value="{{select=item}}">{{=item}}</option>{{pass}}
</select>
<input type="submit" value="Go!"/>
</form>
<h2>Input form</h2>
{{=form}}
<h2>{{=select}}</h2>
As you might see this doesn't work properly. What I tried to do is to get the user chose value to 'select' variable. But it doesn't work. It always gets the last element in ITEMS (this list is defined in db.py). My next option would be to be call another controller function, passing the user selected value as an argument. Then it can prepare the form with the passed value and send to a view to display
<h2>Input form</h2>
{{=form}}
But I'm not sure how I can assign the user chosen value to an argument and then call another controller function with that arugument value.
If you have any suggestion how I can modify this to get the user chosen value thats very much appreciated. Thank you.
You could create a <select> element listing all the tables, and then load the form associated with the selected table as a web2py component via Ajax. In the view of the main page (e.g., /views/default/index.html):
<script>
jQuery(function() {
jQuery('#table').change(function() {
web2py_component("{{=URL('default', 'form.load')}}" + "/" +
jQuery(this).val(), target='form')
})
})
</script>
{{=SELECT('Select a table', *db.tables, _id='table')}}
<div id="form"></div>
And in a controller (e.g., default.py):
def form():
if request.args(0) in db.tables:
response.generic_patterns = ['load']
return dict(form=SQLFORM(db[request.args(0)]).process())
else:
raise HTTP(404)
Note, db.tables is a list of all the tables defined on the db connection object -- it is used in the SELECT() helper in the view to generate a <select> list of all the tables. The script in the view registers a jQuery event handler that fires whenever a different table is selected from the dropdown. The handler calls the web2py_component() function (which is in /static/js/web2py.js), which loads the form component via Ajax into the div with id="form". It appends the value of the selected table to the URL.
In the controller, the form() function checks for the db table name in request.args(0). It then sets response.generic_patterns so the "generic.load" view will be allowed (by default, generic views are only enabled for local requests). Alternatively, you could define your own "form.load" view, or even use a different extension (e.g., "form.html").
Because the form is loaded as a web2py Ajax component, the form submission will be trapped and submitted via Ajax as well, so it will not result in a full page reload.

Resources