User Interface

Learn how to start a grid in the edit mode when a page is loaded

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(180) 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
User Interface
Monday, May 15, 2023PrintSubscribe
How To: Edit Row On Start

The new tutorial Edit Row On Start explains how to write a JavaScript business rule that will activate the inline editor on the “new row” template in a grid. Users can start entering a new data item as soon as the page is loaded.

image1.png
The business rule will select the last page and activate the inline editor on the “new row” template.
Sunday, March 5, 2023PrintSubscribe
Barcodes with Camera and Material Icons 2.0

Code On Time release 8.9.28.0 introduces the new built-in Barcode Reader and enhances Touch UI with the Material Icons 2.0. Other highlights include extended support for apps deployed to a virtual folder in the RESTful API and Offline Sync.

Barcode Reader

The built-in barcode reader uses the device camera to read 1-D and 2-D barcodes. The reader viewfinder can be displayed inline next to the designated fields to allow easy capture of barcode values. The viewfinder is not visible if the field has a value. The built-in Scan form allows scanning barcodes with the optional inventory mode at any time. The UI Automation rules allow complex custom processing sequences in response to the scanned barcodes.

Integrated Barcode Reader makes it easy to scan barcodes into the fields. Custom automation rules are triggered from the standalone Scan form when barcodes are detected and sent for processing.

This is an example of the inline barcode reader viewfinder.

image2.png
The Barcode and Serial Number data fields are tagged as input-scanner in Products / views / createForm1 view. The barcode reader viewfinder is displayed below the Serial Number when the Barcode value is detected or entered directly by the user. If all tagged fields have a value, then the barcode reader will remain inactive until one of the values is cleared.

The standard Scan form is shown next. The form is presented in the fullscreen mode on mobile phones with a small screen. Users have access to the Scan action in the app context menu.

image1.png
Users can enter the hard-to-scan barcodes in the input above the viewfinder. The Inventory Mode toggle allows collecting multiple barcodes. The Clear button will erase all barcodes in the inventory. The Undo button will remove the last detected barcode from the inventory. The Copy icon displayed on the right side of the detected barcodes will copy the entire set to the clipboard. The detected barcodes are sent instantly for processing if the Inventory Mode is not enabled.

Material Icons 2.0

A huge collection of Google Material Icons is now available to developers. Enhance your apps with more than 2,500 icons with the consistent design and exceptional rendering quality on any screen. For example, you can customize the built-in barcode reader with the following images:

image3.png
Make sure to enter the icon name in lowercase with the material-icon- prefix and replace spaces with the dashes. For example, enter material-icon-qr-code to specify the “Qr Code” icon for a custom action.

Bug Fixes and Enhancements

The following bug fixes and enhancements are also included in the release:

  • (Barcode Reader) The built-in barcode reader will display inline below the field without a value when the corresponding data field is marked with the input-scanner tag.
  • (Barcode Reader) The system action Scan is available in the interactive context menu. It will bring up the Scan form that allows scanning 1-D and 2-D barcodes.
  • (RTF) The Rich Text Editor toolbar will appear below the input if the "top" positioning will hide it below the page header or status bar.
  • (UI Automation) Failed to run automation will exit only if there is no pending "if" test.
  • (UI Automation) Fixed implementation of app.inc and app.dec to use the identifier option when calling the app.val method.
  • (Touch UI) The "clear" icon is aligned vertically next to the filter text in the view header.
  • (Touch UI) Method $app.touch.uiAutomation returns 'true' if an automation is in progress.
  • (Barcode Reader) Inline viewfinder is not displayed while the app is executing an automation.
  • (UI Automation) Asynchronous UI automation rule step will show an error and stop automation execution when an error is thrown.
  • (UI Automation) The rejected “if” chain will continue execution of automation if an asynchronous method was rejected without error.
  • (Offline Sync) The theme option is not available in the Settings menu on the offline pages when the app is offline.
  • (Touch UI) The "copy" action is centered vertically in the field with text-action-copy tag.
  • (Touch UI) The default display density on high-definition screens is now set to Compact value. Previously the small high-definition displays activated the Comfortable density. The new standard density is simplifying the upcoming Live Project Designer.
  • (Touch UI) The default density on the low-resolution displays is Condensed.
  • (Touch UI) Latest material icons are included.
  • (Framework) Replace the direct references to the "AppState" item in the context with the reference to the static ApplicationServices.AppState property. It returns the JObject instance representing the application state data when the user must perform a system action such as approving access to the account data for the external app. The user interface is adjusted to provide the minimal features until the application state is cleared. App pages are returned without content.
  • (RESTful) Hypermedia URLs are constructed correctly for apps deployed to the virtual path.
  • (RESTful) Embedding works correctly for the apps deployed to the virtual path.
  • (RESTful) OAuth 2.0 implementation uses the ‘'~/oauth2/v2' endpoint when interacting with the app while users allow or deny access for an external app. This ensures that the protocol will work in the apps deployed to the virtual folders.
  • (RESTful) Method $app.restful uses the serverUrl in the standalone apps to complete the hypermedia links. This enables correct handling of hypermedia produced by apps deployed to a virtual folder.
  • (Data Aquarium) Method $app.cookie removes the trailing '/' when creating cookies in the apps deployed to the virtual folder.
  • (Touch UI) The initialization of UI is performed sooner when the DOM is ready. Previously the UI was initialized after a timeout.
  • (Framework) Pages with data-ui-framework="none" attribute do not link the app.all.min.js script. The minimal set of required JavaScript files is linked instead.
  • (Framework) Serving of addon js/css is now compatible with apps running on the virtual folder.
  • (Offline Sync) An exception raised when synching data will hide the progress screen and show the error message.
  • (Offline Sync) New version 2.0.2.0 is compatible with the enhanced uploading of BLOBs that allows synching with the apps deployed to a virtual folder.
  • (Offline Data Processor) ODP raises the viewfilter.odp.app event on the document object. The event is provided with the odp, controller, and view properties. Developers can handle the event by assigning the value to the filter property of the event instance. This allows creating client-side filters for the views. For example, the following filter will limit the list of suppliers to those located in the United States.
  • (Touch UI) The Search API does not try to load a custom search survey. Both 'Quick Find" and "Advanced Search" appear faster when activated for the first time on the page.
  • (App Gen) Microsoft IIS Express prerequisite check is performed when the UI is about to be shown. Microsoft IIS Express installation prompt is automatically displayed if the software is not installed.
  • (App Gen) MIcrosoft IIS Express location is probed in the machine-specific "Program Files" folder.
  • (Data Aquarium) The event getpagecomplete.dataview.app is raised on the document object when the data is received by a DataView instance. Custom apps can customize the client-side properties of the response to alter presentation before it is processed on the client. Event object properties dataView and response provide access to the context of the event. Developers can assign an instance of the Promise object to the event object promise property if the additional information needs to be acquired asynchronously from the external source before the DataView instance is allowed to process the 'response'
  • (Data Aquarium) Fixed the incorrect loading of "also" resources when $app.getScript is called.
  • (Touch UI) Tag the lookup field or DataView field as view-selector-remember-none to force the app to forget the last view that was selected by the user on the page. The first view will be selected when the same form is displayed.
  • (Touch UI) Tag the lookup field or DataView field as view-style-remember-none' to force the app to forget the last view style that was activated by the user on the page. The default view will be selected when the same form is displayed.
  • (Framework) Class AppResourceManager will suppress exceptions when trying to read a non-existing resource if the app's namespace is FreeTrial. This allows creating apps without membership with the Free Trial of Code On Time. Previously an exception was raised.
  • (Framework) Added the missing "Actions" enumerator value for the 'style' attribute of lookups to the DataAquarium.xsd.
Sunday, October 16, 2022PrintSubscribe
PWA, Device Authorization Grant, Many-To-Many Input

Progressive Web Apps

Code On Time release 8.9.25.0 produces Progressive Web Apps. Support of PWA specification makes an app installable on Android, Chrome OS, Mac OS, and Windows directory from the supported browsers. Deployed apps are ready to be packaged and published to all major app stores. Each app now has its own “beating heart” - the service worker. This script is installed by browsers when the app is loaded. The installed worker will cache the app resources using the “cache busting” technique supported in the server-side framework. A tiny change to a script, stylesheet, or font will cause the cache to refresh. This ensures the correct set of client files both in the online and offline modes.

Applications created with Code On Time will greet users with the prompt to install the app and experience the native mode. Deployed apps are easy to package and publish to app stores.
Applications created with Code On Time will greet users with the prompt to install the app and experience the native mode. Deployed apps are easy to package and publish to app stores.

Learn how to preview and debug an installed application.

OAuth Device Authorization Grant

Device Authorization Grant flow further extends the opportunity to find new ways to integrate applications created with Code On Time in the everyday life of their users. RESTful API Engine turns an application into a powerful backend for custom clients. Built-in Device Authorization flow will future-proof the app by making it possible to integrate the application with the smart devices.

"Cool Gadget" sample demonstrates the Device Authorization Grant flow available in the applications created with Code On Time. Users can safely authorize the 3rd party devices to access the user data and identity information.
"Cool Gadget" sample demonstrates the Device Authorization Grant flow available in the applications created with Code On Time. Users can safely authorize the 3rd party devices to access the user data and identity information.

Many-To-May Data Input And Search

Tagging is the populate user interface feature that allows setting up the many-to-many data relationships between data records in the database with the minimalistic input. This feature has been a part of the framework in the foundation of apps created with Code On Time for many years. The new release finally makes it possible to filter and search the many-to-many fields, which is not as simple as it may seem at the first glance.

Many-to-many data input is the standard features of the apps created with Code On Time. Users can also filter and search data records by entering multiple tags that must be linked to the items in the output.
Many-to-many data input is the standard features of the apps created with Code On Time. Users can also filter and search data records by entering multiple tags that must be linked to the items in the output.

Release Notes

The following features, bug fixes, and enhancements are included in the release:

  • (PWA) Apps now installable.
  • (OAuth2) Device Authorization Grant flow is now supported.
  • (Framework) Many-to-Many support is fully implemented.It is now possible to filter and search the many-to-many fields.
  • (Framework) Requests with the XML content type will ignore the whitespace and DTD links. The latter eliminates the possibility of a "blind" XML External Entity (XXE) Injection.
  • (Touch UI) A click on the checkbox in the grid will execute an update of the row with all field values of the row. Previously only the primary key and the toggled field were included. The new behavior ensures that the business rules on the server will have a consistent set of field values to work with.
  • (Reports) Action ReportAsExcel will produce the output in OPENXML format. The file extension is *.xlsx.
  • (Reports) Action ReportAsWord will produce the output in OPENXML format. The file extension is *.docx.
  • (Framework) YamlDotNet 11.2.1 is included in the library.
  • (Framework) Newtonsoft.JSON 13.0.1 is included in the library.
  • (Touch UI) Position of the context menu on the toolbar is shifted by 4px away from the edge of the screen.
  • (Touch UI) The default display density is derived from the physical screen size.
  • (Touch UI) Input focus will activate the tab containing the focused field even if it was not in the "edit" mode prior to the focus.
  • (Touch UI) Progress indicator has the "accent" color. Previously it was always blue.
  • (Touch UI) Theme selector switches UI to the "busy" mode during the theme preview.
  • (Touch UI) New "Reset" option is available in Settings|Theme menu. The option is available if the user has selected a theme in the past.
  • (Touch UI) Updated icons for "grid" and "cards" view styles.
  • (Touch UI) Top 5/10 options in the advanced search do not raise exceptions. The list of top 5/10 lookups is presented to the user for selection.
  • (Touch UI) Event handler context.app can inspect context.isMenu property to determine if the context options will be displayed in the context menu in response to the interactive request by the user.
  • (Touch UI) Labels with the blank header are marked with data-hide-when="wrap" attribute. The physical presence of the label allows adaptive hiding of the label when the content is wrapped.
  • (Touch UI) Login prompt displays the "Login" next to the icon on the toolbar when the form is displayed in fullscreen mode.
  • (Touch UI) New theme processing compatible with PWA mode.
  • (Framework) Account Manager persists the fixed number of user properties (name,email, access_token,refresh_token,claims). The user avatars are served in JPEG format.
  • (Framework) The new class AppResouceManager performs production of cacheable client resources.
  • (Framework) Method TextUtility.ToMD5Hash(string) will produce a hash of the string parameter.
  • (PWA) Method $app.getScript uses the app manifest information to download the dynamic scripts.
  • (RESTful) Fixed the bug in processing of PATCH requests.
  • (Touch UI) Click on the icon of the ui-disabled item will not trigger the "vclick" on the item.
  • (PWA) Method UserHomePageUrl() determines the 'start_url' in the manifest.
  • (Framework) Method DataCacheItem.SerializeRequest allows custom serialization of the request object. Override the method to use additional request data such as the request domain.
  • (Framework) Details are synced even when the external filter is not defined on the child data view.
  • (RESTful) Enhanced validation of "sort" parameter.
  • (RESTful) ASP.NET session is removed when the embedding engine is resolving the links.
  • (RESTful) Embedding engine calculates resource tags for faster embedding of the object resource. The links of previously fetched resources are used in place of the duplicates.
  • (RESTful) Embedding will timeout at 60 seconds or when the execution exceeds the option server.rest.timeout specified in touch-setting.json configuration file.
  • (RESTful) Robust refreshing of the page with the ".oauth2" cookie set upon receiving the authorization URL request. Simple 302 with Response.Redirect will not set the cookie on the domains other than localhost when running in Microsoft Azure.
  • (RESTful) Virtual on-demand fields specified in the body are ignored.
  • (RESTful) The "Detailed" HTTP error mode is enabled to allow RESTful error reporting in the apps hosted in Microsoft Azure.
  • (Runtime) Content types application/json and application/x-yaml are added to the mime map in web.config. This will ensure property recognition of JSON and Yaml file types on hosting services such as Microsoft Azure.
  • (RESTful) Configuration file web.config removes status codes 400, 401, 403, 404, 412, 4122, and 500 from HTTP error reporting delegated to the host web server. This allows custom JSON responses from the RESTful API of the apps deployed to Microsoft Azure and other hosting platforms.
  • Cloud On Time app for iOS, Mac, and Windows is retired and replaced with the PWA support in the generated apps. Applications are installable from the browser on the supported platforms. Deployed applications are ready to be packaged and published to the app stores.

Coming Soon

Offline Sync

The all-new Offline Sync Add-On is coming next. It will be compatible with the Progressive Web Apps support in the framework. The licensing will change as follows:

  • Perpetual use with 12 months of maintenance updates
  • Sold is multiples of ten users
  • Bound to the domain name and “localhost”
  • New lower pricing

Online apps that do not require the offline/disconnected data will benefit from the enhanced ability to operate when there is no network. If the app is installed on the device from the browser or as the native app, then the pages will be pre-loaded in the local cache for the improved user experience.

Live Project Designer

The next implementation target is the Live Project Designer described in the Roadmap. We are running behind our original schedule but the goal remains the same - make the app development process with Code On Time intuit and simple.