Modifying Presentation Components

Just like components are the basic building blocks of the Finsemble application, React controls are the basic building block of our sample presentation components.

To elaborate, a "presentation" component is a way to think about a component that provides UI. We built a suite of presentation components as an example of the type of UI that Finsemble can provide. However, we understand that you (might) want to customize the UI of your Finsemble application for your own needs. As such, though these presentation components are production quality, their inclusion in your application is optional.

We built our presentation components using React controls. React controls are a library of elements, such as menus and checkboxes, that can be assembled into a single presentation component. You can use these controls to build your own presentation components or modify and extend our sample ones. Alternatively, you can build a set of presentation components from scratch using any toolset you wish. It's up to you.

The React controls are found in their own GitHub repo.

Note: We will continue to support the presentation components that we create, as well as the React controls used to build them, but we also offer you the freedom to take these tools into a totally unique direction. Presentation components of your own creation are, perhaps obviously, not supported by ChartIQ.

React controls

This is a list of our individual controls.

Button The button is an essential element that indicates an action upon click. Its employed to open menus from the toolbar or launch components.
Button Label This is the label used in the button control.
Dialog This control allows you to quickly assemble a functioning dialog: it is a pop-up window that receives user input and transmits it to another window. It handles much of the communication with the Dialog Manager Client, allowing you to focus on the contents of your dialog. The basic dialog control is a collection of controls consisting of a three part hierarchy: Dialog Question, Dialog Text Input, and Dialog Button.
Font Icon This control renders an <i> element with the class that's passed into the icon property. This is just a helper, you do not need to use it.
Menu This control is designed to help you to quickly assemble a menu. A menu is just an ephemeral Finsemble component that shows up when a button is clicked, hides when the menu loses focus, and hides on escape. This control provides styling, and handles those events common to all menus.
Overflow Menu This control is designed to automatically handle overflow from toolbar sections. It uses the Store Client to receive a list of items that mirror toolbar buttons. It then displays those items as menu inside a menu. The click action for the menu items is to transmit the index of the clicked item to the toolbar section that it is handling the overflow for.
Toolbar This is a container designed to be a toolbar. The Toolbar control is made up of Toolbar Sections controls and each section contains other components or controls. Generally these are composed from buttons. A Separator control is also available and you have the ability to use any custom controls.
Toolbar Section        This is the heart of the toolbar. It is used to render the sections of the toolbar which contain all the items in the toolbar. It can automatically handle overflow in conjunction with the Overflow Menu control.
Toolbar Separator This is a simple div that will render a vertically aligned, vertical section separator on the toolbar.


We have hosted all the images and SASS files necessary to style your presentation components on our GitHub.

Font Finance Icons

Finsemble comes with a suite of icons fonts that you can use to customize your Finsemble application. You can call them using their CSS class names.

The reference file for the Font Finance icons comes bundled in your seed project. You can find them here: src-built-in/components/assets/css/icons-reference.html.

Further reading

For a list of some of the presentation components built with these controls, see Presentation Components.