Custom Header NUO V2
The header component is very widely used for all the products in the Temenos DigitalOrigination app (previously known as Onboarding app).
Following are the various views of the Custom Header NUO component:
- Desktop & tablet view: width > 640
- Mobile view: width < 640
Hamburger menu
- Desktop view
- Mobile view
This component also has responsive properties of the widgets within the component. You don't need to explicitly assign the breakpoint values in every form for the header component.
Assumptions:
- Width of the hamburger is fixed in Desktopweb and Tablet to "500 Dp" and in mobile to "85%".
- The only difference between the pre-login and post-login view is Sign In and Sign Out buttons.
- Data in the hamburger must be set through config.
- Font icons are used for menu items in the hamburger.
- To handle the scrolling behaviour of the form when the hamburger is opened and closed, the main scroll flex container’s name is assumed to be "flxMainScroll"
- The Resume Application button will appear in the hamburger menu only in the Mobile view.
Usage
Here are the steps to set the component in Quantum Visualizer:
- Open the Temenos Digital Origination project in Quantum Visualizer.
- Drag and drop a Flex Container widget onto the required form.
- Select the Flex Container and set the following properties:
- Clip bounds: "Off"
- Height: "120dp"
- Width: "100%"
- top: "0dp"
- left: "0dp"
- Assign higher z index to the flex so that the hamburger appears on top of the form content.
- Insert the component in the Flex Container.
APIs

Sets the text and properties of the tooltip.
Parameters:
- config (Object) - mandatory
The config contains the content of the hamburger menu with proper hierarchy. - otherData - optional
This is used to change the following properties of the component- activateWheninitialized
- isPreLoginView
- isSignoutVisible
- isDashboard
- resumeApplicationCallback
- signoutCallback
Example:
var hamburgerConfig = { config: [{ id: "HOME", menu: "flxHome", text: "Home", toolTip: "i18n.components.Home", icon: "C", isVisible: true }, { id: "EXPLORE PRODUCTS", menu: "flxExploreProducts", text: "Explore Products", toolTip: "i18n.components.ExploreProducts", icon: "A", isVisible: true, subMenu: { children: [{ id: "SAVINGS ACCOUNT", text: "Savings Account", toolTip: "i18n.components.SavingsAccount", onClick: function() { alert("Savings acc clicked "); }, isVisible: true }, { id: "CHECKING ACCOUNT", text: "Checkings Account", toolTip: "i18n.components.CheckingsAccount", onClick: function() { alert("CA clicked "); }, isVisible: true }, { id: "CREDIT CARDS", text: "Credit Cards", toolTip: "i18n.components.CreditCards", onClick: function() { alert("Credit cards clicked "); }, isVisible: true }] } }] }; this.view.headerV2.setData(hamburgerConfig);

Sets the following properties to the component.
- activateWheninitialized
- isPreLoginView
- isSignoutVisible
- isDashboard
- resumeApplicationCallback
- signoutCallback
Parameters:
otherData (Object )- mandatory
The above mentioned keys can be used in otherData.
Example:
var sampleFun = function(){ //do stuff }; var otherData = { isPreLoginView : true, isDashboard : true, signoutCallback : sampleFun }; this.view.setOtherData(otherData);

This is used to set highlight to the current page in the hamburger menu.
Parameters:
- parentId (String) - mandatory
This is the parent menu Id in the hamburger - childId (String) - optional
This is the child submenu id in the hamburger. If there are no child elements to the menu this argument must not be passed.
Example:
this.view.customheaderNUOV2.activateMenu("EXPLORE PRODUCTS","child1");
Callbacks

It is called on click of Sign Out button in the header/hamburger. This can be assigned in two ways:
- Directly using the component
var sampleFun = function(){ //do stuff } this.view.customheaderNUOV2.signoutCallback = sampleFun;
- using the setOtherData API

It is called on click of Resume Application button in the header or hamburger. This can be assigned in two ways:
- Directly using the component
var sampleFun = function(){ //do stuff }this.view.customheaderNUOV2.resumeApplicationCallback = sampleFun;
- using the setOtherData API
In this topic