Fitur-Fitur ERPNext: Kustomisasi Printing
- Author: Muhammad Rafif Prahastya
- Editor: Ana Widiyawati
- March 15, 2024
Melanjutkan dari artikel sebelumnya tentang Printing dalam ERPNext. Untuk kali ini saya akan menjerumus lebih dalam tentang kustomisasi di printing. Karena ERPNext tidak berhenti pada fungsionalitas saja. ERPNext juga memungkinkan personalisasi dan branding, Anda dapat memasukkan identitas merek anda ke dalam setiap dokumen. Seperti menambahkan logo, letterhead, footing, dan mengganti font.
1.Custom HTML
Melanjutkan dari artikel sebelumnya, akan menjerumus lebih dalam terhadap HTML Custom dan memberikan contoh kode HTML.
<h1>Selamat Datang di Contoh HTML</h1>
<p>Ini halaman contoh HTML.</p>
Ini adalah kode untuk seksi 1, bisa dilihat <h1> dapat digunakan untuk header karena output textnya berukuran besar, dan untuk <p> dapat digunakan untuk paragraph teks karena berukuran lebih kecil.
<p>Ini adalah sebuah paragraf.</p>
<strong>Ini teks tebal.</strong>
<em>Ini teks miring.</em>
<span style=”color: blue;”>Ini teks dengan warna biru.</span>
Dan ini adalah kode untuk seksi 2, di seksi ini kodenya digunakan untuk memberikan style pada teks, terlihat <strong> untuk membuatnya menjad bold, <em> untuk menjadi italic, <span style=”color: > untuk memberikan warna pada teks.
<br><img src=”https://media.discordapp.net/attachments/385818110235508738/1196142810261360660/IMG_2535.jpg?ex=65b68dcd&is=65a418cd&hm=a032be31826f51cb56f34b75fdce979a2473e25f9b35d7d16c8b399fb609c0ce&=&format=webp&width=550&height=200″>
Ini adalah kode untuk seksi 3, bisa dilihat kode <img src=> adalah untuk memperlihat gambar, untuk mengganti gambar dengan yang anda ingin dapat diganti linknya dengan gambar yang anda inginkan.
<br><a href=”https://www.google.com”>Ini adalah tautan ke contohlink yang dapat di klik</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ol>
Ini adalah kode untuk seksi 4, < a href=> adalah kode untuk membuat teks menjadi bisa di klik dan jika mengeklik teks tersebut akan di arah kan ke dalam link yang sudah diterterakan. Dan untuk kode <ul> adalah list pointer yang tidak berurut jadi berbentuk bulat,dan untuk kode <ol> adalah list pointer berurut jadi berbentuk angka, untuk menambah list dapat dengan menggunakan kode <li> untuk setiap barang/sesuatu yang ingin di list.
2. Menambah branding
Untuk menambahkan branding logo dan informasi-informasi tentang Perusahaan dapat diditambahkan dengan menggunakan Custom HTML, dengan kode <img> seperti contoh diatas.
<img src=”https://tobaconsulting.com/wp-content/uploads/2022/10/Toba-Red-And-Black-Logo.png”>
<br>Toba Consulting Services<br/>
Jl. Ruby No.29, RT.9/RW.13,
<br>Grogol Utara,
<br>Jakarta Selatan – 12210,
<br>DKI Jakarta<br/>
<br>Office : 021-53344009
<br>Mail : cs@tobaconsulting.com
Contoh kode HTML dari gambar diatas.
3. Letter Head dan Footer
Untuk menambah Letterhead dan footing dapat dilakukan dengan masuk kedalam menu “Letterhead” yang terdapat di home.
Kemudian dapat membuat letterhead baru dengan mengklik “add Letter Head”
Setelah itu dapat di isi Name nya sesuai yang diinginkan, anda juga dapat memilih untuk Letterheadnya dan footernya dalam gambar atau HTML.
Kemudian dapat di save.
Disini anda dapat mengupload gambar yang ingin digunakan dan mengisi HTML dengan yang anda ingin.
<style>
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.social-icons {
list-style: none;
padding: 0;
margin: 0;
}
. social-icons li {
display: inline-block;
margin-right: 10px;
}
. social-icons img {
width: 30px;
height: 30px;
}
</style>
<footer>
<h3>Contact Us</h3>
<p>Office : 021-53344009</p>
<p>Mail : cs@tobaconsulting.com</p>
<p>Feel free to reach out to us on social media:</p>
<ul class=”social-icons”> <li><a href=”https://www.facebook.com/TobaConsulting” target=”_blank”><img src=”https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg” alt=”Facebook”></a></li>
<li><a href=”https://wa.me/6282218181678″ target=”_blank”><img src=”https://www.freeiconspng.com/thumbs/logo-whatsapp-png/logo-whatsapp-png-transparent-background-8.png” alt=”Whatsapp”></a></li>
<li><a href=”https://www.youtube.com/@tobaconsulting-com” target=”_blank”><img src=”https://static-00.iconduck.com/assets.00/youtube-icon-512×512-nzpu9sn1.png” alt=”Youtube”></a></li>
<li><a href=”https://www.linkedin.com/company/tobacs/” target=”_blank”><img src=”https://cdn1.iconfinder.com/data/icons/logotypes/32/circle-linkedin-512.png” alt=”Linkedin”></a></li>
</ul>
</footer>
Diatas contoh kode untuk Footer.
Untuk memilih Letterhead terletak di disebalah kiri page printing. Maka akan terlihat seperti ini jika sudah dipilih.
4. Mengganti Font
Untuk mengganti font dapat dilakukan dengan masuk kedalam Print Setting, terletak pada tombol titik tiga dalam page Print.
Kemudian dipaling bawah page terdapat pilihan-pilihan font.
Dapat dipilih kemudian disave.
Disini saya memilih font “monospace”, terlihat fontnya sudah berubah dari font default ERPNext pada page Print.
5. Custom Font
Jika anda ingin menggunakan font custom yang tidak terdapat di print setting anda harus menggunakan Custom CSS pada setting print format dan menggunakan Custom HTML pada Print Format Builder. Anda dapat memilih font yang ingin digunakan lewat Google Fonts(https://fonts.google.com/). Cara mendapat kan kode CSS dan HTML untuk font yang ingin digunakan seperti gambar dibawah. Saya memilih mamakai font Rubik Burned sebagai contoh.
Setelah memilih font dapat klik tombol “Get Font”.
Setelah itu klik “Get Embed Code”.
Kemudian dapat di copy codenya.
Kemudian anda dapat mengcopy code yang ditampilkan oleh google font, dan masukkan kedalam ERPNext, masukkan code CSS kedalam Custom CSS di page Print Format, class .print-format mencakup semua print format jadi akan menggantikan font untuk seluruh teks pada print format tersebut, seperti contoh code di bawah dan Digambar, setelah itu dissave. Kemudian dapat masuk kedalam Print Format Builder dengan klik tombol “edit format”.
.print-format {
font-family: “Rubik Burned”, system-ui;
font-weight: 400;
font-style: normal;
}
Kemudian pada Print Format Builder anda dapat membuat Custom HTML dimana saja dan kemudian di dalam Custom HTML dapat di isi dengan code yang dari google font tersebut, Setelah itu dapat disave print formatnya dan kemudian masuk keprinting untuk check.
Dan hasilnya akan seperti ini dimana semua teksnya telah terganti fontnya.
