Blog | Forms, Reports, Apps. Build and deploy rapidly. Use offline, online, on-premises.

Blog

Monday, January 25, 2021Print Subscribe

Code On Time release 8.9.14.0 delivers the built-in Reading Pane and enhanced Calendar view style with the support for drag & drop of events on touch-enabled devices.

Reading Pane enhances the productivity of the end users and requires zero programming. Users can interactively enable the reading pane in the view selector. Develops can enable the reading pane on the specific pages by default. Touch UI will ignore the developer settings on the smaller screen and provide the traditional full screen or modal popup style of presentation for the selected records.

Dragging of calendar events in the master pane will sync the date in the form presented in the detail pane. All-new software breakpoints adjust the calendar fonts and presentation in response to the changes of the screen size. The color map of the Agenda mode is now presented on the sidebar. Developers have an option to implement a handler for getcolormap.calendar.app event to provide a custom color map.

This new version of Touch UI displays the drop down menus of the navigation system by aligning them with the corresponding parent menu item. Buttons and drop downs in the toolbars are now perfectly aligned. The new "modern" vertical scrollbars auto-expand when the user is hovering over the bar.

The following features and enhancements are includes in the release:

(Touch UI) Form buttons are no re-rendered in the reading pane detail or when the reversed order is enabled (Chrome OS, Mac OS). Previously this has required pushing the Save button twice if the input box value has changed.
(Touch UI) Form buttons support icons if ui.actions.form.icons option is set to true in ~/touch-settings.json.
(Data Aquarium) SelectedValues array is consistently passed to the server-side code in single/multiple selection modes when the newly created row is the target of the command. Previously the array was blank if a new row was created and an command to delete the row is executed.
(Classic UI) Menu bar does not disappear upon post back in custom user controls implemented with ASP.NET controls.
(Calendar) Re-worked the breakpoints for all modes. The software breakpoints are being used instead of media queries.
(Touch UI) Enhanced the algorithm of the vertical scrollbar visibility determination.
(Calendar) Timeline is themed with accent the color in Day/Week/Agenda.
(Touch UI) Fixed the background/text colors of tabs in several accents.
(Calendar) Event "getcolormap.calendar.app" is raised on the documents . The event has dataView, colorField, and colorMap properties. Assign custom class names to specific properties in the map to create custom "color legend" for the calendar.
(Calendar) Color map is supported in Agenda mode.
(Calendar) Dragging of the event will update the corresponding record in the detail of the reading pane.
(Touch UI) Scrollbar width in touch mode is not at 3px.
(Touch UI) Added a color stub to prevent the incorrect rendering of the app toolbar border in Firefox on displays with the high DPI.
(Calendar) Touch and mouse drag & drop of dates is fully supported in Day/Week/Month modes.
(Touch UI) Fixed. Previously the changing of theme in the settings by the user has blocked the user's ability to close the panel when the animation of the theme/accent change was in progress.
(Calendar) Month/Year buttons in Month/Year/Agenda views are compact.
(Calendar) Fix the issue with "day" mode navigation to the next week.
(Calendar) Right-click on the event will position the popup at the pointer. Previously the menu was centered.
(Calendar) Increased the radius of the selected dat in the day/week mode in the toolbar header.
(Calendar) Enhancements to the calendar mode tabs visibility detection algorithm.
(Calendar) Changing the calendar mode (tab or drop down) will cause the data fetching when needed.
(Calendar) Month/year labels have an accent color in Month/Year/Agenda modes.
(Calendar) Right-click on the day outside of the month boundaries will not display the browser context menu.
(Calendar) Weekends in the month mode of dark theme have a muted background color.
(Calendar) The calendar mode selector does not overlap with the mode tabs. Tabs are hidden if it is not possible to fit them in.
(Calendar) Inline-editing actions (Edit Item and New Item) are not displayed in the context menus in the calendar mode.
(Calendar) Right-click in any area of the calendar event (time or text) will cause the context menu to display.
(Calendar) Right-click on the non-data elements of the calendar surface will not cause the browser context menu to display.
(Calendar) Dragging of events will preserve the vertical scroll position of the calendar.
(Calendar) Primary list of records is not revealed by the presenter when the partial reload is executed. Previously the dragging of events on the calendar has revealed the list/grid.
(Calendar) The dragging of of events in Day/Week mode will not trigger the excessive click event.
(Calendar) The empty gap is not created when the user is switching from Month/Year/Agenda to Day/Week mode.
(Touch UI) Modern scrollbar style are now supported with mouse pointers.
(Touch UI) Scrollbar auto-expanding on mouse hover works with both normal and wide scrollbars.
(Touch UI) Option ui.scrollbars.expand controls if the scrollbars are automatically expanded on hover when the mouse is moved over the scrollbar to make it easier the scrolling. The default value is true.
(Inline Editor) Multiple selection changes are synching the editor frame to prevent incorrect positioning when rows are selected and the message header text is wrapping.
(Touch UI) Inline editor mode icon is fully visible in the grid header on Firefox.
(Touch UI) Inline editor activation will instantly hide the notification if visible to prevent screen shifting and improve the user experience.
(Calendar) Perfected the vertical positioning of calendar view controls.
(Touch UI) Mouse-driven GUI will memorize the "desktop" mode on touch-enabled devices.
(Touch UI) Main menu items are underlined on hover with mouse pointer.
(Touch UI) Removed the "bad pixel" in the menu button with mini-sidebar.
(Inline Editor) Lookup "arrow" button is positioned with the correct offset from top in inline editing mode.
(Touch UI) Mouse click on the navigation meu options with children while the detail pane is active will active the master and cause the click to perform.
(Touch UI) Navigation menu popup will not include the item itself unless activate with a touch.
(Touch UI) Mouse click on the navigation item with children will navigate to the corresponding page.
(Touch UI) Added the generic "hover" color to the theme accents to provide a color-bland effect.
(Touch UI) Reading pane is automatically disabled on the small form factor devices.
(Touch UI) If the data view on the page is tagged as reading-pane-auto then the page will always display edge-to-edge with infinite scrolling to support the reading pane even if the summary mode is requested for the app.
(Touch UI) An empty bottom margin is created at the bottom of the last summary view on the pages when the summary mode is enabled.
(Touch UI) Optimized production of grid view styling to eliminate redundant create/remove of the same exact style when the yardstick is applied.
(Touch UI) Popup Calendar is correctly positioned within the boundaries of the "device" screen in design mode of v9.
(Touch Core) Virtual "click" events are not triggered when the dragging is stopped by the user.
(Kiosk UI) Hover effect on buttons and items is present only on mouse-driven devices.

Labels: Reading Pane, Release Notes, Touch UI

Friday, January 8, 2021Print Subscribe

Reading Pane

Touch UI provides the built-in option to display the details of the selected record side-by-side with the master list.

Popular email applications have proven this presentation style to be very effective. The end user can view the details of the selected message and has the quick access to the contents of the inbox.

The prototype of this presentation style has been a part of the framework for the past two years. Our team was able to bring it to the production state just now. The technical challenge was to provide a simultaneous access to the master and detail panes each holding a virtual page of the Touch UI application. A consistent styling has also been worked out.

The reading pane detail is empty by default. The placeholder area is filled with the standard background image that can be changed in ~/touch-settings.json through the ui.readingPane.background parameter. Set the option to false to disable the image or specify your own alternative (for example, ~/images/app-bkg.jpg).

The modal form fills this area when a selection is made in the master list or a new item is created. Both master and detail panes can be scrolled and are fully interactive. The familiar form buttons are migrated to the top of the detail pane and have icons to complement the toolbar of the master pane.

Set the option ui.actions.form.icons to true to enable action icons in all forms of the app. By default, only the form buttons in the reading pane are rendered with icons.

If the reading pane is not enabled then the familiar modal presentation will take place when the user is interacting with the master list.

Any forms activated from the detail pane are displayed on the top of the reading pane.

The option to enable the reading pane is available to the end user through the view selector if the screen size is that of a typical tablet. Developers can also tag the data view on the page as reading-pane-auto to activate the reading pane by default. The option and the mode are not activated if the screen is small.

Touch UI allows specifying the default minimal size of the reading pane master and detail in ~/touch-settings.json through the options ui.readingPane.minLeft, ui.readingPane.minRight, ui.readingPane.minTop, and ui.readingPane.minBottom. The default value for these options is 375 measured in pixels.

The device with the vertical orientation will display the reading pane detail at the bottom of the screen.

The master pane displays all supported presentation styles.

Hover over or touch the middle divider and drag it to the desired position to change the panes.

The responsive Touch UI will present the data in the best way possible within the available space of master and detail panes.

The reading pane mode enhances the productivity of the end users and requires zero effort on the part of the developer. If for any reason this mode is not desirable, then disable it with ui.readingPane.enabled option in ~/touch-settings.json. The reading pane mode is available only on the pages with a single master dataview.

Labels: Features, Touch UI, User Interface

Saturday, November 28, 2020Print Subscribe

Long Press and Auto Complete Prefix Length

Code On Time release 8.9.13.0 introduces improved long press on touch screens and the ability to control when the auto-complete starts in lookups. The new product activation compatible with v9 is now a part of the product.

Long press is now triggered if the user is holding a field value in the grid/list/cards for 500 milliseconds. The app will display the handy options to sort or filter data.

The long press is also triggered with the mouse.

Auto-complete feature in Touch UI automatically starts when the user stops typing for 300 milliseconds in the input box of a lookup. Fast typing of a longer text value will keep delaying the database lookup. The real-world apps may require a longer text sample to be entered for a useful lookup data to be return. Specify the numeric value in the Auto Complete Minimum Prefix Length property of the lookup data field to delay the lookup until the required number of characters is entered.

Browser-based activation is integrated in this release. The upcoming Code On Time v9 is using the local management app to manage the projects on your device. We have included this management app in the release. The app is launched in the default web browser when the product activation code is clicked at the top of the start page of the generator. Presently the app immediately proceeds to https://my.codeontime.com to assist with the product registration. The future updates will have this app display a list of local projects in the default web browser when the Code On Time is started.

The following features and fixes are included in this release:

(Touch UI) Eliminated the "thick" header separator in popup menus in native mode.
(App Gen) Staging instance published to Azure is launched with "https://" protocol.
(Universal Input) If the selected text in the input is replaced with whitespace(s) by pressing spacebar or pasting in the sequence of spaces, then the input is cleared. Previously the whitespaces remained in the input.
(Reports) Removed FontFamily tag from the report templates.
(Reports) Fonts are embedded in PDF output to ensure correct rendering of data on Android.
(Touch UI) Removed hover/active border on the action bar group items on iOS touch devices
(Touch UI) Fixed the bug with external URL navigation caused by incompatibility with jQuery 3.5.1
(Touch UI) Fixed positioning of "cancel" icon in the blob image preview displayed in forms
(Touch UI) Long press works on field values in grid/list/cards. The context menu that allows quick filtering / sorting is displayed.
(Touch UI) Drag sensitivity is now set at 9 pixels in either direction to provide a more robust drag detection on modern high resolution touch screens.
(Touch UI) Long press delay is now 500ms (previously 750).
(Touch UI) View selector menu is aligned with the menus displayed for action bar groups.
(Touch UI) Compact density menu items have their height increased by 4 pixels.
(Touch UI) Dark theme popups have the background color matched to the color of active options in the panels.
(Touch UI) Long press and right-clicking of the data cells will always display the context menu for the field value. Previously this was the case only when the text in the data cell was long pressed or right-clicked.
(Touch UI) Fixed the issue with popups closed right after opening when displayed in response to touch.
(Framework) WrapResponse property of ServiceRequestHandler descendants allows removing the "d" wrapper element from the output. By default the "d" wrapper is always present in the JSON output.
(App Gen) IP Address verification for new apps ensures that IP addresses are not listed in [Documents]\IISExpress\Config\applicationhost.config. It also ignores any actively occupied IP addresses on the device.
(Touch UI) Single line bottom border is removed from the last item in the popup list view.
(Touch UI) Data field property 'Auto Complete Prefix Length' will delay the auto complete lookup until the length requirement is met.
(Data Aquarium) External JavaScript business rules are fired for Calculate command for every change of the field value. Previously external business rules were skipped if there are blank required fields. This is an important change. See examples of JavaScript business rules responding to Calculate command at https://codeontime.com/blog/2020/05/tutorial-barcodes-qr-codes-and-rfid-tags.

Labels: Release Notes