/
Custom Header

Custom Header

May 29, 2020

Overview

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. 

Video

 

Accessing the Custom Header

This section will walk you through the process of creating your Custom Header

Enable Custom Header

  1. To enable your custom header, the user will need to select the "switch" icon 

    . This is located on the right side of the navigation bar.

Example: Enabled Toggle - Customer Header

Edit 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.

 

Header Properties

Once the custom header is enabled, the below properties will become available on the header bar:

Context

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:

Configuring the Custom Header

This section will guide you on how to configure your custom header's Home & Menu Buttons. 

Link Types

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. 

  • Example: alert('hello world') 

  • Description: an alert is a standard javascript function that in this case will bring up an alert saying 'hello world' when clicked on. 

 

  • Example: window.open("https://www.youraddress.com","_self")

  • Description: calls open a window with any address you'd like. You can use a FIN Stack URL address to open any exact fin stack page. 

 

  • Example: finstack.eval('axonFunction(param1,param2)')   

  • Description: in this case, you can call ANY fin stack form/function to come up. replace red text with function name: axonFunction and the parameters based on what the function requires.

 

Hash: This option allows you to hyperlink to views within FIN Stack. To utilize the hash, do the following:

  1. Open separate tab

  2. Open the graphic/view that you want to hyperlink to

  3. Copy the URL from the #frame onward to the very end

  5. Paste it into the button's Hash section to create a hyperlink. 

  • URL: This allows you to enter in any URL to create an external (or internal) hyperlink. This could be the customer website, customer service page, etc. etc 

  • Graphics: This option allows the user to pick and choose a Graphic & Target Ref from an easy-to-use dropdown menu. Once complete, this will auto-create a "hash" graphic link. 

 

Home Button

The Custom Header comes with a Home button by default. 

  1. To edit the functionality of the Home Button, select on Home Button

  2. Click on the "Home Button" option to bring up its individual settings

 

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. 

Disable Header

This button allows the integrator to disable the header. 

Menu Buttons

 Add Button

If you want to add a menu button:

  1. Click on the Add Button option, which will automatically create a new button

  2. It will take you to the "Add Button" menu containing several options for the integrator to customize the newly added button. 

**REFRESH the browser page to view your changes

Button Properties

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)