Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Nicholas Westby 2054 posts 7100 karma points c-trib
    Aug 29, 2014 @ 22:55
    Nicholas Westby
    1

    Suggestions to Improve Contour

    I have used Contour on a few projects and its limitations typically lead me to create my own forms and use the Contour API to just use portions of Contour's features (e.g., workflow steps to send emails and such). Based on this post, it appears you are working on a new major Contour version. That's great, and I have some feedback for things I'd like to see in a new version of Contour.

    Improvements to ~\Umbraco\Plugins\umbracoContour\Views\Form.cshtml:

    1) Add these using statements to the top (this fixes intellisense in Visual Studio):

    @using System.Web.Mvc
    @using System.Web.Mvc.Html
    

    2) Replace this line (this appears to be malformed syntax):

    <div id="contour_form_@{@Model.FormName.Replace(" ","")}" class="contour @Model.CssClass">
    

    With this one:

    <div id="contour_form_@(Model.FormName.Replace(" ",""))" class="contour @Model.CssClass">
    

    Or maybe not (keep reading below).

    3) Replace all hardcoded ID's with dynamically generated ID's. These include "FormStep", "RecordId", "PreviousClicked", and "HoneyPot". Otherwise, having multiple contour forms on one page is technically invalid markup (since you would have repeated ID's and ID's are supposed to be unique). A simple way to generate a dynamic ID is something like this:

    var formStepId = "form-step-" + Guid.NewGuid().ToString("N");
    

    4) And now that I look at it, that contour_form_ code above appears to be a pretty fragile way of generating a dynamic ID. It suffers the flaw that you can still run into duplicate ID's if you have two of the same form on a page (I'm working on a project now that just so happens to do that). You might just want to adopt the dynamic ID technique I outlined for the other hardcoded ID's for this form ID too. If you are doing this for styling purposes (so users can create custom styles), I'd recommend you just leave the Model.CssClass you already appear to be using for that purpose, and don't use ID's where you don't actually need them.

    Improve AJAX support:

    There is no easy way to get AJAX working. The only good way I have found is to create my own controller/action/view to do all the work, and just rely on the Contour API to handle record insertions. There are different ways you can improve this situation, so I'll leave that to you, but I can tell you how I do it if you want ideas.

    My action method returns JSON. The JSON object contains a property with all the markup needed for the form. The JavaScript that receives the AJAX response uses that property and injects the markup into the DOM, handling any cleanup that is necessary. For example, I have to run this bit of JavaScript to ensure that unobtrusive validation still works after AJAX postback:

    $.validator.unobtrusive.parse(newContent);
    

    I also have some JavaScript that can perform a custom action when the response is invalid. For example, if there is an HTTP 500 server error, the JavaScript can handle that situation in an elegant way. Also, I return a property on the JSON object that indicates whether or not the insertion of the record was successful. This allows me to do whatever I want in the JavaScript to respond to that knowledge (e.g., I could close a modal dialog after 10 seconds if the response was successful, but leave it up if the response was not successful).

    Note that I've seen the Cultiv RestContour package, and the creator of that package recommends it not be used since it hasn't been touched in years. You can read about that here. I also took a look at the source code, and it seems to basically be reinventing the wheel, and I have little trust that it is doing so properly (e.g., I saw regex validation support, but what about custom validations... not sure it took that into account).

    Improve ease of use of API:

    Trying to insert a new record is just awkward. Looks like you can get a field by the label, and index, or by a GUID. The index is a bad choice because people can shuffle field orders. The label is a bad choice because then you are locked into a particular label. The GUID is a bad idea because they can differ between environments (dev/staging/production). A better solution would be to do what Umbraco does for properties... that is, have an alias. If we could use an alias to identify a field, the user could change the label as they please and they could change the order of the fields as they please.

    Improvements for DRY principle:

    One particular pain point I have come across is that I may have multiple forms that use the same regular expression (e.g., to validate an email address). I would prefer to define those regular expressions in a central location and pick them from a drop down. It would also be great if Contour shipped with some common regular expressions by default (e.g., email, credit cards, and so on).

    Improve documentation:

    Here is the main download page for Contour (as far as I'm concerned): http://our.umbraco.org/projects/umbraco-pro/contour

    One issue I see is that there is a forum for Contour, but it appears to be impossible to reach from that page. Here is what I see at the bottom of that page where I usually see forums:

    enter image description here

    Also, I see no obvious place to see a change log. I do see a change log, but it is horribly out of date. Seems like you sometimes post changes to the forum too. Would be great if you posted a change log in a single place, if you kept that up to date, and if you linked to that de facto location from the download page for Contour.

    One last thing:

    I know you are busy, so I don't expect these things soon. And I appreciate the functionality that Contour does offer. I'm looking forward to when the next major version is released :-)

Please Sign in or register to post replies

Write your reply to:

Draft