Odoo9 - How to access the DOM of a formview from javascript? - 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.

Related

dynamic pemission in angular6 and aspcore

I want to create a dynamic access level, but I have no idea how to do it.
I need to fully dynamically navigate the menus and buttons of the site, but I do not know if I could do this.
I mean more buttons. For example, the delete and edit button, and the update button.
Please guide me to get a good idea.
I already worked on that type of case. And i used https://www.npmjs.com/package/ngx-permissions which is pretty handy when roles/permissions have to be managed. For example you can retrieve the user roles from the database, and fixe roles behaviors on buttons or panels or everything you want to show/hide. It works like a charm. I encourage you to read the documentation. It will help you for sure.
Have a nice day
You can achieve this using ngxpermission. Refer this link for a sample which has a user component in which buttons and menus are loaded dynamically based on the permission that you have set. I have forked angular 5 example and modified it. But you can achieve the same in latest angular version too.

nested calendar view inside a form view

I'm developping for odoo10 plateform
I want to nest a calendar view inside a form view. Is it possible already or do I have to meddle with odoo code?
To be more precise: Inside a form view, I want to display a calendarview with available slots to take an appointment on the fly. I am already working on a way to display available slots with javascript, now I would need to nest the calendar view. (maybe it is not that much more precise ^^)
I am not afraid of going deep inside the javascript code if needed. I'm looking for maybe a hint on where to start.
For example: how are nested Kanban and Tree views processed? Where is it in the code?
thanks in advance for the answers!
Zoggy.
You could find how the kanban views are integrated for one2many and many2many fields at:
https://github.com/odoo/odoo/blob/93d69933acc9454a5741fe6eb39edd9cdae9fbf1/addons/web_kanban/static/src/js/kanban_relational.js
And you could see the usage of those widgets at:
https://github.com/odoo/odoo/blob/93d69933acc9454a5741fe6eb39edd9cdae9fbf1/addons/web/static/src/js/views/form_relational_widgets.js#L1280
https://github.com/odoo/odoo/blob/93d69933acc9454a5741fe6eb39edd9cdae9fbf1/addons/web/static/src/js/views/form_relational_widgets.js#L1380

How to use Cascade inside kendo grid dropdown?

Actually my requirement is to get the Activity Name when ever the WorkcenterName getting change i need to display corresponding activity in dropdown. Activity i will get from gridData(this is variable in my example).
I tried using cascadeFrom , I am not able to get the value. I hope i explained my requirement clearly.
Here with attached Dojo link. Please have a look my code and give the solutions for this.
http://dojo.telerik.com/APeVA
Thanks in advance..
I was able to find a couple of thing wrong with your dojo code and update your dojo here with a working sample. Here is a list of some of the problems I found, the solution was probably a combination more than 1 of these.
There was no cascadeFrom or cascadeFromField defined in your activity drop down.
I normalized your gridData data set, separating the activities into a separate list that I used to fill the activities drop down. I replaced it with an ActivityId in the gridData. Kendo data sources do not support a object or array field types.
Added a name attribute to the workCenterName drop down so it could be found by cascade setting.
Added an id to the gridData, this helped the edit/cancel/delete work properly.
I have done that in a .cshtml. Hope this can help you.
I have defined the columns as follows:
columns.ForeignKey(p => p.Servicio, (System.Collections.IEnumerable)ViewData["SER"], "CodServicio", "DesCorta").Width(75).EditorTemplateName("ServicioTemplate").Title(Recursos.Resource.SERVICIO);
columns.ForeignKey(p => p.Seccion, (System.Collections.IEnumerable)ViewData["SEC"], "CodSeccion", "DesCorta").Width(75).EditorTemplateName("SeccionTemplate").Title(Recursos.Resource.SECCION);
The secret here is .EditorTemplateName(). I have a folder, in a specific location. Not sure if you can change that, but I think it must be in Views/Shared/EditorTemplates and there I have defined both dropdowns, the second one with .CascadeFrom() property just as you would use it outside of a grid.
Hope this can help you, feel free to ask anything you need!

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.

Multiple Directives working together

I have an idea I want to build in Angular but I'm not sure if it is possible and how I can start developing it.
The idea is that by extending html with some own attributes, I could call a webservice without any need for javascript code.
The result for the developer would be something like this:
<div service-url="http://myWebService" service-id="id1">
<input service-id="id1" service-input-id="FirstParameter"/>
<input service-id="id1" service-input-id="SecondParameter"/>
<button service-id="id1" service-submit>Submit</button>
</div>
The idea is you can create a service call with a unique service-id. You can then create elements such as inputs/selects where you use the same service-id together with a unique service-input-id that refers to the field in the webservice the value should be mapped to. Finally by adding the service-submit attribute to an element a trigger can be created to call the webservice.
If I translate this to AngularJS, each of those custom attributes needs to be a custom directive if I'm not mistaking. But I'm not sure how I can let them work together when the scope is isolated. For example: when the user clicks the button with the service-submit, I need to get all the values of the inputs that are linked to the same service-id.
I'm not even sure if I'm thinking in the right direction regarding how to approach this in Angular. So any help would be greatly appreciated.
PS: My idea is not with webservices but it seemed like the closest thing I could use in my question to get the concept across.

Categories