Presentation Components

Components are the basic building blocks of the Finsemble application. A component is a piece of HTML5/JavaScript that provides some functionality. Each instance of a component is housed within a Finsemble window, which is a container sitting on top of OpenFin's secure operating layer.

In software development, design principles separate the business logic (the structural element) and the presentation logic (the visual element) of content. This principle can be used to think about Finsemble components as well. Components that deal with raw data and real-world business rules can be called business components. Components that provide chat functionality or deal with charting libraries are examples of business components. By the same token, presentation components are built to provide common UI functionality to end users. A drop-down menu or dialog box would be considered a presentation component. However, all components have the same basic definition and are built using the Finsemble Library's client APIs. It's worth remembering that features like the toolbar or dropdown menus are just HTML5 windows operating with desktop application-like functionality.

The seed project provides a set of sample presentation components. You can use these samples wholesale or use them as templates for your own components. They can be found in the seed project repo. Though these presentation components are production quality, their inclusion in your application is optional.

Some of the most important sample presentation components are detailed below.

The Toolbar

Toolbar tutorial on GitHub

Occupying the top portion of every monitor, the toolbar component is the hub of the Finsemble application. Whenever a user wants to launch another component or manage their windows, they use the toolbar. The toolbar is spawned by the Workspace service and is available on every monitor. When monitors are added or removed, toolbars are also spawned or removed. The toolbar is sensitive to which monitor the user accesses it from; if you launch a component from the toolbar on your left monitor, the component will spawn on the left monitor. Toolbars are workspace independent.

In our sample component, we've included several core features:

  • Launches any component that's pinned to the toolbar
  • Houses user workspaces
  • Provides a menu for users to create new workspaces, save workspaces, or quit the application
  • Provides an app launcher
  • Brings all windows to the foreground with the click of a button
  • Auto-arranges windows

App Launcher

App launcher tutorial on GitHub

The app launcher acts like a dropdown menu spawned spawned by the toolbar. The app launcher is launched from the "Apps" button on the toolbar.

The list of launchable apps is pulled from configs/componentList.json. If components['foreign']['App Launcher'].launchableByUser is true, it will be included in the app launcher.


Dialogs are a common UI component in both web and desktop applications. Two sample dialogs, the yes/no dialog and single input dialog, are included in the sample component repo. However, it's easy to make your own dialogs for a variety of situations. The Dialog Manager Client simplifies interacting with dialog windows by spawning them and getting data back from them. Reading the API documentation coupled with the Dialog Control documentation will have you well on the way to creating your own dialogs.

File Menu

File menu tutorial on GitHub

The file menu is a window that's been styled to look like a native Windows file menu. It can be propagated with commands such as quit, restart, etc. The file menu is launched from the Finsemble icon on the toolbar.

Linker Window

Linker window tutorial on GitHub

The linker window is a component that interfaces with the Linker service. It is used to add or remove a Finsemble component from a group, demarcated by color. The linker window is launched from the link icon on the window title bar.

The linker window works like this:

  • The window title bar calls LinkerClient.openLinkerWindow() which sends a router query on the Finsemble.LinkerWindow.Show channel with the window's groups, windowIdentifier and windowBounds.
  • The linker window then updates its display using that information and opens up at the proper position:

      finWindow.showAt(data.windowBounds.left, + 20, function() {});
  • When the user clicks on the group color to update the window's groups, the linker window uses the Linker Client API to update the groups. It then hides itself.

Check out Linking Components for more information about linking and the Linker service.

Window Title Bar

Windows title bar tutorial on GitHub

The window title bar is a component that's injected into every window. It carries the functionality that users have come to expect from a title bar, such as the ability to close, move, minimize, and maximize, as well as some Finsemble-specific options.

If a component can link to other components, the window title bar carries an icon to open the linker window. If the component can share data using the Drag and Drop Client, the window title bar carries a draggable share icon. When the share icon is dragged from one window to another, data is transferred from the first window into the second.

You can set the title of a window title bar using the Window Client.


Workspace Management Menu

Workspace management menu tutorial on GitHub

The workspace management menu allows users to create, delete, save, and switch between workspaces. The workspace management menu is launched from the "Workspaces" button on the toolbar.

To learn more about workspaces, you can read Understanding Workspaces.

Robust customizability via React UI controls

These sample presentation components were built using React controls. Developers can use the React controls to build or modify their own components for Finsemble. To find out more about the React controls, see the Modifying Presentation Components tutorial.

Further reading

These components make use of the following client APIs; reading their documentation will give you additional perspective: