User Interface

Labels
AJAX(112) App Studio(9) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(178) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(184) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(3) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
User Interface
Sunday, July 14, 2013PrintSubscribe
Watermark Property

A common practice when developing web applications is to display placeholder text in a field to indicate the expected input to the user. Let’s implement a watermark on the Order Details create form of a sample Northwind web app.

Start the Project Designer. In the Project Explorer, double-click on Customers / Order Details / container1 / view1 (OrderDetails, grid1) / createForm1 / c1 – New Order Details / UnitPrice data field node.

UnitPrice data field in createForm1 of OrderDetails controller.

Make the following change:

Property Value
Columns 30
Watermark Please enter a price per unit for this order.

Save the field. On the toolbar, press Browse.

Navigate to the Order Details page, and create a new record. Note that the watermark is displayed in the Unit Price field.

Watermark text is displayed inside the Unit Price field.

When a user starts entering a value in the field, the watermark text disappears.

The watermark text disappears when the user enters a value.

Monday, June 17, 2013PrintSubscribe
How to Configure CKEditor

Client library uses HTMLEditorExtender control to provide rich text editing capabilities. The rich text editor can be enabled for a data field using the Text Mode property. The picture below shows rich text editor enabled on the Description field of Categories controller.

Default Ajax Control Toolkit rich text editor control.

The popular open source WYSIWYG text editor CKEditor can be enabled as a replacement.

First, download a copy of CKEditor. There are multiple versions with different features and licensing terms that can be downloaded at http://ckeditor.com/download. Every download package contains “ckeditor” folder. Extract the folder to the root of your project output.

Copying the ckeditor folder into the project folder.

Deployment with Web App and Azure Projects

Note that for Web App Factory projects, the folder must be copied to WebApp folder. Azure Factory projects must have the folder placed in WebRole1 folder.

Copying the ckeditor folder into the 'WebApp' folder of a Web App Factory project.

In addition, Web App and Azure Factory projects must have the folder included in the solution to ensure that ckeditor is published along with the application files. The following instructions explain the process.

Click on the project name on the home screen of the generator and press Develop to start Visual Studio.

At the top of Solution Explorer, click on Show All Files.

Activating 'Show All Files' button in the Solution Explorer.

Right-click on the ckeditor folder that appeared and press Include In Project.

Including the ckeditor folder in the project.

On the menu, press File | Save All to save changes.

Regenerating the Project

Switch back to the app generator. Proceed to regenerate the web application. The generator will detect the presence of the ckeditor folder and automatically reconfigure the code to link ~/ckeditor/ckeditor.js to the pages. The client library will use CKEditor for rich text fields when the corresponding JavaScript type is available.

Navigate to the Categories page, and start editing a record. CKEditor will now be used instead. The example below shows CKEditor 4.1.2 Standard.

CKEditor control has replaced the standard rich text editor control.

Note that if you are trying multiple versions of CKEditor to preview its capabilities, make sure to clear the browser cache every time the files are replaced.

Friday, June 14, 2013PrintSubscribe
Customizing the Footer

The footer is displayed at the bottom of every page in a web app. The text will display a standard copyright message by default.

Default footer copyright text displayed at the bottom of the page.

Let’s customize the footer content.

Changing the Footer Text

Start the web app generator and click on the project name. Select Settings, and click on Features. In the Copyright text box, enter the following:

Property New Value
Copyright
&copy;<b> Code On Time LLC</b> All rights reserved.

Press Finish, and then press Generate to continue regenerating the web app. Notice that the new copyright message is displayed.

The customized footer content displayed at the bottom of the page.

A custom user control may be used when more complex or dynamic content is necessary.

Placing a Custom User Control in the Footer

In the Project Explorer, right-click on Customers / page container node, and press New Control.

Creating a new control in the 'page' container.

Next to the User Control lookup, click on the New User Control icon.

Creating a new user control.

Assign a name to the new user control:

Property Value
Name CustomerFooter

Press OK to save the user control. Press OK to add the control to the Customers page.

Right-click on Customers / page / control1 – CustomerFooter control node, and press Rename.

Renaming the 'control1' control on the Customers page.

Change the name to “footer” and press Enter key to apply the change.

The name of the control has been changed to 'footer'.

On the toolbar, press Browse. Notice that the user control has replaced the footer content.

The user control has replaced the footer content.