Back To Home

Name: Ngày 18: Rendering Parameters

🎯 Ngày 18: Rendering Parameters trong Sitecore

Rendering Parameters giúp bạn cấu hình component trực tiếp trong Experience Editor mà không phải chỉnh sửa datasource. Đây là cách để:

  • Bật/tắt tính năng (Show Title, Enable Slider…)

  • Chọn màu sắc, theme

  • Chọn layout

  • Cấu hình số lượng item hiển thị

  • Điều chỉnh behavior của component

👉 Rendering Parameter = "Cấu hình cho component"
👉 Không phải là content → không lưu trong datasource
👉 Lưu trong Layout Details của item

🧩 1. Rendering Parameters là gì?

Khi bạn đặt một rendering lên trang, bạn có thể cấu hình component thông qua nút:

Component → Edit Rendering Parameters

Rendering Parameters lưu lại trong:

 
Layout Field → <r ... par="param1=value1&param2=value2" />

👉 Đây là nơi chứa các thiết lập runtime cho component.

🧩 2. Tạo Rendering Parameters Template

Rendering Parameters cũng là Template, nhưng thuộc nhóm:

 
/sitecore/templates/System/Layout/Rendering Parameters

✔ Cách tạo:

  1. Chuột phải → Insert → Rendering Parameters

  2. Đặt tên: Banner Rendering Parameters

  3. Thêm các field:

    • Checkbox: ShowTitle

    • Droplist: Theme

    • Integer: ItemCount

Ví dụ:

 
/sitecore/templates/Feature/Banner/Banner Rendering Parameters

🧩 3. Gán Rendering Parameters vào Rendering

Đi đến:

 
/sitecore/layout/Renderings/Feature/Banner/Banner Rendering

Chọn:

  • Parameters Template = Banner Rendering Parameters

Giờ component của bạn có thể sử dụng các field này.

🧩 4. Lấy Rendering Parameters trong Controller / View

✔ Trong Controller Rendering

 
var parameters = RenderingContext.Current.Rendering.Parameters; bool showTitle = parameters["ShowTitle"] == "1"; string theme = parameters["Theme"]; int itemCount = int.TryParse(parameters["ItemCount"], out var count) ? count : 0;

✔ Trong View Rendering (.cshtml)

 
var renderingParams = Html.Sitecore().CurrentRendering.Parameters; var theme = renderingParams["Theme"];

🧩 5. Ví dụ thực tế: Banner component

🎨 Parameters Template

Field Type Description
ShowTitle Checkbox Bật/tắt title
Theme Droplist dark/light
Height Droplist small, medium, large

🧭 Component logic trong .cshtml

 
var param = Html.Sitecore().CurrentRendering.Parameters; var showTitle = param["ShowTitle"] == "1"; var theme = param["Theme"]; var height = param["Height"];

🎯 View

 
<div class="banner @theme @height"> @if(showTitle) { <h2>@Model.Item["Title"]</h2> } </div>

→ Editor có thể bật/tắt title, đổi theme, đổi kích thước banner không cần sửa content.

🧪 6. Khi nào dùng Rendering Parameters?

Trường hợp Giải pháp
Thay đổi behavior mà không ảnh hưởng content ✔ Rendering Parameters
Tùy chỉnh layout: số cột, item count, theme ✔ Rendering Parameters
Chứa content: title, image, description ❌ Không dùng → nên dùng Datasource
Thay đổi UI nhỏ ✔ Rendering Parameters
Cấu hình logic component ✔ Rendering Parameters

🧠 7. Best Practices

✔ 1. Không đặt content vào Rendering Parameters

Rendering Parameters không version → không phù hợp cho nội dung.

✔ 2. Đặt Rendering Parameters vào Feature Layer theo Helix

 
Feature/Banner/Parameters/BannerRenderingParameters

✔ 3. Luôn đặt default value trong Standard Values

Giúp tránh lỗi nếu editor không cấu hình.

✔ 4. Sử dụng strongly typed Rendering Parameters

Nếu muốn code sạch hơn:

 
var param = RenderingContext.Current.Rendering.GetRenderingParameters<BannerParams>();

👍 Rõ ràng
👍 Không phải đọc string thủ công

📌 8. Tóm tắt

Mục Nội dung
Rendering Parameters Config cho component, không phải content
Lưu ở đâu Layout Details → trường par
Tạo bằng Rendering Parameters Template
Dùng khi Component cần config UI/logic
Không dùng khi Dữ liệu (content) thay đổi theo item

Donald Trump

Để trở thành người chiến thắng, bạn cần biết khi nào là đủ. Đôi khi trong cuộc sống, bạn phải từ bỏ cuộc chiến và chuyển sang mục tiêu mới mang lại hiệu quả hơn

Related Post