Creating a custom form field to a page type to allow for adding/removing input fields

Sebastian De Masi asked on September 10, 2015 09:59

Hi everyone

I'm creating a new page type that requires the user to enter a list of "objectives" and their corresponding "date".

For example:

-01/01/2015 : Reach target A

-02/02/2015 : Reach target B

The date and the objective must be entered in separate fields. One as a date picker and the other as a rich text editor

There is no fixed number of objectives that a user can enter. In some instances a user may have 1 objective and date, and another may have 20 objectives and dates.

Has anyone created a form control that can handles this type of scenario?

I have found an example in the link below

http://formvalidation.io/examples/adding-dynamic-field/

Recent Answers


David te Kloese answered on September 10, 2015 11:31 (last edited on September 10, 2015 11:32)

Hi,

You could also just use a new custom table.

in your page type select "Custom table data list" as a form control in the editin control settings select the custom table and give it a where condition macro.

Something like:

ProjectID = '{% Node.projectID #%}'

you could create a custom editing form to set the projectID by default.

Greets,

David

0 votesVote for this answer Mark as a Correct answer

Maarten van den Hooven answered on September 10, 2015 12:21

Hi Sebastian, There is indeed no standard Kentico solution for this, so you need to build an custom form control. We build one similar in Kentico v7, to add children (name + date of birth) to your profile. We save the data in one field, like this :

[{"Name":"Child 1","DateOfBirth":"\/Date(1126396800000)\/"},{"Name":"Child 2","DateOfBirth":"\/Date(1172534400000)\/"},{"Name":"Child 3","DateOfBirth":"\/Date(1242086400000)\/"}]

If you want I can send the code to you.

0 votesVote for this answer Mark as a Correct answer

Sebastian De Masi answered on September 11, 2015 01:55

Thank you both for your responses.

Maarten are you able to send me your code?

0 votesVote for this answer Mark as a Correct answer

Maarten van den Hooven answered on September 11, 2015 16:44 (last edited on September 18, 2015 16:21)

Hi Sebastian, you can download the formcontrol here : link to formcontrol (OneDrive)

Good luck with the code and if you need help then let me known.

If this answer helped you, please vote for my answer :-)

0 votesVote for this answer Mark as a Correct answer

Maarten van den Hooven answered on September 23, 2015 07:58

Hi Sebastian, Did you succedeed with building the custom form control?

0 votesVote for this answer Mark as a Correct answer

Odysseas Triantafyllos answered on October 8, 2015 11:37

Hi Maarten,

I really neeed this functionality. I downloaded your code but there's a missing namespace. "using IBL.Models" gives me an error.

Can you please include it in your code?

Thank you in advance. Odysseas Triantafyllos.

0 votesVote for this answer Mark as a Correct answer

Maarten van den Hooven answered on October 12, 2015 11:20

Hi Odysseas, This form control is specially build for our project where we can add dates of your children to your profile. The IBL.Models only contain a model to validate the date. So you need to change the code a bit for addapting to your situation, and don't need to use this piece of code.

But off course you can have the code :

using System;
using Microsoft.Web.Services3.Referral;

namespace IBL.Models
{
    [Serializable]
    public class Child: IValid
    {
        public string Name { get; set; }
        public DateTime? DateOfBirth { get; set; }

        public bool IsValid()
        {
            bool resultDate = true;
            if(DateOfBirth.HasValue)
            {
                resultDate = DateOfBirth <= DateTime.Now;
            }
            return !string.IsNullOrEmpty(Name) && resultDate;
        }

        public bool IsEmpty()
        {
            return string.IsNullOrEmpty(Name) && ! DateOfBirth.HasValue;
        }
    }

    public interface IValid
    {
        bool IsValid();
        bool IsEmpty();
    }
}
0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.