thirdparty
/
eis
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 Commit
2 Branches
0 Tags
13 MiB
 
 
 
 
 
Tree: b2dd3ffb1c
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'b2dd3ffb1c'
${ noResults }
eis/eis_drag_drop/doc/index.rst

949 lines
33 KiB
Raw Blame History

.. container:: top-bar d-flex justify-content-between align-items-center
.. container::
|Logo|
.. container:: availability
Community    Enterprise    Odoo Online
.. container:: section hero-section
.. container::
.. rubric:: Images Drag And Drop Widgets
:name: images-drag-and-drop-widgets
Effortlessly manage and update images in your Odoo records with
our intuitive drag and drop widgets.
.. container:: vector-placeholder
|Hero Vector|
.. container:: benefit-box
Perfect for E-commerce, Media Portals & More!
.. container:: section section
:name: introduction
.. container::
.. rubric::
Introduction
:name: introduction
:class: text-center mb-5 fw-bold
The **Images Drag And Drop Widgets** module is a state-of-the-art
solution designed to enhance your Odoo experience by integrating
modern, user-friendly drag and drop image widgets.
.. rubric:: Who Can Benefit?
:name: who-can-benefit
Whether you run an e-commerce site, a media portal, a real estate
listing platform, or any business that requires the handling of
multiple images per record, this module is built for you. Enjoy:
- **E-commerce websites:** Easily manage product images with a
simple drag and drop interface.
- **Businesses with heavy media content:** Quickly update
portfolios, galleries, and listings.
- **Developers and Designers:** Seamlessly integrate modern
widgets across all modules—no extra dependency required!
.. rubric:: Use Cases
:name: use-cases
**Online Stores:** Showcase products with multiple images that can
be easily updated on-the-fly.
**Real Estate Platforms:** Effortlessly manage property photos,
floor plans, and virtual tours.
**Agencies & Portfolios:** Create visually appealing portfolios
where media speaks louder than words.
.. rubric:: Benefits
:name: benefits
With our module, say goodbye to tedious file uploads and hello to
a more engaging user experience. It’s simple, robust, and designed
to boost your productivity!
.. container:: section section
:name: installation
.. container::
.. rubric::
Installation
:name: installation
:class: text-center mb-5 fw-bold
Follow these detailed steps to install the **eis_drag_drop**
module:
#. **Download the Module:** Obtain the module as a ZIP file from
the official repository or your vendor.
#. **Extract the ZIP:** Unzip the downloaded file to reveal the
module folder.
#. **Copy to Addons Folder:** Move or copy the extracted module
folder into your Odoo ``addons`` directory.
#. **Restart Odoo Service:**
- On systemd-based systems: ``sudo systemctl restart odoo``
- On SysVinit-based systems: ``sudo service odoo restart``
- Or use the appropriate command for your OS.
#. **Update App List:** In your Odoo database, navigate to the
Apps menu and click *Update Apps List*.
#. **Install the Module:** Search for *Drag and Drop Widgets* (or
``eis_drag_drop``) and click install.
.. container:: tips
**Important:** Always test the module in a staging environment
before deploying it to your production server. Caution is
key—ensure you have backups and proper rollback plans in place.
.. container:: section section
:name: user-guides
.. container::
.. rubric::
User Guide
:name: user-guide
:class: text-center mb-5 fw-bold
.. rubric:: Updating Existing Image Fields
:name: updating-existing-image-fields
You can update any existing binary image field to use our drag and
drop widget without altering your custom modules. Simply update
your XML views by setting the widget attribute to:
.. container:: code-snippet
::
<field name="image_field" widget="d_and_d_image" options="{
"image_size": "150x150",
"preview_image": "image_128",
"acceptedFileExtensions": "image/*",
"enableZoom": true,
"additionalStyles": "border:2px solid #007bff;"
}>
</field>
**Options Explained:**
- ``image_size``: Defines the display size of the widget. Example:
"150x150" sets the width to 150px and height to 150px.
- ``preview_image``: Specifies the field used for the image
preview. If not set, it defaults to the binary field name.
- ``acceptedFileExtensions``: Determines which image formats can
be uploaded.
- ``enableZoom``: If true, hovering over the image displays a zoom
popup.
- ``additionalStyles``: Custom CSS styles that are appended to the
widget's inline styles.
.. rubric:: Detailed O2M Setup & Custom Integration
:name: detailed-o2m-setup-custom-integration
For One2Many fields, our widget transforms the standard image
upload into a dynamic drag and drop area. **Note:** The related
model *must* have a Kanban view defined that includes at least the
``name`` and ``image`` (or ``image_1920``) fields.
**Why a Kanban View?** The Kanban view enables the widget to
render image previews instead of just record IDs. Without it, you
may only see numerical identifiers.
**Form View for Videos & Manual Entry:** If you wish to add videos
or manually add images in the traditional way, ensure that your
One2Many field is also accessible via a form view.
.. rubric:: Example of One2Many Field Integration
:name: example-of-one2many-field-integration
.. container:: code-snippet
::
<page name="media" string="Extra Media">
<field name="media_ids" widget="d_and_d_images"
options="{
'childImageField': 'image_1920',
'extraData': {
'categ_id': 1,
'enable_zoom': true,
'previewImage': 'image_128',
'cssStyles': 'width:150px; height:200px; border-radius:15px;'
}
}"/>
</page>
.. rubric:: Options Explained:
:name: options-explained
- ``childImageField``: Specifies the field in the child model
where the binary image data is stored. This is mandatory for the
widget to function correctly. If not specified, image_1920 will
be used.
- ``extraData``: Allows you to pass additional data to the child
records. This can include:
- ``categ_id``: An example field that sets a default category
ID. This feature allows you to add any additional field and
its value if your model has a required field and without it,
it cannot create new records, or a field that you need to fill
with static data.
- ``sale_ok``: This is another example field and you can pass
any bool value if your required field is bool type
- ``previewImage``: Specifies a smaller image field to use for
previews, which is important if you want to show a smaller
size image to save bandwidth. This value should be used if
your model is inherited from ``image.mixin`` and you want to
display a smaller preview image.
- ``cssStyles``: Custom CSS styles for the image display.
Example:
``"width:150px; height:200px; border-radius:15px; object-fit:cover;"``.
- ``acceptedFileExtensions``: Determines which file types are
acceptable for upload. Default is ``"image/*"``.
.. container:: section section
:name: user-guides
.. container::
.. rubric::
User Guide
:name: user-guide-1
:class: text-center mb-5 fw-bold
.. rubric:: Updating Existing Image Fields
:name: updating-existing-image-fields-1
You can update any existing binary image field to use our drag and
drop widget without altering your custom modules. Simply update
your XML views by setting the widget attribute to:
.. container:: code-snippet
::
<field name="image_field" widget="d_and_d_image" options="{
"image_size": "150x150",
"preview_image": "image_128",
"acceptedFileExtensions": "image/*",
"enableZoom": true,
"additionalStyles": "border:2px solid #007bff;"
}>
</field>
**Options Explained:**
- ``image_size``: Defines the display size of the widget. Example:
"150x150" sets the width to 150px and height to 150px.
- ``preview_image``: Specifies the field used for the image
preview. If not set, it defaults to the binary field name.
- ``acceptedFileExtensions``: Determines which image formats can
be uploaded.
- ``enableZoom``: If true, hovering over the image displays a zoom
popup.
- ``additionalStyles``: Custom CSS styles that are appended to the
widget's inline styles.
.. rubric:: Detailed O2M Setup & Custom Integration
:name: detailed-o2m-setup-custom-integration-1
For One2Many fields, our widget transforms the standard image
upload into a dynamic drag and drop area. **Note:** The related
model *must* have a Kanban view defined that includes at least the
``name`` and ``image`` (or ``image_1920``) fields.
**Why a Kanban View?** The Kanban view enables the widget to
render image previews instead of just record IDs. Without it, you
may only see numerical identifiers.
**Form View for Videos & Manual Entry:** If you wish to add videos
or manually add images in the traditional way, ensure that your
One2Many field is also accessible via a form view.
.. rubric:: Example of One2Many Field Integration
:name: example-of-one2many-field-integration-1
.. container:: code-snippet
::
<page name="media" string="Extra Media">
<field name="media_ids" widget="d_and_d_images"
options="{
'childImageField': 'image_1920',
'extraData': {
'categ_id': 1,
'enable_zoom': true,
'previewImage': 'image_128',
'cssStyles': 'width:150px; height:200px; border-radius:15px;'
}
}"/>
</page>
.. rubric:: Options Explained:
:name: options-explained-1
- ``childImageField``: Specifies the field in the child model
where the binary image data is stored. This is mandatory for the
widget to function correctly. If not specified, ``image_1920``
will be used.
- ``extraData``: Allows you to pass additional data to the child
records. This can include:
- ``categ_id``: An example field that sets a default category
ID. This feature allows you to add any additional field and
its value if your model has a required field and without it,
it cannot create new records, or a field that you need to fill
with static data.
- ``sale_ok``: This is another example field and you can pass
any bool value if your required field is bool type.
- ``previewImage``: Specifies a smaller image field to use for
previews, which is important if you want to show a smaller
size image to save bandwidth. This value should be used if
your model is inherited from ``image.mixin`` and you want to
display a smaller preview image.
- ``cssStyles``: Custom CSS styles for the image display.
Example:
``"width:150px; height:200px; border-radius:15px; object-fit:cover;"``.
- ``acceptedFileExtensions``: Determines which file types are
acceptable for upload. Default is ``"image/*"``.
.. container:: alert alert-danger
.. rubric:: Important Notice!
:name: important-notice
:class: alert-heading
Do not create the models described in the following example.
Odoo already includes these models. This example is provided
for educational purposes to help you understand the
implementation.
.. rubric:: Complete Example (Taken from Odoo builtin Code):
:name: complete-example-taken-from-odoo-builtin-code
.. rubric:: Adding Multiple Image Support to ``product.template``
:name: adding-multiple-image-support-to-product.template
Let's say we have a model ``product.template`` and we need to add
multiple image support to it. We will create a model
``product.image`` by inheriting from the ``image.mixin`` class.
This way, we automatically get fields like ``image_1920`` and
other related fields for our model ``product.image``.
Here are the steps to achieve this:
#. **Create the ``product.image`` Model:**
Inherit from ``image.mixin`` to automatically get image-related
fields.
.. container:: code-snippet
::
class ProductImage(models.Model):
_name = 'product.image'
_inherit = 'image.mixin'
product_tmpl_id = fields.Many2one('product.template', string='Product Template')
sequence = fields.Integer('Sequence')
video_url = fields.Char('Video URL')
#. **Extend the ``product.template`` Model:**
Add a One2Many field to link multiple images.
.. container:: code-snippet
::
class ProductTemplate(models.Model):
_inherit = 'product.template'
product_template_image_ids = fields.One2many('product.image', 'product_tmpl_id', string='Images')
#. **Create a Kanban View for ``product.image``:**
Add a Kanban view with the necessary fields.
.. container:: code-snippet
::
<record id="view_product_image_kanban" model="ir.ui.view">
<field name="name">product.image.kanban</field>
<field name="model">product.image</field>
<field name="arch" type="xml">
<kanban>
<field name="id"/>
<field name="name"/>
<field name="image_1920" widget="image"/>
<field name="sequence"/>
</kanban>
</field>
</record>
#. **Create a Form View for ``product.image``:**
Add a form view with fields for video URL and image.
.. container:: code-snippet
::
<record id="view_product_image_form" model="ir.ui.view">
<field name="name">product.image.form</field>
<field name="model">product.image</field>
<field name="arch" type="xml">
<form>
<field name="id"/>
<field name="name"/>
<field name="video_url"/>
<field name="image_1920" widget="image"/>
</form>
</field>
</record>
#. **Update the ``product.template`` Form View:**
Add the One2Many field with the drag-and-drop widget.
.. container:: code-snippet
::
<record id="view_product_template_form" model="ir.ui.view">
<field name="name">product.template.form</field>
<field name="model">product.template</field>
<field name="inherit_id" ref="product.product_template_only_form_view"/>
<field name="arch" type="xml">
<form>
<sheet>
<group>
<field name="product_template_image_ids" widget="d_and_d_images" options="{
'childImageField': 'image_1920',
'extraData': {
'cssStyles': 'width:150px;height:150px;'
}
}"/>
</group>
</sheet>
</form>
</field>
</record>
.. container:: alert alert-warning
**Important Considerations for Product Image Management (Odoo
17 and 18)**
This guide outlines the necessary steps for integrating
d_and_d_images widget for product template, specifically when
using the ``website_sale`` module, across Odoo 17 and 18.
Please carefully follow the instructions for your respective
Odoo version to avoid conflicts and ensure proper
functionality.
**Odoo 17:**
#. **Do not duplicate the ``product.image`` model or its
views.** This model is already provided by the
``website_sale`` module in Odoo. Creating a duplicate will
lead to conflicts.
#. **Inherit the ``product.template`` form view.**. You will
modify the form view ``product.product_template_form_view``
to integrate d_and_d_images customizations seamlessly with
Odoo's core functionality.
#. **Customize the image field:** Replace the
``product_template_image_ids`` field in the inherited form
view with d_and_d_images widget as described above to
enhance the product image management functionality.
**Odoo 18:**
Odoo 18 has modified the ``product.image`` Kanban view by
removing certain fields. So, to make it compatible again with
our d_and_d_images widghet, here's how to adjust Odoo 18:
#. **Inherit the ``product.image`` Kanban view.**
``website_sale.product_image_view_kanban``. Add the
necessary ``id`` and ``name`` fields back into the view to
maintain existing functionality. That's it.
#. **Enable modifications through the module's manifest:**
- Declare dependency on ``website_sale`` in our
eis_drag_drop module's ``__manifest__.py`` file to ensure
proper loading order. You jsut need to uncomment the line
having website_sale with key depends and then comment the
existing depend key.
- Reference the XML file containing your Kanban view
modifications in the ``data`` key of the manifest to apply
these changes automatically when your module is installed
or updated.
#. **Alternative approach:** Manually define the Kanban view
inheritance in a ``product.xml`` file if you prefer more
direct control over the modifications.
Our module has pre-configured these enhancements for you. To
activate them, modify the ``__manifest__.py`` file to uncomment
the dependency on ``website_sale`` and the reference to
``/views/product.xml`` in the ``data`` key. This ensures all
functionalities are seamlessly integrated when you install or
update the module.
.. container:: section section
:name: screenshots
.. container::
.. rubric::
Screenshots Explaination
:name: screenshots-explaination
:class: text-center mb-5 fw-bold
.. container:: screenshot-full
.. container:: screenshot-number
01
.. rubric:: Drag and Drop Widget Overview
:name: drag-and-drop-widget-overview
|Drag and Drop Widget Overview|
A clear view of the drag and drop widget areas for single
binary image and for one2many images., allowing users to
effortlessly update images.
.. container:: screenshot-full
.. container:: screenshot-number
02
.. rubric:: One2Many Drag And Drop Explained
:name: one2many-drag-and-drop-explained
|One2many Field Enhancement|
In this screenshot, you can see a simple explanation of the
view. Each record's thumbnail, have a small cross on top right
corner to remove a record, view also display video thumbnail,
and buttons.
.. container:: screenshot-full
.. container:: screenshot-number
04
.. rubric:: Add Video Button
:name: add-video-button
|image1|
This screenshot illustrates how the one2many field widget
``'Add Video'`` button is working. You can access odoo builtin
method being used in website_sale module of odoo to add extra
media including videos or images.
.. container:: screenshot-full
.. container:: screenshot-number
05
.. rubric:: Manual File Uploding Button Display
:name: manual-file-uploding-button-display
|image2|
This screenshot illustrates how the one2many field widget
manual upload button is working. If you want to upload images
manually from file uploader, you can click on this button and
it will open finder / file explorer for you. It will only allow
images to upload with jpg, jpeg, png, svg etc
.. container:: screenshot-full
.. container:: screenshot-number
06
.. rubric:: Iamges Dragging over One2many Field Display
:name: iamges-dragging-over-one2many-field-display
|image3|
This screenshot illustrates how the one2many field is being
used to drop 4 images into drag drop area. Notice the blue
border that is highlighted when we dragged the images over it.
As soon as we will drop the images, they will be uploaded
automatically
.. container:: section section
:name: video
.. container::
.. rubric::
Video Explaination
:name: video-explaination
:class: text-center mb-5 fw-bold
.. container:: screenshot-full
.. container:: screenshot-number
01
.. rubric:: Drag and Drop Widget Overview
:name: drag-and-drop-widget-overview-1
.. container:: video-container
.. container:: iframe
.. container::
:name: player
.. container:: player-unavailable
.. rubric:: ایک خرابی پیش آ گئی۔
:name: ایک-خرابی-پیش-آ-گئی
:class: message
.. container:: submessage
`اس ویڈیو کو www.youtube.com پر دیکھنے کی کوشش
کریں <https://www.youtube.com/watch?v=JRPchiEhS9U>`__
یا اگر آپ کے براؤزر میں JavaScript غیر فعال ہے تو
اسے فعال کریں۔
Watch the video to see how it works.
.. container:: section section
:name: version-info
.. container::
.. rubric::
Module Version Information & Changelog
:name: module-version-information-changelog
:class: text-center mb-5 fw-bold
.. container:: version-info
- **v1.0.0** - Initial release with basic drag and drop
functionality.
- **v1.1.0** - Added support for one2many fields and improved
preview handling.
- **v1.2.0** - Enhanced UI, added zoom popup, and refined
installation instructions.
- **v1.3.0** - Bug fixes and performance improvements for large
image uploads.
- **v1.3.1** - New feature added to save dirty form to preserver new changes.
- 1: - add new key 'showConfirm' in extraData, it is bool value. it will show a confirmation dialog to ask user to save changes in form or not.
- 2: - If no option given, the default is true.
.. container:: section section
:name: services
.. container::
.. rubric::
90 Days Support
:name: days-support
:class: text-center mb-5 fw-bold
.. container:: row text-center
.. container:: col-md-4 mb-3
.. container:: service-tile
.. rubric:: Website
:name: website
`www.expertpk.com <https://www.expertpk.com>`__
.. container:: col-md-4 mb-3
.. container:: service-tile
.. rubric:: Email
:name: email
support@expertpk.com
.. container:: col-md-4 mb-3
.. container:: service-tile
.. rubric:: WhatsApp
:name: whatsapp
+92 300 7888120
.. container:: section py-5 bg-light
:name: services
.. container::
.. rubric::
Our Services
:name: our-services
:class: text-center mb-5 fw-bold
.. container:: row g-4
.. container:: col-md-6 col-lg-3
.. container:: card h-100 text-center border-0 shadow-sm
.. container:: card-body
.. rubric:: Odoo Development
:name: odoo-development
:class: card-title
Build custom Odoo modules and applications tailored to
your business needs.
`Learn More <#contact>`__
.. container:: col-md-6 col-lg-3
.. container:: card h-100 text-center border-0 shadow-sm
.. container:: card-body
.. rubric:: Customization
:name: customization
:class: card-title
Customize Odoo to fit your unique workflows and
business processes.
`Learn More <#contact>`__
.. container:: col-md-6 col-lg-3
.. container:: card h-100 text-center border-0 shadow-sm
.. container:: card-body
.. rubric:: Upgradation
:name: upgradation
:class: card-title
Upgrade your Odoo instance to the latest version with
zero downtime.
`Learn More <#contact>`__
.. container:: col-md-6 col-lg-3
.. container:: card h-100 text-center border-0 shadow-sm
.. container:: card-body
.. rubric:: Consultancy
:name: consultancy
:class: card-title
Get expert advice on Odoo implementation,
optimization, and best practices.
`Learn More <#contact>`__
.. container:: section section
:name: other-modules
.. container::
.. rubric:: Explore Our Other Modules
:name: explore-our-other-modules
.. container:: carousel slide module-slider
:name: modulesCarousel
.. container:: carousel-inner
.. container:: carousel-item active
|Module 1|
.. container:: carousel-caption d-none d-md-block
.. rubric:: Module 1: Advanced Reporting
:name: module-1-advanced-reporting
.. container:: carousel-item
|Module 2|
.. container:: carousel-caption d-none d-md-block
.. rubric:: Module 2: CRM Enhancements
:name: module-2-crm-enhancements
.. container:: carousel-item
|Module 3|
.. container:: carousel-caption d-none d-md-block
.. rubric:: Module 3: Inventory Optimizer
:name: module-3-inventory-optimizer
Previous
Next
.. container:: section section
:name: best-practices
.. container::
.. rubric:: Best Practices & Troubleshooting
:name: best-practices-troubleshooting
.. container:: tips
.. rubric:: Best Practices
:name: best-practices
- Always backup your database before applying new modules.
- Test the module in a staging environment prior to production
deployment.
- Ensure that the related one2many models have the required
Kanban view with mandatory fields.
- Regularly update your Odoo instance to keep up with security
and performance improvements.
.. container:: troubleshooting
.. rubric:: Troubleshooting Steps
:name: troubleshooting-steps
- If image previews are not displaying, verify that your Kanban
view contains the ``name`` and ``image``/``image_1920``
fields.
- Check the browser console for JavaScript errors related to
the widget.
- Ensure file permissions are correctly set in your addons
folder.
- Review the server logs for any errors during file upload or
service restart.
.. container:: section section
:name: code-snippets
.. container::
.. rubric:: Code Snippets
:name: code-snippets
Below are examples of typical XML view definitions where the new
drag and drop fields are highlighted:
.. container:: code-snippet
.. rubric:: Single Image Widget
:name: single-image-widget
This snippet shows how to integrate a single image drag and
drop field into an Odoo form view:
::
<form string="Product Form">
<sheet>
<group>
<field name="name" />
<field name="description" />
<!-- Our new drag and drop image field is highlighted below -->
<field name="image_1920" widget="d_and_d_image" class="oe_avator" options="{
"image_size": "200x200",
"preview_image": "image_128",
"acceptedFileExtensions": "image/*",
"enableZoom": true
}" />
<field name="price" />
</group>
</sheet>
</form>
**Explanation:** This code defines a form view for a product.
The ``product_image`` field uses the ``d_and_d_image`` widget,
which allows users to drag and drop images. The ``options``
attribute specifies settings like image size, preview image,
accepted file extensions, and zoom functionality.
.. container:: code-snippet
.. rubric:: One2Many Image Widget
:name: one2many-image-widget
This snippet demonstrates how to integrate a One2Many image
drag and drop field into an Odoo form view:
::
<form string="Product Form">
<sheet>
<group>
<field name="name" />
<field name="description" />
<!-- One2Many drag and drop image field -->
<field name="product_images" widget="d_and_d_images" options="{
"childImageField": "image_1920",
"extraData": {
"cssStyles": "width:150px;height:150px;"
}
}" />
<field name="price" />
</group>
</sheet>
</form>
**Explanation:** This code defines a form view for a product
with a One2Many field ``product_images``. The
``d_and_d_images`` widget allows users to drag and drop
multiple images. The ``options`` attribute specifies the child
image field and additional CSS styles for the image display.
© 2025 Expert IT Solutions. All rights reserved.
.. |Logo| image:: ../static/description/img/logo.png
.. |Hero Vector| image:: ../static/description/img/hero.svg
.. |Drag and Drop Widget Overview| image:: ../static/description/img/image1.png
:class: screenshot-img
.. |One2many Field Enhancement| image:: ../static/description/img/image3.png
:class: screenshot-img
.. |image1| image:: ../static/description/img/image4.png
:class: screenshot-img
.. |image2| image:: ../static/description/img/image5.png
:class: screenshot-img
.. |image3| image:: ../static/description/img/image6.png
:class: screenshot-img
.. |Module 1| image:: ../static/description/module1.png
:class: d-block w-100
.. |Module 2| image:: ../static/description/module2.png
:class: d-block w-100
.. |Module 3| image:: ../static/description/module3.png
:class: d-block w-100