Altering rendering behavior using component properties_Sitecore Cookbook for Developers-QQ阅读男生都市网

上QQ阅读APP看书，第一时间看更新

Altering rendering behavior using component properties

Sitecore provides you with different component properties such as data sources, rendering parameters, and so on. By default, the context item becomes data source for the component. By passing data source, we can change the behavior.

In this recipe, we will create a rendering to list products on the products' landing page. We will reuse the rendering on the home page to show a limited number of products with a different look and feel.

Getting ready

In the first chapter, we created the Product Category and Product templates having Common Fields as a base template, which contains fields such as the title, body, and image. Make sure that you created multiple product categories and products inside it.

How to do it…

First, we will create a model to list Sitecore items:

In the SitecoreCookbook project, create an ItemList model in the Models folder with properties as follows:

public class ItemList : RenderingModel
{
  public List<Item> Items { get; set; }
  public string Title { get; set; }
  public string CssClass { get; set; }
}

Override the Initialize() method of RenderingModel to fetch data source and different rendering parameters—CssClass and RecordsCount—using them, we will change the styling of the component and limit the showing of the number of children accordingly:

public override void Initialize(Rendering rendering)
{
  int records = 0;
  int.TryParse(rendering.Parameters["RecordsCount"], out records);
  CssClass = rendering.Parameters["CssClass"];

  string dataSource = rendering.DataSource;
  Item sourceItem = GetDataSource(dataSource);
  Title = sourceItem["Title"];

  Items = sourceItem.GetChildren().ToList();
  if (records > 0)
    Items = Items.Take(records).ToList();
}

Create the GetDataSource() method to validate and assign data source provided to render:

private Item GetDataSource(string dataSource)
{
  Item sourceItem = null;
  if (dataSource != null) {
    Item item = Context.Database.GetItem(dataSource);
    if (item != null)
      sourceItem = item;
  }

  if (sourceItem == null)
    sourceItem = Context.Item;
  return sourceItem;
}

Now let's create an ItemList.cshtml view to list the children's details:

@model SitecoreCookbook.Models.ItemList
<div class="@Model.CssClass">
  <h4>@Model.Title</h4>
  @foreach (var row in Model.Items)
  {
    <div class="row show-grid">
      <div class="photo">
        @Html.Sitecore().Field("Image", row, new { mw=65, mh=65 })
      </div>
      <div class="content">
        <h6>
          <a href="@Sitecore.Links.LinkManager.GetItemUrl(row)">
            @Html.Sitecore().Field("Title", row)
          </a> </h6>
        <p>@Html.Sitecore().Field("Body", row)</p>
      </div>
    </div>
  } </div>

Now, register the view—Simple List and map the above created ItemList model in it. Add the view, rendering it on standard values of the Products Category template.
Preview a product category page, for example, /Home/Products/Phones. You will see that all the products under the Phones category will be displayed.
Now, we will add this view rendering on the home page to show a limited number of products.
Add the view rendering to standard values of the Site Root template and preview the page. You will find that it shows a list of all the landing pages; this is because the context item is the default data source for any rendering.
Now, select the component from the Experience Editor, click on More, and select the Edit component properties menu to open the component properties dialog, as shown in the following screenshot. You can also perform the same from Device Editor from the Content Editor.
In the component properties dialog, assign Data Source and add Additional Parameters, as shown in the following image:

Note

The key of additional parameters supports only alphanumeric characters.
Now, preview the home page and check; you will find that only the first three products are listed instead of all the landing pages.

How it works…

You can take advantage of the reusability of components if you design it properly with additional parameters and data source. Here, apart from limiting the number of records to be shown, we also provided functionality to change the class of a stylesheet so that the rendering can have a different look and feel in different places that it gets used. You can pass any number of parameters to the components in this way.