Merek portal web
Berlaku untuk:
SQL Server 2016 (13.x) Reporting Services dan Server Laporan Power BI yang lebih baru
Anda dapat mengubah tampilan portal web dengan mencapnya ke bisnis Anda. Ini dilakukan melalui paket merek. Paket merek dirancang sehingga Anda tidak memerlukan pengetahuan deep cascading stylesheet (CSS) untuk membuatnya.
Membuat paket merek
Paket merek untuk Reporting Services terdiri dari tiga item dan dimas sebagai file zip.
- colors.json
- metadata.xml
- logo.png (opsional)
File harus memiliki nama yang tercantum di atas. Kemas file-file ini ke dalam file zip. File zip dapat diberi nama sesuka Anda.
metadata.xml
File metadata.xml memungkinkan Anda mengatur nama paket merek, dan memiliki entri referensi untuk file colors.json dan logo.png Anda.
Untuk mengubah nama paket merek Anda, ubah atribut nama elemen SystemResourcePackage.
name="Multicolored example brand"
Anda dapat secara opsional menyertakan gambar logo dalam paket merek Anda. Item ini akan dicantumkan dalam elemen Isi.
Contoh tanpa file logo.
<Contents>
<Item key="colors" path="colors.json" />
</Contents>
Contoh dengan file logo.
<Contents>
<Item key="colors" path="colors.json" />
<Item key="logo" path="logo.png" />
</Contents>
colors.json
Ketika paket merek diunggah, server mengekstrak pasangan nama/nilai yang sesuai dari file colors.json dan menggabungkannya dengan lembar gaya MASTER LESS, brand.less. File LESS ini kemudian diproses dan file CSS yang dihasilkan disajikan kepada klien. Semua warna dalam lembar gaya mengikuti representasi heksadesimal enam karakter warna.
Lembar gaya LESS berisi blok yang mereferensikan beberapa variabel LESS yang telah ditentukan sebelumnya seperti berikut ini.
/* primary buttons */
.btn-primary {
color:@primaryButtonColor;
background-color:@primaryButtonBg;
}
Meskipun sintaks ini menyerupan CSS, nilai warna yang diawali dengan @symbol unik untuk LESS. Mereka adalah variabel yang nilainya ditetapkan oleh file json.
Misalnya, jika file colors.json memiliki nilai berikut.
"primary":"#009900",
"primaryContrast":"#ffffff"
Output yang diproses akan mencari variabel @primaryButtonBg LESS dan melihat bahwa ia memetakan ke properti json yang disebut primer, yang dalam contoh ini adalah #009900. Oleh karena itu akan menghasilkan CSS yang tepat.
.btn-primary {
color:#ffffff;
background-color:#009900;
}
Semua tombol utama akan dirender hijau gelap dengan teks putih.
File colors.json, untuk Reporting Services, memiliki dua kategori utama di mana item dikelompokkan.
- Antarmuka: menyertakan item yang khusus untuk portal web Reporting Services.
- Tema: menyertakan item yang khusus untuk laporan seluler yang Anda buat.
Bagian antarmuka dipecah menjadi pengelompokan berikut.
| Bagian | Deskripsi |
|---|---|
| Primer | Warna tombol dan hover. |
| Sekunder | Bilah judul, bilah pencarian, menu sebelah kiri (jika ditampilkan) dan warna teks untuk item tersebut |
| Primer Netral | Latar belakang area rumah dan laporan. |
| Sekunder Netral | Latar belakang opsi kotak teks dan folder, dan menu pengaturan. |
| Tersier Netral | Latar belakang pengaturan situs. |
| Pesan Bahaya/Peringatan/Keberhasilan | Warna untuk pesan tersebut. |
| KPI | Mengontrol warna untuk yang baik (1), netral (0), netral (-1) dan tidak ada. |
Pertama kali Anda terhubung ke server dengan Penerbit Laporan Seluler yang memiliki paket merek yang disebarkan, tema akan ditambahkan ke tema yang tersedia yang dapat Anda gunakan di menu kanan atas aplikasi.
Anda kemudian dapat menggunakan tema tersebut untuk setiap laporan seluler yang Anda buat, bahkan jika tema tersebut bukan untuk server yang sama dengan tema yang Anda sebarkan.
Menggunakan logo
Jika Anda menyertakan logo dengan paket merek Anda, logo tersebut akan muncul di portal web sebagai pengganti nama yang Anda tetapkan untuk portal web di menu Situs Pengaturan.
File yang Anda sertakan untuk logo harus menggunakan format file PNG. Dimensi file akan diskalakan setelah diunggah ke server. Ini harus menskalakan ke sekitar 290 px x 60 px.
Menerapkan paket merek ke portal web
Ikuti langkah-langkah ini untuk menambahkan, mengunduh, atau menghapus paket merek.
Pilih gigi di kanan atas.
Pilih Pengaturan Situs.
Pilih Branding.
Paket merek yang saat ini diinstal menampilkan nama paket yang telah diunggah, atau menampilkan Tidak Ada.
Unggah paket merek meminta Anda untuk memilih file zip dari folder lokal lalu menerapkan paket ke portal web. Anda melihat itu berlaku segera.
Anda juga dapat Mengunduh atau Menghapus paket. Menghapus paket akan segera mereset portal web ke merek default.
contoh metadata.xml
<?xml version="1.0" encoding="utf-8"?>
<SystemResourcePackage xmlns="http://schemas.microsoft.com/sqlserver/reporting/2016/01/systemresourcepackagemetadata"
type="UniversalBrand"
version="2.0.2"
name="Multicolored example brand"
>
<Contents>
<Item key="colors" path="colors.json" />
<Item key="logo" path="logo.png" />
</Contents>
</SystemResourcePackage>
contoh colors.json
{
"name":"Multicolored example brand",
"version":"1.0",
"interface":{
"primary":"#b31e1e",
"primaryAlt":"#ca0806",
"primaryAlt2":"#621013",
"primaryAlt3":"#e40000",
"primaryAlt4":"#e14e50",
"primaryContrast":"#fff",
"secondary":"#042200",
"secondaryAlt":"#0f4400",
"secondaryAlt2":"#155500",
"secondaryAlt3":"#217700",
"secondaryContrast":"#49e63c",
"neutralPrimary":"#d8edff",
"neutralPrimaryAlt":"#c9e6ff",
"neutralPrimaryAlt2":"#aedaff",
"neutralPrimaryAlt3":"#88c8ff",
"neutralPrimaryContrast":"#0a2b4c",
"neutralSecondary":"#e9d8eb",
"neutralSecondaryAlt":"#d9badc",
"neutralSecondaryAlt2":"#b06cb5",
"neutralSecondaryAlt3":"#a75bac",
"neutralSecondaryContrast":"#250a26",
"neutralTertiary":"#f79220",
"neutralTertiaryAlt":"#f8a54b",
"neutralTertiaryAlt2":"#facc9b",
"neutralTertiaryAlt3":"#fce3c7",
"neutralTertiaryContrast":"#391d00",
"danger":"#ff0000",
"success":"#00ff00",
"warning":"#ff8800",
"info":"#00ff",
"dangerContrast":"#fff",
"successContrast":"#fff",
"warningContrast":"#fff",
"infoContrast":"#fff",
"kpiGood":"#4fb443",
"kpiBad":"#de061a",
"kpiNeutral":"#d9b42c",
"kpiNone":"#333",
"kpiGoodContrast":"#fff",
"kpiBadContrast":"#fff",
"kpiNeutralContrast":"#fff",
"kpiNoneContrast":"#fff",
"itemTypeIconColor":"#ffffff",
"reportIconBackground":"#12239e",
"excelIconBackground":"#217346",
"folderIconBackground":"#4668c5",
"datasetIconBackground":"#c94f0f",
"otherIconBackground":"#000000",
"primaryButton": "#bb2124",
"primaryButtonHover": "#d31115",
"primaryButtonPressed": "#3d0000",
"link": "#d31115",
"linkHover": "#671215",
"linkVisited": "#3d0000",
"radioButtonCheckBox": "#bb2124",
"radioButtonCheckBoxHover": "#d31115"
},
"theme":{
"dataPoints":[
"#0072c6",
"#f68c1f",
"#269657",
"#dd5900",
"#5b3573",
"#22bdef",
"#b4009e",
"#008274",
"#fdc336",
"#ea3c00",
"#00188f",
"#9f9f9f"
],
"good":"#85ba00",
"bad":"#e90000",
"neutral":"#edb327",
"none":"#333",
"background":"#fff",
"foreground":"#222",
"mapBase":"#00aeef",
"panelBackground":"#f6f6f6",
"panelForeground":"#222",
"panelAccent":"#00aeef",
"tableAccent":"#00aeef",
"altBackground":"#f6f6f6",
"altForeground":"#000",
"altMapBase":"#f68c1f",
"altPanelBackground":"#235378",
"altPanelForeground":"#fff",
"altPanelAccent":"#fdc336",
"altTableAccent":"#fdc336"
}
}
Unduh Paket Branding Sampel
Unduh sampel dari situs GitHub Paket Branding Sampel ke folder lokal. Untuk informasi selengkapnya, lihat bagian Menerapkan paket merek ke portal web di artikel ini.
Konten terkait
Ada pertanyaan lagi? Coba tanyakan forum Reporting Services
Saran dan Komentar
Segera hadir: Sepanjang tahun 2024 kami akan menghentikan penggunaan GitHub Issues sebagai mekanisme umpan balik untuk konten dan menggantinya dengan sistem umpan balik baru. Untuk mengetahui informasi selengkapnya, lihat: https://aka.ms/ContentUserFeedback.
Kirim dan lihat umpan balik untuk