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
Tuesday, May 3, 2011PrintSubscribe
SQL Anywhere Web Applications in Minutes

Code On Time announces support for SQL Anywhere 12.  Generate powerful user-friendly line-of-business web applications straight from SQL Anywhere 12 databases with Microsoft Office look and feel. The following instructions are written with an assumption that you have installed SQL Anywhere software on your computer.

image

INSTALLATION

Download the code generator at http://codeontime.com/download.aspx. The installation program will also install Microsoft.NET 4.0, IIS Express 7.5, and Microsoft Report Viewer 2010. These components are available at no cost and fully supported by Microsoft.

The code generator will use IIS Express to run generated web applications on your computer. It can be installed alongside the production version of IIS available in several versions of Microsoft Windows.

The report viewer component will render will render dynamically created reports in PDF, Word, Excel, and TIFF formats.

Follow installation instructions and click on Code OnTime Generator shortcut created on the desktop after installation.

GENERATING AN APPLICATION

Start new Web Site Factory project and enter SQL Anywhere Demo as the project name.

Click Next until your reach Data Connection page in the project wizard.

Select SQL Anywhere option in data provider and enter the following connection string.

userid=dba;password=sql;

image

Enable dynamic and static reporting in your project.

image

Click next and you will see Authentication and Membership page of the project wizard.

Follow instructions at /blog/2011/05/sql-anywhere-membership-configuration.html to configure ASP.NET Membership in your database.

Select the check box titled “Enable support for ASP.NET Membership with membership bar user manager”.

Select the check box “Membership will use a standalone database that already exist”. Select SQL Anywhere option in Provider Name.

Enter the same connection string

userid=dba;password=sql;

You can also point the connection string to another SQL Anywhere database to store ASP.NET membership data that can be shared between multiple projects. Make sure that configuration of the database has been performed prior to generating the application.

Click Next several times until your see a list of data controllers created from your database.

image

Now you are ready to generate an application and see it in action.

Click next and wait for the application to be displayed in your web browser. If the browser page comes out blank then simply give it a few moments and hit Refresh button. This may happen if your computer is busy and IIS Express is still getting ready to start the generated web application.

You should see the screen similar to the one in the picture.

image

USING GENERATED WEB APPLICATION

Make sure to keep the code generator running. Code On Time will automatically shut down the started IIS Express instances if you close the web application generator window.

Sign-in using one of the user accounts automatically created by application.  We suggest that you sign in as admin / admin123% . This user account is authorized to see the membership manager.

Click around and play with the generated pages.

Here is the screenshot of the Customers page if you select a customer record. Master record is shown in edit mode with the detail records tabbed at the bottom. Several other standard page layout are available. You can use the project Designer to create custom layouts. Click on the link to see an example of a custom Order Form.

image

Note that detail records can be edited in modal forms if you are using a commercial edition of the web application generator.

image

Here is the screen shot of the Products page display in Data Sheet view that allows spreadsheet-style editing of data. Data Sheet view does not require any external components and is available in Premium and Unlimited editions of Code On Time.

image

Select Report | Adobe PDF option from the action bar of any grid or data sheet view and take a look at PDF printout of your data with custom filters displayed in the report header.

image

Select Actions | View RSS Feed and subscribe to the feed to be notified by your RSS feed reader when new movies with the filtering criteria become available. How needs email anymore?

image

Try some cool data analysis features that allow extending your application and data to the end-user desktops enabling safe and efficient data delivery to business users.

Select Actions | Export to Spreadsheet to export data for analysis.

image

A prompt will show up to warn you that some data is being downloaded. Internet Explorer 9 and other major browser display a prompt at the bottom of the screen.

image

Press Open button to open the file. This will start Microsoft Excel. You will see a warning about potential security concern.

image

We are downloading data from our own application – there is no risk involved. Press Enable button to continue.

The data will be downloaded into a new Worksheet. You may be asked to identify yourself. Enter admin/admin123% or any other valid user account registered in the application membership database.

image

Select Insert on the ribbon and click PivotTable button.

image

Confirm the creation of a data range.

image

Now you are good to go. Here is the pivot view of the sales order items that shows distribution of product sales by employees. With a few clicks add a Pivot Chart for added impact.

image

Within minutes business users can make sense of their data and have amazing dashboards built in the tool they know best –Microsoft Excel.

The data feed embedded into the spreadsheet is live. Users can save the spreadsheet on the hard drive.

To refresh the data users can open the spreadsheet and select Refresh button on the Data tab of the ribbon.

image

Users will be prompted to re-enter the user name and password. The user’s identity will be verified against the database and the data feed will be refreshed.

Conclusion

Within minutes you can turn your SQL Anywhere 12 database into interactive treasure trove of data that can be placed on Internet or Intranet server.

Other available database connectivity options are MySQL, Microsoft SQL Server, and Oracle.

Review code customization techniques at http://codeontime.com/tutorials.aspx to learn how to use application designer to enhance the application and how to write custom business rules if the standard features of the generated application need to be enhanced.

Wednesday, April 27, 2011PrintSubscribe
Data Sheet Enhancements

The following enhancements and bug fixes were introduced in the latest update.

Miscellaneous Improvements

  • Search bar is correctly displayed if activated on start in browsers other than IE.
  • Firefox bug preventing creation of lookup items in-place has been fixed.
  • Core CSS enhancements to improve support for IE 9 and enhance quality of the data sheet rendering
  • Several new resource constants in Web.DataViewResources.js to support new functionality in the data sheet view.

Data Sheet

Summary of data sheet enhancements.

  • Menu “Actions” in the action bar will feature “Show in Data Sheet” or “Show in Standard View” option if your application has been produced by Premium or Unlimited edition. These new options are executing actions with Data Sheet and Grid command names, which causes switching between data sheet and standard grid view.   
     
    See the Data Sheet view in action at http://codeontime.com/demo.aspx.
     
    image
    image
     
  • Data Sheet view now display an arrow pointer in the gap column to indicate the row that is currently selected in the view. The focused cell may be positioned in any row. The selected row is designated by the arrow. Any linked child data views are filtered to match the primary key of the selected row.
     
    image
     
  • Several bugs related to keyboard handling were fixed. Pressing Enter key while working in the child data sheet with the master form would have caused erratic selection of buttons in the master form.
  • User can start creating a new row in the data sheet by pressing Insert key or navigating past the last row in the data sheet view.
  • User can end editing an existing or entering a new row by pressing Tab or Enter key while in the last column of the row. Tab key will cause automatic creation of a new row if the current row has been persisted successfully. Enter key will leave the selection focus on the last focused column.
  • Empty data sheet view offers a link to enable instant creation of new rows. Users can click on a link to start creating a new row.
     
    image
    image
  • User can press Ctrl+Delete keys to delete the row with the current focus in the data sheet.
  • User can press Ctrl+Space to select a a row if multiple-row selection is enabled in the data sheet.
  • Pressing Tab or Shift+Tab key in edit mode will skip the read-only cells.

Next Update

The upcoming update will introduce the long awaited enhanced file upload/download processing to allow capturing file name, size, and content type. 

Monday, April 25, 2011PrintSubscribe
Date and Time

Code On Time supports extended date and time shortcuts and allows independent entry of data and time components of a single database table column.

The following screen shot shows the Northwind.dbo.Orders table presented in a Web Site Factory applications generated with Code On Time database web application generator.

image

Three “date-time” columns Order Date, Required Date, and Shipped Date are configured with different Data Format String property.

Field Name Data Format String Description
Order Date

d

Standard format string applied to Date Time fields. This is the default value if no data format string is specified. The alternative format is {0:d}
Required Date

g

Date and short time format. The alternative value is {0:g}
Shipped Date

{0:G}

Date and long time format with hours, minutes, and seconds. The alternative value of the data format string is G.

Select any data row and click Edit button. You will see that the time component of the Date-Time fields with “g”, “{0:g}”, “G”, or “{0:G}” data format string is displayed in a separate box. The application in the screen shot is configured with culture and UI culture set to “en-GB”.

image

Date and time input boxes support various shortcuts that allow entering the data quickly.

For example, if you type the following value in the designated input then the value will be automatically converted in a legitimate data time format. The result values for “named” samples are calculated on April 25, 2011.

Sample Input Result
280273 Date 28/02/1973
2802 Date 28/02/2011
tuesday Date 26/04/2011
Fri Date 29/04/2011
su Date 01/05/2011
25-apr Date 25/04/2011
28022012 Date 28/02/2012
1:20 Time 01:20
1,15pm Time 13:15

The input conversion is done just-in-time. The conversion code will use the culture settings of the application and will handle shortcuts that work for the application locale.

The same behavior is exhibited in Grid and Data Sheet views.

image

End users will surely appreciate the handy shortcuts and a wide range of method of entering date and time field values.

Continue to Data Sheet View