K2 SmartForms

How to display an image from a database on a K2 SmartForm

The out-of-the-box K2 SmartForms image control is a great control to use for rapidly assembling a form that displays a K2 SmartForm image.  The challenge is that a typical business requirement requires the image to be loaded from a database other than the K2 database.  Furthermore, the image that is required to be displayed needs to be based on a specific context – a user’s login name for example.

In this post I describe how to display an image from a database on a K2 SmartForm by creating a simple form that displays a user’s profile picture when they log into the K2 SmartForm system.

The first thing to do is to create a sample database and table that will contain the users’ images and other details – i.e. their usernames.  The username is used to query the database and retrieve the correct profile image to be displayed based on the logged in user’s name.

k2 smartforms database image

1 – Create a new Profile Images table

Next, the database is populated with some sample user data; each record has a base 64 encoded version of their profile picture as well as their user name.

2 - Insert Base 64 Profile Images for each User

2 – Insert Base 64 Profile Images for each User

The next step is to register a new K2 SQL Server Service Instance that points to the database that contains the users’ data.  After this, the K2 SmartForm that is used as the data access object to the data source is generated –

k2 smartforms database image

3 – Create a new SQL Instance and genarate Profile Image SmartObject

The next step is to construct the sample MyProfile page that contains an image of the current logged in user and their username.  Notice an additional hidden K2 data label is also dragged onto the form.  The purpose of this control is to house the base 64 image string that is leaded from the database.  This in tern is used in an expression to construct a “<img src=””> HTML tag

4 - Create a new K2 SmartForm Profile Page

4 – Create a new K2 SmartForm Profile Page

The screenshot below shows the configuration of the expression

5 - Create a image src expression and map the base 64 data

5 – Create a image src expression and map the base 64 data

The next step is to set the expression on the actual image K2 data label (the one that is on the right hand side of the K2 SmartForm above).  The idea is that when the base 64 control is populated with data, the expression created the image HTML tag and the image display.

The final step that is missing is loading the image from the database.  For this, we configure the SmartObject we configured above to load – we pass the User Name into the method to ensure the logged in user’s Profile Picture is returned

6 - Populate the Base64 Image Text control

6 – Populate the Base64 Image Text control

The output mapping maps the base 64 output to the hidden control and the image renders when the form is loaded by the user.  The screenshot below shows the various user profile pictures that displays when separate users log into the system

7 - Various User Profile Pictures based on the User Login Name

7 – Various User Profile Pictures based on the User Login Name

About Velocity

Velocity IT is a highly experienced K2 partner that specialises in the design and development of K2 blackpearl, K2 workflow and BPM systems.  For more information, please Velocity IT home page

k2 smartforms database image

You may also like

Leave a comment

PODCAST  |  Why you need to establish a K2 Center of Excellence today

Interview with Arno van Rooyen, CEO, Velocity