Tag Archives: Custom Control

K2 smartforms Custom Control Icon

In this article, I’m going to describe how to add a K2 smartforms custom control icon. The official article is located at help.k2.com but it is not 100% accurate and contains mistakes in the CSS sample. Here’s the step by step guide:

Create the icon

The basic requirements of the K2 smartforms custom control icon is that it needs to be a 16×16 pixel image. In this sample, I’ll be using the Microsoft Paint application to create it.

  1. Search for your Paint application in your Windows Start menu and launch it.

    Find MS Paint
    Find MS Paint
  2. In your Paint application, click on Files > Properties.

    MS Paint Properties option
    MS Paint Properties option
  3. Set the Width and Height of the image to 16 and click OK.
  4. Draw your icon and save it. In my sample, I’ve saved my image in PNG format.

Adding the icon to your custom control

Now, here are the steps to add your K2 smartforms custom control icon:

  1. Add the icon to your VS project.

    Add icon to VS project
    Add icon to VS project
  2.  You will need to set the icon as a Embedded Resource. So right click on the icon, click on Properties and select Embedded Resource under Build Action.

    Set icon Build Action to Embedded Resource
    Set icon Build Action to Embedded Resource
  3. Add the icon as a WebResource in your control code file. Do take note that your resource name starts with the [Project Name], [Folder Name] and ends with the [Icon File Name], separated by a full stop (.). You should update the resource type, if you are not using a PNG file like me in this sample.

    Add icon as WebResource
    Add icon as WebResource
  4. You will need to add the K2 smartforms custom control icon styling in your control’s CSS file now. In the style sample below, you will need to replace a) the control name from “digital signature” to your control’s name and b) update the icon’s WebResource URL to the one you just created in the section above. Note: The CSS style provided at help.k2.com does not include spaces that separates the css class name. This causes the style to not function in your browser.
  5. Since we indicated WebResource usage in our CSS file, we will need to ensure PerformSubstitution attribute is set to true on the CSS WebResource declaration in the control file.

    PerformSubstitution = true
    PerformSubstitution = true
  6. Ensure that the CSS file reference is added in the constructor of your control class.  Replace the WebResource URL for your CSS file in the sample below.

View my K2 smartforms custom control icon!

Now, to view your new K2 smartforms custom control icon, you will need to:

  1. Compile the VS project and deploy your custom control.
  2. Ensure that your IIS has been reset.
  3. Clear your browser cache, log into your K2 Designer site and see your new K2 smartforms custom control icon in action!

    Look at my K2 smartforms custom control icon!
    Look at my K2 smartforms custom control icon!

Enjoy!

List Sequence Number Display

K2 smartforms List Sequence Number Display

Recently, I’ve published a K2 smartforms custom control, List Sequence Number Display at K2 Community (http://community.k2.com/t5/K2-blackpearl/List-Sequence-Number-Display-Field/ba-p/85348).

What does the List Sequence Number custom control do?

It helps you print running numbers on the first column of your List View.

List Sequence Number Display in action
Running number after performing a sort on the column header.

But I can already do that with a SQL View or SQL Stored Procedure…

Well, yes you can, but can your solution:

  1. Add running numbers without altering the original data source?
  2. Can it be do the same for data sources other than SQL?
  3. Can it keep the numbering across different pages? (i.e. pagination)
  4. Can it keep the numbering after a executing sort? (i.e. click on the column headers)
  5. Can it update the numbering adding a new record row? (i.e. adding a new row in a editable list)

So, if you solution can’t do it, then go on and try the List Sequence Number Display custom control! =)

Some things I’ve learned while developing the List Sequence Number Display control

Just to share some of the things I’ve learned from developing this custom control

The parent grid’s html entity ID is always the first set of Guid of my control’s Guid combination

If you look at the generated custom control’s ID via a browser’s Developer Tool, you will see something similar to the following:

Viewing the List Sequence Number Display control from Developer Tool
My custom control’s html entity ID

In my sample here, the div tag’s ID is “b113bc00-d8f7-4ce5-ae81-be2a0ecfe68d_5a10bfd9-f955-41b2-87f7-17e88cd158db”. So if I want to find the Grid which my control resides in, I just need to get the first set of GUID (b113bc00-d8f7-4ce5-ae81-be2a0ecfe68d), separated by the underscore symbol (‘_’) and look for the GUID combination in the ID of a “div” tag with the class name “grid”.

Viewing the List Sequence Number Display control from developer tool 2
Parent grid with the GUID as part of the ID.

This is the piece of JQuery I use to get my grid handle.

If you notice, it also checks if the parentIDString found starts with “00000000-“. This is to handle case where by the grid’s View is not within a Form.

 

Using MutationObserver

The grid has its own JavaScript class with does not expose any event handlers. So the only solution I can come up with is to use MutationObserver to listen to DOM changes. The biggest down side to this approach is that in Microsoft’s Internet Explorer (IE), only version 11 has a proper implementation of this API. In other browsers like Google Chrome, Firefox and Safari, it’s been the default since who knows when, so there’s no problem in executing the control in these browsers.

So what are the changes I’m listening to?

Based on my first set of  observations for display-only view:

  1. On the grid’s div tag, the “pagesize” attribute will be changed whenever a column sort occurs.
  2. On the grid’s div tag, the “listrefreshed” attribute will be written and changes when a list refresh occurs.
  3. On the grid’s div tag, the “actiontype” attribute will change when a row editing event occurs.

With these information, my first observer looks like this:

On my second observation on editable view:

  1. The “pagesize” attribute will not be written in the grid’s tag. So I can use this to confirm whether the current grid is an editable view.
  2. Since there’s no paging in an editable list view, the usual attributes in my first observation cannot be used to trigger the observer. From subsequent testing, I also found that there’s no other usable attributes to observe for change. My solution then is to listen to the “Column Headers” change by inserting my own custom attribute. It seems that when changes occur on an editable list view, it will refresh the column headers as well.

This is my 2nd observer for editable list view.

That’s all I have!

Well, as the section header says, that’s all I have learned from developing the List Sequence Number Display control. If you are interested in the codes, you can download it from the project from the link at the top of this post. Enjoy!

Building K2 Smartform Control – Part 3

Now with the previous post, we talk about adding our own custom library and cleaning up the template. This is so that we have a clean baseline to start working on.

If you missed the previous post, visit them here.

K2 Smartform Custom Control – Part 1

K2 Smartform Custom Control – Part 2

This post will be relative short and last part of the series.

Today, we are going to cover the main portion of it and some deployment procedure.

SideMenu_Control.cs

Within, K2 Smartform Custom Control project, located the SideMenu_Contro.cs file.

Add the following codes.

13. Adding method to generate HTML

This is required of the Javascript library to render the html within in the K2 Smartform Custom Control.

SideMenu_Script.js

Add the following codes to SideMenu_Script.js

At the top of the file, add the following.

 

14. Javascript file Init the class

 

Next, scroll to the bottom and add the required javascript to invoke the SideMenu.

 

15. Adding Document.Ready method

 

Testing & Deployment

We are all done now, let’s build it and deploy it.

If you are facing the following errors during your build phase, change the .Net framework of the project to 4.5

Error:

16. Error in compiling

 

Solution:

17. Changing the .Net Framework

Now, copy the dll and place them in the Bin folder of your K2 Runtime and K2 Designer and run the .bat file.

Building K2 Smartform Control – Part 2

Continuing from the previous post on building a custom control, visit Part 1 here.

We are going to add a sidemenu javascript library to the K2 Smartform Control.

I have chosen the following javascript library, you can download it from here.

Add Javascript Library to Solution

Now lets add those library to the solution project.

6. Adding the javascript and CSS library

 

Open up the property windows of those files and set them to “Embedded Resources”

7. Setting the properties to Embbedded Resources

NOTE: This is critical for the K2 SmartForm Control, as this will tell the solution to compile the library along with it.

Linking the Javascript Libraries & CSS in the source code

In the SideMenu_Control.cs, open it up and add the following lines of codes.

8. Adding CSS library to Control source file

 

9. Adding JS library to source file

 

We are not done yet, the above codes only tells to K2 Smartfrom Custom Control that those are required resources.

We are going to add those following JS and CSS to the code base with the following lines.

9.1 Adding JS library to source file

Housekeeping

You will notice that the K2 Smartform Custom Control Template generate a whole bunch of codes for you. In this section, we going to remove some stuff to keep it clean.

SideMenu_Control.cs

Remove the following sections that is generated along with the template.

section 1:

 

10. Remove the Generated Method

section 2:

11. Remove the Generated Method 2

section 3:

12. Remove input type as this not a input control

With that all done, we have a clean baseline to work with.

Go to K2 Smartform Custom Control – Part 3

 

Building K2 Smartform Control – Part 1

K2 Smartform is a rapid development tool that provide a WYSIWYG interface. There’s a lot of plus point to this as this closely resemble the visual studio designer or even dreamweaver and K2 have place alot of thought in the Smartform product design and a whole lot of controls are available out of the box.

However, the downside here is that since the K2 Smartform only work within the K2’s technology ecosystem, to extend the capability of the Smartform such as cooking your own controls or even using those commercially available (e.g. Telerik) are limiting.

In this article, we will be writing a mulit part series to show you guys how to build your own custom control.

Setup

The K2 Smartform is design such that its almost similar to any custom user control on ASP.NET or Sharepoint Webpart in terms of architecture.

To get started building a K2 Smartform custom control, head over to the following url and install the template that the community have release to help everyone get started.

K2 Visual Studio Template

Download the respective template and install for your version of Visual Studio. The “good” guys at the community have cater for different version of Visual Studio.

Getting Started – Creation of the K2 Smartform Control Project Solution

Now, let go about creating a new project. You should have a new category for the option on the left which is named K2.

K2 Visual Studio Project

Expand the K2 and select K2 Extension. Now choose Custom Smartform Control Project and give it a project name.

This should generate a Visual Studio Solution Project for you.

Generating the K2 Smartform Control Files

Let’s go generate some files for the custom control that we are going to build.

Right-Click and select Add New Item.

2. Visual Studio - Add New Item

Choose SmartForms Basic Client Control Item and give it a name. (This should be the name of the control).

3. Visual Studio - Add New Basic Client Control

 

Your Visual Studio Solution Explorer should look like below.

4. Directory Structure

 

Go to K2 Smartform Custom Control – Part 2

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!