Wednesday 15 February 2012

Umbraco New Data Type using User Control Wrapper and store as a class object


I have been reviewing article Usercontrol Wrapper and storing parseable XML data, and was interested to check out how a class object can be stored and retrieved.

I created this dummy class that will get populated using User Control Wrapper.


public class DDValues
    {
        public string Name { get; set; }
        public int ID { get; set; }
        public DDValues() { }
        public DDValues(string name, int id)
        {
            Name = name;
            ID = id;
        }
        //Other properties, methods, events...
    }

Here is an example on how to set it up.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using umbraco.cms.businesslogic.datatype;
using System.Data;
using umbraco.editorControls.userControlGrapper;

namespace MobileSite_Controls.usercontrols
{
    public partial class DropdownByTypeReturnClass : System.Web.UI.UserControl, umbraco.editorControls.userControlGrapper.IUsercontrolDataEditor
    {
        [DataEditorSetting("Type ID")]
        public string typeid { get; set; }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                string connection = System.Configuration.ConfigurationManager.AppSettings["umbracoDbDSN"].ToString();
                ddcontrol.DataSource = Microsoft.ApplicationBlocks.Data.SqlHelper.ExecuteReader(connection, CommandType.Text, "SELECT id, Name FROM tblcustomDropdownValues where TypeID=" + (string.IsNullOrEmpty(typeid) ? "0" : typeid));
                ddcontrol.DataTextField = "Name";
                ddcontrol.DataValueField = "Name";
                ddcontrol.DataBind();

                ddcontrol.Items.Insert(0, new ListItem(string.Empty, string.Empty));
                ddcontrol.SelectedIndex = 0;

                if (_umbval!=null) { ddcontrol.SelectedValue = _umbval.Name; }
            }
        }

        private DDValues _umbval;
        public object value
        {
            get {
                    return SerializationHelper.ValueToXmlString(new DDValues("Boston", 1));
                }
            set {
                if (value != null && string.IsNullOrEmpty(value.ToString()))
                {
                    _umbval = new DDValues("", 0);
                }
                else
                {
                    try
                    {
                        _umbval = (DDValues)SerializationHelper.ValueFromXmlString(value, typeof(DDValues));
                    }
                    catch
                    {
                        _umbval = new DDValues("", 0);
                    }
                }
            }
        }
    }

    public class DDValues
    {
        public string Name { get; set; }
        public int ID { get; set; }
        public DDValues() { }
        public DDValues(string name, int id)
        {
            Name = name;
            ID = id;
        }
        //Other properties, methods, events...
    }
}

Now, above Data Type can be assigned to the new Document Type with an alias. Example alias can be StateDD

To output on the front-end using Razor script
<umbraco:Macro runat="server" language="cshtml">
@Model.StateDD.ID
@Model.StateDD.Name
</umbraco:Macro>



Thursday 2 February 2012

Umbraco Flexible Template


Umbraco provides great opportunity to develop the CMS as per exact needs of the client. We have been building Umbraco Flexible Template in most of our projects and it does suits all of them well.

Most of the site has fixed Header, Footer, Navigation Area. However, Centre Area needs flexibility and in some pages we might require just the Main Content Area with full width. While in other areas, Main Content Area can be surrounded by other widgets as below.

We prefer controlling width of main content area using CSS. So, if right widget is not available then increase the width to 100%. Also have flexibility to show/hide widgets. This technique will help developers to maintain single template but meet various combinations to change the layout of the page.