Menambahkan Menu Grid

Cara menambahkan menu grid ke aplikasi

Panduan Menambahkan Menu Grid

Tujuan

  1. Menambahkan widget menu grid (Grup Menu) di Canvas
  2. Membuat item menu di dalam grid
  3. Mengatur ikon, tampilan, dan navigasi
  4. Publish agar tampil di aplikasi client

A. Menambahkan Widget Menu Grid

1. Masuk ke Canvas

  1. Buka Panel Admin
  2. Pilih Layout Aplikasi
  3. Masuk ke tab Canvas
  4. Pilih layar, contoh: home (8 widget)

Menu Grid - Konfigurasi Frame

2. Tambahkan Widget Grup Menu

  1. Di panel Widget, klik Grup Menu
  2. Widget menu grid langsung muncul di canvas (preview tengah)
  3. Klik widget tersebut untuk membuka Properti

3. Konfigurasi Dasar Grid

Di panel Properti (kanan):

  • Konfigurasi Frame Contoh: 60x60px (ukuran icon)
  • Item Menu Tertulis jumlah item (misalnya 8 item)
  • Klik Buka Editor Menu

B. Membuat Struktur Menu

4. Buka Editor Menu

Setelah klik Buka Editor Menu, akan muncul halaman Editor Menu.

Jika masih kosong:

  • Klik + Tambah Item atau
  • Klik Tambah Item Pertama

Editor Menu - Buka Editor

Editor Menu - Tambah Item

5. Pilih Jenis Item

Muncul modal Tambah Item Baru:

  • Pilih Item Menu (digunakan untuk menu yang mengarah ke halaman/fitur)
  • Submenu hanya dipakai kalau ingin menu bertingkat

Tambah Item Baru - klik Tambah Item di Editor Menu

C. Mengatur Item Menu

6. Edit Item Menu

Setelah item dibuat, klik ikon edit (pensil).

a. Identitas

  • Judul: Contoh: Pulsa
  • Menu ID: Contoh: menu_pulsa
  • Ikon: Tempel URL icon atau pilih dari asset Hexaflate

Edit Item - Identitas

b. Tampilan

  • Atur Ukuran Teks (slider)
  • Preview teks + ikon langsung terlihat

c. Navigasi

Masuk ke bagian Navigasi:

  1. Pilih tipe Route

  2. Pilih Route: Produk

  3. Konfigurasi Produk:

    • Operators: contoh TSELREG
    • Hint Text: Nomor HP Pelanggan
    • Tipe Nomor: Hanya Angka
    • Transaksi Massal: Aktif / Nonaktif sesuai kebutuhan

  4. Klik Simpan

Alternatif:

  • URL → buka web eksternal
  • Tidak Ada → menu non-interaktif

Edit Item - Navigasi Route

7. Tambahkan Item Lain (Opsional)

Ulangi langkah Tambah Item untuk:

  • Paket Data
  • Token
  • E-money
  • Hiburan
  • dll

Urutan item bisa disesuaikan dari Editor Menu.

8. Simpan Editor Menu

  1. Klik Simpan di Editor Menu
  2. Pastikan tidak ada peringatan perubahan belum disimpan

D. Publish ke Client

9. Publish Layout

  1. Kembali ke halaman Canvas
  2. Klik Publish (kanan atas)
  3. Tunggu proses selesai

Hasil Akhir

  • Menu grid tampil di halaman Home
  • Icon + teks sesuai konfigurasi
  • Klik menu langsung membuka halaman produk terkait
  • Perubahan aktif di aplikasi client setelah publish