I'm a new user to knockout.js and so far have been very impressed with basic use.
I want to be able to auto calculate a field (yr2 Expense) based on a previous field (yr1 Expense), but also allow the user to change the auto calculated field. This auto calculated field is then used for another calculation (Total Yr2). I've been trying to do so with this jsfiddle, but have had no luck so far. I can't find any info in the examples on how to do this.
I first tried making yr2 Expense an observable, which does not allow for auto calculation. I then tried making yr2 Expense a computed, which does not allow for Total Yr2 to be updated with user input. Is what I'm trying to do not possible? I would think this would be common in finance calculation forms, which is what I'm doing this for.
First of all, variable names should be easy to understand and intention revealing. There is no benefit to obtuse or abbreviated names, like the ones used in your fiddle. They are confusing, and this adds difficulty to code maintenance. If you plan to minify your js later then the names wont matter anyway. If you need to read your code later, having full, easy to understand names helps tremendously.
There are two ways to accomplish what you are after.
One method would be to use subscribers to alter the calculation of the observable after a change. See this, near the bottom of the page. Here is a fiddle demonstrating this method. For this example, I recommend this method.
Note: I am leaving off valueUpdate so that recalculations only occur when the user is done typing. If you use afterkeydown, it will recalc early, causing issues. Try pressing [Enter] when you want it to recalc.
The second method is to use writable observables (Second header, 1/3 down the page) to make computed observables that have read and write methods. I don't think this method is as good a fit for this specific example, but the example in the linked KO documentation should give you an idea of when it works well.
Related
Odoo 13.
I got two float fields: time_given and timer.
I have created a widget for 'timer' field. My widget works as real-time clock or some sort of timer. The problem I have encountered is that I want to change the style of 'time_given' field based on the following condition:
((time_given - timer) <= 30 sec) i.e less than 30 seconds left
To change the style of the field the widget attached to is pretty easy, but I am not sure hot to get access to other field elements in the form view I need and make some visual manipulations with them if needed.
I was able to get access to other field elements, change their style and add some text but the it is not a proper way.
this.__parentedParent.__parentedChildren
I get array of objects, then I loop through it and look for the field needed. After I found my target field element I am able to play with it.
For example:
$field_name.addClass('text-danger')
The way above works pretty fine but again as I said before, this is definitely not a proper way.
I was trying to find the right field element and add class to it by the following way:
$("[name='field_name']").addClass('text-danger')
It found the element, but did not add the class 'text-danger'.
I was trying my best by googling and reading the source code, but failed.
enter image description here
I have managed to solve this issue. Just used core.bus.trigger method mentioned in the official documentation.
P.s. In case if you are still interested how I did this in more details, just let me know in the comments section below.
I had no success researching this problem, so apologies for my difficulty in concisely describing it.
Basically, I'm building a website where users can submit "recipes," by way of html form > php. I wanted a way then for users to dynamically add or subtract steps or ingredients (I've seen this on other sites, but I couldn't find a simple pure js solution).
Anyway, I built something akin to what I wanted (example here, JavaScript here), but I'm not convinced it's such a great solution. To retrieve the form info, the php code basically loops through the materials' and steps' ids until it's reached the last one.
Although this solution works, I've run into 2 more problems:
The first is that the text for each input is saved in a js array each time the user types--that way new inputs can be added or removed without losing the text. However, when a new input element is created, if this previous text was too long, it is cut off.
The second is that for the ingredients section, I'd like to have a element where users can only choose standardized measurements (ie mg, g, kg...) and then another for a numeric quantity. I've tried Bootstrap's input-group classes, but the spacing turns out very odd and doesn't work at all on mobile. Is there a better way to accomplish this? This also thoroughly complicates the my original solution, since there will now be 3x as many inputs.
Hi awesome developers,
Maybe someone can help or put me in the right direction. I want to create a settings page with a few yes/no options.
These settings need to enable or disable form events from different entities. First I was thinking about creating a new entity named foo_Settings with a few fields and yes/no options to trigger on change events. These events will then add or remove events from another entity.
After doing some research, I couldn't find any examples or cases or any info if this could be done through webservices.
I hope someone can help :)
Greets,
Yes, it is a common design pattern in CRM to have a settings/configuration-entity for storing settings such as this.
You can decide to either have one settings-record per organization, or maybe one settings-record per business unit if that suits your needs better. In this way you can have different configurations depending on the need of each business unit.
After creating the settings record and adding some boolean fields, you would write javascript that runs OnLoad of specific entities. This code would fetch the relevant settings-record, read the value of the relevant boolean-field and add a change listener depending on the value of the boolean by calling addOnChange().
After thinking about the settingspage and ways/solutions to create such functionality, there also was something that was itchy..
By creating a settings page and checking in the onload function of each entity with a fetch (odata call), this is not the most fastest or cleanest way. What if thousands of people are using a entity.. This will resulting that thousands of people will fetch.
So my solution will be:
Creating a settingspage (entity).. Onchange event of a setting will fire a odata call to set a record (true or false) on a hidden field in that entity..
In the onload of the entity I will check the value of that hidden field and do logic. This way I will prevent that there will be an Odata call every time the page loads..
Are there any other solutions?
I have a requirement that a custom entity 'Priority' is selected on the case form but rather than using the normal lookup method, I want to display a picklist with the priority entitys listed.
One solution I have come up with is to have the lookup field on the form as normal but not set to visible and have a jscript routine add a select to the DOM looking up the required values at using a JSON request. On the selected changed event of the custom select, I can programatically set the value of the lookup.
The problem with this is it's quite messy and not supported.
Is there is a supported way to do what I want and if not, can anyone see any issues with the solution provided?
Settings the value of a lookup with javascript is supported. Custom html controls are suported as web resources. Your solution will work and actually is a supported customization.
As for your other options...
Presumably this request stems from the users thinking it takes "too many clicks and too much time" to select from such a short list of Priority entities. Is it possible your requirements are negotiable? Are your users aware of all two nice features of the lookup: 1. you can type the first few letters of the Priority's name and tab out, and it will auto-complete for you. 2. Similarily you can type just the first couple letters and a dropdown will expand below the lookup with the available options. Its quite fast and you dont need to load a seperate screen which I am assuming is their usability concern.
Alternatively, if they are dead-set on the dropdown, can this Priority data be represented as an optionset? I'm a bit suprised that you needed an entity for Priority concerns, what metadata about priority do you need?
I'm writing a form for a custom module and I want to show/hide some fields according to which radio is checked, kind of like what happens when you select a payment method in the onepage checkout and a description appears.
Before I start writing the js code, I took a look at js/varien/form.js to see if I could use an already existing function, but the truth is my js skills aren't enough to really understand what I'm looking at.
So my question is, is there something I can use? Which method and how can I trigger it?
I'm gonna review onepage checkout's code in order to see if it makes things clearer, but if you know another form that has this behaviour please let me know.
Also, I know how I could write such code in plain javascript, but I'd rather use the magento way, in order to learn.
Cheers
The Javascript code doing is defined in [skin]/js/opcheckout.js. The Payment class defined there is made solely for the credit card checkout form.
You can study what they did and do something similar - or just write the show/hide code yourself. I'd suggest the latter if you don't have an insane amount of programmic logic - otherwise wrap it in a class.