Table of Contents
...
Widget Connector url http://youtube.com/watch?v=QMnCSCrHgLA
Accessing the Custom Header
This section will walk you through the process of creating your Custom Header
Enable
...
Custom Header
...
- 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. This will automatically enable your header and bring up an Edit Header menu in the Mini-App
5. Refresh your browser page
6. Once the Custom Header is enabled Use the "switch" icon to toggle between the NAVIGATION HEADER and the CUSTOMER HEADER
5a. By default an "Edit Header" button will be available for you to open the Configure Header (you can delete this, or keep it for quicker access to the edit header menu)
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:
...
Once the Custom Header is enabled Use the "switch" icon to toggle between the NAVIGATION HEADER and the CUSTOMER HEADER
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:
...
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: alert
- an alert is a standard java script
- 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 paramaters
- 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:
- Open separate tab
- Open the graphic/view that you want to hyperlink to
- Copy the URL from the #frame onward to the very end
...
- 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.
- To edit the functionality of the Home Button,
...
- select on Home Button
- 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
...
Button
...
If you want to add a menu button, simply click :
- Click on the Add Button option, which will automatically create a new button
...
...
- 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.
...
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 anythign anything similar to that
...
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 apostrophies apostrophes to the display name to help accomodate accommodate the Badge and avoid any overlap)
...
Link Type: Allows the user to select between an Action, Hash, URL, or Graphic. Each type is described in more detail here.
Edit Button
To edit an existing button go to the Header menu
- Select the button you'd like to edit and select the "edit" option from the slider.
...
- Clicking the edit button will bring you to the "Edit Button" menu.
**REFRESH the browser page to view your changes
Remove Button
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 avialabel available buttons and give you the option to move them up or down
**REFRESH the browser page to view your changes
...
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
Thsi 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 a 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. Secuirty Security Tags can only be assigned to the main button, so set your custom headers up accordingly)
Edit Submenu Button
To edit an existing button
...
:
- Go to the Header menu
...
- Open the button that contains the submenu item
...
- Select the
...
- submenu button you'd like to edit
...
- Select the "edit" option from the slider
...
- Clicking the edit button will bring you to the "Edit Sub Button" menu
...
**REFRESH the browser page to view your changes
Remove Submenu Item
To remove an existing submenu button
...
:
- Open the Header menu
...
- Open the edit view for
...
- the button that contains the submenu item you'd like to remove
...
- Select the submenu button
...
- Click on the "remove" option
- 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
Reorder Submenu Buttons
To re-order the existing custom header buttons
...
:
- Open the Header menu
...
- Select the Reorder Buttons option
...
- The next menu will display all of your
...
- available Sub buttons and give you the option to move them up or down
**REFRESH the browser page to view your changes