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. FAQ
  2. How to display Image in Qore App

Vertical Tile Component

PreviousList Card ComponentNextHow to display filtered data from table

Last updated 3 years ago

Vertical Tile Component ini merupakan bentuk style lain dari list component, namun memiliki fungsi yang sama yakni menampilkan kumpulan data. Apabila kumpulan data tersebut memiliki data image maka kita dapat menampilkannya menggunakan component ini.

Vertical Tile Component ini memiliki result gambar yang lebih besar dibandingkan dengan component category list lainnya. Kamu dapat melihat hasilnya di akhir step step cara menampilkan gambar.

Ikuti step step cara menampilkan gambar dari kumpulan data menggunakan vertical tile component.

1. Setup kumpulan gambar di table Qore. Pada step pertama ini kita akan membuat tabel baru yang berisi informasi nama (type: text) dan file (type:file).

2. Setelah berhasil di step 1, selanjutnya kita akan mulai menambahkan component vertical tile di editor aplikasi. Kita awali dengan mengakses app editor terlebih dahulu, kemudian ikuti simple step berikut

3. Kemudian kita dapat sesuaikan source table yang berisi data gambar yang ingin kita tampilkan di aplikasi. Source akan berisi list table yang ada.

4. Lalu pilih kolom dari table/view source yang menyimpan informasi gambar dengan mengetikkan @namakolom pada properties image.

5. Jika berhasil maka akan muncul gambar di emulator screen sesuai dengan data di table promo yang sebelumnya telah ditambahkan.

Go to app builder, dari menu table klik menu apps kemudian pilih salah satu apps yang ingin kita edit.

Pilih atau tambahkan halaman yang ingin kita tambahkan gambar

Tambahkan component vertical tile pada category list

Aktifkan component vertical tile untuk mulai mengatur data