Custom Layout Widgets - Is the documentation correct?

Posted by Community Admin on 03-Aug-2018 10:56

Custom Layout Widgets - Is the documentation correct?

All Replies

Posted by Community Admin on 15-Aug-2011 00:00

Hi,

I am trying to create a custom widget layout to specify a pod, i have followed the example below but i am not sure it is complete (it also has an error where this section, the div is not closed off at the end)

<div runat="server" class="sf_colsIn sf_1col_1in_100 myCustomCSSClass"


Documentation Link
www.sitefinity.com/.../custom-layout-widgets.aspx

Attached is what i have and what i am getting:

Template trying to implement (i am not sure if i need any of sf_cols in guff)

<%@ Control Language="C#" %>
<div runat="server" class="pod">
    <div runat="server" class="pod-inner">
    </div>
</div>


No code class as the documentations says nothing about that (i have seen from other bits and pieces on previous versions that a class deriving from LayoutControl is required, but didnt implement it in case it is obsolete in 4.2???) 

Anyway, the thing installs but when dragged i recieve the message unable to load type.

Insight please.

Rob

Posted by Community Admin on 15-Aug-2011 00:00

Hmmm Structure needs the layout to be like in the document you linked to, I'd start there

<div runat="server" class="sf_cols">
    <div runat="server" class="sf_colsOut sf_1col_1_100">
        <div runat="server" class="sf_colsIn sf_1col_1in_100 myCustomCSSClass"
  
        </div>
    </div>
</div>

So you can add classes to it anywhere in that tree...just don't remove the standard styles

Posted by Community Admin on 15-Aug-2011 00:00

Hi Steve,

Thanks for the response.  I already tried that, the error says to me i am missing a class but i dont want to go around implementing things if they are not needed or documented.

To be fair to Sitefinity i am trying to hand somewhere to have a consitent html markup so it doesnt have to be produced by an editor which is not 100% what this is for but If i have to have all that unrelated div soup in their then i may not bother with it as honestly that is just nasty and not needed, really the guys should look at how something like expression engine does it with just some tag hooks that define the editable content, would be must cleaner in my opinion.

Still having the issue mind so some explanation would be handy.

Rob

Posted by Community Admin on 15-Aug-2011 00:00

Here's my working layout code

<%@ Control Language="C#" %>
 
<div runat="server" class="sf_cols infopod">
    <div runat="server" class="sf_colsOut sf_1cols_1_100 infopod_outer">
        <div runat="server" class="sf_colsIn sf_1cols_1in_100 infopod_inner">
 
        </div>
    </div>
</div>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web.UI;
using Telerik.Sitefinity.Web.UI;
 
namespace OCFP.Controls.Layouts
    public class InfoPod : LayoutControl
        public override string Layout
            get
                /*return this.CustomTempalate;*/
                var layout = this.ViewState["Layout"] as string;
                if (string.IsNullOrEmpty(layout))
                    layout = this.CustomTempalate;
                
                return layout;
            
        
 
        public override string AssemblyInfo
            get
                return GetType().ToString();
            
            set
                base.AssemblyInfo = value;
            
        
 
        public string CustomTempalate = "~/OCFP/OCFP.Layouts.Views.InfoPod.ascx";
    
 


...and here's the registration for it
<add enabled="True" type="OCFP.Controls.Layouts.InfoPod" title="InfoPod" description="Purple Pod" cssClass="InfoPodIcon" layoutTemplate="~/OCFP/OCFP.Layouts.Views.InfoPod.ascx" visibilityMode="None" name="InfoPod" />


Layouts are such a powerful way to add defined content areas...one of the best things in SF4 IMO

Posted by Community Admin on 15-Aug-2011 00:00

Hi Steve,

thanks for that, i will take a look, but the documentation doesnt state this or did i miss that?????

I agree in premise this is a powerful feature, but you shoudnt have to put markup in that is not required as it simply bloats it all out and serves no purpose.

Posted by Community Admin on 15-Aug-2011 00:00

You SHOULDN'T, but it is required in order for the base CSS to know that this is a layout control,

class="sf_cols"


That has one long 100% column
class="sf_colsOut sf_1col_1_100"

The outer\inner divs are to help support padding and sizing issues

So yeah, 3 divs to hold some text is a bit heaver than needed, but the hours and HOURS saved in layouts for ME is well worth the price of admission :)

I use these things all over the place, even if most are just 100% versions.  It saves my users having to remember CSS class names to style divs

Posted by Community Admin on 15-Aug-2011 00:00

We are in agreement then :)

I will implement it, and the codebehind i guess is what i am missing.

So for telerik:

1) update the documentation please, or link to the place where you have to put the code behind
2) give the man some points :)

Rob

Posted by Community Admin on 18-Aug-2011 00:00

Hello,

This is already on our TODO list. There will be updates in documentation soon and we will announce them. Steve, you have received our token of appreciation.

Regards,
Radoslav Georgiev
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 14-Sep-2011 00:00

Hi

Can some one help to learn How to add custom properties to designer(Edit Layout Element) of Custom Layout Widgets. What I want to achive is add a Height property to my Layout  widget designer and implement a teaser break if content exceeds the specified hieght.

Posted by Community Admin on 14-Sep-2011 00:00

There's no way to add custom properties to a custom layout (yet)...something I REALLY want though.

However with jQuery you should be able to easily caculate the height of the div, and if it exceeds X height, then do whatever (hide the rest, remove text, whatever)

Perhaps just hide the container div on page load then show it after your above code runs

The only problem with this solution is (obviously) the height is not configurable without some serious tweaking

Posted by Community Admin on 14-Sep-2011 00:00

Thanks for reply, Steve. I wanted to have a custom property to have a configurable height.

Posted by Community Admin on 14-Sep-2011 00:00

You could make a custom widget called like "Height Controller" in which you set a height.  That height gets rendered out to the page, and when the jQuery function runs to clean it up it just reads that to see what to do?

Posted by Community Admin on 20-Sep-2011 00:00

Can we get the custom layout properties feature request added to PITS? It would get my vote.

This thread is closed