Onboarden voor multitasking

Artikel
11/07/2024

Met multitasking kan een gebruiker meerdere items tegelijk openen, wanneer een item wordt geopend, wordt een tabblad vastgemaakt aan de linkernavigatiebalk. Standaard ondersteunen we het openen van één item tegelijk en een reeks levenscyclusgebeurtenissen die worden geactiveerd wanneer het tabblad Artefact wordt geïnitialiseerd, gedeactiveerd en vernietigd zonder dat er werk nodig is voor een workload.

Front-end

Standaardeigenschappen voor multitasking wijzigen

Definieer de sectie editorTab in het itemmanifest voor het bewerken van tabbladeigenschappen:

    "editorTab": {

    }

Meerdere items tegelijk openen inschakelen

Definieer de eigenschap maxInstanceCount en wijs toe aan het aantal items dat u tegelijk wilt openen (maximaal 10 items):

    "editorTab": {
      "maxInstanceCount": "10"
    }

Acties en handlers aanpassen

De ontwikkelaar van de werkbelasting besluit om de tabacties en handlers of een deel ervan te implementeren. Ze moeten de eigenschap instellen in het front-endmanifest van het item in de sectie EditorTab, deze acties in eigen code beluisteren, dienovereenkomstig afhandelen en de resultaten retourneren. Als u geen van de acties of een deel ervan instelt, worden de standaardacties automatisch afgehandeld.

Eigenschappen van tabacties definiëren in de editorTab. U kunt ervoor kiezen om een deel van de acties te definiëren en niet allemaal, voor niet-gedefinieerde acties, worden standaardacties gebruikt.

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

Wanneer de workloadontwikkelaar de actie registreert, verwacht Fabric dat de workloadactie de gegevens in een bepaalde indeling retourneert, zodat Fabric die informatie kan lezen of weergeven:

  /* OnInit event is triggered when the artifact 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 displayName or metaData.*/

   onInit: Action<never>;

   /*CanDeactivate event is triggered when navigating away from the tab.
   This event contains the ID of the tab being deactivated. The
   CanDeactivate handler should return a Boolean value indicating whether the
   given artifact tab can be deactivated. For an ideal multi-tasking
   experience, the handler should always return True.*/

   canDeactivate: Action<never>;

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

   onDeactivate: Action<never>;

   /*CanDestroy event is triggered after the close button is clicked,
    before the artifact tab is closed.The event contains the ID of the tab
    being destroyed and also an **allowInteraction** parameter.
    CanDeactivate handler should return a Boolean value indicating whether
    the given artifact tab can be destroyed.
    If allowInteraction equals False, the implementation returns True
    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. Returns True if the user saves or discards
    dirty changes, and False if the user cancels the popup.
    The OnDestroy handler gives the artifact the opportunity to do some cleanup work.*/

   canDestroy: Action<never>;

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

   onDestroy: Action<never>;

   /*OnDelete event is triggered when the artifact which has been opened is
   deleted.The event contains the ID of the artifact being deleted.
   just to tell the extension the current artifact is deleted.*/

   onDelete: Action<never>;

Voorbeeld van het verwerken van de tabacties

In dit voorbeeld luisteren we naar alle acties die betrekking hebben op een item.tab en verwerken we ze dienovereenkomstig:

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: Haalt itemgegevens op met id en retourneert de titel van het item.
item.tab.canDeactivate: Retourneert { canDeactivate: true } waarmee u eenvoudig tussen tabbladen kunt schakelen.
item.tab.onDeactivate, item.tab.onDestroy, item.tab.onDelete: Retourneert een leeg object voor deze acties.
item.tab.canDestroy: Retourneert { canDestroy: true }.

Volgende stappen

Zie index.ui.ts in de voorbeeldopslagplaats voor een volledig voorbeeld van het afhandelen van de tabacties en zoek naar acties die beginnen met item.tab.

Delen via