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>
    
  • Comment author was deleted

    Sep 30, 2013 @ 16:49

    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>
  • Comment author was deleted

    Sep 30, 2013 @ 18:19

    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

  • Comment author was deleted

    Oct 01, 2013 @ 10:52

    Great :)

Please Sign in or register to post replies

Write your reply to:

Draft