Can you tell which SelectField triggered an onChange? - material-ui

I am working on a component which may have any number of SelectFields and want to use one onChange handler for all of them. Can I tell which SelectField triggered the onChange?
At this point I resorted to
onChange={this.onSelectChange.bind(this, key)};
With key taking on a value that identifies the SelectField. The SelectField is generated in the body of an Array.map.
I wanted to avoid the bind, but haven't found a better way.

If you don't want to link the function, call it explicitly. And I'd rather use the id of an element for identification than the key:
id="coolSelect" onChange={(e)=>this.onSelectChange(e.target.id)}

Related

SAPUI5 No dynamic way to get form data without data binding. And no Form submit event.

I have a simple form that's in a dialog fragment used to submitting two fields for log-in auth.
For simplicity I was hoping to not have to use data binding, but rather use some method to gather all data inside my sap.ui.layout.form.SimpleForm.
I added a name property to each input element which says in the docs it is " Defines the name of the control for the purposes of form submission."
https://openui5.hana.ondemand.com/#/api/sap.m.InputBase/controlProperties#name
However hard as I try to find there doesn't seem to be any getFormData methods.
All SO questions and guides either use data binding to a model, or hard-code references to the individual input controls with .getValue() methods.
And looking further into the form API, there doesn't seem to be a Submit event either.
Given an arbitrary form, what would be the best way to gather all submission values without hard-coded references or data-binding?
Would a method that walks though all the children elements of a form looking for all submission values work? I think it might, but there are more submission input types then just the input component.
You can get the value of the fields by directly using;
var oField = sap.ui.getCore().byId('IdOfTheFieldAtTheDialog');
var sValue = oField.getValue();
But it's always better and convenient to use data binding which keep things neat.
And If I assume that you have the id of parent form container, you can iterate over the items and get the sap.m.Input elements in it without knowing the IDs of the individual inputs, and you may check the name property of the fields if you want. Check this snippet;
https://jsfiddle.net/hdereli/9e92osfk/3/

Mask input for sap.m.Date(Time)Picker

With the sap.m.DateTimePicker, it's possible for a user to either select a value from the drop-down list or enter it manually. I'm wondering if there's a way to add a mask to the manual input box that matches the valueFormat of the DateTimePicker.
I know there's a sap.m.MaskInput as well, so maybe there's a way to combine the two elements.
There is a new private module named sap.m.MaskEnabler which the sap.m.InputBase (i.e. DateTimePicker) is supposed to make use of.
(MaskEnabler) should be applied to the prototype of a sap.m.InputBase.
The mask feature is currently enabled only in sap.m.TimePicker (v1.54). According to this commit message, however, the same feature will arrive to the Date(Time)Picker as well:
This change prepares for refactoring of DatePicker and TimePicker so the
common code of both pickers can be moved to a new common control that
they may extend.
Therefore, if it's not urgent, and depending on your project, I'd not create a new custom control and then throw it away once the mask feature has arrived.
I'll update my answer when it's available.
Until then (and even afterwards), you can still guide the user to enter the data in the correct format via OData binding type sap.ui.model.odata.type.DateTime:
<DateTimePicker
value="{
path: 'myODataModel>myDateTime',
type: 'sap.ui.model.odata.type.DateTime',
constraints: {
isDateOnly: true,
displayFormat: 'Date'
}
}"
minDate="{...}"
maxDate="{...}"
/>
In contrast to formatter, type allows us to keep two-way data binding.
The entered value is automatically intercepted from updating the model data when...
It could not be parsed due to an invalid format (fires parseError)
It could be parsed but the constraints were violated (fires validationError)
If you enable handling UI messages
additionally, the framework will then take care of creating the appropriate
message for the user:
Example: https://stackoverflow.com/a/48482544
I think the only way to combine the two sap.m.DateTimePicker and sap.m.MaskInput is to develop your own control . Documentation : https://sapui5.hana.ondemand.com/#/topic/91f1703b6f4d1014b6dd926db0e91070.
Another way is to just use the Placeholder of the DateTimePicker Input field. This does not provide the same functionality as a MaskInput, but helps the user which valueFormat is expected in the input when entering it manually.
If you have a binding in your input box, you could set the type in the binding to eg. sap.ui.model.type.Date. This way you get some automatic formatting when field validation is triggered. There are other types available and you could inherit from sap.ui.model.SimpleType to code your own.

GTM Reduce number of tags

GTM up and running, main UA tag in place along with a ClickListener tag.
To reduce the number of macros, i use dataLayer variable Macros for event category, action, label, value & interaction, so they can be used for many rules and tags.
So i want to collect data from one link/button (Add to Fav), i add a rule to listen for the click using {{event}} equals gtm.click and {{Event Label}} equals Add_to_Fav (the label i push to the DL via onclick.
All good so far, but i need to create another UA tag (Track Type - event) that fires on the rule made previously. And this is my question, using this method seems to create many tags. If i have another 20 links that i want to collect data from, do i need to keep creating tags like this. Surely, this will affect page load speed with many tags firing on all pages.
Hope thats all clear.
If you need to retrieve the link text to use it as an event label you do not need many many event tracking tags, that would be horribly verbose. Instead you can use a custom javascript macro - the cool thing about them being that you can use existing macros inside your custom function.
If you create a click listener or link click listener this will create a few macros - one of them is {{element}}, which is the DOM element that received a click.
Now you create a macro of the type "custom java script", which must contain an anonymous function with a return value.
The barebones version of a function that retrieves the text of a clicked link would be
function() {
var el = {{element}};
return el.innerText;
}
(actually you do not need the variable assigment, you could use {{element}}.innerText directly).
You name the macro e.g. Linktext and use the macro {{Linktext}} in your single event tracking tag where it will dynamically be set to the value of the text of the clicked link (although you might want to check cross browser support for innerText, or maybe use innerHTML instead which serves in you use case probably the same purpose).

ExtJS 4 - How to load grid store with its params carrying latest values from a form?

I have a window with a search form at the top and grid at the bottom.
User can enter values in the search form and click button - Get Records.
At the click of this button, I load the store of the grid by passing the values in form fields as parameters in following way:
store.load({
params:{
key1:Ext.getCmp('field1').getValue();
}
});
I tried giving parameters in the store proxy itself, but it unfortunately always takes up initial values (values when the form is rendered) and not the latest one entered by the users in the form fields. Following is the method I used for assigning values to params while creating the store:
extraParams:{
key1:Ext.getCmp('field1').getValue();
}
I wanted to seek guidance at two things:
a. While defining a store, can I ensure that store takes latest/current values from the form fields before querying server, so that I don't have to provide these values while calling load function?
This becomes more necessary as I have a paging toolbar at the bottom which carries a refresh button (along with next, last, previous, first icons for navigation).
Now, whenever user clicks at refresh (or any navigation icon), the store gets loaded without the query parameters.
Thus the second thing is:
b. If the answer of 'a' is that - Pass the latest values to parameters manually when calling load function - then how can I write the handler for 'refresh' button and navigation icons (that is, next, last, previous and first) in the paging toolbar, so that I can pass the latest form values to load function.
Thanks for any help in advance.
PS: I am using ExtJS 4.
yourStore.on('beforeload',function(store, operation,eOpts){
operation.params={
status:cmbStatus.getValue(),
value:txtBuscarPor.getValue(),
empresa:'saasd',
app:'dsads'
};
},this);
Related to your question (b) (and because you especially asked for this in the comments section):
I see only one standard way to hook into the PagingToolbar button handlers which is very limited.
Ext.toolbar.Paging fires a 'beforechange' event before it actually changes the current page. See API docs. A listener that returns false will stop the page change.
All other methods require extending Ext classes which wouldn't be a problem if the ComboBox would make it easier to use your own implementation of BoundList (which is the class that renders the dropdown) or pass through config parameters to BoundList resp. the paging toolbar.
I tried to bring this lack of flexibility up on the Ext message board once but was pretty much ignored.
A possible solution for this is to use 'beforeload' event of the store and provide the list of parameters in it. This way, whenever the store is loaded, then its beforeload event is fired and the values picked up are always the latest. Hope this helps someone looking for something similar.

Get form field value via module [VBA]

I have a program built with VBA, in access.
I have a form with the field chDate and I need to get the value of the field in a module file named Global (not class module).
I tried to access it but I think I get empty value, string. not error.
I'm no expert with VBA, its new to me (I have experience with VBS).
Can someone please help me and tell me how can I access the value of a form field via module file?
Thanks!
If you can provide some sample code, it might help us in trying to get you a solution.
Here's what might work:
Dim an object as an instance of your form, and set the instance to a new instance. These two lines will do that (assuming the form is called frmForm)
Dim theForm as frmForm
Set theForm = new frmForm
then Show that Form:
theForm.show
The form will get the focus, so you can populate the fields. At that point, once the form is hidden, your code should be able to pull the field as such:
var1 = theForm.txtFormField.Text
However, if you unload the form in code, all variables directly tied to the form will be lost. In that case, you might want to follow Oneide's example, and set a global variable to the value of the form field. You can do this in one of the form's event handlers.
Let me see if I can recall my Access days. In your global module you should access the form field be prefixing the form name i.e.
var1 = Form1.txtFirmField.Text
As far as I know, you're trying to get the data the wrong way.
Anytime you would try to get your form data, from a standard module, your form probably will already be closed or, if you're not opening it as a restricted window, the value will not be ready yet.
Anyway, if you could get pass through all the difficulties above, you're probably coding in a not standard / right way.
Remember that VBA is an event driven language, and you would be better using it's strenghts rather than fighting against them.
As a final word, if this is just a casual coding, I suggest you using a global variable and make de Code Behind Form have set it up on control's change event.
If you're not sure what I mean, please leave a comment and I'll try to explain it better.
And, if you don't mind, let us know more about your starting code to get better answers.