Cara Menampilkan Foto dari Form ke Power BI Menggunakan JSON API: Studi Kasus FormFlow bITrend

Cara Menampilkan Foto dari Form ke Power BI Menggunakan JSON API

Banyak developer Power BI menggunakan formulir online untuk mengumpulkan data dari pengguna. Formulir tersebut dapat digunakan untuk pendataan anggota, inspeksi lapangan, audit aset, dokumentasi pekerjaan, absensi, survey, maupun pelaporan aktivitas.

Pengumpulan data berupa teks, angka, tanggal, dan pilihan biasanya relatif mudah diintegrasikan ke Power BI. Tantangan mulai muncul ketika formulir juga memiliki pertanyaan berupa upload foto.

Data responden mungkin sudah berhasil masuk ke Power BI, tetapi gambar tidak dapat langsung ditampilkan. Foto sering kali hanya muncul sebagai nama file, ID penyimpanan, objek bertingkat, atau link yang belum dapat digunakan oleh visual Power BI.

Untuk menyelesaikan masalah tersebut, bITrend mengembangkan sebuah aplikasi formulir berbasis web bernama FormFlow. Sistem ini memiliki konsep penggunaan seperti formulir online pada umumnya, tetapi data respons, informasi file, dan URL gambar disimpan secara terstruktur serta dapat diambil melalui JSON API.

Melalui pendekatan ini, data formulir dan foto dapat digunakan secara lebih mudah dalam Power BI.

FormFlow dapat diakses melalui:
https://bitrend.id/google_form/login

---

Studi Kasus: Pendataan Anggota dengan Foto

Dalam studi kasus ini, dibuat sebuah formulir sederhana dengan nama:

Rekap Nama Anggota

Formulir tersebut memiliki beberapa pertanyaan, seperti:

• Nama
• Jenis kelamin
• Foto pertama
• Foto kedua

Administrator dapat menambahkan berbagai jenis elemen formulir, di antaranya:

• Teks singkat
• Paragraf
• Pilihan ganda
• Kotak centang
• Dropdown
• Skala linear
• Tanggal
• Waktu
• Email
• Angka
• Upload file
• Upload gambar
• Upload video
• Bagian atau judul

Dengan demikian, FormFlow tidak hanya digunakan untuk pendataan sederhana, tetapi dapat dikembangkan untuk berbagai kebutuhan operasional perusahaan.

---

Gambar 1 — Halaman Login FormFlow

Caption:

Halaman login FormFlow yang mendukung autentikasi menggunakan akun Google maupun email dan password.

Alt text:

Halaman login FormFlow untuk mengelola formulir dan respons

Pada halaman login, pengguna dapat masuk menggunakan akun Google atau kredensial email. Setelah berhasil login, pengguna dapat membuat formulir, mengelola pertanyaan, melihat respons, dan mengakses endpoint JSON API.

---

Gambar 2 — Form Builder dengan Dukungan Upload Foto

Caption:

Tampilan Form Builder untuk membuat pertanyaan, pilihan jawaban, serta elemen upload gambar.

Alt text:

Form Builder FormFlow dengan pilihan teks, dropdown, dan upload gambar

Form builder dirancang agar pengguna dapat membuat formulir tanpa harus menulis kode.

Pada contoh pendataan anggota, administrator membuat pertanyaan:

Nama

Jenis elemen:

Teks singkat

Pertanyaan ini dibuat wajib agar setiap respons memiliki identitas anggota.

Jenis Kelamin

Jenis elemen:

Dropdown

Pilihan yang tersedia:

• Laki-laki
• Perempuan

Foto

Jenis elemen:

Upload gambar

Pengguna dapat mengunggah satu atau beberapa foto sesuai kebutuhan formulir.

---

Permasalahan Umum Saat Mengambil Foto Form ke Power BI

1. Foto Hanya Tersimpan sebagai Nama File

Pada beberapa sistem, data yang diterima Power BI hanya berupa:

foto_anggota_001.jpg

Nama file tersebut belum cukup untuk menampilkan gambar. Power BI membutuhkan URL lengkap yang dapat diakses.

Contoh yang dibutuhkan:

https://domain.com/uploads/foto_anggota_001.jpg

2. URL Gambar Berada di Dalam Object atau List

Respons JSON kadang memiliki struktur seperti:

{
  "foto": {
    "name": "foto_anggota_001.jpg",
    "mime_type": "image/jpeg",
    "size": 182300,
    "url": "https://domain.com/uploads/foto_anggota_001.jpg"
  }
}

Power BI akan membaca kolom foto sebagai Record, bukan langsung sebagai URL.

Developer perlu melakukan proses:

Expand Record

agar properti berikut menjadi kolom:

• name
• mime_type
• size
• url

3. Beberapa Foto Tersimpan dalam Satu Respons

Apabila satu pertanyaan mendukung beberapa gambar, responsnya bisa berbentuk list:

{
  "foto": [
    {
      "name": "foto_depan.jpg",
      "url": "https://domain.com/uploads/foto_depan.jpg"
    },
    {
      "name": "foto_belakang.jpg",
      "url": "https://domain.com/uploads/foto_belakang.jpg"
    }
  ]
}

Power BI membaca struktur tersebut sebagai List.

Agar setiap gambar menjadi baris atau kolom yang dapat digunakan, pengguna perlu:

1. Mengubah List menjadi baris
2. Melakukan expand pada Record
3. Mengambil kolom URL
4. Mengatur kategori data menjadi Image URL

4. Link Gambar Membutuhkan Login

Power BI hanya dapat menampilkan gambar apabila URL gambar dapat diakses oleh visual.

Apabila link selalu mengarahkan pengguna ke halaman login, gambar tidak akan muncul pada report.

Untuk kebutuhan dashboard internal, akses file perlu dirancang dengan aman. Beberapa pendekatan yang dapat digunakan antara lain:

• URL publik dengan token tertentu
• Signed URL dengan masa berlaku
• Endpoint gambar yang melakukan validasi akses
• Penyimpanan internal yang dapat dijangkau Power BI Service
• Mekanisme proxy file

Pemilihan metode harus disesuaikan dengan tingkat kerahasiaan data.

5. Kolom URL Belum Dikategorikan sebagai Image URL

Walaupun URL sudah tampil di tabel Power BI, gambar belum tentu langsung muncul.

Kolom perlu diatur menjadi:

Data category → Image URL

Tanpa pengaturan tersebut, Power BI akan memperlakukan link sebagai teks biasa.

---

Solusi yang Dibangun pada FormFlow

FormFlow menyimpan respons formulir dan informasi file dalam database. Setiap file gambar memiliki metadata yang dapat digunakan oleh aplikasi lain.

Metadata tersebut dapat meliputi:

• ID file
• Nama file
• MIME type
• Ukuran file
• Status publik
• Tanggal dibuat
• Tanggal diperbarui
• URL gambar

Data kemudian disediakan melalui JSON API agar dapat dikonsumsi oleh Power BI maupun aplikasi lain.

---

Gambar 3 — Halaman Respons dan JSON API

Caption:

Halaman respons FormFlow yang menyediakan endpoint JSON API untuk mengambil struktur pertanyaan, data responden, dan informasi file.

Alt text:

Endpoint JSON API FormFlow untuk integrasi respons dan gambar ke Power BI

Pada halaman respons, administrator dapat melihat:

• Jumlah respons
• Data per respons
• Tabel respons
• Endpoint JSON API
• Token akses API
• Informasi penggunaan token
• Tombol untuk melihat JSON
• Tombol membuat ulang token

Contoh endpoint:

https://bitrend.id/google_form/api/forms/2/responses

Endpoint tersebut dapat digunakan oleh Power BI melalui menu:

Get Data → Web

Untuk menjaga keamanan, endpoint dapat menggunakan token autentikasi.

---

Contoh Struktur JSON

Struktur respons dapat disusun seperti berikut:

{
  "success": true,
  "form": {
    "id": 2,
    "title": "Rekap Nama Anggota"
  },
  "responses": [
    {
      "id": 71,
      "submitted_at": "2026-07-15 11:29:00",
      "respondent": "responden@example.com",
      "answers": {
        "nama": "Supriyana",
        "jenis_kelamin": "Laki-laki",
        "foto1": {
          "name": "foto-anggota-1.jpg",
          "mime_type": "image/jpeg",
          "size": 182300,
          "url": "https://bitrend.id/google_form/uploads/foto-anggota-1.jpg"
        },
        "foto2": {
          "name": "foto-anggota-2.jpg",
          "mime_type": "image/jpeg",
          "size": 194500,
          "url": "https://bitrend.id/google_form/uploads/foto-anggota-2.jpg"
        }
      }
    }
  ]
}

Struktur aktual dapat berbeda sesuai desain endpoint. Namun prinsip utamanya sama: Power BI membutuhkan nilai URL gambar dalam bentuk teks yang dapat diekspansi dari JSON.

---

Cara Menghubungkan JSON API ke Power BI

1. Buka Get Data

Pada Power BI Desktop, pilih:

Home → Get Data → Web

Masukkan endpoint JSON API FormFlow:

https://bitrend.id/google_form/api/forms/2/responses

Apabila API menggunakan token, token dapat dikirim melalui header pada Power Query.

Contoh konsep Power Query:

let
    Source =
        Json.Document(
            Web.Contents(
                "https://bitrend.id/google_form/api/forms/2/responses",
                [
                    Headers = [
                        Authorization = "Bearer TOKEN_ANDA"
                    ]
                ]
            )
        )
in
    Source

Jangan menyimpan token sensitif pada dokumentasi publik atau screenshot yang dapat diakses umum.

2. Masuk ke Bagian Responses

Setelah JSON terbuka, Power BI mungkin menampilkan data sebagai:

Record

Klik Record lalu masuk ke properti:

responses

Data respons biasanya akan tampil sebagai:

List

3. Ubah List Menjadi Table

Pilih:

To Table

Setiap respons kemudian akan menjadi satu baris.

4. Expand Record

Klik ikon expand pada kolom respons.

Pilih field yang diperlukan, misalnya:

• id
• submitted_at
• respondent
• answers

5. Expand Answers

Kolom answers masih berbentuk Record.

Expand kembali untuk mendapatkan:

• nama
• jenis_kelamin
• foto1
• foto2

6. Expand Informasi Foto

Kolom foto biasanya masih berbentuk Record.

Expand menjadi:

• name
• mime_type
• size
• url

Setelah proses selesai, struktur tabel Power BI dapat menjadi:

ID	Nama	Jenis Kelamin	Foto 1 URL	Foto 2 URL
71	Supriyana	Laki-laki	https://…/foto1.jpg	https://…/foto2.jpg
72	Anggota 2	Perempuan	https://…/foto1.jpg	https://…/foto2.jpg

7. Atur Data Category

Pilih kolom:

Foto 1 URL

Kemudian:

Column tools → Data category → Image URL

Lakukan hal yang sama untuk kolom foto lainnya.

---

Menampilkan Foto pada Power BI

Setelah data kategori diatur menjadi Image URL, gambar dapat ditampilkan menggunakan beberapa visual.

Table Visual

Gunakan Table untuk menampilkan:

• Nama
• Jenis kelamin
• Foto
• Tanggal pengiriman

Power BI dapat menampilkan gambar langsung di dalam kolom tabel.

Matrix Visual

Matrix dapat digunakan jika data perlu dikelompokkan berdasarkan:

• Cabang
• Departemen
• Lokasi
• Kategori
• Status pemeriksaan

Image Visual

Beberapa versi Power BI menyediakan visual gambar yang dapat mengambil URL dari data.

Pada contoh implementasi, kolom URL dipilih sebagai sumber gambar:

Image source → Select from data

Kemudian masukkan field:

First URL

Gambar akan berubah mengikuti filter atau baris yang sedang dipilih.

---

Gambar 4 — Foto Berhasil Ditampilkan di Power BI

Caption:

Hasil integrasi JSON API FormFlow ke Power BI, dengan foto responden ditampilkan melalui kolom Image URL.

Alt text:

Foto responden dari JSON API FormFlow berhasil ditampilkan di Power BI

Dari hasil implementasi tersebut, data responden seperti ID, nama, jenis kelamin, dan foto dapat digunakan dalam satu report.

Pengguna dapat memilih data tertentu pada tabel, kemudian visual gambar menampilkan foto yang sesuai.

---

Contoh Penerapan di Perusahaan

Konsep integrasi FormFlow, JSON API, dan Power BI dapat digunakan dalam berbagai kasus.

Inspeksi Lapangan

Petugas mengisi:

• Lokasi
• Nama pemeriksa
• Kondisi aset
• Catatan
• Foto sebelum perbaikan
• Foto setelah perbaikan

Power BI kemudian menampilkan status inspeksi dan dokumentasi foto.

Audit Aset

Form digunakan untuk mencatat:

• Nomor aset
• Nama aset
• Lokasi
• Kondisi
• Penanggung jawab
• Foto aset

Dashboard dapat digunakan untuk memonitor aset yang rusak, hilang, atau perlu perbaikan.

Stock Opname

Petugas mengunggah:

• Kode barang
• Lokasi penyimpanan
• Stok sistem
• Stok fisik
• Selisih
• Foto barang

Power BI dapat menampilkan selisih stok sekaligus bukti foto.

Monitoring Project

Tim proyek mengisi:

• Nama proyek
• Persentase progres
• Kendala
• Tanggal laporan
• Foto progres

Manajemen dapat melihat tren progres dan dokumentasi lapangan dalam dashboard.

Quality Control

Form dapat berisi:

• Produk
• Batch
• Jenis pemeriksaan
• Hasil pemeriksaan
• Temuan
• Foto defect

Dashboard kemudian menampilkan jumlah defect, kategori masalah, dan foto temuan.

Absensi dan Dokumentasi Kegiatan

Pengguna mengisi:

• Nama
• Divisi
• Waktu hadir
• Lokasi
• Foto kegiatan

Data dapat digunakan untuk laporan kehadiran atau dokumentasi pelatihan.

Survey Toko atau Outlet

Sales atau surveyor mengisi:

• Nama toko
• Alamat
• Produk tersedia
• Kondisi display
• Kompetitor
• Foto toko
• Foto rak produk

Power BI dapat digunakan untuk memonitor coverage dan kondisi outlet.

---

Keuntungan Menggunakan Form Berbasis Database dan API

Data Lebih Terstruktur

Jawaban dan file disimpan dengan struktur yang konsisten sehingga lebih mudah digunakan untuk analisis.

Integrasi Lebih Fleksibel

Data dapat digunakan oleh:

• Power BI
• Aplikasi internal
• Website
• Sistem reporting
• Data warehouse
• Proses ETL

URL Foto Lebih Mudah Dikelola

Setiap gambar memiliki metadata dan URL yang dapat diambil melalui API.

Tidak Bergantung pada Proses Export Manual

Pengguna tidak perlu mengunduh spreadsheet dan memperbarui file secara manual setiap kali ada respons baru.

Mendukung Otomatisasi Refresh

Power BI dapat melakukan refresh dari endpoint JSON sesuai konfigurasi koneksi dan gateway.

Form Dapat Disesuaikan

Pertanyaan dan tipe input dapat disesuaikan berdasarkan proses bisnis perusahaan.

---

Tantangan yang Tetap Perlu Diperhatikan

Keamanan File

Tidak semua foto boleh dibuat publik. Sistem perlu menentukan apakah gambar:

• publik
• hanya untuk pengguna login
• menggunakan token
• menggunakan signed URL
• hanya dapat diakses melalui jaringan internal

Masa Berlaku Token

Token API perlu dapat:

• dibuat ulang
• dinonaktifkan
• memiliki scope
• dicatat penggunaannya
• dibatasi sesuai kebutuhan

Ukuran File

Upload foto berukuran besar dapat meningkatkan penggunaan penyimpanan dan memperlambat proses refresh.

Sistem sebaiknya menerapkan:

• batas ukuran file
• kompresi gambar
• validasi MIME type
• thumbnail
• optimasi format gambar

Privasi Data

Foto dapat mengandung data pribadi. Perusahaan perlu memiliki kebijakan akses, retensi, dan penggunaan data.

Refresh Power BI Service

Endpoint yang dapat dibuka di Power BI Desktop belum tentu otomatis berjalan sama di Power BI Service.

Perlu diperiksa:

• autentikasi
• credential
• gateway
• privacy level
• sumber data dinamis
• konfigurasi scheduled refresh

---

Perbandingan Alur Manual dan Alur API

Alur Manual

Pengguna mengisi formulir
        ↓
Data masuk spreadsheet
        ↓
Admin mengunduh data
        ↓
Admin mencari file foto
        ↓
Link disusun manual
        ↓
File dimuat ke Power BI
        ↓
Proses diulang saat ada data baru

Alur FormFlow dan JSON API

Pengguna mengisi FormFlow
        ↓
Data dan foto tersimpan di database
        ↓
API menyediakan respons dan URL gambar
        ↓
Power BI mengambil JSON
        ↓
Data ditransformasikan di Power Query
        ↓
Foto ditampilkan menggunakan Image URL
        ↓
Data dapat diperbarui melalui refresh

Pendekatan kedua mengurangi proses manual dan membuat integrasi lebih mudah dipelihara.

---

Praktik Terbaik Menyiapkan API Foto untuk Power BI

Gunakan URL Absolut

Gunakan:

https://bitrend.id/google_form/uploads/foto.jpg

Hindari hanya mengirim:

/uploads/foto.jpg

Power BI membutuhkan URL lengkap.

Sertakan Metadata File

Minimal sediakan:

name
mime_type
size
url

Gunakan Struktur JSON yang Konsisten

Jangan membuat satu respons berupa teks dan respons lain berupa object untuk pertanyaan yang sama.

Hindari Nama Kolom yang Berubah

Nama property API sebaiknya stabil agar query Power BI tidak rusak ketika judul pertanyaan diubah.

Gunakan ID atau key permanen, misalnya:

{
  "question_key": "foto_lokasi",
  "label": "Foto Lokasi"
}

Sediakan Penanganan Nilai Kosong

Apabila pengguna tidak mengunggah foto, API sebaiknya mengembalikan:

null

bukan struktur yang tidak konsisten.

Gunakan HTTPS

URL gambar dan endpoint API sebaiknya menggunakan HTTPS.

Pisahkan URL Thumbnail dan Gambar Asli

Untuk report, thumbnail lebih efisien daripada selalu memuat gambar beresolusi tinggi.

Contoh:

{
  "thumbnail_url": "https://domain.com/thumb/foto.jpg",
  "original_url": "https://domain.com/uploads/foto.jpg"
}

Power BI dapat menggunakan thumbnail, sedangkan pengguna dapat membuka file asli jika diperlukan.

---

Apakah FormFlow Menggantikan Google Forms?

FormFlow tidak harus diposisikan sebagai pengganti untuk seluruh kebutuhan formulir.

Google Forms tetap sangat praktis untuk formulir sederhana dan kolaborasi umum.

FormFlow lebih relevan ketika perusahaan membutuhkan:

• Penyimpanan data di database sendiri
• Struktur API yang dapat dikustom
• Pengelolaan file dan URL gambar
• Integrasi Power BI
• Token akses API
• Kontrol autentikasi
• Pengembangan fitur sesuai bisnis
• Integrasi dengan aplikasi internal

Dengan kata lain, FormFlow ditujukan untuk kebutuhan yang memerlukan kontrol lebih besar terhadap data dan integrasi.

---

Tentang FormFlow bITrend

FormFlow adalah aplikasi formulir berbasis web yang dikembangkan untuk membantu pengumpulan data dan integrasi ke sistem analitik.

Fitur yang tersedia meliputi:

• Login menggunakan Google
• Login menggunakan email
• Form builder
• Berbagai jenis pertanyaan
• Upload gambar
• Upload file
• Upload video
• Tabel respons
• Tampilan per respons
• JSON API
• Token API
• Integrasi Power BI
• Penyimpanan respons dalam database

Akses aplikasi:

Buka FormFlow bITrend

---

Bagaimana bITrend Dapat Membantu?

bITrend membantu perusahaan mengembangkan solusi pengumpulan data hingga menjadi dashboard yang dapat digunakan.

Layanan yang tersedia meliputi:

• Pembuatan formulir custom
• Pengembangan aplikasi pendataan
• Integrasi database
• Pembuatan JSON API
• Integrasi foto ke Power BI
• Pembuatan dashboard Power BI
• Pengaturan scheduled refresh
• Implementasi autentikasi
• Konsultasi keamanan data
• Training Power Query dan JSON
• Pendampingan tim internal

Solusi dapat disesuaikan untuk kebutuhan inspeksi, audit aset, inventory, quality control, survey outlet, project monitoring, HR, dan proses operasional lainnya.

---

Kesimpulan

Mengambil data teks dari formulir ke Power BI relatif mudah. Tantangan yang lebih besar muncul ketika formulir memiliki fitur upload foto.

Agar gambar dapat ditampilkan di Power BI, sistem perlu menyediakan URL yang valid, struktur JSON yang konsisten, metadata file, serta mekanisme keamanan yang sesuai.

Melalui FormFlow, data respons dan foto disimpan di database kemudian disediakan melalui JSON API. Power BI dapat mengambil data tersebut, melakukan expand pada struktur JSON, mengambil kolom URL, dan menampilkannya sebagai Image URL.

Pendekatan ini membantu perusahaan mengurangi pekerjaan manual dan membangun alur pelaporan yang lebih terintegrasi.

Butuh Integrasi Form, Foto, dan Power BI?

Apakah perusahaan Anda masih mengunduh data formulir secara manual, kesulitan mengelola link foto, atau belum dapat menampilkan dokumentasi gambar di Power BI?

bITrend membantu membangun alur lengkap:

Form → Database → JSON API → Power BI → Dashboard

Hubungi bITrend untuk konsultasi pengembangan formulir, API, dan Dashboard Power BI sesuai kebutuhan perusahaan Anda.

Akses demo FormFlow:

https://bitrend.id/google_form/login