AboutSupportDeveloper GuideVersion 36.122.80.23

A TabStack is used to manage the state of a stack of tabs within an OpenFin Layout.

Hierarchy

  • LayoutNode
    • TabStack

Properties

type: "stack" = 'stack'

Type of the content item. Always stack, but useful for distinguishing between a TabStack and ColumnOrRow.

Methods

  • Experimental

    Adds or creates a view in this TabStack.

    Parameters

    • view: Identity | Partial<ViewOptions>

      The identity of an existing view to add, or options to create a view.

    • options: AddViewToStackOptions = ...

      Optional view options: index number used to insert the view into the stack at that index. Defaults to 0 (front of the stack)

    Returns Promise<Identity>

    Resolves with the identity of the added view.

    Remarks

    Known Issue: If adding a view overflows the tab-container, the added view will be set as active and rendered at the front of the tab-stack, while the underlying order of tabs will remain unchanged.

    Throws

    If the view does not exist or fails to create.

    Throws

    If the TabStack has been destroyed.

    Example

    if (!fin.me.isView) {
    throw new Error('Not running in a platform View.');
    }

    const stack = await fin.me.getCurrentStack();
    // Alternatively, you can wrap any view and get the stack from there
    // const viewFromSomewhere = fin.View.wrapSync(someView.identity);
    // const stack = await viewFromSomewhere.getCurrentStack();
    const googleViewIdentity = await stack.addView({ name: 'google-view', url: 'http://google.com/' });
    console.log('Identity of the google view just added', { googleViewIdentity });
    // pass in { index: number } to set the index in the stack. Here 1 means, end of the stack (defaults to 0)
    const appleViewIdentity = await stack.addView({ name: 'apple-view', url: 'http://apple.com/' }, { index: 1 });
    console.log('Identity of the apple view just added', { appleViewIdentity });
  • Experimental

    Creates a new TabStack adjacent to the given TabStack or ColumnOrRow. Inputs can be new views to create, or existing views.

    Known Issue: If the number of views to add overflows the tab-container, the added views will be set as active during each render, and then placed at the front of the tab-stack, while the underlying order of tabs will remain unchanged. This means the views you pass to createAdjacentStack() may not render in the order given by the array. Until fixed, this problem can be avoided only if your window is wide enough to fit creating all the views in the tabstack.

    Parameters

    • views: Partial<ViewOptions>[]

      The views that will populate the new TabStack.

    • options: {
          position?: LayoutPosition;
      }

      Additional options that control new TabStack creation.

    Returns Promise<TabStack>

    The newly-created TabStack.

    Example

    if (!fin.me.isView) {
    throw new Error('Not running in a platform View.');
    }

    const stack = await fin.me.getCurrentStack();
    const columnOrRow = await stack.getParent();

    // Create view references by supplying a 'name' and 'url'
    const views = [
    // if 'name' is undefined, one will be generated
    // if 'url' is undefined, it will default the view URL to 'about:blank'
    { name: 'google-view', url: 'http://google.com/'},
    { name: 'of-developers-view', url: 'http://developers.openfin.co/'},
    ];

    // Create a view beforehand to be included in the new tab stack
    const outsideView = await fin.View.create({
    name: 'outside-bloomberg-view',
    url: 'https://bloomberg.com/',
    target: fin.me.identity,
    });

    // Views to add can be identities, or the reference views mentioned above
    const viewsToAdd = [outsideView.identity, ...views];

    // Possible position inputs: 'right' | 'left' | 'top' | 'bottom'
    let stackFrom = await columnOrRow.createAdjacentStack(viewsToAdd, { position: 'right' });
    // Or
    let newStack = await stack.createAdjacentStack(viewsToAdd, { position: 'right' });
    console.log(`A new TabStack created to the right has ${newStack.length} views in it`);
  • Checks if the TabStack or ColumnOrRow exists

    Returns Promise<boolean>

    Example

    if (!fin.me.isView) {
    throw new Error('Not running in a platform View.');
    }

    const stack = await fin.me.getCurrentStack();
    // Retrieves the parent ColumnOrRow
    const columnOrRow = await stack.getParent();
    let exists = await stack.exists();
    // or
    let exists = await columnOrRow.exists();
    // The entity exists: true
    console.log(`The entity exists: ${exists}`);
  • Experimental

    Retrieves the adjacent TabStacks of the given TabStack or ColumnOrRow.

    Parameters

    • edge: LayoutPosition

      Edge whose adjacent TabStacks will be returned.

    Returns Promise<TabStack[]>

    Example

    if (!fin.me.isView) {
    throw new Error('Not running in a platform View.');
    }

    const stack = await fin.me.getCurrentStack();
    const columnOrRow = await stack.getParent();
    // Possible position inputs: 'right' | 'left' | 'top' | 'bottom'
    let rightStacks = await columnOrRow.getAdjacentStacks('right');
    let leftStacks = await columnOrRow.getAdjacentStacks('left');
    // or
    let rightStacks = await stack.getAdjacentStacks('right');
    let leftStacks = await stack.getAdjacentStacks('left');

    console.log(`The entity has ${rightStacks.length} stacks to the right, and ${leftStacks.length} stacks to the left`);
  • Retrieves the parent of the TabStack or ColumnOrRow

    Returns Promise<undefined | TabStack | ColumnOrRow>

    Example

    if (!fin.me.isView) {
    throw new Error('Not running in a platform View.');
    }

    const stack = await fin.me.getCurrentStack();
    // Retrieves the parent ColumnOrRow
    const columnOrRow = await stack.getParent();

    // undefined if entity is the root item
    let parent = await columnOrRow.getParent();
    // or
    let parent = await stack.getParent();
  • Experimental

    Retrieves a list of all views belonging to this TabStack.

    Known Issue: If adding a view overflows the tab-container width, the added view will be set as active and rendered at the front of the tab-stack, while the underlying order of tabs will remain unchanged. If that happens and then getViews() is called, it will return the identities in a different order than than the currently rendered tab order.

    Returns Promise<Identity[]>

    Throws

    If the TabStack has been destroyed.

    Example

    if (!fin.me.isView) {
    throw new Error('Not running in a platform View.');
    }

    const stack = await fin.me.getCurrentStack();
    // Alternatively, you can wrap any view and get the stack from there
    // const viewFromSomewhere = fin.View.wrapSync(someView.identity);
    // const stack = await viewFromSomewhere.getCurrentStack();
    const views = await stack.getViews();
    console.log(`Stack contains ${views.length} view(s)`);
  • Checks if the TabStack or ColumnOrRow is the root content item

    Returns Promise<boolean>

    Example

    if (!fin.me.isView) {
    throw new Error('Not running in a platform View.');
    }

    const stack = await fin.me.getCurrentStack();
    const isRoot = await stack.isRoot();
    // The TabStack is root: false
    console.log(`The TabStack is root: ${isRoot}`);

    // Retrieves the parent ColumnOrRow
    const parent = await stack.getParent();
    const parentIsRoot = await parent.isRoot();
    // The parent ColumnOrRow is root: true
    console.log(`The parent ColumnOrRow is root: ${parentIsRoot}`);
  • Removes a view from this TabStack.

    Parameters

    • view: Identity

      Identity of the view to remove.

    Returns Promise<void>

    Remarks

    Throws an exception if the view identity does not exist or was already destroyed.

    Throws

    If the view does not exist or does not belong to the stack.

    Throws

    If the TabStack has been destroyed.

    Example

    if (!fin.me.isView) {
    throw new Error('Not running in a platform View.');
    }

    const stack = await fin.me.getCurrentStack();
    const googleViewIdentity = await stack.addView({ name: 'google-view', url: 'http://google.com/' });

    await stack.removeView(googleViewIdentity);

    try {
    await stack.removeView(googleViewIdentity);
    } catch (error) {
    // Tried to remove a view ('google-view') which does not belong to the stack.
    console.log(error);
    }
  • Experimental

    Sets the active view of the TabStack without focusing it.

    Parameters

    • view: Identity

      Identity of the view to activate.

    Returns Promise<void>

    Promise which resolves with void once the view has been activated.

    Throws

    If the TabStack has been destroyed.

    Throws

    If the view does not exist.

    Example

    Change the active tab of a known View's TabStack:

    const targetView = fin.View.wrapSync({ uuid: 'uuid', name: 'view-name' });
    const stack = await targetView.getCurrentStack();
    await stack.setActiveView(targetView.identity);

    Set the current View as active within its TabStack:

    const stack = await fin.me.getCurrentStack();
    await stack.setActiveView(fin.me.identity);