Formattare le schede multitasking

In Microsoft Fabric è possibile usare il multitasking per aprire più elementi contemporaneamente. Quando si apre un oggetto, una scheda viene fissata al riquadro sinistro. Per impostazione predefinita, Fabric supporta l'apertura di un elemento alla volta. Un set di eventi del ciclo di vita viene attivato quando la scheda dell'elemento viene inizializzata, disattivata e eliminata definitivamente senza alcun lavoro richiesto da alcun carico di lavoro.

Modificare le proprietà predefinite per il multitasking

Definire la sezione editorTab nel manifesto dell'elemento per modificare le proprietà della scheda.

    "editorTab": {

    }

Abilitare l'apertura di più elementi contemporaneamente

Definire la maxInstanceCount proprietà e assegnare il numero di elementi da aprire contemporaneamente (fino a 20 elementi):

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

Personalizzare azioni e gestori

Quando si decide di implementare azioni di tabulazione e gestori (o parte di essi), è necessario impostare una proprietà nel manifesto front-end dell'elemento nella editorTab sezione . Tale proprietà è in ascolto di queste azioni nel proprio codice, gestisce le azioni di conseguenza e restituisce i risultati. Se non si imposta alcuna azione (o parte di esse), le azioni predefinite vengono gestite automaticamente.

Definire le proprietà per le azioni delle schede nella sezione editorTab:

    "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"
    }

Quando si registra l'azione del carico di lavoro, Fabric prevede che l'azione restituisca i dati in un determinato formato in modo che Fabric possa leggere o visualizzare tali informazioni:

   /*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>;

Esempio di gestione delle azioni della scheda

Questo esempio è in ascolto di tutte le azioni correlate a item.tab e gestisce ognuna di conseguenza:

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: recupera i dati dell'elemento usando l'ID e restituisce il titolo dell'elemento.
• item.tab.canDeactivate: restituisce { canDeactivate: true }, che consente di passare facilmente da una scheda all'altra.
• item.tab.onDeactivate, item.tab.onDestroy, : item.tab.onDeleterestituisce un oggetto vuoto per queste azioni.
• item.tab.canDestroy: restituisce { canDestroy: true }.

Contenuti correlati

Per un esempio completo di gestione delle azioni dei tab, vedere index.ui.ts nel repository di esempio. Cercare le azioni che iniziano con item.tab.