Calculating Read-Only Fields with JavaScript

Labels
AJAX(112) App Studio(7) 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(177) 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(8) OAuth Scopes(1) OAuth2(11) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(10) PKCE(2) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(179) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(80) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) 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
Thursday, November 29, 2012PrintSubscribe
Calculating Read-Only Fields with JavaScript

When storing personal information, it is common practice to enter first and last name separately into the database. However, it is easier to quickly read and analyze data that combines the two fields into one.

Let’s create a Full Name calculated field in the Employees controller that will concatenate First Name and Last Name field values.

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

New Field context menu option for Employees controller in the Project Explorer of web application designer.

Give this field the following settings:

Property Value
Name FullName
Type String
Length 80
Allow Null Values true
The value is calculated by a business rule expression true
Label Full Name
Values of this field cannot be edited true

Press OK to save the field.

In the Project Explorer, drag Employees / Fields / FullName (String(80), read-only field node and drop it onto Employees / Views / createForm1 to create a data field.

Dropping 'FullName' field node onto 'createForm1' view.     FullName data field created in 'createForm1' view.

Right-click on Employees / Fields / FullName (String(80), read-only node, and press Add JavaScript Converter.

'Add JavaScript Converter' context menu option for FullName field node.

Double-click on Employees / Fields / FullName (String(80), read-only node, and change the Context Fields property:

Property Value
Context Fields FirstName, LastName

The new business rule will open in the Project Browser. Replace the default script with the following:

Property New Value
Script
if ([FirstName] != null && [LastName] != null) {
    [FullName] = [FirstName] + ' ' + [LastName];
}

Press OK to save the business rule. On the Project Browser toolbar, press Browse to generate the web application.

Navigate to the Employees page, and create a new employee. The Full Name field is displayed at the bottom of the form, and is read-only. If a value is entered into First Name, the field will not be updated.

Full Name field is present at the bottom of New Employees form.

Enter a value in both First Name and Last Name, and press Tab key to shift focus. Full Name field will automatically be calculated.

When first and last name are entered, Full Name field value is calculated.