Odoo-WebClient 📡 offers a simply but super effective solution that reuse the powerful capability of native Odoo WebClient from outside frontend applications, handly seamless interact with Odoo Services from customize SPA(Single-Page App) or PWA(Progressive Web App), Maximize the value of the services that implemeted by Python🐍 code.
npm install odoo-webclient- Step 1: Setup client manager, configure the odoo instance address
import { getClientManager, DefaultClientManagerOption } from 'odoo-webclient';
async function setupOdooWebClient() {
const option = new DefaultClientManagerOption()
option.root = 'http://localhost:8069'; // odoo instance address, the instance should install Odoo-site module~
getClientManager().setup(option);
}
setupOdooWebClient();- Step 2: Hook the webclient mounted event, while the instance WebClient is ready then load data through orm service
getClientManager().mounted((event)=>{
reloadData();
});
function reloadData(){
const webClient = getClientManager().getWebClient();
if (!webClient){
return;
}
fetchApps(webClient)
}
async function fetchApps(webClient) {
console.debug('⚡️ getWebClient', webClient)
const orm = webClient.orm
// http://localhost:8069/web/dataset/call_kw/ir.module.module/web_search_read
const specification = {
icon: {},
icon_flag: {},
to_buy: {},
name: {},
state: {},
summary: {},
website: {},
application: {},
module_type: {},
shortdesc: {},
}
const domain = ['application', '=', true]
const result = await orm.call('ir.module.module', 'web_search_read', [[domain], specification])
console.debug('📡 fetchApps', result)
dataSet.value = result.records
}- Step 3: Let 🚀, do login then enjoy the smoothly and seamless data access experience.
const user = 'admin'; const password = 'admin'
const clientManager = getClientManager();
const request = await clientManager.login(user,password,true).subscribe(
{
next:x=>{
console.log('login reponse, should includes data.scrpitTags:',x)
}
},
error:(err)=>{
throw err;
});
export interface IClientMananger {
setup(val: IServerOption): IClientMananger;
login(
login: string,
password: string,
autoLoadClient: boolean
): Observable<ApiResponse>;
logout(): Observable<boolean>;
getWebClient(): IWebClient | null;
loadClient(scriptTags: string): Observable<any>;
mounted(handler: MessageHandler): void;
unmounted(handler: MessageHandler): void;
}- login(login: string, password: string, autoLoadClient: boolean) Observable< ApiResponse >
-
autoLoadClient: Type:
boolean, identify whether auto load Odoo WebClicent instance
Login feature. the response contains field: data.scrpitTags, use the string value 'data.scrpitTags' build the HTMLScriptElement then will instance the native Odoo WebClient, in this scene, the WebClient was concised that can seamless use the capability of native Odoo WebClient from outside frontend applications. The value of 'data.scrpitTags' could be play 'Accesss Token' role, store in locale and use later like regular mobile frontend application.
const user = 'admin'; const password = 'admin'
const clientManager = getClientManager();
const request = await clientManager.login(user,password).subscribe(
{
next:x=>{
console.log('login reponse, should includes data.scrpitTags:',x)
}
},
error:(err)=>{
throw err;
}); -
mounted(handler: MessageHandler): void
Listen the Odoo WebClient instance mounted event.
getClientManager().mounted((event)=>{
reloadData();
});
function reloadData(){
const webClient = getClientManager().getWebClient();
if (!webClient){
return;
}
fetchApps(webClient)
}-
logout() Observable< ApiResponse >
Logout feature, quit session.
- Odoo-Site
Odoo Site expose the Odoo WebClient to Frontend Apps smoothly,seamless reuse the powerful capability of Odoo framework from outside Client Apps . - Odoo
The Odoo framework To Grow Your Business.
Window fetch call RESTful api ----> API response includes script Tags of Odoo WebClient ----> render script Tags <Script>...</Script> on web page ----> load the odoo webclient success----> use js orm service call py🐍 code directly 🚀