Copied to clipboard

Flag this post as spam?

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


  • chi 5 posts 25 karma points
    Sep 30, 2013 @ 16:16
    chi
    0

    Custom field with multiple textbox

    Below is a snippet of my custom postcode field.

    I am having issues when using this field. It never hits the breakpoint that i set on Process value.

    public class PostcodeField : FieldType { public PostcodeField() { Id = new Guid("06681d21-021e-43d6-8932-942f2092fe2f"); Name = "Postcode"; Description = "Renders a textbox and button for postcode"; DataType = FieldDataType.LongString; }

        private string _houseNumber;
        private string _street;
        private string _town;
        private string _postCode;
    
        public override string RenderPreview()
        {
            var postcode = new StringBuilder();
            postcode.Append("<input type=\"text\" name =\"HouseNuumber\"/>");
            postcode.Append("<br/>");
            postcode.Append("<input type=\"text\" name =\"Street\"/>");
            postcode.Append("<br/>");
            postcode.Append("<input type=\"text\" name =\"Town\"/>");
            postcode.Append("<br/>");
            postcode.Append("<input type=\"text\" name =\"Postcode\"/>");
            postcode.Append("<br/>");
            postcode.Append("<input type=\"button\" value=\"Find Address\" name=\"FindAddressBtn\"/>");
            postcode.Append("<br/>");
            return postcode.ToString();
        }
    
        public override string RenderPreviewWithPrevalues(List<object> prevalues)
        {
            return RenderPreview();
        }
    
        //public override List<Exception> Validate(HttpContextBase httpContext)
        //{
        //    _houseNumber = httpContext.Request["HouseNumber"];
        //    _street = httpContext.Request["Street"];
        //    _town = httpContext.Request["Town"];
        //    _postCode = httpContext.Request["Postcode"];
    
        //    var postcodeValidator = new PostCodeFieldValidator(_postCode, _street, _houseNumber, _town);
        //    var results = postcodeValidator.Validate();
        //    if(results.Any())
        //    {
        //        var exceptions = new List<Exception>();
        //        results.ForEach(x => exceptions.Add(new Exception(x)));
        //        return exceptions;
        //    }
        //    return null;
        //}
    
        public override List<object> ProcessValue(HttpContextBase httpContext)
        {
            var vals = new List<object>();
    
            _houseNumber = _houseNumber== null? httpContext.Request["HouseNumber"]: String.Empty;
            _street = _street==null? httpContext.Request["Street"] : String.Empty;
            _town = _town ==null? httpContext.Request["Town"] : String.Empty;
            _postCode = _postCode == null? httpContext.Request["Postcode"] : String.Empty;
    
            vals.Add(string.Concat(_houseNumber, " ", _street, " ", _town, " ", _postCode));
    
    
    
            //var fullAddress = String.Format("{0};{1};{2};{3}", _houseNumber, _street, _town, _postCode);
    
            //vals.Add(fullAddress);
            return vals;
        }
    }
    

    Here is snippet for .cshtml. Please help I am not sure what i could be doing wrong

    <div class="appFormItemWrapper" id="FindAddressBtnWrapper">
    </div>
    <div style="display: none;" class="validation" id="FindAddressBtnValidation">
        Please press the Find Address button.</div>
    <div style="display: none;" class="validation" id="ManualAddressValidation">
        Postcode not found. Please enter full address manually
    </div>
    <div class="appFormItemWrapper fullWidth" id="SelectAddressWrapper">
        <label for="SelectAddress"> Select address</label>
        <select id="SelectAddress" data-role="none" class="appFormSelect big appFormSection3" name="SelectAddress" value="@Request["SelectAddress"]">
            <option selected="selected" value="">Choose</option>
        </select>
    </div>
    <div id="InputAddressWrapper">
        <div class="appFormItemWrapper">
            <label for="HouseNumber">
                House Name / Number</label>
            <input type="text" data-role="none" name="HouseNumber" id="HouseNumber" value="@Request.Form["HouseNumber"]" />
        </div>
        <div class="appFormItemWrapper">
            <label for="Street">
                Street</label>
            <input type="text" data-role="none" name="Street" id="Street" value="@Request["Street"]" />
        </div>
        <div class="appFormItemWrapper">
            <label for="Town">
                Town / City</label>
            <input type="text" data-role="none" name="Town" id="Town" value="@Request["Town"]" />
        </div>
        <div class="clearAll">
        </div>
        <input type="hidden" name="SelectAddressIsVisible" id="SelectAddressIsVisible" value="0" />
        <input type="hidden" name="InputAddressIsVisible" id="InputAddressIsVisible" value="0" />
    </div>
    
  • Tim Geyssens 6562 posts 15373 karma points MVP 2x c-trib
    Sep 30, 2013 @ 16:49
    Tim Geyssens
    0

    Is that the complete code, mind sharing it then I can give it a go?

  • chi 5 posts 25 karma points
    Sep 30, 2013 @ 17:34
    chi
    0

    yes that is the complete code for the field types.

    Here is the complete cshtml

    @model Umbraco.Forms.Mvc.Models.FieldViewModel

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
    <script type="text/javascript" src="/js/date.js"></script>
    <script type="text/javascript" src="/js/appform.js"></script>
    <script type="text/javascript" src="/js/jquery.browser.mobile.min.js"></script>

    <script type="text/javascript">
        parkerfox.loan.appform = new parkerfox.loan.AppForm();
        $(function () {
            // Constructor init call
            parkerfox.loan.appform.init({
                AppFormSelector: $('#AppForm'),
                AppFormErrorBox: $('#AppFormErrorBox'),
                AppFormSubmitButton: $('#submitAppFormButton'),
                AppFormLoanAmountValidation: {
                    minAmount:"100" ,
                    maxAmount: "1000"
                },
                AppFormSelectAddressWrapper: $('#SelectAddressWrapper'),
                AppFormFindAddressWrapper: $('#FindAddressBtnWrapper'),
                AppFormFindAddressButton: $('#FindAddressBtn'),
                AppFormInputAddressWrapper: $('#InputAddressWrapper'),
                AppFormPayDayFrequency: $('#PayDayFrequency'),
                AppFormNextPayDate: $('#NextPayDate'),
                AppFormManualAddressMessage: $('#ManualAddressValidation'),
                AppFormMobileOnly: true,
                postcodeServerURL: 'https://www2.memcapital.com/postcodeservice/postcodeserver.aspx?pc='
            });
        });
    </script>

    '

    Please press the Find Address button.
    Postcode not found. Please enter full address manually

    All the other bits is just javascript.

  • chi 5 posts 25 karma points
    Sep 30, 2013 @ 17:46
    chi
    0

    Hi Tim

    The initial code i gave was the complete code. Anything extra is javascript

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
    <script type="text/javascript" src="/js/date.js"></script>
    <script type="text/javascript" src="/js/appform.js"></script>
    <script type="text/javascript" src="/js/jquery.browser.mobile.min.js"></script>

    <script type="text/javascript">
        parkerfox.loan.appform = new parkerfox.loan.AppForm();
        $(function () {
            // Constructor init call
            parkerfox.loan.appform.init({
                AppFormSelector: $('#AppForm'),
                AppFormErrorBox: $('#AppFormErrorBox'),
                AppFormSubmitButton: $('#submitAppFormButton'),
                AppFormLoanAmountValidation: {
                    minAmount:"100" ,
                    maxAmount: "1000"
                },
                AppFormSelectAddressWrapper: $('#SelectAddressWrapper'),
                AppFormFindAddressWrapper: $('#FindAddressBtnWrapper'),
                AppFormFindAddressButton: $('#FindAddressBtn'),
                AppFormInputAddressWrapper: $('#InputAddressWrapper'),
                AppFormPayDayFrequency: $('#PayDayFrequency'),
                AppFormNextPayDate: $('#NextPayDate'),
                AppFormManualAddressMessage: $('#ManualAddressValidation'),
                AppFormMobileOnly: true,
                postcodeServerURL: 'https://www2.memcapital.com/postcodeservice/postcodeserver.aspx?pc='
            });
        });
    </script>
  • Tim Geyssens 6562 posts 15373 karma points MVP 2x c-trib
    Sep 30, 2013 @ 18:19
    Tim Geyssens
    0

    Ok and the fieldtype does show up in the fieldtype dropdown when you create/edit a field in contour since some stuff seems missing

  • chi 5 posts 25 karma points
    Oct 01, 2013 @ 10:52
    chi
    0

    Thanks Tim i removed all the javascript and ensured the mandatory checkbox was not ticked and it seems the custom field was working correctly.

    I was able to validate and process field values

  • Tim Geyssens 6562 posts 15373 karma points MVP 2x c-trib
    Oct 01, 2013 @ 10:52
    Tim Geyssens
    0

    Great :)

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies