The custom header is a customizable header that offers Integrators the ability to set up buttons & drop-downs that can hyperlink to graphics, actions, and webpages throughout the software (and externally) for the users to access and utilize.
This section will walk you through the process of creating your Custom Header
Example: Enabled Toggle - Customer Header
1. To edit your header, the integrator will need to open the App Selection Menu and go down to the "Settings" App
2. When the Settings app is clicked on, scroll down and select the "header" option
3. Here you can find tools to be able to modify your header.
Once the custom header is enabled, the below properties will become available on the header bar:
Your current context will always appear on the top right of the Custom Header.
Clicking on the context will bring up relative bubbles for that context:
This section will guide you on how to configure your custom header's Home & Menu Buttons.
Throughout the Configure Header window, you will run across properties that will allow the user to determine what the specified button will do. These properties are as follows:
Actions: This property allows the user to call any JavaScript action. See below for a few examples.
Hash: This option allows you to hyperlink to views within FIN Stack. To utilize the hash, do the following:
The Custom Header comes with a Home button by default.
If left as-is: If you leave the default "hash" and #...the home button will automatically default to the Top Level Graphic
Once you are done, hit "Apply" and "Done" to confirm the home button functionality.
This button allows the integrator to disable the header.
If you want to add a menu button:
**REFRESH the browser page to view your changes
When adding/editing Buttons on the custom header, you will typically see the following properties.
See below for more information on what each property does:
Set Display Name: This will be the name that is displayed on the Menu Button. (not required)
Set Icon: Allows you to select from a list of available icons. The selected Icon will appear next to the Menu Buttons Display Name. A '+' icon will appear by default when a new button is first added.
Add Security Tags: Allows you to add a security marker tag to the button which can later be filtered to hide/show the button for particular users. Use a comma to separate multiple tags if needed.
Set Badge: Allows you to set a query filter that will be displayed as a "badge" on the button. The proper query to use for this would be a readCount() or anything similar to that
Badge Query Examples:
Badge Class: Allows you to select a css 'class' for your badge. Each class has its own color based on the selected theme. Class Colors can be reviewed here.
TIP: (We recommend adding 7-8 apostrophes to the display name to help accommodate the Badge and avoid any overlap)
NOTE: the badge only updates when the browser page is refreshed, it does not constantly poll 'live' values
Set Link: This is where you can determine what the button will do when clicked on.
Link Type: Allows the user to select between an Action, Hash, URL, or Graphic. Each type is described in more detail here.
To edit an existing button go to the Header menu
**REFRESH the browser page to view your changes
To remove an existing button first open the Header menu
Select the Remove button option & select the Button you'd like to remove.
A confirmation pop-up will appear in your browser tab. Pres "OK" to remove it, or "cancel" to keep the button.
**REFRESH the browser page to view your changes
To re-order the existing custom header buttons first open the Header menu & select the Reorder Buttons option
The next menu will display all of your available buttons and give you the option to move them up or down
**REFRESH the browser page to view your changes
Menu buttons can be turned into "dropdowns" that contain Submenu Buttons. See below for more info on how to add submenu buttons.
To Add a SubMenu item first select the Button you would like to add a submenu button to and hit "edit"
Once you are in the edit button menu, click on the "add submenu button" option to automatically create a submenu button
This will jump you over to the "Edit Sub Button" view.
**REFRESH the browser page to view your changes
(NOTE: Once a submenu button is added to the main button, the main button will no longer act as a "link" it will now become a dropdown list trigger, so if you had a link their previously, you may want to add it as a submenu button)
(NOTE: Security Tags are not available on SubMenu Buttons. Security Tags can only be assigned to the main button, so set your custom headers up accordingly)
To edit an existing button:
**REFRESH the browser page to view your changes
To remove an existing submenu button:
**REFRESH the browser page to view your changes
To re-order the existing custom header buttons:
**REFRESH the browser page to view your changes