How to update a form view with JavaScript in Odoo10 - javascript

Thanks for your help in first.
For a project, I need to create a dynamic table with JavaScript on a FormView but I'm stuck ... I don't know how I can access to the view and update the table, files are correctly read by Odoo (Js, CSS). I tried a lot of things like use console.log for look in the object but nothing seem good to me :( .
For now i have this code :
odoo.define('ms_contract.view_form_intervention', function (require){
"use strict";
var form_widget = require('web.form_widgets');
var core = require('web.core');
var _t = core._t;
var QWeb = core.qweb;
var Widget = require('web.Widget');
var View = require('web.View');
console.log(Widget);
console.log(form_widget);
console.log(core);
console.log(_t);
console.log(QWeb);
console.log(View);
});

You can define odoo widget to call any javascript code. Explore more about it. If you try to be more specific about your need then. May be I can help in a better way.

Related

Titanium: How to get the objects or native object created from .js

I am doing dynamic layout in IOS developing: For example there are many tableviewCell templates described in js file, so I want to get the templateCell v from js.
For example, I have a TemplateView.js, as following:
var contentView = Titanium.UI.creatView({
backgroundImage:'../images/background.png',
height:320,
width:44
});
var button = Titanium.UI.createButton({
backgroundImage:'../images/send.png',
height:33,
width:33
});
contentView.add(button);
Now how can I get the objects or the root object(contentView) created from eval TemplateView.js?
try this:
var row = Alloy.createController('TemplateView', payload).getView();
$.TableName.appendRow(row);

Best way to represent HTML part when writing a complex jQuery plugin

I have a complex jQuery plugin to write, It does have a lot of html to show on screen and I am supposed to create them. Well, what is the best way to do the job. I can already hard code them for sure , but is there any other elegant method? is there a way to use some kind of templating?. definitely I don't want to have lot more dependency either.
You can put them in an external file(s) and load them when you need but this means plugin users will have to download all your files, instead of a single js file. Another option I used before (not for a plugin though) is to have an object inside your plugin which holds all the html you want. This makes it easier to write the plugin as the html doesn't clutter the plugin code. Also when you need to edit the html, it's in a single place. You can also put your templating code inside this object.
var pi = function() {
var self = this;
self.getNewDiv = function(){
return repo.getDiv();
}
//..... all your plug in code goes here and at the bottom
var htmlRepository = function() {
var divCode = "<div></div>";
this.getDiv = function(){
return divCode;
};
this.getSpan = function(){
return "Span Content";
}
this.getDivWithSpan = function(){
return getSpan().wrap(divCode); //etc
}
};
var repo = new htmlRepository();
}

Add settings to embeddable angular widget

We're nearing the completion of working on an embedible JavaScript widget which has been built with AngularJS, to date everything it working fine, however we're now at the point where we need to allow the site owner to inject config settings into the JavaScript such as:
company_id
user
name
email
id
default overrides
In a previous iteration of our widget we used raw JavaScript, and were able to add settings like this:
Widget = window.Widget || [];
(function () {
var i, e;
i = document.createElement("script"),
i.type = 'text/javascript';
i.async = 1,
i.src = "https://path/to.js",
e = document.getElementsByTagName("script")[0],
e.parentNode.insertBefore(i, e);
})();
Widget.push(['set', {
'account_id': 'konami',
}]);
Inside our JavaScript, we simply had a window.Widget object which we overwrote with their settings and used wherever we needed.
However I'm at a loss as to how / where to receive this information and use it from inside our angular app, would appreciate any help on the best way to add in settings / configuration from when the JavaScript is loaded, and be able to use this in our services / controllers.
I ended up just adding the settings I wanted directly on an object on the window, then used that inside my angular project.
ala
_widget = window._widget || [];
_widget.company_id = '1234';
_widget.user = {name: 'Chris'};
Definitely not the pretty way I was hoping for, but it gets the job done.

Reusing Knockout.js ViewModels

Hi there i'm building multipage application with Knockout.js and i'm facing a problem writing too much duplicated code..
As example in one of my views i have:
var personVm = function {
//properties here
}
personVm.prototype {
//extensions & methods here
}
And at some point i have to use the same ViewModel in some other view.. So i end up duplicating code..
I searched for solutions and require.js is the most common.. But in my case require.js is not suitable and i can't use it. So i will be glad if some one shares some ways to deal with this problem.
Update:
To clear more my question i need some kind of container from which i can grab instances of given ViewModel for my differen views ( which i get from asp.net )
You could use knockouts own ko.utils.extend
var personVm = function {
//properties here
}
personVm.prototype {
//extensions & methods here
}
then, later
var superHeroVm = function() {
var self = this;
self.specialPower = ko.observable();
ko.utils.extend(self, new personVm());
}
Why can't you just keep personVm in a file which you can access from all over and make a new one each time?
thisModel.person = new personVm(data);
otherModel.person = new personVm(data);
Or am I not understanding the problem correctly?

non-concatenated dat.gui source with require.js. Customising, or templating dat.gui

Please excuse the SEO friendly title, but I would like to make the problem I am currently solving as accessible as possible. For those of you who are looking to customise the look and feel of dat.gui, you need to download the source and include it using require.js using the instructions here: https://code.google.com/p/dat-gui/.
And now my question.
I am working on a project that requires building a UI with heavy live integration with Javascript (I'm using three.js) and I have decided to modify dat.gui to create this ui; with a view to soon integrate it with backbone.js as a collection of views.
I wish to switch to use the dat.gui source files to edit the styling
To start, I switched over from the concatenated dat.gui.min.js, to the source using the instructions in the link above. I put the whole source in its own folder within my libraries folder, and placed the main.js file the require.js err... requires within the "src" folder. I did this due to linking dependencies within dat.gui's "GUI.js".
Everything seems to link up properly, and I am using essentially the same code as I did before to create my dat.guis, but I keep getting undefined errors, depending on how I change the gui variable either in my original code or in main.js. My understanding of require.js is VERY limited and I feel it is something integral to how it works (and that it's defiantly one of those oh so simple problems for someone with the know how)
Here's my main.js file located at /libraries/dat-gui/src
(this dir also includes text.js)
//This is main.js for using require.js
require([
'dat/gui/GUI'
], function(GUI) {
// No namespace necessary
var gui = new GUI();
});
and here's the bones of my original dat.gui definition code:
////////////////////////////////////////////////DatGui/////////////////////////////////////////////////////
var stageConfigData = function() {
this.scaleX = params.stageWidth;
this.scaleZ = params.stageDepth;
this.spinTheCamera = false;
this.lightIntensity = 1;
this.lightDistance = 0;
this.lightFrontColour = "#ffb752";
this.lightRearColour = "#3535fa";
this.lockCameraToScene = true;
this.tooltype = 3;
this.objectSelect = 'Man';
this.saveJSON = function(){
saveJSON();
};
};
var stageConfig = new stageConfigData( );
var moveConfig = new moveConfigData( );
///I think the problem is linked to defining this variable:
//var gui = new dat.GUI();//works for the minified version
var gui = new dat.GUI();//for non-concatenated
var fstage = gui.addFolder('Stage');
var fcamera = gui.addFolder('Camera');
var ffhouselts = gui.addFolder('Front of House Lights');
var fRearlts = gui.addFolder('Rear Lights');
var sandl = gui.addFolder('Saving and Loading');
fstage.add( stageConfig, 'scaleX', 1, 100, 5).name('Width of stage').onChange( function(){
stage.scale.x = ( stageConfig.scaleX );
});
fstage.add( stageConfig, 'scaleZ', 1, 100, 5).name('Depth of stage').onChange( function(){
stage.scale.z = ( stageConfig.scaleZ );
});
... //there's more but i think it's irrelevant
and the errors i am getting are either:
Uncaught ReferenceError: dat is not defined
or
Uncaught ReferenceError: GUI is not defined
depending on how I mess with those variables and the bit in main.js under //No namespace necessary. I don't understand how namespaces work as I am quite new to javascript as a whole.
Has anyone any ideas? Again, I'd say this is probably one of those real dunce moments, but I would really appreciate the help nonetheless.
Thanks a lot!
When you use require.js method there will be no global object. But you can create it yourself
require([
'dat/gui/GUI'
], function(GUI) {
window.dat = {
GUI: GUI
};
});

Categories

Resources