Skip to Content
Odoo Meniu
  • Autentificare
  • Try it free
  • Aplicații
    Finanțe
    • Contabilitate
    • Facturare
    • Cheltuieli
    • Spreadsheet (BI)
    • Documente
    • Semn
    Vânzări
    • CRM
    • Vânzări
    • POS Shop
    • POS Restaurant
    • Abonamente
    • Închiriere
    Site-uri web
    • Constructor de site-uri
    • eCommerce
    • Blog
    • Forum
    • Live Chat
    • eLearning
    Lanț Aprovizionare
    • Inventar
    • Producție
    • PLM
    • Achiziție
    • Maintenance
    • Calitate
    Resurse Umane
    • Angajați
    • Recrutare
    • Time Off
    • Evaluări
    • Referințe
    • Flotă
    Marketing
    • Social Marketing
    • Marketing prin email
    • SMS Marketing
    • Evenimente
    • Automatizare marketing
    • Sondaje
    Servicii
    • Proiect
    • Foi de pontaj
    • Servicii de teren
    • Centru de asistență
    • Planificare
    • Programări
    Productivitate
    • Discuss
    • Aprobări
    • IoT
    • VoIP
    • Knowledge
    • WhatsApp
    Aplicații Terțe Odoo Studio Platforma Odoo Cloud
  • Industrii
    Retail
    • Book Store
    • Magazin de îmbrăcăminte
    • Magazin de Mobilă
    • Magazin alimentar
    • Magazin de materiale de construcții
    • Magazin de jucării
    Food & Hospitality
    • Bar and Pub
    • Restaurant
    • Fast Food
    • Guest House
    • Distribuitor de băuturi
    • Hotel
    Proprietate imobiliara
    • Real Estate Agency
    • Firmă de Arhitectură
    • Construcție
    • Estate Managament
    • Grădinărit
    • Asociația Proprietarilor de Proprietăți
    Consultanta
    • Firma de Contabilitate
    • Partener Odoo
    • Agenție de marketing
    • Law firm
    • Atragere de talente
    • Audit & Certification
    Producție
    • Textil
    • Metal
    • Mobilier
    • Mâncare
    • Brewery
    • Cadouri corporate
    Health & Fitness
    • Club Sportiv
    • Magazin de ochelari
    • Centru de Fitness
    • Wellness Practitioners
    • Farmacie
    • Salon de coafură
    Trades
    • Handyman
    • IT Hardware and Support
    • Asigurare socială de stat
    • Cizmar
    • Servicii de curățenie
    • HVAC Services
    Altele
    • Organizație nonprofit
    • Agenție de Mediu
    • Închiriere panouri publicitare
    • Fotografie
    • Închiriere biciclete
    • Asigurare socială
    Browse all Industries
  • Comunitate
    Învăță
    • Tutorials
    • Documentație
    • Certificări
    • Instruire
    • Blog
    • Podcast
    Empower Education
    • Program Educațional
    • Scale Up! Business Game
    • Visit Odoo
    Obține Software-ul
    • Descărcare
    • Compară Edițiile
    • Lansări
    Colaborați
    • Github
    • Forum
    • Evenimente
    • Translations
    • Devino Partener
    • Services for Partners
    • Înregistrează-ți Firma de Contabilitate
    Obține Servicii
    • Găsește un Partener
    • Găsiți un contabil
    • Meet an advisor
    • Servicii de Implementare
    • Referințe ale clienților
    • Suport
    • Actualizări
    Github Youtube Twitter Linkedin Instagram Facebook Spotify
    +1 (650) 691-3277
    Obține un demo
  • Prețuri
  • Ajutor

Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:

  • CRM
  • e-Commerce
  • Contabilitate
  • Inventar
  • PoS
  • Proiect
  • MRP
All apps
Trebuie să fiți înregistrat pentru a interacționa cu comunitatea.
All Posts Oameni Insigne
Etichete (View all)
odoo accounting v14 pos v15
Despre acest forum
Trebuie să fiți înregistrat pentru a interacționa cu comunitatea.
All Posts Oameni Insigne
Etichete (View all)
odoo accounting v14 pos v15
Despre acest forum
Suport

How to hide the title or the close (X) button from a dialogService dialog?

Abonare

Primiți o notificare când există activitate la acestă postare

Această întrebare a fost marcată
javascriptdevelopmentdebug
2 Răspunsuri
1007 Vizualizări
Imagine profil
Ruben Armando Acosta Trevizo

I’m currently working on customizing dialogs in Odoo and I would like to either hide the title of the dialog or remove the close (X) button that appears in the header of the dialogService.

So far, I’ve been able to open dialogs with custom buttons and content, but I haven’t found a clean way to control the header area. Ideally, I’d like to keep the dialog body and footer buttons, but without showing the default title or the close icon.

Has anyone achieved this before? Any suggestions on whether it should be done through CSS overrides, patching the Dialog component, or some configuration I might have missed?

0
Imagine profil
Abandonează
Imagine profil
Cybrosys Techno Solutions Pvt.Ltd
Cel mai bun răspuns

Hi,

In Odoo 17/18 (OWL-based frontend), the dialogs you open with dialogService.add() are instances of the Dialog component. By default, they render with a header section that contains the title and the close (X) button. Unfortunately, there isn’t a built-in option in the service API to suppress just the header, so you need to tweak the component behavior yourself.


1. Use a patch on the Dialog component

You can patch the Dialog component in JavaScript to make the header optional:

/** @odoo-module **/


import { patch } from "@web/core/utils/patch";

import { Dialog } from "@web/core/dialog/dialog";


patch(Dialog.prototype, {

    setup() {

        this._super();

        // You could add a prop (e.g. hideHeader) to control this

    },

    get showHeader() {

        // if the props specify hideHeader, do not render the header

        return !this.props.hideHeader;

    },

});


Then, when calling dialogService.add(), you’d pass:


this.dialogService.add(Dialog, {

    hideHeader: true,

    body: "Custom body content here",

    buttons: [{ text: "OK", primary: true, close: true }],

});


This way you keep the footer buttons but no title/X.


2. Custom wrapper dialog component

Another approach is to create a new component that wraps Dialog but overrides the template so it doesn’t include the header. Then you can open this custom component via dialogService.add().


/** @odoo-module **/

import { Dialog } from "@web/core/dialog/dialog";


export class HeaderlessDialog extends Dialog {

    static template = "your_module.HeaderlessDialog"; // custom template without header

}


In your XML template, remove the header entirely but keep the body/footer slots.


If it’s for a single use case, CSS with a custom class is the quickest. If you want reusable control, patching Dialog to support a hideHeader prop is the cleanest solution.


Hope it helps

0
Imagine profil
Abandonează
Ruben Armando Acosta Trevizo
Autor

Hi, thanks for your reply. I tried what you said, but it didn't work. I'll share my original code so you can review it; I probably missed something.

This is my code:
quantity_dialog.xml

<?xml version="1.0" encoding="UTF-8"?>

<t t-name="alx_barcode_psv.QuantityDialog">

<Dialog size="'md'" title="props.title || _('Ingrese cantidad')" footer="false" withCloseButton="false">

<t t-set="DialogHeader" t-value="''"/>

<div class="o_form_label mb-2">

<t t-esc="props.subtitle || ''"/>

</div>

<div class="mb-3">

<label class="form-label">

<t t-esc="props.label || _('Cantidad a agregar')"/>

</label>

<input type="number"

class="form-control"

t-model="state.qty"

min="0"

step="any"

t-att-autofocus="true"/>

<div class="d-flex justify-content-end mt-4">

<button style="margin-right: 8px;" type="button" class="btn btn-secondary" t-on-click="onCancel">

Cancelar

</button>

<button type="button" class="btn btn-primary" t-on-click="onConfirm">

Aceptar

</button>

</div>

</div>

</Dialog>

</t>

/** @odoo-module **/

import { _t } from "@web/core/l10n/translation";

import { patch } from "@web/core/utils/patch";

import BarcodePickingModel from "@stock_barcode/models/barcode_picking_model";

import { Component, useState } from "@odoo/owl";

import { Dialog } from "@web/core/dialog/dialog";

// COMPONENTE QuantityDialog embebido

class QuantityDialog extends Component {

static template = "alx_barcode_psv.QuantityDialog";

static components = { Dialog };

setup() {

const { defaultQty = 1 } = this.props;

this.state = useState({ qty: String(defaultQty) });

}

onConfirm() {

const value = parseFloat(this.state.qty);

if (isNaN(value) || value <= 0) return;

this.props.resolve(value);

this.props.close();

this._reactivateScanner();

}

onCancel() {

this.props.resolve(false);

this.props.close();

this._reactivateScanner();

}

_reactivateScanner() {

const model = this.props.model;

if (model && typeof model.startBarcodeScanner === "function") {

model.startBarcodeScanner();

model.trigger("playSound");

}

}

}

// Función de diálogo

function askQuantity(dialogService, product, model) {

return new Promise((resolve) => {

const title = _t("Cantidad para %s", product?.display_name || _t("Producto"));

const subtitle = product?.code ? `[${product.code}] ${product.display_name}` : (product?.display_name || "");

dialogService.add(QuantityDialog, {

title,

subtitle,

label: _t("Cantidad a agregar"),

defaultQty: 1,

resolve,

model,

closeOnOutsideClick: false,

closeOnEsc: false,

});

});

}

// Validación de producto no reservado

function denyNewLine(product) {

const name =

(product?.code ? `[${product.code}] ` : "") +

(product?.display_name || _t("Producto"));

this.trigger("playSound");

this.notification(

_t("No puedes escanear el producto %s porque no está reservado en esta operación.", name),

{ type: "danger" }

);

}

// Guardamos funciones originales

const ORIG = {

updateLine: BarcodePickingModel.prototype.updateLine,

setQtyDone: BarcodePickingModel.prototype.setQtyDone,

};

// Parcheo al modelo

patch(BarcodePickingModel.prototype, {

createNewLine(params) {

denyNewLine.call(this, params?.fieldsParams?.product_id);

return false;

},

async _createNewLine(params) {

denyNewLine.call(this, params?.fieldsParams?.product_id);

return false;

},

askBeforeNewLinesCreation(/* product */) {

return false;

},

async updateLine(line, fieldsParams = {}) {

if (fieldsParams.__skipQtyPopup || fieldsParams.package || fieldsParams.resultPackage) {

return await ORIG.updateLine.call(this, line, fieldsParams);

}

const product = fieldsParams.product || line?.product_id;

if (!product) {

return await ORIG.updateLine.call(this, line, fieldsParams);

}

this.trigger("playSound");

const qty = await askQuantity(this.dialogService, product, this);

if (!qty) {

this.notification(_t("Operación cancelada"), { type: "warning" });

return false;

}

const current = this.getQtyDone(line) || 0;

const newQty = current + qty;

fieldsParams.qty_done = newQty;

fieldsParams.__skipQtyPopup = true;

const res = await ORIG.updateLine.call(this, line, fieldsParams);

this.trigger("update");

return res;

},

});

{

"name": "Barcode Validations and entries",

"author": "ARCA Labs",

"depends": ["base","stock_barcode","barcodes"],

"data": [],

"assets": {

"web.assets_backend": [

"alx_barcode_psv/static/src/js/barcode_model_override.js",

"alx_barcode_psv/static/src/components/quantity_dialog/quantity_dialog.xml",

],

},

}

Enjoying the discussion? Don't just read, join in!

Create an account today to enjoy exclusive features and engage with our awesome community!

Înscrie-te
Related Posts Răspunsuri Vizualizări Activitate
Error with rpc call
javascript development function debug
Imagine profil
Imagine profil
Imagine profil
2
iul. 25
1927
OWL Component Not Rendering in Custom Layout (Odoo 18) — Likely XML Template Issue
javascript development project debug
Imagine profil
Imagine profil
1
iul. 25
3658
Testing of computed field in Odoo 18 extension dev
development debug
Imagine profil
1
nov. 25
492
How do I correctly create a calculated field to sum two other field values in Odoo Studio (Odoo Online)? Rezolvat
development debug
Imagine profil
Imagine profil
2
nov. 25
552
How can I use my only web url domain using odoo?
javascript development
Imagine profil
Imagine profil
1
sept. 25
1397
Comunitate
  • Tutorials
  • Documentație
  • Forum
Open Source
  • Descărcare
  • Github
  • Runbot
  • Translations
Servicii
  • Hosting Odoo.sh
  • Suport
  • Actualizare
  • Custom Developments
  • Educație
  • Găsiți un contabil
  • Găsește un Partener
  • Devino Partener
Despre Noi
  • Compania noastră
  • Active de marcă
  • Contactați-ne
  • Locuri de muncă
  • Evenimente
  • Podcast
  • Blog
  • Clienți
  • Aspecte juridice • Confidențialitate
  • Securitate
الْعَرَبيّة Català 简体中文 繁體中文 (台灣) Čeština Dansk Nederlands English Suomi Français Deutsch हिंदी Bahasa Indonesia Italiano 日本語 한국어 (KR) Lietuvių kalba Język polski Português (BR) română русский язык Slovenský jazyk slovenščina Español (América Latina) Español ภาษาไทย Türkçe українська Tiếng Việt

Odoo este o suită de aplicații de afaceri open source care acoperă toate nevoile companiei dvs.: CRM, comerț electronic, contabilitate, inventar, punct de vânzare, management de proiect etc.

Propunerea de valoare unică a Odoo este să fie în același timp foarte ușor de utilizat și complet integrat.

Website made with

Odoo Experience on YouTube

1. Use the live chat to ask your questions.
2. The operator answers within a few minutes.

Live support on Youtube
Watch now