2

I have a blog subsite and have created a custom page layout where i would like to add the Categories and Archives web parts that comes with the OOTB default.aspx page.

I can add the Archives webpart its available under Blog categories (via Insert Webpart option) but how do i add the Categories web part. I can also see that the links in the Categories are redirected to Category.aspx page with URL /category.aspx?CategoryId=3

How can i recreate this?

Reference Image: enter image description here

1 Answer 1

1

I dig into the existing Category Web Part code and found that XsltListViewWebPart was used to create that. So you can create it using XsltListViewWebPart

<WebPartPages:XsltListViewWebPart runat="server" ViewFlag="" ViewSelectorFetchAsync="False" InplaceSearchEnabled="True" ServerRender="False" ClientRender="True" InitialAsyncDataFetch="False" WebId="00000000-0000-0000-0000-000000000000" IsClientRender="False" GhostedXslLink="blog.xsl" NoDefaultStyle="" ViewGuid="{001EB8C0-940B-4CFD-91CC-0E5B969F8A0F}" EnableOriginalValue="False" ViewContentTypeId="" ListUrl="" ListDisplayName="" ListName="{3A0A4709-9296-4A81-AF0D-23F20367C2BC}" ListId="3a0a4709-9296-4a81-af0d-23f20367c2bc" PageSize="-1" UseSQLDataSourcePaging="True" DataSourceID="" ShowWithSampleData="False" AsyncRefresh="False" ManualRefresh="False" AutoRefresh="False" AutoRefreshInterval="60" Title="Categories" FrameType="None" SuppressWebPartChrome="False" Description="Use the Categories list to define the categories available for posts." IsIncluded="True" ZoneID="BlogNavigator" PartOrder="2" FrameState="Normal" AllowRemove="True" AllowZoneChange="True" AllowMinimize="True" AllowConnect="True" AllowEdit="True" AllowHide="True" IsVisible="True" TitleUrl="/myblog/Lists/Categories" DetailLink="/myblog/Lists/Categories" HelpLink="" HelpMode="Modeless" Dir="Default" PartImageSmall="" MissingAssembly="Cannot import this Web Part." PartImageLarge="" IsIncludedFilter="" ExportControlledProperties="False" ConnectionID="00000000-0000-0000-0000-000000000000" ID="g_001eb8c0_940b_4cfd_91cc_0e5b969f8a0f" ChromeType="None" __MarkupType="vsattributemarkup" __WebPartId="{001EB8C0-940B-4CFD-91CC-0E5B969F8A0F}" __AllowXSLTEditing="true" __designer:CustomXsl="Fldtypes_mswhTitle.xsl;fldtypes_Ratings.xsl" WebPart="true" Height="" Width="">
   <ParameterBindings>
      <ParameterBinding Name="dvt_sortdir" Location="Postback;Connection"/>
      <ParameterBinding Name="dvt_sortfield" Location="Postback;Connection"/>
      <ParameterBinding Name="dvt_startposition" Location="Postback" DefaultValue=""/>
      <ParameterBinding Name="dvt_firstrow" Location="Postback;Connection"/>
      <ParameterBinding Name="OpenMenuKeyAccessible" Location="Resource(wss,OpenMenuKeyAccessible)" />
      <ParameterBinding Name="open_menu" Location="Resource(wss,open_menu)" />
      <ParameterBinding Name="select_deselect_all" Location="Resource(wss,select_deselect_all)" />
      <ParameterBinding Name="idPresEnabled" Location="Resource(wss,idPresEnabled)" />
      <ParameterBinding Name="NoAnnouncements" Location="Resource(wss,noXinviewofY_LIST)" />
      <ParameterBinding Name="NoAnnouncementsHowTo" Location="Resource(core,noXinviewofY_DEFAULT)" />
      <ParameterBinding Name="AddNewAnnouncement" Location="Resource(wss,addnewitem)" />
      <ParameterBinding Name="MoreAnnouncements" Location="Resource(wss,moreItemsParen)" />
   </ParameterBindings>
   <DataFields></DataFields>
   <XmlDefinition>
      <View Name="{001EB8C0-940B-4CFD-91CC-0E5B969F8A0F}" Type="HTML" Hidden="TRUE" DisplayName="" Url="/myblog/default.aspx" Level="1" BaseViewID="0" ContentTypeID="0x" >
         <Query>
            <OrderBy>
               <FieldRef Name="Title" Ascending="TRUE"/>
            </OrderBy>
         </Query>
         <ViewFields>
            <FieldRef Name="Title"/>
         </ViewFields>
         <RowLimit Paged="TRUE">30</RowLimit>
         <JSLink>sp.ui.blogs.js</JSLink>
         <XslLink>blog.xsl</XslLink>
         <Toolbar Type="None"/>
      </View>
   </XmlDefinition>
</WebPartPages:XsltListViewWebPart>

Another solution: You can modify one of your view using CSR and the add this view as web part.

enter image description here

I have modified My Categories View using CSR to get your desired link(/category.aspx?CategoryId=3).

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

  function getBaseHtml(ctx) {
    return SPClientTemplates["_defaultTemplates"].Fields.default.all.all[ctx.CurrentFieldSchema.FieldType][ctx.BaseViewID](ctx);
  }

  function init() {

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({

      // OnPreRender: function(ctx) { },

      Templates: {

      //     View: function(ctx) { return ""; },
      //     Header: function(ctx) { return ""; },
      //     Body: function(ctx) { return ""; },
      //     Group: function(ctx) { return ""; },
      //     Item: function(ctx) { return ""; },
           Fields: {
               "Title": {
                   View: function(ctx) { 
                     var categoryLink = "/myblog/Lists/Categories/Category.aspx?CategoryId=" + ctx.CurrentItem.ID;
                     var titleWithLink = String.format("<a href='{0}' target='_blank' id='blgcat3' class='ms-core-listMenu-item ms-blog-quickLinksEntry'>{1}</a>",categoryLink,ctx.CurrentItem.Title);
                     return titleWithLink; 
                   },
      //             EditForm: function(ctx) { return ""; },
      //             DisplayForm: function(ctx) { return ""; },
      //             NewForm: function(ctx) { return ""; }
              }
           },
      //     Footer: function(ctx) { return ""; }

      },

      // OnPostRender: function(ctx) { },

      ListTemplateType: 303

    });
  }

  RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens("~siteCollection/Style Library/categoryWebPartView.js"), init);
  init();

});

After applying this JsLink in my view I am getting following output

enter image description here

3
  • 1
    I am well aware of adding categories webpart, please read the second part of the question. I require the links point to Categories.aspx page with CategoryId as query id. Nov 1, 2015 at 16:45
  • let me check it Nov 1, 2015 at 17:36
  • see my update now Nov 2, 2015 at 4:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.