Kustomisasi Screen Header

Kustomisasi header screen aplikasi

Panduan Kustomisasi Header Beranda (Style, Variant, Action Button, Background)

Catatan penting: header sangat fleksibel, semua opsi di bawah bisa dikombinasikan sesuai kebutuhan.

Tujuan

Melakukan perubahan pada Header Beranda, termasuk:

  • Mengganti Header Style
  • Mengubah Balance Card Variant
  • Mengganti header menjadi Menu Grid 4 (ala DANA)
  • Mengatur Action Buttons
  • Mengganti Background Image Header

Semua dilakukan tanpa menyentuh widget canvas.

A. Masuk ke Pengaturan Header

  1. Panel Admin → Layout Aplikasi
  2. Masuk tab Canvas
  3. Pilih layar: home
  4. Klik tombol Settings (kanan atas, sejajar Mobile)

Masuk ke mode Screen Settings (Beranda).

Masuk ke Pengaturan Header - Settings button

B. Mengubah Header Style

1. Basic Settings

Di bagian Basic Settings:

  • Screen Title Contoh: Beranda

  • Header Style Contoh:

    • Greeting + Name
    • (opsi lain tergantung konfigurasi project)

Perubahan langsung terlihat di preview.

Basic Settings - Screen Title & Header Style

2. Header Image Height

Masih di Basic Settings:

  • Geser Header Image Height Contoh: 320px

Berpengaruh ke tinggi background.

Catatan: Fitur Header Image Height tidak tersedia di versi preview ini.

C. Mengubah Header Display Type

3. Display Options

Buka Display Options:

a. Header Display Type

  • Pilih: Balance Cards

b. Balance Card Variant

  • Pilih varian, contoh:

    • Variant 6
    • Varian lain sesuai design system Hexaflate

Opsi tambahan:

  • ✅ Header Fade
  • ✅ Drag Handle

Display Options - Balance Card Variant

Alternatif: Header Menu Grid 4 (seperti DANA)

Jika ingin header berisi menu cepat:

  • Ubah Header Display Type menjadi:

    • Menu Grid 4 (nama bisa berbeda tergantung build)

  • Header akan menampilkan 4 shortcut menu di area atas

Cocok untuk:

  • Deposit
  • Transfer
  • Komisi
  • E-wallet

Alternatif - Header Display Type dengan Menu Icons

D. Mengatur Action Buttons

4. Action Buttons

Masuk ke bagian Action Buttons:

Contoh konfigurasi:

  • Button 1:

    • Style: Support (Filled)
    • Action: Customer Support
    • Label: Help

  • Button 2:

    • Style: Notifications (Outline)
    • Action: Route
    • Target: Notification

Untuk menghapus:

  • Klik Remove

Untuk menambah:

  • Klik + Add Action Button

Action button bersifat ikon cepat, bukan menu utama.

Action Buttons Configuration

E. Mengganti Background Image Header

Header Background Settings

5. Header Background

Masuk ke Header Background:

  • Masukkan URL gambar

    https://api.hexaflate.com/assets/xxxx.jpg

  • Preview background langsung berubah

  • Klik Remove untuk kembali ke default

Background ini mempengaruhi:

  • Header
  • Balance card
  • Menu grid header (jika aktif)

F. Simpan & Publish

  1. Pastikan semua section tidak ada warning perubahan belum disimpan
  2. Scroll ke atas
  3. Klik Publish

Hasil Akhir

  • Header bisa tampil sebagai:

    • Greeting + saldo
    • Balance card berbagai varian
    • Menu grid 4 ala e-wallet

  • Action button fleksibel (support, notif, dll)

  • Background header bisa diganti kapan saja

  • Semua perubahan tanpa menyentuh widget canvas