Monthly Archives: September 2015

Technical

Use SmartObject upload file to SQL

2 Comments

K2 SmartObject can read and store files into SQL table via its File property. Files to be stored into SQL table will be automatically converted to base64 encoded string and when retrieved from SQL, it will be automatically converted back to binary.

In this article, we will see how to setup and use SmartObject upload file to SQL and test the function in  K2 smartforms.

Use SmartObject upload file to SQL

  1. We start by setting up the SQL table. The column that will be storing the file content will be created as a nvarchar(max) type.Create table and file content column
  2. If the Service Instance to the SQL database (in this case “FileUploadTest”) has not been created yet, create it. If the Service Instance already exists, refresh the Service Instance. Make sure the new table and its properties are available.Create or refresh Service Instance
  3. Right-click on the [dbo].[FileUpload] Service Object and select Create SmartObject.Create Smart Object function
  4. Give the new SmartObject an appropriate Name and click on Publish SmartObject. Create the file upload SmartObject
  5. You should find the SmartObject at the Category it is created above.
    The created FileUpload SmartObject
  6. Next, find the SmartObject in K2 Designer and Edit it. Edit the SmartObject in K2 Designer
  7. Select the property that is supposed to hold the file content (i.e. fileContent in this case) and click on the Edit button.

    306-step7
    Edit the SmartObject’s fileContent property
  8. Now, this is the most important step. Change the Type to File and click OK. Change the fileContent property type to File
  9. Lastly, Click Finish to complete editing the SmartObject and you are done.Click Finish to save

Testing

  1. Now, to test the SmartObject, we will use the Generate View feature. Right-click on the SmartObject and select Generate Views.
    Generate the View from the FileUpload SmartObject
  2. Select the checkbox under Item and click OK. This will generate an Item View. Select to create an Item View
  3. Select the newly created Item View and click on Run. Run the generated View
  4. In the form, fill in the file Name, select a file in file Content field and click Create. This will create the record in SQL. Try create a record
  5. Take note of the generated ID field value and check against the SQL table created earlier. You will find the newly created record with the file content. Verify that the record is created in SQL
  6. To verify that the file was indeed saved successfully into the table, refresh the View used earlier, fill in the ID field value and click on Read button to load the file. Click on the file to download it and make sure it can be open in the appropriate application. Use the View to download the file to verify that it's working as expected

And that’s all on how to use SmartObject to upload file to SQL.

Have fun!

K2 smartforms Custom Control, Technical

Building K2 Smartform Control – Part 3

2 Comments

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.

K2 smartforms Custom Control, Technical

Building K2 Smartform Control – Part 2

Leave a comment

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

 

K2 smartforms Custom Control, Technical

Building K2 Smartform Control – Part 1

Leave a comment

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