How to do the most simple divider-control in EpiServer 7?

Vote:
 

We have a lot of dividers on our 6 R2-solution and they are all crashed in EpiServer 7. We have them very simple and would like a simple 7-solution as well but I can't figure out how to do it without writing a relative complex DOJO-editor.

Is there anyone who have a simple divider simular to this (http://epideveloper.blogspot.se/2011/05/custom-property-for-separating-sections.html) i a Epi7 version?

 

/Henrik

#71886
May 31, 2013 10:27
Vote:
 

Can you group your properties logically with block-types? That would automatically create a visual group in the UI and you can mark your blocks as unavailable to create as shared blocks. Some pseudo code:

public class MyPageType: PageData

{

  public virtual LinkSettings LinkSettings{get;set;}

  public virtual SomeOtherSettings SomeOtherSettings{get;set;}

}


public class LinkSettings : BlockData

{

    public virtual Url LinkUrl{get;set}

    public virtual string Title{get;set}

}

public SomeOtherSettings : BlockData

//Implementation here...

 

Of course it's possible to create a fake-property as well that doesn't allow editing but I think that the block option is better if you actually want to group a bunch of properties.

#71894
May 31, 2013 12:38
Vote:
 

Hi Henrik,

I have created a divider property in EPiServer CMS7.

Steps to create Divider Property

  • First we will add a property to our pagetype as shown below
            [BackingType(typeof(DividerProperty))]
            [Display(Order = 1, Description = "Description", Name = "some text")]
            public virtual string ArticleListProperties { get; set; }
  • Then we add editor descriptor that is responsible for assigning the widget and responsible for editing

                  public override void ModifyMetadata(EPiServer.Shell.ObjectEditing.ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
                  {
                         ClientEditingClass = "forumsyd.editors.Divider";

                         base.ModifyMetadata(metadata, attributes);
                  }

  • Now let us add the code that is responsible for generating results

namespace xxx
{
    /// <summary>
    /// Custom PropertyData implementation
    /// </summary>
    [Serializable]
    [PropertyDefinitionTypePlugIn]
    [EditorHint("Divider")]

    public class DividerProperty : PropertyLongString
    {
        // TODO: Override members of EPiServer.Core.PropertyString to provide your own logic.

        protected String separator = "\n";

        public String[] List
        {
            get
            {
                return (String[])Value;
            }
        }

        public override Type PropertyValueType
        {
            get
            {
                return typeof(String[]);
            }
        }

        public override object Value
        {
            get
            {
                return string.Empty;
            }
            set
            {
            }
        }

        public override IPropertyControl CreatePropertyControl()
        {
            //No support for legacy edit mode
            return new DividerPropertyControl();
        }
        public override object SaveData(PropertyDataCollection properties)
        {
            return LongString;
        }
        public override string TranslateDisplayName()
        {
            const string header = "<div style=\"width: 530%; border-bottom: 1px solid #808080; padding: 6px 0px 2px; margin-bottom: 6px; \"><b><font size=\"2\">{0}</font></b></div>";
            return string.Format(header, TranslateDescription());
        }
    }
}

namespace Logica.EPi.SpecializedProperties
{
    /// <summary>
    /// PropertyControl implementation used for rendering Divider.
    /// </summary>
    public class DividerPropertyControl : PropertyDataControl
    {
        #region Divider
        /// <summary>
        /// Gets the Divider instance for this IPropertyControl.
        /// </summary>
        /// <value>The property that is to be displayed or edited.</value>
        public DividerProperty Divider
        {
            get
            {
                return PropertyData as DividerProperty;
            }
        }
        #endregion

        #region CreateEditControls
        /// <summary>
        /// Empty
        /// </summary>
        public override void CreateEditControls()
        {
            Controls.Add(new Label() { Text = "" });
        }
        #endregion

        #region ApplyEditChanges
        /// <summary>
        /// We do nothing since we use the default valus to point out which properties to Collapse
        /// </summary>
        public override void ApplyEditChanges()
        {

        }
        #endregion

        #region CreateDefaultControls

        /// <summary>
        /// Should only be rendered in edit mode
        /// </summary>
        public override void CreateDefaultControls()
        {
            var ctrl = new HtmlGenericControl { InnerHtml = "" };
            Controls.Add(ctrl);
        }
        #endregion

        public override TableRowLayout RowLayout
        {
            get
            {
                return TableRowLayout.Wide;
            }
        }
    }
}

  • Implementing the client

               Inside the module.config, add dojomodule as shown below

<?xml version="1.0" encoding="utf-8"?>
<module>
    <assemblies>
        <!-- This adds the Alloy template assembly to the "default module" -->
        <!--<add assembly="ForumSyd"/>-->
    </assemblies>

    <dojoModules>
        <!-- Add a mapping from alloy to ~/ClientResources/Scripts to the dojo loader configuration -->
        <add name="application dll name" path="Scripts" />
    </dojoModules>
</module>

  • And we add a file named Divider.js inside "ClientResources/Scripts/Editors"
    . code is shown below

/*
Dojo widget for editing a list of strings. Also see property type PropertyStringList in /Models/Properties.
*/

define([
    "dojo/_base/array",
    "dojo/_base/connect",
    "dojo/_base/declare",
    "dojo/_base/lang",

    "dijit/_CssStateMixin",
    "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetsInTemplateMixin",

    "dijit/form/Textarea",

    "epi/epi",
    "epi/shell/widget/_ValueRequiredMixin"
],
function (
    array,
    connect,
    declare,
    lang,

    _CssStateMixin,
    _Widget,
    _TemplatedMixin,
    _WidgetsInTemplateMixin,

    Textarea,
    epi,
    _ValueRequiredMixin
) {

    return declare("forumsyd.editors.Divider", [_Widget, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin, _ValueRequiredMixin], {


        templateString: "<div>\
                            <div data-dojo-attach-point=\"contentName\"></div>\
                        </div>",

        contextChanged: function (context, callerData) {
            this.inherited(arguments);

            // the context changed, probably because we navigated or published something
            html.set(this.contentName, context.name);
        }
    });
});

 

This is how we will create divider property in cms7.

Regards,

Manjeera T

 


             



#71895
May 31, 2013 12:48
Vote:
 

It's worth to mention that the name you set is case sensitive (e.g. "alloy")


        
        
    
#90125
Sep 02, 2014 14:51
Vote:
 

If i try this, why do i get the button to eddit...

i dont want to have that possibility..

see screenshot.

http://img42.com/XGY63

#122942
Jun 18, 2015 13:08
Vote:
 

I have tried to implement Manjeera T:s solution.

But when I click to go the to edit form view in EPiServer I get a 404 message when the browser tries to get the divider.js file. It tries to get the js file from:

/[EPISERVER-UI]/Shell/9.7.0.0/ClitenResources/[APPNAME]/editors/divider.js

But I have placed the divider.js file in

/ClientResources/Scripts/Editors/divider.js

I guess that the changes i module.config should change where to get the divider.js file, but nothing happens when I change that file. RIght now my config file looks like this:

<?xml version="1.0" encoding="utf-8"?>
<module>
  <assemblies>
    <!-- This adds the Alloy template assembly to the "default module" -->
    <add assembly="SITE_ASSEMBLY_NAME" />
  </assemblies>
  <dojo>
    <!-- Add a mapping from alloy to ~/ClientResources/Scripts to the dojo loader configuration -->
    <paths>
      <add name="SITENAME" path="Scripts" />
    </paths>
  </dojo>
</module>xml

If I add the divider.js file to the path where the browser tries to get it everything works perfect.

What can be wrong?

#163457
Oct 20, 2016 20:15
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.