Temenos Digital
R24 AMR | Min(s) read

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:

  1. Width of the hamburger is fixed in Desktopweb and Tablet to "500 Dp" and in mobile to "85%".
  2. The only difference between the pre-login and post-login view is Sign In and Sign Out buttons.
  3. Data in the hamburger must be set through config.
  4. Font icons are used for menu items in the hamburger.
  5. 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"
  6. 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:

  1. Open the Temenos Digital Origination project in Quantum Visualizer.
  2. Drag and drop a Flex Container widget onto the required form.
  3. Select the Flex Container and set the following properties:
    1. Clip bounds: "Off"
    2. Height: "120dp"
    3. Width: "100%"
    4. top: "0dp"
    5. left: "0dp"
  4. Assign higher z index to the flex so that the hamburger appears on top of the form content.
  5. Insert the component in the Flex Container.

APIs

Callbacks

Copyright © 2020- Temenos Headquarters SA

Published on :
Thursday, May 30, 2024 12:31:15 PM IST