Ergänzung neuer Button für einen "Hard-Reload"

Hallo zusammen,

in einigen Fällen hatten wir es bei unseren Kunden gehabt, dass ein Reload von Embedded Documents teilweise Probleme behebt - meist Probleme in Zusammenhang mit dem DMS-Service.
Dieser Reload ist aktuell nur über die Entwicklerkonsole + STRG + R möglich.

Eventuell wäre es sinnvoll für diesen Reload einen eigenen Button auf der GUI zu ergänzen.

Hallo @danielstraub, mit enaio 11.0 und neuer ist der Reload bei allen Dashlets von OPTIMAL SYSTEMS mit F5 global ermöglicht worden.

Im Kontext eines Kunden hatten wir die Neuladefunktion bereits einmal als Interceptor vorgesehen. Wäre das für Euch auch eine Option?

Hallo @rk,

stimmt das wäre ja auch eine Möglichkeit. Das sollte ausreichend sein. Habt ihr hierzu schon ein fertiges Code-Beispiel? Alternativ würden wir so etwas vermutlich auch entwerfen können.

Hallo @danielstraub, das war damals nicht ich, aber ich frage gerne nach. :slight_smile:

Grundsätzlich braucht es halt einen Button, welcher location.reload() aufruft (oder ein aktuelles enaio).

Hallo zusammen, der Code könnte in etwa so aussehen:

const refreshFile = {
	id: "ed-refresh",
	toolGroup: "default", 
	
	updateEditorConfiguration: async (instance, info, config) => {
		const that = refreshFile;
			
		instance.UI.setHeaderItems((header) => {
			if(!that.exists(header.getHeader(that.toolGroup).getItems())) {
				header.getHeader(that.toolGroup).push(that.getButton(config, () => {
					
					window.location.reload(true);
				}));
			}
		});
	},
	
	getButton(config, onClick = null) {
		const that = refreshFile;
		
		let button = {
			type: 'actionButton',
			id: that.id,
			title: "Aktualisieren",
			img: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" enable-background="new 0 0 64 64"><path d="m53.213 10.786c-11.715-11.715-30.711-11.715-42.426 0-11.716 11.717-11.716 30.71 0 42.427 11.715 11.715 30.711 11.715 42.426 0 11.716-11.717 11.716-30.71 0-42.427m-7.213 42.212l-3.86-4.24c-3.082 1.996-6.623 3.088-10.331 3.088-10.922 0-19.809-9.481-19.809-20.847h7.843c0 7.234 5.368 12.58 11.966 12.58 1.64 0 3.227-.354 4.691-1.016l-3.942-4.33h13.442v14.765m-1.832-21.999c0-6.853-5.36-11.982-11.948-11.982-1.706 0-3.366.357-4.895 1.041l4.207 4.088h-13.532v-13.147l3.456 3.357c3.207-2.084 6.918-3.17 10.764-3.17 10.906 0 19.78 9.041 19.78 19.812h-7.832z" fill="#757575"/></svg>',
		};
		
		if(onClick && typeof onClick == "function") {
			button.onClick = onClick;
		}
		
		return button;
	},
	
	exists(items) {
		const that = refreshFile;
		
		for(let item in items) {
			let tool = items[item];
			
			if (Object.keys(tool).includes('id') && tool.id == that.id) {
				return true;
			}
		}
		
		return false;
	}
};

window.ed.registerInterceptor(refreshFile);

Guten Tag,

kann es sein das dieser Interceptor in der Version 2.4.2 nicht mehr funktioniert?

Egal wie ich das Ganze anlege, es erscheint kein Button und damit auch keine Möglichkeit für einen normalen User auf einen einfachen Hard reload.

LG

Max Bitzer

Hallo @MaxBitzer,

ich habe gerade auch auf das andere Ticket geantwortet. Möglicherweise gibt es bei Ihnen gerade ein grundsätzliches Problem beim Laden der Interceptoren.

Könnten Sie die DevTools des Browsers/Dashlets öffnen und prüfen welche Meldungen hier angezeigt werden? Relevant sind der Console und Netzwerk Tab.

Wenn Sie die DevTools offnen haben, dann zur Sicherheit einfach F5 drücken, um das Dashlet hard neu zu laden.

Wenn Sie den RichClient verwenden:

Beim Webclient:
F12 oder Ctrl+Alt+I drücken.

Grüsse
Uli

Hallo,

ich habe es inzwischen hinbekommen.

Ich musste den Button in die Nav-Bar Class mit einfügen mit folgendem Code, danach war die Anzeige kein Problem.
Nicht wundern, ein Druckdialog ist hier auch implementiert, aber noch nicht fertig.

Interceptor Code
// --- 1. Konfiguration ---
const REFRESH_BUTTON_ID = 'refresh-button';
const PRINT_BUTTON_ID = 'print-button';
let styleAdded = false;

// Füge die Print-Styles in den <head> des Dokuments ein
const addPrintStyles = () => {
    if (!styleAdded) {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = `
            @media print {
                /* Verstecke die Haupt-Navigationsleiste */
                .ed-header {
                    display: none !important;
                }
                /* Verstecke alle Seitenleisten und Panelen */
                .ed-panel-container {
                    display: none !important;
                }
                /* Sorge dafür, dass der Haupt-Content-Bereich den gesamten Platz einnimmt */
                body, html, .ed-main-content-container {
                    padding: 0 !important;
                    margin: 0 !important;
                    width: 100% !important;
                    height: 100% !important;
                }
            }
        `;
        document.head.appendChild(style);
        styleAdded = true;
    }
};

// --- 2. Interceptor für den Druck-Button-Status ---
// Dieser Interceptor kümmert sich nur darum, den Druck-Button zu de-/aktivieren.
const printViaEnaioInterceptor = {
    id: "ed-print",
    onState: (instance, info) => {
        const printButton = document.querySelector(`[data-element="${PRINT_BUTTON_ID}"]`);
        if (printButton) {
            if (info.mode === "edit") {
                printButton.disabled = true;
            } else {
                printButton.disabled = false;
            }
        }
    }
};

window.ed.registerInterceptor(printViaEnaioInterceptor);

// --- 3. MutationObserver für die Button-Platzierung ---
// Diese Funktion fügt beide Buttons direkt ins DOM ein, sobald die Navbar vorhanden ist.
const addButtonsToNavbar = () => {
    const navbarNav = document.querySelector('.navbar-nav');
    
    // Prüfen, ob die Navbar existiert und die Buttons nicht schon hinzugefügt wurden
    if (navbarNav && !document.getElementById(REFRESH_BUTTON_ID)) {
        
        // Button "Aktualisieren" erstellen
        const refreshLi = document.createElement('li');
        refreshLi.classList.add('nav-item');
        refreshLi.id = REFRESH_BUTTON_ID; // Für einfache Identifizierung

        const refreshButton = document.createElement('button');
        refreshButton.classList.add('nav-link');
        refreshButton.innerHTML = "Aktualisieren";
        refreshButton.onclick = () => window.location.reload();

        refreshLi.appendChild(refreshButton);

        // Button "Druck aus enaio" erstellen
        const printLi = document.createElement('li');
        printLi.classList.add('nav-item');
        printLi.id = PRINT_BUTTON_ID; // Für einfache Identifizierung
        
        const printButton = document.createElement('button');
        printButton.classList.add('nav-link');
        printButton.setAttribute('data-element', PRINT_BUTTON_ID); // Wichtig für Interceptor
        printButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-printer" viewBox="0 0 16 16"><path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1"/><path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1"/></svg>';
        printButton.title = "Druck aus enaio";
        printButton.onclick = () => {
            window.print();
        };
        printLi.appendChild(printButton);

        // Buttons zur Navbar hinzufügen
        navbarNav.appendChild(refreshLi);
        navbarNav.appendChild(printLi);
        
        addPrintStyles();
        return true;
    }
    return false;
};

// Startet die Überwachung des DOM
const observer = new MutationObserver((mutations, obs) => {
    if (addButtonsToNavbar()) {
        obs.disconnect();
        console.log("Buttons erfolgreich eingefügt.");
    }
});

observer.observe(document.body, {
    childList: true,
    subtree: true
});

LG

Max Bitzer

Hall @MaxBitzer ,

ich könnte eine API für die Interceptoren bereitstellen, um in diese Leiste Buttons ein- und auszublenden. An sich gibt es diese bereits, aber sie ist aus dem Interceptor heraus leider noch nicht gut nutzbar.

Die API könnte dann in etwa so aussehen:

Wäre es sinnvoll, diese API einzubauen?

Liebe Grüsse
Uli

1 „Gefällt mir“

Guten Tag @uw

Also praktisch wäre es allemal, da es den Einbau von Buttons deutlich vereinfacht. Speziell den im Thread genannten Anwendungsfall konnte ich aber inzwischen selbst lösen. Lange nicht so elegant, aber es funktioniert.

LG

Max Bitzer