Blog: Posts from May, 2012

The Advanced Search Bar allows the user to combine specific search parameters in order to find data. When the search bar is first opened, the first three data fields in the grid view are displayed.

The end user can change the filter field using the field name dropdown. By default, all data fields that exist in the grid view are searchable. The user can be forced to enter a value in some search fields, while other fields may be suggested as additional options when the search bar opens for the first time. Users can also be prevented from searching by specific fields.

Start the Project Designer. Right-click on Customers / container1 / view1 / grid1 view node, and click Show All Data Fields option.

Make the following changes to the list of data fields:

Save the data fields, and select Browse on the tool bar to regenerate the web application.

When the browser window opens, navigate to the Customers page and open the advanced search bar. The data fields with Search Mode of “Required” or “Suggested” will be displayed initially.

The first field is required, and cannot be changed.

If a search is performed without entering a parameter into required Company Name field, the user will be informed that the field is required.

Fields marked as “Forbidden” are not displayed on the list of fields available for search.

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.

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.

Give this field the following properties:

"Employees"."EmployeeID"

<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.

Use the following values:

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.