add a custom code when form view is loaded in odoo 17

javascript v17

1 Besvara

6595 Vyer

odooUser

hello, i am trying to dynamically add some div-s when form view is loaded, but i am not able to call my custom code.
here is what i did so far

/** @odoo-module **/
import { formView } from "@web/views/form/form_view";

export class SliderInFormView extends formView {
    setup() {
        super.setup();
    }
    showSlider() {
        document.addEventListener('DOMContentLoaded', function () {
            // console.log(`carouselInner >> ${carouselInnerClass}`)
            const modelId = 389;  // Replace with the actual ID of your Odoo model instance
            fetch('/get_images', {
                method: 'GET',
                credentials: "include",
            })
                .then(response => response.json() )
                .then(data => {
                    const images = data.images;
                    const carouselInnerc = document.querySelector('.odoo-vehicle-carousel');
                    const carouselInner = document.getElementsByClassName("odoo-vehicle-carousel");
                    const car = document.getElementById('myCarousel')

                    images.forEach((imageUrl, index) => {

                        const carouselItem = document.createElement('div');
                        carouselItem.classList.add('carousel-item');
                        if (index === 0) {
                            carouselItem.classList.add('active');
                        }
                        const img = document.createElement('img');
                        img.src = 'data:image/gif;base64,'+ imageUrl;
                        img.alt = `Image ${index + 1}`;

                        carouselItem.appendChild(img);
                        carouselInner.appendChild(carouselItem);
                    });
                    // Activate the carousel
                    const myCarousel = new bootstrap.Carousel(document.getElementById('myCarousel'), {
                        interval: 2000, // Set the interval for auto sliding in milliseconds
                    });

                })
                .catch(error => console.error('Error fetching images', error));
        });
    }

}

odooUser

Författare Bästa svar

fixed with

/** @odoo-module **/
import { patch } from "@web/core/utils/patch";
import { FormController } from '@web/views/form/form_controller';


patch(FormController.prototype, {
    setup() {
        super.setup(...arguments);

        // const modelId = 389;  // Replace with the actual ID of your Odoo model instance

        fetch('/get_images', {
            method: 'GET',
            credentials: "include",
        })
            .then(response => response.json() )
            .then(data => {
                const images = data.images;
                // console.log(document)
                const carouselInner = document.querySelector('.odoo-vehicle-carousel');
                const carouselDiv = document.querySelector('.carousel');

                images.forEach((imageUrl, index) => {

                    const carouselItem = document.createElement('div');
                    carouselItem.classList.add('carousel-item');
                    if (index === 1) {
                        carouselItem.classList.add('active');
                    }

                    const img = document.createElement('img');
                    img.className = 'd-block w-100 h-100';

                    img.src = 'data:image/gif;base64,'+ imageUrl;
                    img.alt = `Image ${index + 1}`;

                    carouselItem.appendChild(img);
                    carouselInner.appendChild(carouselItem);

                });

                const buttonPrevious = document.createElement('button');
                buttonPrevious.className = 'carousel-control-prev';
                buttonPrevious.type = 'button';
                buttonPrevious.setAttribute('data-bs-target', '#myCarousel');
                buttonPrevious.setAttribute('data-bs-slide', 'prev');


                const prevIconSpan = document.createElement('span');
                prevIconSpan.className = 'carousel-control-prev-icon';
                prevIconSpan.setAttribute('aria-hidden', 'true');

                const visuallyHiddenSpan = document.createElement('span');
                visuallyHiddenSpan.className = 'visually-hidden';
                visuallyHiddenSpan.textContent = 'Previous';

                buttonPrevious.appendChild(prevIconSpan);
                buttonPrevious.appendChild(visuallyHiddenSpan);

                carouselDiv.appendChild(buttonPrevious);


                const buttonNext = document.createElement('button');

                buttonNext.className = 'carousel-control-next';
                buttonNext.type = 'button';
                buttonNext.setAttribute('data-bs-target', '#carouselExampleControls');
                buttonNext.setAttribute('data-bs-slide', 'next');

                const nextIconSpan = document.createElement('span');
                nextIconSpan.className = 'carousel-control-next-icon';
                nextIconSpan.setAttribute('aria-hidden', 'true');

                const NextHiddenSpan = document.createElement('span');
                NextHiddenSpan.className = 'visually-hidden';
                NextHiddenSpan.textContent = 'Next';

                buttonNext.appendChild(nextIconSpan);
                buttonNext.appendChild(NextHiddenSpan);

                carouselDiv.appendChild(buttonNext);



                // Activate the carousel
                // const myCarousel = new bootstrap.Carousel(document.getElementById('myCarousel'), {
                //     interval: 5, // Set the interval for auto sliding in milliseconds
                // });


            })
            .catch(error => console.error('Error fetching images', error));
        // });

    },
});

Njuter du av diskussionen? Läs inte bara, delta också!

Skapa ett konto idag för att ta del av exklusiva funktioner och engagera dig i vår fantastiska community!

Registrera dig

Relaterade inlägg	Svar	Vyer
Odoo 17, the following modules are needed by other modules but have not been defined, they may not be present in the correct asset bundle. javascript v17	4 maj 25	13617
Modules are needed by other modules but have not been defined / Modules could not be loaded because they have unmet dependencies javascript v17	2 dec. 24	9484
where can i find the web.core and qweb.core in Odoo17? Löst javascript v17	3 apr. 24	9049
UncaughtPromiseError null javascript v17 UncaughtPromiseError	0 apr. 25	2676
Custom button trigger in FormController? javascript action v17	0 dec. 24	3956

Denna fråga har flaggats

Njuter du av diskussionen? Läs inte bara, delta också!