Contour 1.1.9 has just been shipped. It’s a minor release, but it adds a nifty little feature making it super easy to work with member data. Default values and workflow settings bracket syntax has now been updated to support member values.

Member values as default field values

Say that you have a comment form on your website with the standard fields (name, email, website and comment).

In the case when an Umbraco member is currently logged in and you want to pre-populate the name and email fields with the values from the logged in member, it’s now just a matter of setting the default value using the bracket syntax.

You can access: member.id, member.loginname, member.email and for custom properties simply use the alias member.customalias.

Full details on the syntax can be found in the Contour developer documentation.

Member values in workflow settings

Of course it’s also possible to use this syntax in workflow settings. For example, sending an email to the current member when a form has been submitted, just set the email setting to {member.email}

Member profile editor

Combine the default values with a workflow that will update the member details and you have a member profile editor.

Let’s start with a simple member type with just a single property with the alias custom.

I want the members to be able to edit their email and the value for the custom property so I’ll create a form with 2 fields (email address and custom property).

The default value of the email field has been set to {member.email}

And the one for custom property has been set to {member.custom}

So now if I request the form when I’m logged in as an Umbraco member, the fields should be populated with the current member values.

The next step is to make sure the member values get updated when the form is submitted. This can be done with a workflow (workflow is part of the contour strikes again project).

The workflow simply maps the member type properties to the contour form fields. When the form is submitted the member properties will be updated. Once this is in place you have a working profile editor.

Make sure you have at least Contour version 1.1.9 in order to use these features. Install and upgrade instructions can be found on the contour project page.

Want to output Contour records with razor instead of xslt well I’ve created some dynamic objects you can use to do so (please note that this is just a primary version of the dynamic objects, this will be improved in a next Contour release)

Here is an example:

@using Contour.Addons.DynamicObjects

<ul id="comments">

 @foreach (dynamic record in Library

           .GetApprovedRecordsFromPage(@Model.Id).OrderBy("Created"))

 {

     <li>

          @record.Created.ToString("dd MMMM yyy")

          @if(string.IsNullOrEmpty(record.Website)){

             <strong>@record.Name</strong>

          }

          else{

             <strong>

               <a href="@record.Website" target="_blank">@record.Name</a>

             </strong>

          }

         <span>said</span>

        <p>@record.Comment</p>

     </li>

  }

</ul>

This example uses the comment form created from the comment form template and then simply outputs all comments submitted on the current page. To access the field values you can simply use the dot notation (.FieldCaption like @record.Comment)

Download the assembly here: (simply unzip and drop in your bin directory)

Make sure you are running at least version 4.7 of umbraco since it won’t work on older version and of course have Contour installed.

To continue the series on Umbraco Contour, in this post I’ll outline how I created a custom field type, a textarea that has a spell check option.

First I simply created a custom control that can be used in any asp.net project. The result looks like this:

I can hit the check spelling button and then I’ll get an overview of the words that are incorrect. When I click in a word I get a list of options I can choose from

Selecting one will update the word…

To create this I simply used jquery-spellchecker and this asp.net version http://forums.asp.net/t/1519923.aspx

To be able to use this custom control as a Contour fieldtype I’ll need to create a custom fieldtype class  (inherit from Umbraco.Forms.Core.FieldType) and I’ll basicly wrap the custom control in this class

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Umbraco.Forms.Core;

using System.Web.UI.WebControls;

using umb = umbraco;

namespace SpellCheckerTest.FieldType

{

    public class TextAreaWithSpellChecker : Umbraco.Forms.Core.FieldType

    {

        public Control.TextAreaWithSpellChecker txt;

        public List<Object> Value;

        [Umbraco.Forms.Core.Attributes.Setting("Culture", 

            description = "Enter the culture")]

        public string Culture { get; set; }

        [Umbraco.Forms.Core.Attributes.Setting("Check spelling caption", 

            description = "Enter the caption")]

        public string CheckSpellingCaption { get; set; }

        [Umbraco.Forms.Core.Attributes.Setting("Loading caption", 

            description = "Enter the caption")]

        public string LoadingCaption { get; set; }

        [Umbraco.Forms.Core.Attributes.Setting("No mistakes caption", 

            description = "Enter the caption")]

        public string NoMistakesCaption { get; set; }

        public TextAreaWithSpellChecker()

        {

            Id = new Guid("71A8189D-4A3E-4208-9EA8-32C2B138C024");

            Name = "TextArea With SpellChecker";

            Description = "Renders a TextArea With Spell Checker";

            Icon = "textarea.png";

            DataType = FieldDataType.LongString;

            txt = new Control.TextAreaWithSpellChecker();

            Value = new List<object>();

        }

        public override WebControl Editor

        {

            get

            {

                if (Value.Count > 0)

                    txt.Text = Value[0].ToString();

                txt.Culture = Culture;

                txt.CheckSpellingCaption = CheckSpellingCaption;

                txt.LoadingCaption = LoadingCaption;

                txt.NoMistakesCaption = NoMistakesCaption;

                return txt;

            }

            set { base.Editor = value; }

        }

        public override List<Object> Values

        {

            get

            {

                if (txt.Text != "")

                {

                    Value.Clear();

                    Value.Add(txt.Text);

                }

                return Value;

            }

            set { Value = value; }

        }

        public override string RenderPreview()

        {

            return 

                "<textarea id=\"text-content\" rows=\"5\" cols=\"25\"></textarea>" +

                "<br/> <input type=\"button\" id=\"check-textarea\" value=\"Check Spelling\" />";

        }

        public override string RenderPreviewWithPrevalues(List<object> prevalues)

        {

            return RenderPreview();

        }

        public override bool SupportsRegex

        {

            get { return true; }

        }

    }

}

As you can see it’s pretty straight forward, setitng the editor to the custom control, returning the text property as value,… Also the custom control has several properties like culture, … If I want to be able to enter these in the form designer I’ll add some properties an mark them with the Umbraco.Forms.Core.Attributes.Setting attribute

The end result:

Download the sourcecode

To use the fieldtype, drop the assembly SpellCheckerTest.dll in the bin directory and the SpellChecker.aspx page in the /umbraco/plugins/contourspellcheckerfieldtype directory

To continue the series on umbraco Contour, in this post I’ll show you how you can use the data sources feature in Umbraco Contour. When you navigate to the Contour section (if you have Contour installed, otherwise you can install it from the package repository, developer section/ packages / package repo / umbraco pro) you’ll notice 3 trees in the treeview on the left. Forms, Data Sources and Prevalue Sources.

Data Sources allow you to create a form based on a Data source and submit your form entries to that data source. By default there are 3 types of data sources

• Save as node (create form based on document type and create an umbraco content document on submit)
• SQL Database (create form based on database table and submit data to that table)
• Webservice (create form based on webservice and post to that service on submit)

In this post I’ll use the SQL Database data source type.

I have the following database that contains a subscription table with some sample fields including a title field which is a foreign key of a title table.

So now I want to add a form to my site that submits records (subscriptions) to this table. Using data sources in Contour you can do this without a single line of code, just by completing a simple wizard.

The first step is to create a new datasource (so simply right click the data sources tree and select create and then provide the new data source a name). Once the data source is created the next step is to select the type, in this case it will be ‘SQL Database’

Once the type is selected the settings for the specific type should load. In case of the ‘SQL Database’ type there are 2 settings.

• Connection string
• Table name

Once these are setup correctly and the datasource is saved you should get a ‘create form’ button, this will start the form creation wizard.

In the first step of the wizard you’ll need to select which db columns you want to include on the created form (if the db columns doesn’t allow nulls this will be autu checked).

Depending on the presence of foreign keys the next step will be to setup the foreign keys, so you’ll have to select which column will be used to display

And the final step allows you to map a fieldtype to each of the fields that will be created

Once that is setup simply hit the ‘save form’ button and a new form will be created

Since the form is linked to a data source you’ll have limited editing possibilities

That’s it now we have a form that will submit data to a custom database table, without writing a single line of code but by simply completing a 3 step wizard.

And it’s of course also possible to extend these data sources by creating your own, check out the contour shared sourcecode and take a look at the default data sources code.