We Keep Coding

Odoo9 - How to access the DOM of a formview from javascript?

I Want to change few field colors dynamically.
I couldn't do that directly like the tree view , to do the same on the form view we should use JavaScript (correct me if i'm wrong) , i'm trying a solution ,but i have a problem i don't know how to access to the DOM of a form-view ,can you help me with this ?

Check the web repo for examples. For the tree view search for "color" there. Here are a couple:
https://github.com/OCA/web/tree/9.0/web_context_in_colors
https://github.com/OCA/web/tree/9.0/web_tree_dynamic_colored_field
The approach is the same: you override/extend the class of the widget via JS, like here, no matter if is a list/tree view or a form view.
This one for instance acts on form view. As you see, is plenty of examples. Still, you should provide more info on what you are trying to achieve.
Last but not least, read the official docs about javascript and check stack overflow for existing answers.

MVC5 Easiest way to search items and add to list using AJAX?

I'm trying to build a shopping cart type function where an order header is shown and the user can search and add items to a list.
I would prefer this be done using ajax to reduce postback time.
There are 3 table elements, Items, Order, Order_Items
So essentially a searchable list with add button/links on the left of the screen and a list area on the right which is then to be saved when alterations are finished?
is this best achieved with partial views passing to and fro? or using a view model all on one page that updates each others elements? or by another way that's easier?
Hoping someone can point me in the right direction and optimistically hoping for some example code to show its implementation.
Thanks in advance.

Found a great Ajax, MVC Partial view example here, covered everything I was looking for, hope it can help someone else.
Using Ajax and Jquery in MVC and Partial Views

Ext JS 4.2 primer

My company just bought a third party application which is based on the ext js 4.2. framework.
The software is closed source, but it is web based such that I can add a .js file to change the UI to my needs.
I want to add some controls to the rendered page. The software is showing IDs everywhere instead of text.
Example: "Issue created by: ID123". When I hover the field is get "ID123. John Doe". Ok, I am a JS ninja, so I can just add a field to the HTML DOM which will display "John Doe"in the correct spot.
I looked at the HTML code to get the correct control and see the the IDs are generated. The code I would write is prone to break with each new release of the third party software.
Now, since the is an Ext JS application I can probably solve the issue much more elegantly like adding a field not to the DOM directly but to the Ext JS container.
Question:
In Javascript I have a reference to the Ext JS app. How would I access the current view or viewmodel or model to query data and add a field?
Rough idea/Pseudo code:
var id = app.getCurrentModel.getValue("creatorID");
var name = myserver.getPersonData(id).name;
app.currentView.addLabelControl(name);
I googled a lot but all examples I found assumed that you are writing the ext js app and you are already in the controller or the view. But I only got the reference to the app.
Sorry for the newbie question :)

"App Inspector for Sencha"
For a quick glance over component hierarchy, you can use the Sencha browser plugin,
Find a certain ExtJS component programmatically
To quickly search ExtJS components or transform your findings into code, your main tool will be the browser console and the command Ext.ComponentQuery.query(xtype), e.g.
Ext.ComponentQuery.query("grid")
Ext.ComponentQuery.query("panel")
Ext.ComponentQuery.query("form")
You will then find in browser console an array of all components of that type. Select the right one, and check whether it has an id or itemId that is not auto-generated (everything like xtype-1234 is auto-generated). For form fields, the name attribute could be useful. Commands like
Ext.ComponentQuery.query("[itemId=ABC]")
Ext.ComponentQuery.query("[name=DEF]")
Ext.getCmp(id)
are far more readable and not as prone to side effects as Ext.ComponentQuery.query("panel")[12].
Most of the time, it can also be useful to think in tree structure. If you want a certain container which contains the only slider you see, trying
Ext.ComponentQuery.query("slider")
Ext.ComponentQuery.query("slider")[0].up()
could be easier than sifting through dozens or even hundreds of containers. Ways to traverse the component structure include up(xtype), down(xtype), nextSibling(xtype), previousSibling(xtype). If an xtype is provided, the next component of the corresponding xtype is selected; if it isn't provided, the next component is selected regardless of the type (e.g. direct parent, adjacent sibling).
Change anything you want.
You can extend, debug or modify any existing behaviour, including but not limited to ExtJS's own code, using a so-called override over any component, including the views or stores that make up this app. override makes a great search term for further information.
Or you can add new components to existing components, like a button to an existing form, from outside the app. For example, open sencha docs and then insert in console:
Ext.ComponentQuery.query("searchcontainer")[0].up().insert(1,{xtype:'button',text:'Test',handler:function(){Ext.Msg.alert('Test Button clicked');}});
You should then find a button on the top left, right of the Sencha logo. Click it.
Find existing controllers
For this, you have to find the name of the app namespace.
If it is e.g. MyApp, then MyApp.app.controllers.items contains the list of controllers. Controllers contain control logic, and the mapping between the components and the logic. When components are created, controllers attach their events to these new components. Many changes can and should be made in the component layer, because controller overrides are messy.
Find viewmodels
You're already done, ExtJS 4.2 does not support them.
Changing models
If you want to change models, be cautious: There is no supported function to add fields to a model. You can override the model prototype, and push more entries into the fields array. But if you have any model instances (records) already running around by that time, they are not updated and any existing warranty is voided.
That said, you find them in MyApp.model. You can e.g. get all fields of the Sencha Docs' Comment model using Docs.model.Comment.prototype.fields, or even push another field in.

Render dynamic UI with HTML versioning in Angular JS

I have a challenging requirement. The requirement is as follows.
We are designing a UI today with 10 UI elements.
Users are creating few records.
After a month, a new release comes and it has 12 UI elements on screen.
When the user creates new records, he should see 12 UI elements, when he opens an old record he should see 10 elements.
In order to achieve this, I thought, we could store the version with which the record was created and render the HTML belonging to that version. But, this will unnecessarily keep increasing the project size, as if the code gets 100 revisions, that much of HTML duplicates will be present.
I thought of using "switch-case" or "if-else" statements in front end, but it will slow the UI as too much heavy lifting is done by JS.
Please suggest a way to do this requirement with JS or jQuery or Angular. Any one framework is also fine, until it will work.
Thanks a lot for your responses in advance,

Look at a framework called angular-schema-forms. You write no HTML with this framework. Instead you pass it a JSON object that has the fields you want to display and their corresponding display as attributes. It comes preloaded with its own templates for all common controls and also allows you to write your own.

Javascript MVC, need help with structure/methods?

I am attempting a single page application. I understand the main concept of how mvc is used to some extent and am using a lightweight framework called backbone.js. My issue however is not with backbone. I actually am having a problem figuring out how to structure my user interface. I have a bar at the top of the page with 4 buttons. Each button opens an instance window within the application. Within Each of these instance windows html, css, javascript will be utilized. Any suggestions on how to structure the core concept of this user interface.
Considerations on my part:
Each window instance has it's own
div with a unique ID (display:
none).
On-load, the application should
already have necessary html, css,
and javascript loaded into dom. The
html should be inside each unique
div pertaining to its instance
window.
Each menu button should modify its divs
display: to block, bringing the
instance window for that button to
front, but hiding all others.
Each instance window has to be
flexible enough to run javascript
within it, so I must be able to
create additional mvc's within each
unique div.
Okay, last comment. Should my user
interface utilize mvc or is
it not neccessary. Also, If it did use mvc
whats the best way to acomplish
this. There many different concepts
with mvc, like creating a view for
each instance window and listening
for clicks. It just gets confusing.
You think any of my considerations will effectively get the job done, and can you offer suggestions?

If I understand correctly, you want to have each button display a popup window, and be able to change the content of each popup window based on some action? I can only speak for how I would use ASP.NET MVC...
I would use jQuery UI Dialog to handle the popup windows, and have a form tag within each popup that uses its own MVC controller using ajax (I prefer the jQuery ajax command). Using ajax rather than a standard submit button allows you to send/receive data to/from the server without refreshing the webpage. You'll need the .serialize to convert your form into the correct format for sending. Each controller action can either return a JsonResult (which gives you back a javascript object you can use) or a PartialView (which gives HTML)...
Hope some of that made sense...
EDIT:
To answer your last point, I would have a model, view and controller for each window... but I am fairly new to the MVC pattern...

Although Sencha's ExtJS may not be for you, they have a very detailed tutorial of how they've structured the framework for MVC.
I'd recommend taking a look at this for some ideas: http://dev.sencha.com/deploy/ext-4.0-beta3/docs/guide/application_architecture.html
Cheers!