Blog: Posts from May, 2012

Wednesday, May 30, 2012Print Subscribe

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:

Field Name	Search
CompanyName	Required
ContactName	Forbidden
ContactTitle	Forbidden
Address	Suggested
City	Suggested

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.

Labels: Designer, Security, User Interface, Web App Generator

Wednesday, May 30, 2012Print Subscribe

Using Data Format String to Display Images

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:

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	"Employees"."EmployeeID"
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.

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.

Labels: Tips and Tricks, User Interface, Web Application Generator

Friday, May 25, 2012Print Subscribe

Show Action Bar

The action bar is at the top of every view, and allows the user to access Advanced Search Bar, Quick Find, and various actions within “Action Bar” scope.

You may want to hide the action bar in certain situations.

Start the Project Designer. In the Project Explorer, double-click on Employees / container1 / view1 data view node.

Change the following properties:

Property	New Value
Show Action Bar	False

Press OK to save the data view, and click Browse on the tool bar.

Navigate to the Employees page. The action bar is no longer displayed. Users can still create, edit, and delete records using the context menu on each row.

Labels: User Interface, Web Application Generator