Data Controllers / Fields / Data Format String


Table of Contents
Data Controllers / Fields / Data Format StringPrint||

Data Format String can be used to produce any custom HTML markup in place of a data field. For example, you can create an img tag that uses field values to reference static images stored elsewhere. Suppose that the Northwind sample application has an Images folder that contains images of each employee. The file name of each image not counting the extension is the same as the EmployeeID.

Images folder containing images of all employees with file name matching the EmployeeID.

Let’s create a calculated field that will display the image from the folder.

Start the Project Designer. In the Project Explorer, switch to Controllers tab. Right-click on Employees / Fields node, and select New Field.

Create New Field for Employees controller in Project Explorer.

Give this field the following properties:

Property Value
Name PathToImage
Type String
Allow Null Values True
The value of this field is computed at run-time by SQL expression. True
SQL Formula
Label Image
Values of this field cannot be edited True
HTML Encoding False
Data Format String
<img src="../images/{0}.png" style="width: 100px; border-radius: 10px;"/>

The Data Format String property references the value of the field as {0}.

Press OK to save the field. In the Project Explorer, right-click on Employees / Views / grid1 view node, and click New Data Field.

New Data Field in grid1 view of Employees controller.

Use the following values:

Property Value
Field Name PhotoPathImage

Press OK to save the data field, and click Browse on the tool bar to generate the web application.

When your default web browser opens, navigate to Employees page. There will be an Image column that displays the images from the external folder.

Image field displaying the photo from the external folder.