Modifying UI Components (Finsemble Flow)

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

We built a suite of UI components as an example of the type of UX 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 UI components are production quality, their inclusion in your application is optional.

We built our UI components using React controls. React controls are a library of elements, such as menus and checkboxes, that can be assembled into a single UI component. You can use these controls to build your own UI components or modify and extend our sample ones. Alternatively, you can build a set of UI 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 UI 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. UI components of your own creation are, perhaps obviously, not supported by ChartIQ.

React controls

This is a list of our individual controls. The React controls are found in their own GitHub repo.

Control Definition
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 UI 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: finsemble-seed/assets/css/fonts.

check   React controls can be used to build your own UI components or modify and extend our sample ones.

Further reading

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

White labeling is made very simple in Finsemble. To learn more, check out the White Labeling tutorial.