İçereği Atla
Odoo Menü
  • Portal
  • Ücretsiz deneyin
  • Uygulamalar
    Finans
    • Muhasebe
    • Faturalama
    • Masraf Yönetimi
    • Elektronik Çizelge (BI)
    • Belgeler
    • İmza
    Satış
    • Müşteri İlişkileri Yönetimi (CRM)
    • Satış
    • Satış Noktası Mağaza
    • Satış Noktası Restoran
    • Abonelikler
    • Kiralama
    Web Sitesi
    • Web Sitesi Oluşturucu
    • eTicaret
    • Blog
    • Forum
    • Canlı Sohbet
    • eÖğrenme
    Tedarik Zinciri
    • Envanter
    • Üretim
    • Ürün Yaşam Döngüsü Yönetimi
    • Satın Alma
    • Bakım
    • Kalite
    İnsan Kaynakları
    • Çalışanlar
    • İşe Alım
    • İzin
    • Değerlendirme
    • Referans
    • Filo Yönetimi
    Pazarlama
    • Sosyal Medyada Pazarlama
    • E-posta ile Pazarlama
    • SMS ile Pazarlama
    • Etkinlikler
    • Pazarlama Otomasyonu
    • Anket
    Hizmetler
    • Proje Yönetimi
    • Çalışma Çizelgeleri
    • Saha Hizmeti
    • Yardım Masası
    • Planlama
    • Randevular
    Verimlilik
    • Sohbet
    • Onay
    • Nesnelerin İnterneti
    • VoIP
    • Bilgi Bankası
    • WhatsApp
    Üçüncü taraf uygulamalar Odoo Stüdyo Odoo Bulut Platformu
  • Sektörler
    Perakende satış
    • Kitapçı
    • Giyim Mağazası
    • Mobilya Mağazası
    • Gıda Marketi
    • Hırdavat Dükkanı
    • Oyuncak Dükkanı
    Gıda ve Konaklama
    • Bar ve Pub
    • Restoran
    • Fast Food Restoranı
    • Konuk Evi
    • İçecek Distribütörü
    • Otel
    Gayrimenkul
    • Emlak Acentesi
    • Mimarlık Firması
    • İnşaat
    • Emlak Yönetimi
    • Bahçe Tasarımı
    • Mülk Sahipleri Derneği
    Uzmanlık
    • Muhasebe Firması
    • Odoo Partner
    • Pazarlama Ajansı
    • Hukuk Firması
    • Yetenek Kazanımı
    • Denetim ve Belgelendirme
    Üretim
    • Tekstil
    • Metal
    • Mobilyalar
    • Gıda
    • Bira fabrikası
    • Kurumsal Hediye
    Sağlık ve Spor
    • Spor Kulübü
    • Optik Mağazası
    • Fitness Merkezi
    • Sağlıklı Yaşam Merkezi
    • Eczane
    • Kuaför Salonu
    Ticaret
    • Tamirci
    • BT Donanım & Destek
    • Güneş Enerjisi Sistemleri
    • Ayakkabı İmalatçısı
    • Temizlik Hizmetleri
    • HVAC Hizmetleri
    Diğerleri
    • Kar Amacı Gütmeyen Kuruluş
    • Çevre Ajansı
    • Reklam Panosu Kiralama
    • Fotoğrafçılık
    • Bisiklet Kiralama
    • Yazılım Bayisi
    Tüm Sektörlere Göz Atın
  • Topluluk
    Öğrenim
    • Eğitim Araçları
    • Dokümantasyon
    • Sertifikasyonlar
    • Eğitim Etkinlikleri
    • Blog
    • Podcast
    Eğitim ve Gelişim
    • Eğitim Programı
    • Scale Up! İşletme Oyunu
    • Odoo'yu Ziyaret Edin
    Yazılım
    • İndirin
    • Sürümleri Kıyaslayın
    • Sürümler
    İş Birliği
    • Github
    • Forum
    • Etkinlikler
    • Çeviriler
    • Partner Olun
    • Partnerler için Hizmetler
    • Muhasebe Firmanızı Kaydettirin
    Hizmetler
    • Partner Bulun
    • Muhasebeci Bulun
    • Bir danışmanla görüşün
    • Kurulum Hizmetleri
    • Müşteri Referansları
    • Destek
    • Sürüm Yükseltme
    Github Youtube Twitter Linkedin Instagram Facebook Spotify
    +1 (650) 691-3277
    Demo randevusu alın
  • Fiyatlandırma
  • Yardım

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

  • Müşteri İlişkileri Yönetimi
  • e-Commerce
  • Muhasebe
  • Envanter
  • PoS
  • Proje Yönetimi
  • MRP
All apps
You need to be registered to interact with the community.
All Posts People Badges
Etiketler (View all)
odoo accounting v14 pos v15
About this forum
You need to be registered to interact with the community.
All Posts People Badges
Etiketler (View all)
odoo accounting v14 pos v15
About this forum
Yardım

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

Abone Ol

Get notified when there's activity on this post

Bu soru işaretlendi
javascriptdevelopmentdebug
2 Cevaplar
1106 Görünümler
Avatar
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
Avatar
Vazgeç
Avatar
Cybrosys Techno Solutions Pvt.Ltd
En İyi Yanıt

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
Avatar
Vazgeç
Ruben Armando Acosta Trevizo
Üretici

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!

Üye Ol
İlgili Gönderiler Cevaplar Görünümler Aktivite
Error with rpc call
javascript development function debug
Avatar
Avatar
Avatar
2
Tem 25
2051
OWL Component Not Rendering in Custom Layout (Odoo 18) — Likely XML Template Issue
javascript development project debug
Avatar
Avatar
1
Tem 25
3903
(((guia-ayuda)))¿Cómo llamar a Latam Chile desde celular?
development debug
Avatar
0
Ara 25
1
Testing of computed field in Odoo 18 extension dev
development debug
Avatar
1
Kas 25
598
How do I correctly create a calculated field to sum two other field values in Odoo Studio (Odoo Online)? Çözüldü
development debug
Avatar
Avatar
2
Kas 25
708
Topluluk
  • Eğitim Araçları
  • Dokümantasyon
  • Forum
Açık Kaynak
  • İndirin
  • Github
  • Runbot
  • Çeviriler
Hizmetler
  • Odoo.sh Hosting
  • Destek
  • Sürüm Yükseltme
  • Özel Geliştirmeler
  • Eğitim
  • Muhasebeci Bulun
  • Partner Bulun
  • Partner Olun
Hakkında
  • Şirketimiz
  • Pazarlama Gereçleri
  • İletişim
  • Kariyer
  • Etkinlikler
  • Podcast
  • Blog
  • Müşteriler
  • Hukuki • Gizlilik
  • Güvenlik
الْعَرَبيّة 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, müşteri ilişkileri yönetimi, eTicaret, muhasebe, envanter, satış noktası, proje yönetimi gibi şirketinizin tüm ihtiyaçlarını karşılayan bir açık kaynak işletme uygulamaları paketidir.

Odoo’nun eşsiz değer önermesi, aynı anda hem kullanımının çok kolay olup hem de tamamen entegre olmasıdır.

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