Enterprise: Tabs: Iframe neu initialisiert beim Hinzufügen/Entfernen von Tabs

Ich verfolge nicht, wie man dieses Problem trotz des Videos reproduzieren kann? Was ist mms001? Klingt vielleicht nach einem Problem mit der Anwendungscodierung?

Hat das was mit Tab-Ereignissen zu tun? https://master-enterprise.demo.design.infor.com/components/tabs/example-activated-event.html oder was machst du hier speziell mit den Registerkarten?

Könnten Sie etwas Zeit für einen reduzierten Testfall aufwenden oder sehen Sie, ob es eine Möglichkeit gibt, dies in den Beispielen zu sehen?

@tmcconechy mms001 ist eine M3-Anwendung. @marclouisgenedeguzman kannst du diesen Fehler mit dem Markup auf unseren Beispielseiten, die Tim geteilt hat, https://master-enterprise.demo.design.infor.com/components/tabs/example-activated-event.html

Ok, auch Dies ist ein verwandtes Beispiel, das Registerkarten zum Hinzufügen/Entfernen zeigt.
https://master-enterprise.demo.design.infor.com/components/tabs/example-add-tab-button.html

Es scheint, als sollten wir dies in unseren Beispielen reproduzieren können, benötigen jedoch mehr Details.

Anhängen der Replikation an ein Enterprise-ng-Beispiel

HTML-Code anhängen
tabs-dismissible.demo.txt

Ich bin mir nicht sicher, was das mit Bing zu tun hat. Ich denke, das verwirrt mich vielleicht bei diesem Thema. Aber sieht aus wie im Video was passiert ist:

a) Wenn Sie einen Tab schließen, wird ein anderer Tab aktiviert (dies scheint gültig zu sein)
b) der iframe wird neu geladen, weil die Registerkarte ausgeblendet und dann angezeigt wurde

Ich bin mir nicht sicher, was wir dagegen tun können, da wir keine Kontrolle über den iframe haben (und die Verwendung von Iframes dringend empfehlen).

Vielleicht gibt es eine Möglichkeit, den Iframe-Inhalt zwischenzuspeichern. Oder können Sie sie vielleicht nicht verwenden und die Informationen in das DOM stellen? Grundsätzlich:

• Wenn Sie display:none verwenden, wird der Frame neu geladen
• Wenn Sie das nicht möchten, verwenden Sie v isibility:hidden oder :0 , um den Rahmen auszublenden

Abgesehen davon, dass wir nicht einfach dafür sorgen können, dass die Registerkartenkomponente Sichtbarkeit verwendet: ausgeblendet oder opacity, oder dies führt zu Problemen. Vielleicht ist eine Idee

• Beim Aktivieren bewegen Sie den iframe in die Seite
• Beim Deaktivieren den iframe aus dem auf der Seite ausgeblendeten Tab verschieben?

Bei weiterer Überprüfung - ich sehe das Problem. Es tut es nur beim Löschen und Hinzufügen einer Registerkarte, was seltsam ist. Ich schaue mir das jetzt an.

Ein kurzes Update dazu ist, dass es einen einfachen "Workaround" gibt, da es eine Option für das gibt, was es tut. Die Problemumgehung besteht darin, die Einstellung "disableAutoUpdatedCall" hinzuzufügen.

<div soho-tabs disableAutoUpdatedCall="true">

Dies geschieht in der Ng-Komponente, indem die Registerkarten neu initialisiert werden, wenn sich die Anzahl der Registerkarten ändert. Dies wird wirklich nur benötigt, wenn sich die Anzahl der Tabs ändert, wenn dynamische Tabs verwendet werden.

Ich suche "ob" es eine bessere Lösung gibt, die möglicherweise die Standardeinstellung auf "true" und einige API-Änderungen erfordert, aber ich bin mir noch nicht sicher. Diese Einstellung löst diesen Fall definitiv, also probiere es jetzt aus und teste es. Und ich werde diese Recherche morgen beenden

Hallo @tmcconechy ,

Ich habe den vorgeschlagenen Workaround ausprobiert, kann ihn aber nicht zum Laufen bringen. Unser Anwendungsfall besteht darin, dynamische Registerkarten zu erstellen und sie schließen zu können (ohne Auswirkungen auf die anderen geöffneten Registerkarten zu haben), so instanziieren wir neue M3-Programminstanzen, eine neue Registerkarte. Zwei Probleme habe ich beim Anwenden von disableAutoUpdateCall="true":

1. Das dynamische Hinzufügen einer Registerkarte wird nicht angezeigt, es sei denn, Sie reduzieren das Anwendungsmenü (berechnet die Registerkarte neu) und dergleichen.
2. Die SVG mit Schließen-Symbolen gehen beim Hinzufügen von disableAutoUpdateCall="true" verloren, obwohl dissmissible="true"
3. Beim Versuch, zum dynamischen Tab zu navigieren, wird ein Fehler angezeigt (der sichtbar ist, nachdem zB das App-Menü ausgelöst wurde)

.gif mit Ausgabe 1. und 2.

.img mit Fehlerproblem 3.

Ich habe ein h5-tabs-Funktionsmodul erstellt, das Sie einfach in zB ng-quickstart einstecken können:
m3-tabs.zip

1. Extrahieren Sie es in src/app/m3-tabs
2. Zu app.module-Importen hinzufügen: []
3. Hinzufügen innerhalb von #maincontent in app.component.html

Würde mich freuen, wenn Sie diese potenzielle Problemumgehung in meinem bereitgestellten "einfachen" (dynamischen Zeug sind es nie wirklich) Beispiel zum Laufen bringen.

Danke für das Feedback, die dynamischen Tabs waren das, was ich mir immer noch angeschaut habe. Ich habe irgendwie gehofft, dass Sie sie nicht im Handumdrehen ändern müssen, da diese beiden Dinge in Konflikt geraten. An das Symbolproblem habe ich auch nicht gedacht. Ich werde weiter suchen, da ich ein paar Ideen habe, um das besser zu beheben.

Super, danke Tim!

@whernebrink Ich habe einen PR geschoben, du kannst es in dieser Filiale ausprobieren, wenn du

Also müsstest du
a) Verwenden Sie <div soho-tabs disableAutoUpdatedCall="true"> https://github.com/infor-design/enterprise-ng/pull/930/files#diff-8d10e630a098469d93f796aa77460a4ad30a1bb8890072cf929c486e55950078R4
b) Fügen Sie in Ihren Funktionen, die die Registerkarten ändern, https://github.com/infor-design/enterprise-ng/pull/930/files#diff -11fb6fb3dbc217802abffcc158f358d6034f6e408cbc134dee0d0011a9d690afR68 hinzu, um die Registerkarten zu synchronisieren

Ich hoffe, das wird funktionieren. Das einzige Problem ist, wenn Sie aus irgendeinem Grund die Registerkarten ändern und den Iframe synchron halten müssen. IE hoffen, dass die dynamische Änderung der Registerkarte etwas ist, bei dem der Status zurückgesetzt werden kann?

@tmcconechy Danke! Ich habe es ausprobiert und das scheint zu funktionieren, dh zu behalten, wonach man gesucht hat. Das Beispiel mit iframe ist von unserer Seite nicht das beste/wichtigste (da 1. nicht sicher, dass dies überhaupt erlaubt sein sollte und 2. nicht sicher ist, wie viel dies derzeit verwendet wird). Aber es war leicht zu zeigen. Ein besseres, viel realeres Szenario ist, dass der Benutzer ein Datenraster hat, das gescrollt wurde, und wenn Sie dann eine andere Registerkarte schließen oder öffnen, wird die Registerkarte aktualisiert und Sie verlieren Ihre Positionierung (und geladene Daten). Dies wäre schwer zurückzusetzen, da man nicht sicher sein kann, dass es nicht woanders geändert wurde.

Ich gehe jedoch davon aus, dass Ihr vorgeschlagener Fix auch bei Datagrids funktioniert. :) Allerdings bin ich mir nicht sicher, wann es jemals "sicher" sein wird, diese Aktualisierungsmethode zu verwenden (wann würde man die Aktualisierung auslösen wollen?). Wir werden es ausprobieren müssen, wenn der Fix da ist. Ein mögliches zukünftiges Szenario kann jedoch sein, wenn Sie die Registerkarten neu anordnen möchten, z. B. mit Drag-Ereignis. Diese Aktion wird nicht möglich sein, ohne den Kontext zu verlieren?

In Bezug auf Ihre PR: Darf ich vorschlagen, das [beforeCloseCallback]="onBeforeClose" aus dem Markup in tabs-dissmissible.demo zu entfernen und vielleicht etwas Liebe zu geben (tipps auf den Rückruf in der .ts), da dies gut zu wissen ist für uns Verbrauchern (wie man zB die Entlassung des Tabs verhindert).

Zum gleichen Thema gibt es eine Inkonsistenz im SohoTabsEvent, das Sie in [beforeCloseCallback]="onBeforeClose" Callback und (activated)="onActivated($event)" erhalten.

• Die event.tab (sowie der zweite Parameter) im beforeCloseCallback referenzieren die <li> der Registerkarte, so dass Sie die tabId mit jquery erhalten würden, zB event.tab.find("a").attr("tabId") während
• Der event.tab im (aktivierten) Verweis auf die aktuellen <a>
  wo Sie die ID über event.tab.getAttribute('ng-reflect-tab-id') abrufen können

Gibt es einen Grund für diese "Inkonsistenz"? Mir scheint, dass die SohotTabsEvent event.tab immer das gleiche "Ding" zurückgeben sollte. Persönlich würde ich es vorziehen, <a> , also kann man einfach .getAttribute() direkt ausführen.

Entschuldigung für den Aufsatz... Schließlich ist hier nur ein .gif des oben erwähnten Datagrid-Problems, visualisieren Sie es einfach. Danke noch einmal.

Hallo @whernebrink

1) Ich gehe davon aus, dass dies den Datagrid-Fall beheben sollte. Ich habe versucht, es zu reproduzieren und konnte nicht https://github.com/infor-design/enterprise/commit/5e2b066ffeb9cdf2b9ed255e4bd6f1997ea0876e
2) Ich denke, "sicher" wäre für mich der Anwendungsfall, wenn Sie die angezeigten Registerkarten austauschen? Vielleicht werden beim Ändern einer Funktion in Ihrer Anwendung die Registerkarten neu geladen/ändert? Im Beispiel, wenn Sie die Tasten drücken, um sie zu ändern? Aber wann das in deinem Fall wirklich passiert, weiß ich nicht.
3) Wir haben eine Anfrage, Tabs zu ziehen, die wir hier in Betracht ziehen https://github.com/infor-design/enterprise/issues/4520 wir müssen das zum Laufen bringen ...
4) Habe dieses Ereignis rückgängig gemacht .. Wollte es nicht rausnehmen
5) Ja, ich verstehe, was du mit der Unbeständigkeit meinst. Das können wir ändern. Aber können Sie dafür eine separate Ausgabe machen. Es ist eine (geringfügige) bahnbrechende Änderung.

Habe dieses Problem wieder geöffnet. Bei der Arbeit mit @whernebrink haben wir festgestellt, dass ein Fall nicht funktioniert, in dem Sie Tabs über das dynamische Array hinzufügen. Suchen Sie also nach einer besseren Lösung, um auch diesen Fall zu unterstützen.

@whernebrink Ich habe eine vernünftige Lösung gefunden, die ich in die Zweige master und 4.35.x geschoben habe. Ich habe auch eine 7.8.0 (Ng 9.0) und eine 8.1.0 (Ng 10) gemacht, wie ich zum Release brauchte.

SO können Sie diese Versionen in Ihrer App ausprobieren oder auf den Zweigen von Enterprise-ng Master / 8.1.x oder / 7.8.x testen, indem Sie

• gehe zu http://localhost :4200/ids-enterprise-ng-demo/tabs-dynamic
• auf Tab 2 etwas suchen
• Versuchen Sie, einen anderen Tab zu schließen -> Suchergebnisse sollten nicht zurückgesetzt werden
• Drücken Sie die Schaltfläche zum Hinzufügen einer neuen Registerkarte -> die Suchergebnisse sollten nicht zurückgesetzt werden
• nicht, dass das Klicken auf die anderen beiden Schaltflächen die Suche zurücksetzt, aber dies sollte in Ordnung sein, da dies wirklich neue Registerkarten mit neuen i-Namen sind

Dies ist der Fix https://github.com/infor-design/enterprise/commit/d168b78454c4c800377c7c160775754f36272de5