Qore Docs
  • What is Qore?
  • Getting Started
    • Start Exploring
    • Qorebase
      • Table & View
      • View Insight
      • Field Types
      • Manage Data (Import & Export)
      • Role & Permission
      • Filter & Sort
    • Qore App
      • Pages
      • Settings
      • Component
    • Create Workflow
  • ACCOUNT
    • Account Setting
  • Project
    • Manage Project
      • Create New Project
      • Customize Project
      • Delete Project
  • Table
    • Manage Table
      • Users Table
      • Create Table
      • Rename Table
      • Delete Table
      • Manage Row
    • Manage Views
      • Create Views
      • Rename Views
      • Delete View
    • Manage Field
      • Create Field
      • Update Field
      • Delete Field
    • Field Type
    • Modify Table
      • Sort
      • Filter
      • Dynamic Filter
      • Hide and Show Field
  • Component
    • Text
      • Text
      • Description Text
      • Rich Text
      • Hint Text
      • Paragraph Text
    • Media
      • Headline
      • Image
      • Embed
      • QR Code Generator
      • Barcode Generator
      • Carousel
    • List
      • List
      • List Card
      • Horizontal Tile
      • Vertical Tile
    • Button
      • Button
      • Button Bar
      • Menu Grid
      • Icon Button
      • Floating Button
    • Custom Component
      • Props
      • Example
  • FAQ
    • How to display Image in Qore App
      • Gallery Component
      • Headline Component
      • Image Component
      • Horizontal Tile Component
      • List Component
      • List Card Component
      • Vertical Tile Component
    • How to display filtered data from table
    • How to filter data on table/view
      • Save configuration filter on table/view
  • Usecase
    • Create list of restaurant menu
Powered by GitBook
On this page
  1. Component
  2. Button

Button Bar

PreviousButtonNextMenu Grid

Last updated 2 years ago

Cara menambahkan Button Bar component

Berikut langkah-langkah untuk menambahkan Button Bar component

  • Buka Qore App Editor

  • Pada tab library, di section button pilih Button Bar component. Terdapat 2 cara untuk menambahkan component ke dalam emulator

    • Jika ingin menambahkan component langsung ke suatu page, kamu dapat double-click card tersebut

    • Jika ingin menambahkan component ke dalam salah satu kontainer di page tersebut, kamu dapat drag and drop ke dalam kontainer yang diinginkan

  • Jika berhasil maka Button Bar component akan muncul di emulator editor screen seperti berikut

Properties dari Button Bar component adalah

Design :

  • Size : mengatur ukuran dari button, apakah small, medium, atau large

Left Button :

  • Left Label : mengatur text pada button pertama (kiri) yang menggambarkan fungsi dari button, seperti save, cancel, delete, dan lainnya

  • Left Action :

    • Logout : mengeluarkan akun user dari sistem aplikasi

    • View Detail : User akan dialihkan ke halaman detail yang otomatis digenerate oleh aplikasi

    • Open Link : ketika button ditekan, user akan diarahkan ke halaman tertentu. Link halaman tersebut disimpan di properties direct link

    • Trigger Action : ketika button ditekan akan mentrigger aksi tertentu. Properties yang dimiliki trigger antara lain : event name atau nama dari event, on success dan on fail yang akan menjalankan aksi tertentu ketika aksi user sukses atau gagal, dan response message display yang akan menampilkan pesan ketika user berhasil ataupun gagal.

    • Jump To Page : Ketika button ditekan, user akan diarahkan ke halaman tertentu dari aplikasi. Properties yang dimiliki antara lain : event name atau nama event, select page untuk memilih halaman yang dituju, dan rowId sebagai baris data yang akan diretrieve

    • Trigger Pipeline : Ketika button ditekan maka aplikasi akan otomatis menjalankan serangkaian aksi yang telah disetting

    • Scan QR Code : Ketika button ditekan maka aplikasi dalam model scan qr code. Properties yang dimiliki antara lain : variabel output yaitu output dari qr code yang berhasil discan, message yaitu pesan untuk user saat menscan qr code, dan on success untuk pesan notifikasi ketika user berhasil

    • Open As Modal : Ketika button ditekan akan menampilkan pop up. Pop up yang ditampilkan berasal dari properties page. Tinggi pop up juga dapat diatur melalui properties height

    • Close Page Modal : Action ini adalah kebalikan dari open as modal, yang bertujuan menutup modal yang sedang aktif. Pada properties on close terdapat pilihan aksi ketika modal ditutup.

    • Show Toast : Digunakan untuk menampilkan notifikasi berupa informasi, sukses, warning, hingga error. Proerties yang dimiliki yaitu title sebagai judul notifikasi dan subtitle sebagai deskripsi singkat notifikasi

Right Button :

  • Right Label : mengatur text pada button kedua (kanan) yang menggambarkan fungsi dari button, seperti save, cancel, delete, dan lainnya

  • Right Action :

    • Logout : mengeluarkan akun user dari sistem aplikasi

    • View Detail : User akan dialihkan ke halaman detail yang otomatis digenerate oleh aplikasi

    • Open Link : ketika button ditekan, user akan diarahkan ke halaman tertentu. Link halaman tersebut disimpan di properties direct link

    • Trigger Action : ketika button ditekan akan mentrigger aksi tertentu. Properties yang dimiliki trigger antara lain : event name atau nama dari event, on success dan on fail yang akan menjalankan aksi tertentu ketika aksi user sukses atau gagal, dan response message display yang akan menampilkan pesan ketika user berhasil ataupun gagal.

    • Jump To Page : Ketika button ditekan, user akan diarahkan ke halaman tertentu dari aplikasi. Properties yang dimiliki antara lain : event name atau nama event, select page untuk memilih halaman yang dituju, dan rowId sebagai baris data yang akan diretrieve

    • Trigger Pipeline : Ketika button ditekan maka aplikasi akan otomatis menjalankan serangkaian aksi yang telah disetting

    • Scan QR Code : Ketika button ditekan maka aplikasi dalam model scan qr code. Properties yang dimiliki antara lain : variabel output yaitu output dari qr code yang berhasil discan, message yaitu pesan untuk user saat menscan qr code, dan on success untuk pesan notifikasi ketika user berhasil

    • Open As Modal : Ketika button ditekan akan menampilkan pop up. Pop up yang ditampilkan berasal dari properties page. Tinggi pop up juga dapat diatur melalui properties height

    • Close Page Modal : Action ini adalah kebalikan dari open as modal, yang bertujuan menutup modal yang sedang aktif. Pada properties on close terdapat pilihan aksi ketika modal ditutup.

    • Show Toast : Digunakan untuk menampilkan notifikasi berupa informasi, sukses, warning, hingga error. Proerties yang dimiliki yaitu title sebagai judul notifikasi dan subtitle sebagai deskripsi singkat notifikasi

Berikut contoh Button Bar yang telah dimodifikasi