K2 smartforms control custom property

In this article, I’m going to show you how to add a property, MaxFileSize, to a K2 smartforms custom control.

Note: The focus of this article is all about adding a property and using it in your control. For the basics on how to create a K2 smartforms control, please visit K2 smartforms Developers Reference .

Adding a K2 smartforms control custom property

1. Add a new property to your control’s xml definition

In your control’s definition xml file, add a new Prop element under Properties. It should look like the following:

ID attribute is the new property’s name and InitialValue sets the default value when the control is first added to a View.

For more information about what each of the property’s attribute does, look at Control Definition XML File.

2. Add a Getter/Setter method in your control class to access the property value

You need this method to create and save the option values into the control so that you can retrieve it in your JavaScript later.

The method name should match the ID value set in the property earlier on. In the GetOption and SetOption method, use small caps for your option name (e.g. maxfilesize) as this will be the data-options attribute registered in the control’s html.

3. Reading the option values via JavaScript

Now, as I mentioned earlier, the options will be surfaced as data-options attributes in the control’s html. Use your browser’s in-built developer tools to look at the control’s html. It should look similar to this:

Notice that the maxfilesize value has been registered in the data-options attribute? This is the value set in the K2 Designer and you have access to it now. =)

So, last step. To get the value, just use the jQuery .data function to retrieve the data-options values. For me, I create a initialise function to handle the values initialization.


Good luck!

Leave a Reply

Your email address will not be published. Required fields are marked *