OUTSYSTEMS TIPS AND TRICKS FOR COMPLEX UI INTEGRATIONS
OutSystems adalah platform pengembangan kode rendah atau low code yang menyediakan berbagai tools bagi programmer untuk membangun aplikasi baik website maupun mobile yang berkualitas dengan waktu yang cenderung singkat.
Namun, seringkali Anda mungkin mengahadapi kondisi dimana Anda tidak dapat menyelesaikan proyek dengan widgets yang telah disediakan oleh platform. Hal ini mungkin terjadi karena kurangnya pemahaman akan platform ini atau karena kekompleksan proyek yang Anda miliki sehingga widgets yang disediakan tidak sesuai dengan kebutuhan Anda.
Tenang, semua ini dapat diatasi dengan beberapa cara:
- Ubah menjadi elemen HTML
Jika Anda pernah melihat kode yang dihasilkan oleh platform OutSystems, Anda akan melihat bahwa sebuah wadah hanyalah sebuah elemen HTML “div”. “div” digunakan untuk memisahkan konten dalam HTML.
Tahukah Anda, bagaimanapun, bahwa sebuah wadah dapat diubah menjadi elemen HTML lain dengan menggunakan properti yang diperluas “OSTagName” dan mengaturnya ke jenis elemen yang diinginkan? Ini dapat digunakan misalnya untuk membuat daftar Unordered dengan menggunakan Wadah luar dengan OSTagName = “ul” dan wadah dalam dengan OSTagName = “li”. Bahkan, jika Anda membuka klon dari WebPatterns eSpace dan melihat komponen “Bullets”, itulah cara kerjanya.
- Gunakan action dari JavaScript
Salah satu cara yang paling berguna untuk memodifikasi OutSystems adalah dengan menerapkan menambahkan JavaScript(libraries and actions). Jika Anda membuka sebagian besar komponen widget berbeda yang tersedia di OutSystems Forge (Custom Masks misalnya), Anda akan melihat bahwa itu hanyalah pustaka JavaScript yang dibungkus dengan cara yang membuatnya mudah digunakan di OS.
Terkadang, Anda berakhir dengan fungsi JavaScript yang ingin Anda akhiri dengan memanggil Tindakan Layar OS standar. Sayangnya, saat ini tidak ada cara bawaan untuk melakukan ini.
Jadi di sinilah triknya. Anda pertama-tama membuat widget Tautan dengan gaya “display: none”. Atur tautan itu ke tindakan layar yang diinginkan dan metodenya ke “Ajax Submit”. Kemudian dari JavaScript Anda dapatkan elemen dengan Id-nya dan panggil .click () di atasnya.
Untuk menjalankan JavaScript dari OutSystems, Anda cukup menggunakan aksi “RunJavaScript” dari komponen HTTPRequestHandler.
- Transfer informasi dari variable JavaScript ke OutSystems dan Vice Versa
Cara lain untuk menggunakan fungsi JavaScript dan OutSystems built-in action bersama-sama adalah untuk mentransfer data antara variabel OutSystems dan variabel JavaScript. Hal ini dicapai melalui penggunaan elemen tersembunyi lainnya!
Kali ini kita akan menggunakan widget input. Seperti pada contoh sebelumnya, kami akan memberi input gaya “display: none”. Selanjutnya atur widget input sama dengan variabel OS. Untuk memindahkan nilai dari JavaScript ke OutSystems, di JavaScript Anda, atur nilai widget Input ke variabel JavaScript Anda. Kemudian pada akhir fungsi gunakan metode di atas untuk memicu tindakan OutSystems dari JavaScript dan menggunakan nilai dalam tindakan layar Anda dengan merujuk variabel OS.
Untuk memindahkan nilai dari OutSystems ke JavaScript, memicu aksi layar yang mengatur variabel OS ke nilai apa pun yang Anda transfer dan kemudian Ajax Refresh widget input. Anda kemudian dapat mengakses ini dari JS dengan memasukkan referensi ke nilai input itu dalam kode Anda.
misalkan x = document.getElementById (“” “+ HiddenInput.Id +” “”) .value;
- Gunakan UI untuk menyelesaikan masalah
Sebagian besar masalah UI lainnya yang Anda temui adalah menulis HTML / JavaScript atau CSS dalam ekspresi. Ekspresi yang memiliki “Escape content” harus diatur menjadi NO atau dimatikan.Setelah Anda mematikan “Escape content,” ekspresi Anda termasuk dalam HTML. Hal memungkinkan Anda untuk melakukan apa pun yang dapat Anda lakukan dengan HTML, termasuk bagian JavaScript. Seperti terlihat pada contoh terakhir, Anda dapat membuat bagian JavaScript yang mereferensikan atribut id komponen tertentu. Anda dapat memasukkan seluruh halaman salinan yang memiliki format HTML dasar, yang dapat sangat berguna untuk Syarat dan Ketentuan atau Kebijakan Privasi.
Dengan berbagai trik ini, kita dapat mencapai banyak hal di OutSystems yang mungkin tampak tidak mungkin pada awalnya. Dari perbaikan sederhana pada perilaku kecil, hingga menerapkan perpustakaan front-end yang sepenuhnya berbeda dari Silk UI.
Jadi, jika Anda menemukan sesuatu di OutSystems yang Anda pikir tidak bisa dilakukan oleh platform, cobalah untuk berpikir di kreatif. Ketika Anda menjadi kreatif, berbagai solusi dapat muncul dengan sendirinya.
Sumber: https://journal.highlandsolutions.com/outsystems-tricks-tips-for-complex-ui-integrations-fbb4c6cb6ee1
