Hello Markus!

 

Did you manage to work it out?

Filip

I don't think you'll have much luck on using the property on a non-episerver-page. You'll probably need to roll your own. However, if you need help creating the property that opens up the popup and returns the value, here you go. I just wrote this but it should be pretty generic...

 PropertyControl
public override void CreateEditControls()
{
tbValue = new TextBox();
this.ApplyControlAttributes(tbValue);
Controls.Add(tbValue);

HtmlInputButton btn = new HtmlInputButton();
btn.Value = "...";
btn.Attributes.Add("onclick", "EPi.CreateDialog('/Plugins/Properties/ASPXTOOPENGOESHERE.aspx', PopUpProperty_Closed, '" + tbValue.ClientID + "', PopUpProperty_GetValue('" + tbValue.ClientID + "'), {width:640,height:480});");
Controls.Add(btn);

Page.ClientScript.RegisterClientScriptBlock(GetType(), "PopUpProperty",
@"
function PopUpProperty_GetValue(el)
{
return document.getElementById(el).value;
}

function PopUpProperty_Closed(returnValue, callbackArguments) {
if (returnValue != null)
{
document.getElementById(callbackArguments).value = returnValue;
}
}"
,true);

this.SetupEditControls();
}

This javascript goes on the opened aspx-page
function Initialize()
{
var dialogArgs = EPi.GetDialog().dialogArguments;
}

function OkClick()
{
var returnValue = "stuff";
EPi.GetDialog().Close(returnValue);
}

function CancelClick()
{
EPi.GetDialog().Close();
}

 

This was very helpful. Here is the code for a custom property made up of several properties, one being the image property described above.

SummaryPageControl.cs 

using System;
using System.Collections.Generic;
using System.Text;
using EPiServer;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.Web.PropertyControls;
using EPiServer.Web.WebControls;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace FortuneCookie.Website.Classes.CustomProperties
{
    /// <summary>
    /// PropertyControl implementation used for rendering SummaryPage data.
    /// </summary>
    public class SummaryPageControl : EPiServer.Web.PropertyControls.PropertyStringControl
    {
        /*
        Override CreateXXXControls to control the appearance of the property data in different rendering conditions.

        public override void CreateDefaultControls()        - Used when rendering the view mode.
        public override void CreateEditControls()           - Used when rendering the property in edit mode.
        public override void CreateOnPageEditControls()     - used when rendering the property for "On Page Edit".

        */

        #region Controls
        protected System.Web.UI.WebControls.TextBox title;
        //protected EPiServer.Web.PropertyControls.PropertyUrlControl image;
        protected System.Web.UI.WebControls.TextBox image;
        protected System.Web.UI.WebControls.TextBox description;
        //protected System.Web.UI.WebControls.TextBox link;
        protected EPiServer.Web.WebControls.InputPageReference link;

        #endregion

        /// <summary>
        /// Gets a value indicating whether [supports on page edit].
        /// </summary>
        /// <value><c>true</c> if [supports on page edit]; otherwise, <c>false</c>.</value>
        public override bool SupportsOnPageEdit
        {
            get
            {
                return false;
            }
        }


        /// <summary>
        /// Inherited. Initialize the value of the TextBox control.
        /// </summary>
        protected override void SetupEditControls()
        {
            var summary = SerializeUtils.DeserializeObject<SummaryPageDetails>(this.ToString());
            if (this.title != null)
            {
                this.title.Text = summary.Title;
            }
            //if (this.image != null)
            //{
            //    //EPiServer.SpecializedProperties.PropertyUrl imageUrl = new EPiServer.SpecializedProperties.PropertyUrl();
            //    //imageUrl.Value = summary.Image;
            //    this.image.Init;
            //    //this.image.PropertyUrl.Value = summary.Image;
            //}
            if (this.image != null)
            {
                this.image.Text = summary.Image;
            }
            if (this.description != null)
            {
                this.description.Text = summary.Description;
            }
            if (this.link.PageLink != null)
            {
                this.link.PageLink = summary.Link;
                //this.link.DisplayControl.Text= summary.Link.ID.ToString();
            }
        }

        /// <summary>
        /// Inherited. Applies changes for the posted data to the page's properties when the RenderType property
        /// is set to Edit.
        /// </summary>
        public override void ApplyEditChanges()
        {
            SummaryPageDetails summary = new SummaryPageDetails();

            summary.Title = (this.title != null) ? this.title.Text : string.Empty;
            //summary.Image = (this.image.PropertyUrl.Value != null) ? this.image.PropertyUrl.Value.ToString() : string.Empty;
            summary.Image = (this.image != null) ? this.image.Text : string.Empty;
            summary.Description = (this.description != null) ? this.description.Text : string.Empty;
            summary.Link = (this.link.PageLink != null) ? this.link.PageLink : null;

            string obj = SerializeUtils.SerializeObject<SummaryPageDetails>(summary);
            base.SetValue(obj);
        }

        /// <summary>
        /// Creates the edit controls.
        /// </summary>
        public override void CreateEditControls()
        {
            // create the table
            Table tbl = new Table();
            this.Controls.Add(tbl);
            tbl.BorderColor = System.Drawing.Color.Black;
            tbl.BorderStyle = System.Web.UI.WebControls.BorderStyle.Solid;
            tbl.BorderWidth = new Unit(1, UnitType.Pixel);

            // create a row Title ******************************************
            TableRow rowTitle = new TableRow();
            tbl.Controls.Add(rowTitle);

            // create a cells
            title = new System.Web.UI.WebControls.TextBox() { ID = "title" };
            var labelTitle = new System.Web.UI.WebControls.Label() { Text = "Title" };
            TableCell cellTitle = new TableCell();
            rowTitle.Cells.Add(cellTitle);
            cellTitle.Controls.Add(labelTitle);
            TableCell cellTitleBox = new TableCell();
            rowTitle.Cells.Add(cellTitleBox);
            cellTitleBox.Controls.Add(title);

            labelTitle.AssociatedControlID = title.ID;

            // create a row Description ************************************
            TableRow rowImage = new TableRow();
            tbl.Controls.Add(rowImage);

            // create a cells
            image = new System.Web.UI.WebControls.TextBox() { ID = "image" };
            //image = new EPiServer.Web.PropertyControls.PropertyUrlControl() { ID = "image" };
            //image.AppRelativeTemplateSourceDirectory = "~/ui/edit/";
            var labelimage = new System.Web.UI.WebControls.Label() { Text = "Image" };
            TableCell cellImage = new TableCell();
            rowImage.Cells.Add(cellImage);
            cellImage.Controls.Add(labelimage);
            TableCell cellImageBox = new TableCell();
            rowImage.Cells.Add(cellImageBox);
            cellImageBox.Controls.Add(image);

            HtmlInputButton btn = new HtmlInputButton();
            btn.Value = "...";
            //http://fortunecookie.website/ui/edit/FileManagerBrowser.aspx?id=11_517&parent=29&folderid=19&browserselectionmode=image&selectedfile=~%2Flink%2F58186fe2602d46d599453550514602e1.jpg
            btn.Attributes.Add("onclick", "EPi.CreateDialog('/ui/edit/FileManagerBrowser.aspx', PopUpProperty_Closed, '" + image.ClientID + "', PopUpProperty_GetValue('" + image.ClientID + "'), {width:640,height:480});");
            cellImageBox.Controls.Add(btn);

            Page.ClientScript.RegisterClientScriptBlock(GetType(), "PopUpProperty",
                        @"
                        function PopUpProperty_GetValue(el)
                        {
                        return document.getElementById(el).value;
                        }

                        function PopUpProperty_Closed(returnValue, callbackArguments) {
                        if (returnValue != null)
                        {
                        document.getElementById(callbackArguments).value = returnValue;
                        }
                        }"
                        , true);



            //This javascript goes on the opened aspx-page
            //function Initialize()
            //{
            //var dialogArgs = EPi.GetDialog().dialogArguments;
            //}

            //function OkClick()
            //{
            //var returnValue = "stuff";
            //EPi.GetDialog().Close(returnValue);
            //}

            //function CancelClick()
            //{
            //EPi.GetDialog().Close();
            //}

            labelimage.AssociatedControlID = image.ID;

            // create a row Text ************************************
            TableRow rowText = new TableRow();
            tbl.Controls.Add(rowText);

            // create a cells
            description = new TextBox() { ID = "description", Width = new System.Web.UI.WebControls.Unit(250), Rows = 4, TextMode = TextBoxMode.MultiLine };
            var labeldescription = new System.Web.UI.WebControls.Label() { Text = "Text" };
            TableCell cellText = new TableCell();
            rowText.Cells.Add(cellText);
            cellText.Controls.Add(labeldescription);
            TableCell cellTextBox = new TableCell();
            rowText.Cells.Add(cellTextBox);
            cellTextBox.Controls.Add(description);

            labeldescription.AssociatedControlID = description.ID;

            // create a row Link ************************************
            TableRow rowLink = new TableRow();
            tbl.Controls.Add(rowLink);

            // create a cells
            link = new EPiServer.Web.WebControls.InputPageReference() { ID = "link" };
            var labellink = new System.Web.UI.WebControls.Label() { Text = "Link" };
            TableCell cellLink = new TableCell();
            rowLink.Cells.Add(cellLink);
            cellLink.Controls.Add(labellink);
            TableCell cellLinkBox = new TableCell();
            rowLink.Cells.Add(cellLinkBox);
            cellLinkBox.Controls.Add(link);

            labellink.AssociatedControlID = link.ID;



            //tbl.ApplyNoWrap();
            SetupEditControls();
        }

        /// <summary>
        /// Gets the SummaryPage instance for this IPropertyControl.
        /// </summary>
        /// <value>The property that is to be displayed or edited.</value>
        public SummaryPage SummaryPage
        {
            get
            {
                return PropertyData as SummaryPage;
            }
        }
    }
}

SummaryPage.cs 

using System;
using System.Collections.Generic;
using System.Text;
using EPiServer;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.PlugIn;
using EPiServer.Web.PropertyControls;

namespace FortuneCookie.Website.Classes.CustomProperties
{
///
/// Custom PropertyData implementation
///
[Serializable]
[PageDefinitionTypePlugIn(DisplayName = "Summary", Description = "Allows editing of a complex element.")]
public class SummaryPage : EPiServer.Core.PropertyData
{
public override EPiServer.Core.PropertyData ParseToObject(string str)
{
// TODO: Write code that converts the string passed to the method into an instance of this type.
SummaryPage summary = new SummaryPage();
summary.ParseToSelf(str);
return summary;
}

public override void ParseToSelf(string str)
{
// TODO: Write code that converts the string passed to the method into property data and populate the current instance with this data.
this.String = str;
}

public override Type PropertyValueType
{
get
{
// TODO: Write code that returns the underlying type
return this.GetType();
}
}

protected override void SetDefaultValue()
{
// TODO: Write code that resets the value of this property to its default.
this.String = "";
}

public override EPiServer.Core.PropertyDataType Type
{
get
{
// TODO: Write code that returns the PropertyDataType this property is based on.
return PropertyDataType.LongString;
}
}

string _string;
///
/// Gets or sets the string value of this property.
///
[System.Xml.Serialization.XmlIgnore]
protected virtual string String
{
get
{
return this._string;
}
set
{
base.ThrowIfReadOnly();
if (PropertyData.QualifyAsNullString(value))
{
base.Clear();
}
else if ((this._string != value) || this.IsNull)
{
this._string = value;
base.Modified();
}
}
}

public override object Value
{
get
{
if (this.IsNull)
{
return null;
}
return this.String;
}
set
{
base.ThrowIfReadOnly();
base.SetPropertyValue(value,
delegate
{
this.String = value.ToString();
});
}
}

public override EPiServer.Core.IPropertyControl CreatePropertyControl()
{
return new SummaryPageControl();
}

}
}

SummaryPageDetails.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using EPiServer.Core;

namespace FortuneCookie.Website.Classes.CustomProperties
{
public class SummaryPageDetails
{
public string Title { get; set; }
public string Image { get; set; }
public string Description { get; set; }
public PageReference Link { get; set; }

#region Helper Methods

///
/// Gets the promo from string.
///
///

The XML.
///
public static SummaryPageDetails GetSummaryFromString(string xml)
{
return SerializeUtils.DeserializeObject(xml);
}
///
/// Gets the promo from the CurrentPage.
///
/// Name of the property.
///
public static SummaryPageDetails GetSummaryFromPage(string PropertyName)
{
return GetSummaryFromPage(PropertyName, PageDateHelper.CurrentPage);
}
///
/// Gets the promo from page.
///
/// Name of the property.
/// The page.
///
public static SummaryPageDetails GetSummaryFromPage(string PropertyName, PageData page)
{
//Add Some caching functionality by placing in the
if ((page[PropertyName] != null) && !string.IsNullOrEmpty(page[PropertyName].ToString()))
{
string XMLstr = string.Empty;
var propname = page.PageLink.ID.ToString() + ":" + PropertyName;
if (System.Web.HttpContext.Current.Items[PropertyName] != null)
{
XMLstr = (string)System.Web.HttpContext.Current.Items[propname];
}
else
{
XMLstr = (string)page[PropertyName];
System.Web.HttpContext.Current.Items[propname] = XMLstr;
}
return GetSummaryFromString(XMLstr);

 

}
return new SummaryPageDetails();
}
#endregion
}
}

 

Hi Victor Dollero ,

I am newbie in EPiServer, thats's why.. could you also post the parts like: PageDateHelper, SerializeUtils ?

Also how could I repeat those controls ? Like I have one extra button under your control called "Add more",

then user can see extra added set of controls (exactly the same your code supposed to add), so that user can make list of the control you created.

 

Hope to get your reply.