Edit / Custom Template

1. Akses Menu Custom Template

   • Login ke dashboard Serpul menggunakan kredensial Anda.

   • Pilih menu Custom Aplikasi > Custom Template.

   • Anda akan diarahkan ke halaman editor template, yang terdiri dari beberapa komponen utama:

     • Kode Editor : Untuk mengedit file seperti index.html, style.css, dan file lainnya.

     • Pratinjau (Preview) : Untuk melihat perubahan secara langsung.

     • Tombol Aksi : Untuk melakukan tindakan seperti menyimpan, mereset, atau menerapkan template.

2. Mengedit Template

   • Edit Kode : Gunakan editor kode untuk memodifikasi file template.

   • Fokus pada elemen-elamen yang tersedia, seperti :

     • index.html : Struktur dasar halaman.

     • js.js : Memberikan interaktivitas pada halaman aplikasi.

     • style.css : Mengatur tampilan visual seperti warna, font, dan layout.

   • Tips Pengeditan : Pastikan kode ditulis dengan standar HTML, CSS, dan JavaScript yang benar serta gunakan komentar untuk menjelaskan perubahan pada kode.

3. Pratinjau Perubahan (Preview)

   • Perubahan akan ditampilkan secara realtime di halaman pratinjau.

   • Pastikan semua elemen terlihat sesuai dengan desain yang diinginkan.

   • Preview hanya menampilkan hasil sementara, tidak mempengaruhi aplikasi live.

4. Menyimpan Template

   • Setelah selesai mengedit, klik tombol Simpan : Sistem akan memvalidasi kode untuk memastikan tidak ada error.

   • Jika Berhasil: Anda dapat melanjutkan dengan pratinjau atau menerapkan template.

   • Jika Gagal: Sistem akan menampilkan pesan kesalahan dan perbaiki kesalahan sesuai panduan yang diberikan, lalu coba simpan kembali.

5. Mereset Template ke Default

   • Klik tombol Reset untuk mengembalikan template ke versi awal.

   • Konfirmasi Reset : Pastikan Anda ingin melanjutkan, karena perubahan yang belum disimpan akan hilang.

   • Setelah reset : Tampilan template akan kembali ke pengaturan bawaan.

6. Menerapkan Template

   • Setelah perubahan disimpan, klik tombol Terapkan untuk mempublikasikan template ke aplikasi tenant.

   • Jika Berhasil : Template baru diterapkan dan akan langsung terlihat oleh pengguna aplikasi.

   • Jika Gagal : Sistem akan menampilkan pesan kesalahan terkait koneksi atau server

7. Aktifkan Mode Custom Template

   Fitur ini bertujuan untuk memberikan fleksibilitas tenant dalam mengelola fungsi custom template di aplikasi mobile customer atau agen. Dirancang untuk mengatasi kendala seperti fitur, banner, atau produk yang tidak tampil saat menggunakan custom template, serta kebutuhan tenant yang tidak memerlukan kustomisasi lebih lanjut untuk aplikasi mobile customer atau agen.

Mode Custom Template

Detail Fitur:

• Sistem On/Off Custom Template

• Tombol on/off di halaman dashboard custom template.

• Fungsi untuk mengaktifkan atau menonaktifkan fitur custom template sesuai kebutuhan.

• Mode Default

  • Secara default, status mode custom template diatur nonaktif.

  • Dapat menggunakan template standar tanpa mempengaruhi fungsi aplikasi.

• Otomatisasi Fungsi Berdasarkan Status

  • Ketika status custom template inactive, seluruh fungsi tombol seperti Reset, Simpan, dan Terapkan ke Aplikasi akan dinonaktifkan di dashboard.

  • Sebaliknya, jika status active, seluruh fungsi tersebut akan aktif dan dapat digunakan secara normal.

1. Sinkronisasi Custom Template

   Fitur Sinkronisasi bertujuan untuk memastikan data atau perubahan pada script dan diperbarui secara konsisten di seluruh sistem. Penggunaan sinkronisasi tertentu masih berlaku pada Banner, Prabayar, dan Pascabayar.

   1. Tombol Sinkronkan untuk mempermudah proses sinkronisasi dengan melakukan pembaruan sekaligus pada semua komponen

   2. Sinkronisasi secara terpisah untuk setiap komponen berdasarkan COMPID tertentu dalam script.

   Langkah-Langkah Sinkronkan

a. Sinkron sekaligus semua komponen

• Menu Custom Aplikasi > Custom Template

• Anda akan diarahkan ke halaman editor template

• Klik Button Sinkronkan di kanan atas Custom Template

  • Pastikan komponen Banner, Prabayar, dan Pascabayar telah disiapkan dengan benar untuk dilakukan proses sinkronisasi.

  • Note : proses sinkronisasi dengan klik button tersebut akan melakukan pembaruan sekaligus pada semua komponen

Sinkronkan Komponen Tertentu

b. Sinkron dengan komponen tertentu

• Menu Custom Aplikasi > Custom Template

• Anda akan diarahkan ke halaman editor template

• Pilih file index.html

• Fokus pada COMPID yang terdapat pada script index.html

• Klik ikon Gryphon pada komponen ID untuk melakukan sinkronisasi pada satu komponen yang Anda pilih. Perubahan akan diterapkan mulai dari elemen awal tag <div>...</div>

  • Slide Benner : <!-- Slider Banner, COMPID: BNNR1 -->

  • Prabayar : <!-- PRABAYAR, COMPID: PRDKPRBYR1 -->

  • Pascabayar : <!-- PASCABAYAR, COMPID: PRDKPSCBYR1 -->

1. Download/Export File Custom Template

   Fitur download script per file ini bertujuan untuk mempermudah tenant dalam melakukan perubahan pada script, khususnya jika mereka menggunakan perangkat selain Laptop atau PC.

Download File Script

Langkah-Langkah Download File

1. Pilih Menu Custom Aplikasi pada Dashboard > Custom Template.

2. Pilih File yang akan di download/export

   • File index.html

   • File style.css

   • File js.js

3. Klik icon download pada kanan bawah custom template

   • Pastikan memilih file yang akan didownload terlebih dahulu sebelum klik icon tersebut

4. Setelah klik icon tersebut, file akan terunduh otomatis pada device Anda sesuai file yang dipilih