+
+
+
+
+
+
+
diff --git a/fountain_widget_many2one/static/src/css/fountain_widget_many2one.css b/fountain_widget_many2one/static/src/css/fountain_widget_many2one.css
new file mode 100644
index 000000000..88a6f2dc6
--- /dev/null
+++ b/fountain_widget_many2one/static/src/css/fountain_widget_many2one.css
@@ -0,0 +1,11 @@
+.divMargin{
+margin-right: 11px;
+border-right: 1px solid black;
+padding-right: 10px;
+}
+.dropdown-item-text {
+ display: block;
+ padding: 3px 20px;
+ color: #495057;
+ position: relative;
+}
diff --git a/fountain_widget_many2one/static/src/css/fountain_widget_many2one.scss b/fountain_widget_many2one/static/src/css/fountain_widget_many2one.scss
new file mode 100644
index 000000000..9bfb3c16e
--- /dev/null
+++ b/fountain_widget_many2one/static/src/css/fountain_widget_many2one.scss
@@ -0,0 +1,8 @@
+.icon_style{
+ &::after{
+ content: "\f061";
+ font-family: 'FontAwesome';
+ position: absolute;
+ right: 0px;
+}
+}
diff --git a/fountain_widget_many2one/static/src/js/fountain_widget_component.js b/fountain_widget_many2one/static/src/js/fountain_widget_component.js
new file mode 100644
index 000000000..467474ad6
--- /dev/null
+++ b/fountain_widget_many2one/static/src/js/fountain_widget_component.js
@@ -0,0 +1,46 @@
+/** @odoo-module **/
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { onMounted, onWillUnmount, useRef } from "@odoo/owl";
+
+// Extending the Dropdown and adding the inputData into the props
+export class FountainDropdown extends Dropdown {
+ setup() {
+ super.setup();
+ this.state.open = false; // Default state is closed
+
+ // Use OWL's useRef to reference the root element
+ this.rootRef = useRef("root");
+
+ // Add click outside detection
+ this.handleClickOutside = (event) => {
+ if (
+ this.rootRef.el &&
+ !this.rootRef.el.contains(event.target) &&
+ this.state.open
+ ) {
+ this.state.open = false; // Close dropdown if clicked outside
+ }
+ };
+
+ onMounted(() => {
+ // Add event listener when component is mounted
+ document.addEventListener('click', this.handleClickOutside);
+ });
+
+ onWillUnmount(() => {
+ // Remove event listener when component is unmounted
+ document.removeEventListener('click', this.handleClickOutside);
+ });
+ }
+
+ onClick(event) {
+ event.preventDefault(); // Prevent default behavior
+ this.state.open = !this.state.open; // Toggle dropdown visibility
+ }
+}
+
+FountainDropdown.template = "fountain.Dropdown";
+FountainDropdown.props = {
+ ...Dropdown.props,
+ inputData: { type: Object, optional: true }
+};
\ No newline at end of file
diff --git a/fountain_widget_many2one/static/src/js/fountain_widget_many2one.js b/fountain_widget_many2one/static/src/js/fountain_widget_many2one.js
new file mode 100644
index 000000000..db3390373
--- /dev/null
+++ b/fountain_widget_many2one/static/src/js/fountain_widget_many2one.js
@@ -0,0 +1,87 @@
+/** @odoo-module **/
+import { Component, useEffect, useState, onWillStart } from "@odoo/owl";
+import { registry } from "@web/core/registry";
+import { standardFieldProps } from "@web/views/fields/standard_field_props";
+import { FountainDropdown } from "./fountain_widget_component";
+import { useService } from "@web/core/utils/hooks";
+
+export class FountainWidget extends Component {
+ static template = "FountainWidgetField";
+ static components = {
+ FountainDropdown,
+ };
+ setup() {
+ this.orm = useService('orm');
+ useEffect(() => { this.state.inputData = this.props.record.data[this.props.name] }, () => [this.props]);
+ this.state = useState({
+ childMenu: {},
+ inputData: this.props.record.data[this.props.name],
+ open: false // Control dropdown visibility
+ });
+ onWillStart(async () => {
+ this.state.category = await this.orm.searchRead(this.props.record.fields.categ_id.relation, []);
+ });
+ this.index = 0; // Track the current depth of the dropdown
+
+ // Bind the onClickDropDown method to ensure `this` refers to the component instance
+ this.onClickDropDown = this.onClickDropDown.bind(this);
+ }
+
+ get inputData() {
+ return {
+ input: this.state.inputData ? this.state.inputData[1] : ''
+ };
+ }
+
+ get parentMenu() {
+ return this.state.category.filter(item => !item.parent_id);
+ }
+
+ get childKeys() {
+ return Object.keys(this.state.childMenu);
+ }
+
+ onClickDropDown(parent_id, index = 0) {
+ // Ensure index is a number, default to 0 if undefined
+ index = Number(index) || 0;
+
+ if (this.index >= index) {
+ let childLength = this.childKeys.length;
+ while (index < childLength) {
+ const keyIndex = this.childKeys[index];
+ delete this.state.childMenu[keyIndex];
+ childLength--;
+ }
+ }
+ let selectedCategory = this.state.category.find((item) => item.id === parent_id);
+ let obj = this.state.category.filter(item => item.parent_id && item.parent_id[0] === parent_id);
+
+ if (!this.state.childMenu.hasOwnProperty(parent_id) && obj.length > 0) {
+ this.state.childMenu[parent_id] = obj;
+ this.index = index + 1; // Increment index for nested levels
+ }
+
+ if (this.props.record && this.props.record.update) {
+ this.state.inputData = [parent_id, selectedCategory.complete_name];
+ this.props.record.update({ [this.props.name]: [parent_id, selectedCategory.complete_name] });
+ } else {
+ console.error('Update function not found in record props:', this.props);
+ }
+ this.state.open = false; // Close dropdown after selection
+ return obj;
+ }
+
+ static props = {
+ ...standardFieldProps,
+ inputData: { type: Object, optional: true, default: {} },
+ };
+}
+
+// Define the widget field with the correct structure
+export const FountainWidgetField = {
+ component: FountainWidget,
+ supportedTypes: ["many2one"],
+};
+
+// Register the widget in the field registry
+registry.category("fields").add("fountain_widget", FountainWidgetField);
\ No newline at end of file
diff --git a/fountain_widget_many2one/static/src/xml/fountain_widget_component.xml b/fountain_widget_many2one/static/src/xml/fountain_widget_component.xml
new file mode 100644
index 000000000..586f5553a
--- /dev/null
+++ b/fountain_widget_many2one/static/src/xml/fountain_widget_component.xml
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + This Widget is Used to Select the Many2one Field + in Fountain Manner. +
+Fountain Widget +
+
+ 
+
+
+
+
+ 
+ Email Us
+
+
+ 
+ Skype Us
+
+
+
+ Email Us
+
+
+
+ Skype Us
+
+
+ 
+
+
+
+ 
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+ Key + Highlights
+
+
+
+
+
+ 
+
+
+ + Dynamic Hierarchical Dropdowns
++ Generates dynamic dropdown menus with + hierarchical options. Supports nested + parent-child relationships.
+
+
+
+
+
+
+
+
+ + Interactive UI +
++ Provides an intuitive user interface for + selecting options. Displays Many2one field + values in a structured, hierarchical format. +
+
+
+
+
+
+
+
+
+ + Backend & UI Configuration +
++ Can be added via XML (UI) or configured via + code (backend). +
+
+
+
+
+
+
+
+
+
+ Fountain Widget
+
+ Are you ready to make your business more
+ organized?
+
+
+
+
+ Are you ready to make your business more
+ organized?
+
Improve now!
+
+
+ 
+ 
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+ + Many2One field in Odoo + +
+
+
+ + The provided screenshot displays + a standard Many2One field for + product category in Odoo. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + + Add Widget to Many2one field +
+
+
+ + Add 'widget="fountain_widget"' + to the view of Many2One field, + you can do so either through the + user interface (UI) or via code. + Here's how to achieve it through + the UI, by editing the form + view. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Custom Dropdown + +
+
+
+ + After adding the widget to the + Many2One field in Odoo, you will + have a new custom dropdown + functionality to display + hierarchical data. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + Display Child Records + +
+
+
+ + An arrow icon indicates records + that have child records. + Clicking on that record will + open a dropdown containing its + child records. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + + Display all Child Records + +
+
+
+ + The hierarchical structure + continues for records with child + records, with each click opening + another dropdown for the child + records, maintaining the + hierarchy. + +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+ + + Field value updates + +
+
+
+ + In addition to clicking, the + field's value also updates + according to the selected + record. Finally, you can save + the record with the selected + values in the Many2One field. + +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ + + Save changes + +
+
+
+ + After saving, you will see the + updated value in the Many2One + field. +
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + Community, Odoo.sh & Enterprise + Support.
+
+
+
+
+
+
+
+
+
+ + Generates dynamic dropdown menus + with hierarchical options. +
+
+
+
+
+
+
+
+
+
+ + Supports parent-child + relationships between dropdown + options.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + The Fountain Widget + module for Odoo 18 + is designed to + display Many2one + field values in a + hierarchical flow + format. It helps + users view + parent-child + relationships in a + dynamic dropdown + menu and select the + correct option + interactively. +
+
+
+
+
+
+
+ + The Fountain Widget + automatically + organizes the + dropdown options + based on their + parent-child + relationships. As + you make a + selection, it will + show options that + depend on the + parent, creating a + fountain-like flow + down the hierarchy. +
+
+
+
+
+
+ + Yes, the Fountain + Widget module is + compatible with both + Community and + Enterprise versions + of Odoo 18. +
+
+
+
+
+
+
+
+ + Latest Release 18.0.1.0.0 +
+ + 17th April, 2025 + +
+
+
+
+
+
+
+ Add
+
+
+
+ -
+
- + Initial Commit + +
+
+
+
+
+
+
+
+
+ Related Modules
+
+
+
+ 
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ + Our Services
+
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ ....
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+