Copied to clipboard

Flag this post as spam?

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


  • Lachlann 344 posts 626 karma points
    Apr 15, 2015 @ 12:52
    Lachlann
    0

    Adding in Custom Field Type

    Hi All,

    I am looking to try and create some custom field types for Umbraco 7 Forms. I have seen the documentation here:

    https://github.com/umbraco/UmbracoFormsDocumentation/blob/master/Developer/Extending/index.md

    However I am still not getting extactly what is needed here. I have created a new FieldType as well as a partial to render it.

    In the steps it says i need to have it override the editor property but I am not sure what is meant by this.

    My second problem is that I need to create a field type that doesnt actualy save any content to the DB, a bit like the Text type you can add that just provides text on the form. Does any one have any suggestions on how to do this?

    Cheers

    L

  • Lachlann 344 posts 626 karma points
    Apr 15, 2015 @ 15:43
    Lachlann
    0

    Update:

    I found this post about how to do something similar https://our.umbraco.org/forum/umbraco-pro/contour/38385-Custom-Field-Type-in-V3 but as the last comment says the Umbraco Forms version of contour does not have an Editor method to override.

    L

  • Comment author was deleted

    Apr 15, 2015 @ 15:50

    I'm just about to release v4.1.0 once that is out I'll post a complete example for you

  • Comment author was deleted

    Apr 15, 2015 @ 15:56

    So this is the definition of the textstring fieldtype

       publicclassTextfield : FieldType

        {

            [Attributes.Setting("DefaultValue"

                description = "Enter a default value")]

            public string DefaultValue { get; set; }

     

            public Textfield() {

                //Provider

                this.Id =newGuid("3F92E01B-29E2-4a30-BF33-9DF5580ED52C");

                this.Name = "Textfield";

                this.Description ="Renders a html input fieldKey";

     

                //FieldType

                this.Icon = "icon-autofill";

                this.DataType = FieldDataType.String;

     

                this.Category = "Simple";

                this.SortOrder = 10;

            }

     

     

            public override bool SupportsRegex

            {

                get

                {

                    return true;

                }

            }

     

     

        }

  • Comment author was deleted

    Apr 15, 2015 @ 15:58

    so you'll see there is no more mention of webcontrols (since we aren't using webforms anymore) and you'll need a view for your fieldtype

    for textfield the view looks like 

    @model Umbraco.Forms.Mvc.Models.FieldViewModel

    <input type="text" name="@Model.Name" id="@Model.Id" class="text" value="@Model.Value" maxlength="500"

    @{if(Model.Mandatory || Model.Validate){<text>data-val="true"</text>}}

    @{if (Model.Mandatory) {<text> data-val-required="@Model.RequiredErrorMessage"</text>}}

    @{if (Model.Validate) {<text> data-val-regex="@Model.InvalidErrorMessage" data-regex="@Html.Raw(Model.Regex)"</text>}}

     

    />

    and it's found in the \Views\Partials\Forms\Fieldtypes\ directory

  • Comment author was deleted

    Apr 15, 2015 @ 16:00

    maybe it's easier if I make an example project, will create an email one, then you'll have a full working example

  • Lachlann 344 posts 626 karma points
    Apr 15, 2015 @ 16:23
    Lachlann
    0

    Wow thanks Tim, this is perfect, I look forward to seeing the email one! And i will look through the examples above.

    L

  • Comment author was deleted

    Apr 15, 2015 @ 16:24

    thought so, eta tomorrow morning

  • Lachlann 344 posts 626 karma points
    Apr 15, 2015 @ 16:40
    Lachlann
    0

    One thought, does the umbraco liscence make a difference here? I dont have a lic for my local version at the moment.

    L

  • Comment author was deleted

    Apr 16, 2015 @ 11:33

    Working on the example project now, will ping you once it's done

  • Comment author was deleted

    Apr 16, 2015 @ 11:34

    Our products always work fully on local host so you can try before you buy

  • Comment author was deleted

    Apr 16, 2015 @ 12:39

    Ok so this is an example project with the simples possible fieldtype https://www.dropbox.com/s/7s2nufmaayugyok/FormsExampleFieldType.zip?dl=0 you'll see that it consists of an class (the definition of the fieldtype) and the view used to render it

    To install you need to drop the dll in the \bin dir and the view in the \Views\Partials\Forms\Fieldtypes\ dir

  • Steve 140 posts 321 karma points
    Oct 26, 2015 @ 15:59
    Steve
    0

    Tim,
    This is really helpful - thanks.
    For anyone working with this sample it's worth noting that an email.html file must also be put in the App_Plugins/UmbracoForms/Backoffice/Common/FieldTypes folder.
    Also, line 3 of FieldType.Email.cshtml needs to be slightly edited to:

     @{if (Model.Mandatory || Model.Validate) {<text>data-val="true"</text>}}
    

    (capitalized Model, Mandatory, etc and removed a > before

  • Peter Cort Larsen 408 posts 973 karma points
    Oct 28, 2015 @ 14:01
    Peter Cort Larsen
    0

    Hi Tim,

    I did the following on a 7.2.8 solution.

    Compiled your code for Email field. Copied dll and view.

    But how do i make it show up in the fields dialog when creating a form?

  • Comment author was deleted

    Apr 16, 2015 @ 12:39

    If you have some details in the type of fieldtype you wish to create I can give you some more pointers

  • Lachlann 344 posts 626 karma points
    Apr 16, 2015 @ 13:12
    Lachlann
    0

    This is great! Thanks Tim, I have been working on the problem and I think I am getting there now! Thanks again.

    L

  • Jay 369 posts 564 karma points
    Jun 30, 2015 @ 16:10
    Jay
    0

    Hi Tim,

    I need to create a custom Upload for Contour that only allow specific file extension to be uploaded?

    Any idea how this can be done?

    Thanks a lot

  • Steve 140 posts 321 karma points
    Oct 26, 2015 @ 14:23
    Steve
    0

    Hi Tim,
    Like @JLon, I'd like to perform some custom validation on the field value. How/where do you put this code? Essentially I would like to have a programmable regex.
    thanks! Steve

Please Sign in or register to post replies

Write your reply to:

Draft