DaveGoosem
1/25/2014 - 8:27 AM

Example FAQ Sitecore Sublayout built for Sitecore Page Editor using Edit Frame and repeater

Example FAQ Sitecore Sublayout built for Sitecore Page Editor using Edit Frame and repeater

<%@ Register TagPrefix="sc" Namespace="Sitecore.Web.UI.WebControls" Assembly="Sitecore.Kernel" %>

<div class="accordions">
    <asp:Repeater ID="rptData" runat="server" onitemdatabound="RptDataItemDataBound">        
        <ItemTemplate>
            <sc:EditFrame  runat="server" ID="efActions" Buttons="/sitecore/content/Applications/WebEdit/Edit Frame Buttons/FAQActions">            
                <div class="accordion-item">
                                
                    <h3 class="expandcollapse is-collapsed">
			            <sc:FieldRenderer ID="frFaqQuestion" runat="server" FieldName="FAQ Question" DisableWebEditing="False"/>			        
                        <a runat="server" id="showHideLink" href="#ec-eg-" data-ec-expand="Show more" data-ec-collapse="Hide" class="visuallyhidden focusable">Hide</a>
			            <span class="ec"></span>
		            </h3>
		        
		            <div runat="server" id="answerContent" class="ec-content js-hidden">
			            <sc:FieldRenderer ID="frFaqAnswer" runat="server" FieldName="FAQ Answer" DisableWebEditing="False"/>
		            </div>
                                
                </div>
            </sc:EditFrame>
           
        </ItemTemplate>
        
        <!-- WE ONLY WANT THIS ADDITIONAL LINK TO BE VISIBLE WHEN THE USER IS IN PAGE EDITOR MODE. IT IS SURROUNDED IN ANOTHER EDIT FRAME TO ALLOW US TO ADD A NEW FAQ -->
        
        <FooterTemplate>
            <div runat="server" id="liAddFaq" class="dd-editframe-wrapper" visible="<%# IsPageEditorEditing %>">
                <sc:EditFrame  runat="server" ID="efAddFaq" Buttons="/sitecore/content/Applications/WebEdit/Edit Frame Buttons/FAQAdd">
                        <div class="dd-editframe">
                            Add an FAQ
                        </div>
                </sc:EditFrame>
            </div>
        </FooterTemplate>
    </asp:Repeater>   
</div>
namespace <insert namespace here>
{
  public partial class FAQListing : SublayoutBaseExtended //this includes to get DataSourceItem or set to default item if none specified.
    {
        private Item[] DataItems { get; set; }
        private string DataSourceItemPath { get; set; }

 
        public virtual Item GetDataSourceItem()
        {
            // update property for populate data
            if (DataSourceItem != null)
            {
                DataItems = DataSourceItem.Children.ToArray();
                DataSourceItemPath = DataSourceItem.Paths.Path;
            }
            
            return DataSourceItem;
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            Populate();
        }

        // can be override when required
        public virtual void Populate()
        {
            // Get folder item
            Item sourceItem = GetDataSourceItem();

            if (sourceItem != null)
            {
                // bind items
                rptData.DataSource = sourceItem.Children;
                rptData.DataBind();
            }            
        }        

        protected void RptDataItemDataBound(object sender, RepeaterItemEventArgs e)
        {
          //THIS USES AN EXTENSION CLASS SPECIFIC TO REPEATERS BUT YOU SHOULD BE ABLE TO GET THE GIST OF WHAT THAT EXTENSION DOES STILL
            if (e.IsListingItem())
            {
                Item item = e.GetSitecoreItem();
                if (item != null)
                {
                    //get <a> element
                    var a = e.FindControl<HtmlAnchor>("showHideLink");
                    
                    var answerDiv = e.FindControl<HtmlGenericControl>("answerContent");

                    a.HRef = "#" + answerDiv.ClientID;
                  
                    // apply path for datasource
                    e.FindControl<EditFrame>("efActions").DataSource = item.Paths.Path;
                   
                    e.FindAndSetFieldRenderer("frFaqQuestion", item);
                    e.FindAndSetFieldRenderer("frFaqAnswer", item);                    
                }
            }
            else if (e.Item.ItemType == ListItemType.Footer)
            {
                e.FindControl<EditFrame>("efAddFaq").DataSource = DataSourceItemPath;
            }
        }
        
    } 
  
}