Formatieren von Multitaskingtabs

In Microsoft Fabric können Sie Multitasking verwenden, um mehrere Elemente gleichzeitig zu öffnen. Wenn Sie ein Element öffnen, wird eine Registerkarte an den linken Bereich angeheftet. Standardmäßig unterstützt Fabric das Öffnen eines Elements gleichzeitig. Eine Reihe von Lebenszyklusereignissen wird ausgelöst, wenn die Elementregisterkarte initialisiert, deaktiviert und zerstört wird, ohne dass eine Arbeitsauslastung erforderlich ist.

Ändern von Standardeigenschaften für Multitasking

Definieren Sie den editorTab Abschnitt innerhalb des Elementmanifests zum Bearbeiten von Registerkarteneigenschaften:

    "editorTab": {

    }

Gleichzeitiges Öffnen mehrerer Elemente aktivieren

Definieren Sie die maxInstanceCount Eigenschaft, und weisen Sie die Anzahl der Elemente zu, die Sie gleichzeitig öffnen möchten (bis zu 20 Elemente):

    "editorTab": {
      "maxInstanceCount": "20"
    }

Anpassen von Aktionen und Handlern

Wenn Sie Registerkartenaktionen und -Handler (oder Teile davon) implementieren möchten, müssen Sie im editorTab-Abschnitt des Front-End-Manifests des Elements eine Eigenschaft festlegen. Diese Eigenschaft überwacht diese Aktionen im eigenen Code, behandelt die Aktionen entsprechend und gibt die Ergebnisse zurück. Wenn Sie keine aktionen (oder teil davon) festlegen, werden die Standardaktionen automatisch behandelt.

Definieren Sie Eigenschaften für Registerkartenaktionen im editorTab Abschnitt.

    "editorTab": {
      "onInit": "item.tab.onInit",
      "onDeactivate": "item.tab.onDeactivate",
      "canDeactivate": "item.tab.canDeactivate",
      "canDestroy": "item.tab.canDestroy",
      "onDestroy": "item.tab.onDestroy",
      "onDelete": "item.tab.onDelete"
    }

Wenn Sie die Workload-Aktion registrieren, erwartet Fabric, dass die Aktion die Daten in einem bestimmten Format zurückgibt, damit Fabric diese Informationen lesen oder anzeigen kann:

   /*An OnInit event is triggered when the item is opened for the first
   time. This event contains the ID of the tab being initialized. Based on
   this tab ID, the handler needs to be able to return the display name
   or metadata.*/

   onInit: Action<never>;

   /*A CanDeactivate event is triggered when the user moves away from the tab.
   This event contains the ID of the tab being deactivated. The
   CanDeactivate handler should return a Boolean value that indicates whether
   the item tab can be deactivated. For an ideal multitasking experience,
   the handler should always return True.*/

   canDeactivate: Action<never>;

   /*An OnDeactivate event is triggered immediately after CanDeactivate
   returns True. This event contains the ID of the tab being deactivated.
   The OnDeactivate handler should cache unsaved item changes and
   the UI state.
   The next time the user goes back to the item, the item needs
   to be able to recover its data and UI state. The actual deactivation begins
   only when this handler returns.*/

   onDeactivate: Action<never>;

   /*A CanDestroy event is triggered after the close button is selected,
    before the item tab is closed. The event contains the ID of the tab
    being destroyed and also an allowInteraction parameter.
    The CanDeactivate handler should return a Boolean value that indicates
    whether the given item tab can be destroyed.
    If allowInteraction equals False, the implementation returns True
    if there are no dirty changes, and False otherwise.
    If allowInteraction equals True, a pop-up window can be used to ask
    for the user's opinion. It returns True if the user saves or discards
    dirty changes, and False if the user cancels the pop-up window.
    The OnDestroy handler gives the item the opportunity to do some
    cleanup work.*/

   canDestroy: Action<never>;

   /*An OnDestroy event is triggered when the tab is closed. The event
   contains the ID of the tab being destroyed. The OnDestroy handler gives
   the item the opportunity to do some cleanup work.*/

   onDestroy: Action<never>;

   /*An OnDelete event is triggered when the opened item is deleted.
   The event contains the ID of the item being deleted, just to tell
   the extension that the current item is deleted.*/

   onDelete: Action<never>;

Beispiel für die Behandlung der Registerkartenaktionen

In diesem Beispiel werden alle mit item.tab verbundenen Aktionen überwacht und entsprechend behandelt.

workloadClient.action.onAction(async function ({ action, data }) {
    switch (action) {
        case 'item.tab.onInit':
            const { id } = data as ItemTabActionContext;
            try{
                const getItemResult = await callItemGet(
                    id,
                    workloadClient
                );
                const item = convertGetItemResultToWorkloadItem<ItemPayload(getItemResult);
                return {title: item.displayName};
            } catch (error) {
                console.error(
                    `Error loading the Item (object ID:${id})`,
                    error
                );
                return {};
            }
        case 'item.tab.canDeactivate':
            return { canDeactivate: true };
        case 'item.tab.onDeactivate':
            return {};
        case 'item.tab.canDestroy':
            return { canDestroy: true };
        case 'item.tab.onDestroy':
            return {};
        case 'item.tab.onDelete':
            return {};
        default:
            throw new Error('Unknown action received');
    }
});

• item.tab.onInit: Ruft Elementdaten mithilfe der ID ab und gibt den Titel des Elements zurück.
• item.tab.canDeactivate: Gibt { canDeactivate: true } zurück, was einen einfachen Wechsel zwischen Registerkarten ermöglicht.
• item.tab.onDeactivate, , item.tab.onDestroy: item.tab.onDeleteGibt ein leeres Objekt für diese Aktionen zurück.
• item.tab.canDestroy: Gibt zurück { canDestroy: true }.

Verwandte Inhalte

Ein vollständiges Beispiel, wie man Registerkartenaktionen behandelt, finden Sie index.ui.ts im Beispiel-Repository. Suchen Sie nach Aktionen, die mit item.tab.