API Questions on Kentico API.
Version 6.x > API > Creating Web Parts View modes: 
User avatar
Member
Member
ekeys-access - 7/14/2012 7:19:17 PM
   
Creating Web Parts
I am new to Kentico and am trying to write a custom web part for a jquery slide show plugin. I am having trouble getting it to work. If I post my code here will someone please let me know what I am doing incorrectly? Thank you.

This is the plugin I am using: Flexslider
The main script file is being registered correctly, but the init script that is supposed to be built off of the user's selection is not. Also, the transformation is not pulling the attached files.

My ascx file:

<%@ Register src="~/CMSWebParts/Viewers/Documents/cmsrepeater.ascx" tagname="cmsrepeater" tagprefix="uc1" %>

<uc1:cmsrepeater OrderBy="NodeOrder" ID="cmsrepeaterFlexslider" TransformationName="CMS.File.Flexslider" ClassNames="CMS.File" runat="server" EnableViewState="false" />


My ascx.cs file:

public partial class CMSWebParts_Access_Flexslider: CMSAbstractWebPart
{
#region "Public Properties"

/// <summary>
/// Gets or sets the value of IncludejQuery
/// </summary>
///
public bool IncludejQuery
{
get
{
return ValidationHelper.GetBoolean(this.GetValue("IncludejQuery"), false);
}
set
{
this.SetValue("IncludejQuery", value);
}
}

///<summary>
///Gets or sets the slide animation
///</summary>
///
public string Animation
{
get
{
return ValidationHelper.GetString(this.GetValue("Animation"), "");
}
set
{
this.SetValue("Animation", value);
}
}

///<summary>
///Gets or sets the path to the images
///</summary>
///
public string Path
{
get
{
return ValidationHelper.GetString(this.GetValue("Path"), "");
}
set
{
this.SetValue("Path", value);
}
}

///<summary>
///Gets or sets the slide control navigation
///</summary>
///
public string ControlNav
{
get
{
return ValidationHelper.GetString(this.GetValue("ControlNav"), "");
}
set
{
this.SetValue("ControlNav", value);
}
}

/// <summary>
/// Slide show speed
/// </summary>
///
public int SlideSpeed
{
get
{
return ValidationHelper.GetInteger(this.GetValue("SlideSpeed"), 7000);
}
set
{
this.SetValue("SlideSpeed", value);
}
}

/// <summary>
/// Slide show animation speed
/// </summary>
///
public int AnimationSpeed
{
get
{
return ValidationHelper.GetInteger(this.GetValue("AnimationSpeed"), 600);
}
set
{
this.SetValue("AnimationSpeed", value);
}
}

#endregion

/// <summary>
/// Content loaded event handler
/// </summary>
///
public override void OnContentLoaded()
{
base.OnContentLoaded();
SetupControl();
}

/// <summary>
/// Reloads data for partial caching
/// </summary>
///
public override void ReloadData()
{
base.ReloadData();
SetupControl();
}

/// <summary>
/// Initializes the control properties
/// </summary>
///
protected void SetupControl()
{
if (StopProcessing)
{
// Do Nothing
}
else
{
// Set path to slider images
cmsrepeaterFlexslider.Path = this.Path;

//Register jQuery
if (this.IncludejQuery)
{
ScriptHelper.RegisterJQuery(this.Page);
}

//Register Flexslider script
string flexsliderScript = "<script src=\"" + ResolveUrl("~/CMSWebParts/Access/Flexslider_files/jquery.flexslider.js") + "\" type=\"text/javascript\"></script>";
ScriptHelper.RegisterStartupScript(Page, typeof(string), ClientID + "script", flexsliderScript);

//Build slider options
string flexslideInit = "<script type=\"text/javascript\">(function($){ $(document).ready(function (){ $(\".flexslider\").flexslider({ animation:" + "\"" + this.Animation.ToString().ToLower() + "\"" + ", controlNav:" + "\"" + this.ControlNav + "\"" + ", slideshowSpeed:" + "\"" + this.SlideSpeed + "\"" + ", animationSpeed:" + "\"" + this.AnimationSpeed + "\"" + "}); }) })(jQuery);</script>";

//Register slider init script
ScriptHelper.RegisterStartupScript(Page, typeof(string), ClientID + "script", flexslideInit);
}
}
}


And this is my transformation:

<%# IfEmpty(Eval("FileAttachment"), "", "<li data-thumb=\"" + GetFileUrl("FileAttachment")+"?width=200\"" + "\>" + Eval("FileAttachment") + "</li>") %>

User avatar
Kentico Developer
Kentico Developer
kentico_ivanat - 7/14/2012 7:42:35 PM
   
RE:Creating Web Parts
Hi,

you do not need to develop a custom web part for this.

You can use a default repeater with effect web part. Or you can use a default repeater web part and register .js scripts on your master page (on a Master page tab).

Then the most critical is probably a transformation for you. Where exactly are you storing the file which you would like to display? In Properties of particular document - Attachments tab or these file are documents of type cms.file? Or have you added attachments directly on the Form file?

You can find some transformation examples here:
Attachment in transformation

Best regards,
Ivana Tomanickova

User avatar
Member
Member
ekeys-access - 7/14/2012 7:50:06 PM
   
RE:Creating Web Parts
I tried to use a repeater with effect web part but I must have set it up incorrectly because I could not get it to work. I will try it again.

The images are being uploaded in the attachment tab. Is it possible to do something like this with a group attachment so that more than one slide show can be on a page?

Thank you for your help

User avatar
Member
Member
ekeys-access - 7/14/2012 8:05:11 PM
   
RE:Creating Web Parts
Also, if I use the basic repeater with effect web part, what do I reference as the data source name if the images are attachments? Or is there a better way to store the images other than attachments? The company I am working on this for would like to have several slide shows on one page, which could get a little messy, and they want to be able to upload their own photos.

User avatar
Kentico Developer
Kentico Developer
kentico_ivanat - 7/22/2012 8:56:16 PM
   
RE:Creating Web Parts
Hi,

yes, it is possible.

There is also a document attachment web part with effect. You can simply add a document attachment form control to the document type definition.

Then you can insert to the page the web part mentioned above, set its Path property to . and select a Group attachment property. This way you can create as many groups as you need to.

Best regards,
Ivana Tomanickova