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!

Leave a Reply

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