At this years codegarden I did a session on Contour, missed codegarden or didn’t attend the session, well you can watch it now… It’s an intro to the different parts in umbraco contour (form designer, entries viewer, workflows, data sources, prevalue sources, security, …)
Yet another post in the Contour series, in this one I’ll outline how I created a new prevalue source type.
By default there are a number of prevalue source types in contour (fetch prevalues from a database table, from umbraco documents, from umbraco datatype prevalues, …), but it’s also possible to extend Contour and create your own fieldtypes, datasource types, field setting types, …. and of course prevalue source types.
So imagine we have a simple text file containing all cities in Belgium and of course we don’t want to manually create a cities dropdown and start copy pasting the contents. Instead we’ll setup a new prevalue source where I can upload the textfile and then hook this prevalue source to the dropdown we wish.
The code to do this (the custom prevalue source type) is actually pretty simple, by first looking at the contour shared sourcecode (which contains the sourcecode for all default elements in contour I have the code in a couple of minutes) here it is:
string values = tr.ReadToEnd().Split(‘\n’);
foreach (stringvaluein values)
PreValue pv = new PreValue();
pv.Id = sort;
pv.Value = value;
if (field != null)
pv.Field = field.Id;
pv.SortOrder = sort;
catch (Exception ex)
"Get values from textfile provider: " + ex.ToString());
publicoverride List<Exception> ValidateSettings()
List<Exception> exs = new List<Exception>();
exs.Add(new Exception("’TextFile’ setting not filled out’"));
The important things to notice here is that we have a single setting which is the TextFile settings and it’s using the Umbraco.Forms.Core.FieldSetting.File control so it will render an upload control.
Then in the GetPrevalues method we’ll simpy read the file and loop trough all values(which should be seperated by a linebreak).
And that’s it, if I now compile this code and place the assembly in the bin directory of the umbraco installation I will be able to select the new prevalue source type when creating a new prevalue source
And once I select the type I’ll be able to upload the text file
Now once the new prevalue source has been setup I’ll be able to add a new field to my form that uses this source.
And after adding the field I should be able to see the prevalues (even in the form designer)
A prevalue source allows you to setup a source that you can hook to a field type that supports prevalues (dropdown, checkbox list, radio button list).
Let’s say we have an existing database table that has a lists of all countries, well instead of having to setup these countries manually when we want a countries dropdown we can create a new prevalue source and link this to our field.
So when we take a look at the contour section you’ll notice 3 trees (forms, data sources and prevalue sources)
So it’s obvious that we’ll be managing the prevalue sources in the prevalue sources tree.
Let’s say I have the following database, containing a table that has all countries in it
And now I want to use this table as a source for a countries dropdown.
First I would create a new prevalue source and call in Countries, once that has been created I’ll choose the sql database prevalue source type (since I’m getting the values from a db table)
As you can notice by default there are 2 SQl Database types, ‘SQL Database’ and ‘SQL Database (read only)’. If you choose the normal one we will also be able to update / delete and create new prevalues (which will update the prevalue source, so the db table in this case).
Once we select a type the type specific settings will load and we”ll need to fill these in
In the case of the SQL Database prevalue source type we’ll need to setup
Connectionstring to the db
Name of the column containing the key
Name of the column containing the value (that will be displayed)
Once these are filled in and the prevalue source has been saved succesfully we are ready to use the newly configured prevalue source.
When we now add or edit a field that supports prevalues (dropdownlist, radiobutton list, checkbox list)
We’ll be able to choose the type
by choosing a prevalue source ‘so anything else then standard’ we’ll link the field to the source
That’s it now our dropdown will list all items in the table.
In this example I used the sql database prevalue source type but there are also some other default prevalue source types and it’s of course also possible to plug in your own custom types!
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.
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.
This post uses some of the new additions to Contour 1.1.3 so you’ll need to be running that version if you want to try this yourself.
With a quiz I mean that I’ll have a number of questions and possible answers. Each of these answers will have a weight (for example, 0 if the answer is incorrect, 1 if the answer is correct) and when a user fills in the quiz he should get feedback on how he did (so how much he scored based on the answers he gave).
Step 1: Setting up the form
Setting up the questions and answers is is a piece of cake, by simply using Contour’s ui to setup the form we have it up in minutes (so I won’t go in detail on how you create a form with Contour, if you want to try it just install Contour directly from the package repo).
Once I have a form with some radiobuttonlist fields I’ll also add a hidden field that will store the score
Step 2: Making it possible to give a weight to each answer and Calculating + storing the score
So once the user has completed the form/quiz I want to calculate the score. To execute some code during the record lifecycle we’ll use a workflow.
A workflow can have multiple settings each of these settings can be of a different type (for example a send email workflow will have a subject setting that is of the type textfield) to be able to give each answer a weight I’ll create a new fieldsetting type that will list all questions with their possible answers and on each answer have an input to provide a weight. Which will look like this:
The code for the custom fieldsetting type looks like this (download the entire sourcecode at the bottom of this post:
Now I’ll use this custom field setting type on a custom workflow wich will be used to calculate the score. Besides the custom weight mapper setting the workflow also has a field picker that makes it possible to select a field on the form (I’ll use it to select the field where I want to store the score). And I’ll also add a textfield where I will prompt for a session variable key that I’ll set with the score.
So entire workflow will look like this
And the code (again you can download the full sourcecode at the bottom of this post):
Once my custom workflow type is ready I simply need to place the assembly containing the workflow type in my bin directory and I should now be able to choose a ‘Score Calculator’ workflow type and add this to my form.
Step 3: Displaying the score
Once the workflow is setup the last step is to provide details on the score to the user filling out the quiz.
In the workflow I set a session variable with the score, so I’ll use the bracket syntax supported by Contour in the message on submit field to display this to the user. (in this case the key is moviequizscore)
Your content editors will be able to setup custom online quizzes, they will have full control over the number of questions/answers and how much weight they give each answer all from a nice UI directly integrated in the umbraco backend.