Skip to Content
Odoo Menu
  • Sign in
  • Try it free
  • Apps
    Finance
    • Accounting
    • Invoicing
    • Expenses
    • Spreadsheet (BI)
    • Documents
    • Sign
    Sales
    • CRM
    • Sales
    • POS Shop
    • POS Restaurant
    • Subscriptions
    • Rental
    Websites
    • Website Builder
    • eCommerce
    • Blog
    • Forum
    • Live Chat
    • eLearning
    Supply Chain
    • Inventory
    • Manufacturing
    • PLM
    • Purchase
    • Maintenance
    • Quality
    Human Resources
    • Employees
    • Recruitment
    • Time Off
    • Appraisals
    • Referrals
    • Fleet
    Marketing
    • Social Marketing
    • Email Marketing
    • SMS Marketing
    • Events
    • Marketing Automation
    • Surveys
    Services
    • Project
    • Timesheets
    • Field Service
    • Helpdesk
    • Planning
    • Appointments
    Productivity
    • Discuss
    • Approvals
    • IoT
    • VoIP
    • Knowledge
    • WhatsApp
    Third party apps Odoo Studio Odoo Cloud Platform
  • Industries
    Retail
    • Book Store
    • Clothing Store
    • Furniture Store
    • Grocery Store
    • Hardware Store
    • Toy Store
    Food & Hospitality
    • Bar and Pub
    • Restaurant
    • Fast Food
    • Guest House
    • Beverage Distributor
    • Hotel
    Real Estate
    • Real Estate Agency
    • Architecture Firm
    • Construction
    • Estate Management
    • Gardening
    • Property Owner Association
    Consulting
    • Accounting Firm
    • Odoo Partner
    • Marketing Agency
    • Law firm
    • Talent Acquisition
    • Audit & Certification
    Manufacturing
    • Textile
    • Metal
    • Furnitures
    • Food
    • Brewery
    • Corporate Gifts
    Health & Fitness
    • Sports Club
    • Eyewear Store
    • Fitness Center
    • Wellness Practitioners
    • Pharmacy
    • Hair Salon
    Trades
    • Handyman
    • IT Hardware & Support
    • Solar Energy Systems
    • Shoe Maker
    • Cleaning Services
    • HVAC Services
    Others
    • Nonprofit Organization
    • Environmental Agency
    • Billboard Rental
    • Photography
    • Bike Leasing
    • Software Reseller
    Browse all Industries
  • Community
    Learn
    • Tutorials
    • Documentation
    • Certifications
    • Training
    • Blog
    • Podcast
    Empower Education
    • Education Program
    • Scale Up! Business Game
    • Visit Odoo
    Get the Software
    • Download
    • Compare Editions
    • Releases
    Collaborate
    • Github
    • Forum
    • Events
    • Translations
    • Become a Partner
    • Services for Partners
    • Register your Accounting Firm
    Get Services
    • Find a Partner
    • Find an Accountant
    • Meet an advisor
    • Implementation Services
    • Customer References
    • Support
    • Upgrades
    Github Youtube Twitter Linkedin Instagram Facebook Spotify
    +1 (650) 691-3277
    Get a demo
  • Pricing
  • Help

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

  • CRM
  • e-Commerce
  • Accounting
  • Inventory
  • PoS
  • Project
  • MRP
All apps
You need to be registered to interact with the community.
All Posts People Badges
Tags (View all)
odoo accounting v14 pos v15
About this forum
You need to be registered to interact with the community.
All Posts People Badges
Tags (View all)
odoo accounting v14 pos v15
About this forum
Help

Widget Conversion From Odoo 12 to Odoo 16

Subscribe

Get notified when there's activity on this post

This question has been flagged
widgetodoo12odoo16features
2 Replies
4758 Views
Avatar
Denis Craciun

I have this custom widget that is used in an Odoo 12 project. I am new to Odoo still, and I need to convert it to Odoo 16. I am familiar with Odoo 12 because that's the version I followed a course from, but not with 16, so I can't really understand where the problem could be, but I am pretty sure it's in the widget.js file, and maybe it's something related to the libraries that are required in the code (maybe they are outdated)? The manifest file should be correct (unless there are some major changes that you are aware), and the view is a very simple xml file that shouldn't have any problems.

What this widget does btw, it takes a pdf file and it creates an url for it so you can preview it.

Thanks in advance, let me know if there's something I've been missing, but here's the js file:

odoo.define("pdf_preview_widget", function (require) {

  "use strict";


  var core = require('web.core');

  var fieldRegistry = require("web.field_registry");

  var basicFields = require("web.basic_fields");


  var PdfPreviewWidget = basicFields.FieldBinaryFile.extend({

    template: "PdfPreviewWidget",

    

    _renderModal: function (data) {

      const self = this;


      if($('.pdf-preview-modal').length) return;


      let modalTemplate = core.qweb.render('PdfPreviewModal', {

        iframe_data: data

      });


      $('body').append(modalTemplate);

      $('.modal-window').addClass('visible');

      $(".modal-close").on('click', function(ev) {

        ev.preventDefault();


        $(this).parent().parent().parent().remove();

      });

    },


    _b64toBlob: function(b64Data, contentType='', sliceSize=512) {

      const byteCharacters = atob(b64Data);

      const byteArrays = [];

    

      for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {

        const slice = byteCharacters.slice(offset, offset + sliceSize);

    

        const byteNumbers = new Array(slice.length);

        for (let i = 0; i < slice.length; i++) {

          byteNumbers[i] = slice.charCodeAt(i);

        }

    

        const byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);

      }

    

      const blob = new Blob(byteArrays, {type: contentType, title: 'Download.pdf'});

      return blob;

    },


    _render: function () {

      const self = this;


      this.$(".oe_field_pdf_preview").on('click', function(ev) {

        ev.preventDefault();


        const resBlob = self._b64toBlob(self.value, 'application/pdf');

        const resFile = new File([resBlob], 'Download.pdf', {type: 'application/pdf'});

        const resUrl = URL.createObjectURL(resFile, {type: 'application/pdf'});


        self._renderModal(resUrl);

      });

    }

  });


  fieldRegistry.add("pdf_preview", PdfPreviewWidget);

});
0
Avatar
Discard
Avatar
shubham shiroya
Best Answer

try this way:
odoo.define("pdf_preview_widget", function (require) {
"use strict";

var core = require("web.core");
var BasicFields = require("web.basic_fields");

var PdfPreviewWidget = BasicFields.FieldBinaryFile.extend({
template: "PdfPreviewWidget",

_render: function () {
var self = this;

this.$(".oe_field_pdf_preview").on("click", function (ev) {
ev.preventDefault();

var resBlob = self._b64toBlob(self.value, "application/pdf");
var resUrl = URL.createObjectURL(resBlob);

self._renderModal(resUrl);
});
},

_renderModal: function (data) {
if ($(".pdf-preview-modal").length) return;

var modalTemplate = core.qweb.render("PdfPreviewModal", {
iframe_data: data,
});

$("body").append(modalTemplate);
$(".modal-window").addClass("visible");

$(".modal-close").on("click", function (ev) {
ev.preventDefault();
$(this).parent().parent().parent().remove();
});
},

_b64toBlob: function (b64Data, contentType = "", sliceSize = 512) {
var byteCharacters = atob(b64Data);
var byteArrays = [];

for (
var offset = 0;
offset < byteCharacters.length;
offset += sliceSize
) {
var slice = byteCharacters.slice(offset, offset + sliceSize);

var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}

var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}

var blob = new Blob(byteArrays, { type: contentType, title: "Download.pdf" });
return blob;
},
});

return {
PdfPreviewWidget: PdfPreviewWidget,
};
});

0
Avatar
Discard
Avatar
Cybrosys Techno Solutions Pvt.Ltd
Best Answer

Hi,
There is a lot of change that comes when Odoo was upgraded from version 12 to 16. Currently, in the case of the backend, we are using OWL (Odoo Web Library)
To create a field widget in Odoo 16, you can follow the instructions provided in this blog: "How to Create a Field Widget in Odoo 16".
https://www.cybrosys.com/blog/how-to-create-a-field-widget-in-the-odoo-16
The blog should provide you with detailed steps and guidance on creating a custom field widget in Odoo 16.

Hope it helps

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

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

Sign up
Related Posts Replies Views Activity
How to use work_permit_upload widget in Odoo16.
widget odoo16features
Avatar
Avatar
1
Apr 24
3411
Converting Odoo 12 timer widget to Odoo16
javascript widget conversion odoo12 odoo16features
Avatar
Avatar
1
Sep 23
2664
(Odoo 16) widget: many2many_checkboxes need more features
xml widget odoo16features
Avatar
Avatar
1
May 24
2966
odoo 16: can i change 'priority widget' default color? Solved
widget color odoo16features
Avatar
Avatar
1
Jun 23
3718
ODOO12: how to pass values of field in javascript Solved
javascript widget odoo12
Avatar
Avatar
Avatar
2
Nov 22
8156
Community
  • Tutorials
  • Documentation
  • Forum
Open Source
  • Download
  • Github
  • Runbot
  • Translations
Services
  • Odoo.sh Hosting
  • Support
  • Upgrade
  • Custom Developments
  • Education
  • Find an Accountant
  • Find a Partner
  • Become a Partner
About us
  • Our company
  • Brand Assets
  • Contact us
  • Jobs
  • Events
  • Podcast
  • Blog
  • Customers
  • Legal • Privacy
  • Security
الْعَرَبيّة 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 is a suite of open source business apps that cover all your company needs: CRM, eCommerce, accounting, inventory, point of sale, project management, etc.

Odoo's unique value proposition is to be at the same time very easy to use and fully integrated.

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