Reading Pane

Labels
AJAX(112) Apple(1) Application Builder(242) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) 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(11) 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) DotNetNuke(12) EASE(20) Email(6) Features(99) Firebird(1) Form Builder(14) Globalization and Localization(6) Hypermedia(2) Installation(4) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(3) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(15) OAuth(5) OAuth Scopes(1) OAuth2(6) Offline(14) Oracle(10) PKCE(1) PostgreSQL(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(163) Reports(48) REST(26) RESTful(20) RESTful Workshop(13) RFID tags(1) SaaS(7) Security(75) SharePoint(12) SPA(5) SQL Anywhere(3) SQL Server(26) Stored Procedure(4) Teamwork(15) Tips and Tricks(81) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(331) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(39) Web.Config(9) Workflow(28)
Archive
Blog
Reading Pane
Thursday, June 24, 2021PrintSubscribe
Responsive Width of Grid Columns

The new exciting feature of Touch UI is the ability to express the width of the responsive grid columns in pixels. The new tag column-width-(tn|xxs|xs|sm|md\lg\xl|xxl)_NNN makes it possible to provide the multiple values for the grid column width that will be applied conditionally in the visual containers of the specific size. We have developed this new mechanism for grid column sizing while working on the Live Designer for applications built with Code On Time. 


The Sizing Problem

HTML tables are commonly used to present data in the grid format. The browsers will automatically evaluate the text in the table cells and set the width of each table column for the best fit. This works great for the standalone tables with the known number of rows. 

If your grids are designed for infinite scrolling or consistent paging of a large number of rows, then a different mechanism must be put in place. Only the small subset of rows is rendered initially and therefore it is not possible to figure the best column width based on the text in the cells of the leading rows. Touch UI framework takes advantage of the Columns property of the data fields in the Grid views. Column values of the fields in the data controller views are derived from the size of the database table columns. The framework figures the total width of the columns by iterating through the visible data fields in the view. This allows us to determine the relative width of each individual column in the grid. Next the framework calculates the width of the grid column in pixels by multiplying the physical width of the visual container by the relative width of the column. The framework also applies constraints to ensure that the columns are never too narrow and remain usable.

The screenshot demonstrates the grid of orders and the selected order in the reading pane wizard form. The latter shows the grid of the order details.


The framework has calculated the width of individual columns to provide the best fit for the data. Scrolling, filtering, and sorting will not change the column width in both grids to ensure a consistent presentation. 

Developers can increase the value of the Columns property of individual data fields to provide them with the larger possible real estate. Unfortunately it makes it difficult to achieve the desired width without much trial and error.

The Sizing Solution

The app in the screenshot above is running in the live preview mode and matches the size of the iPad Pro. The framework has assigned the logical width md (medium) to the master list and xs (extra small) to the reading pane.

The individual logical width abbreviations supported in Touch UI are matched with the physical width of the visual containers as follows:

tn0 - 319
xxs320 - 479
xs480 - 575
sm576 - 767
md768 - 991
lg992-1199
xl1200-1365
xxl1366 - . . .

The second column in the master grid of Orders is Customer Company Name. It represents the alias of the CustomerID. Add explicitly the “alias” data field to grid1 and tag it as 

column-width-tn-200 column-width-md-400

This will instruct the framework to set the column width to be 200 pixels if the visual container of the grid is at least tn (tiny). The “tiny” range starts from 0 and therefore the first tag will set the width of Customer Company Name to be always equal to 200 pixels. The second tag instructs the framework to set the width of the grid column to 400 pixels in the visual containers that are at least 768 pixels wide.

This is the effect of the tags on the presentation. The customer name is now 400 pixels wide since the visual container size is md.


Tap the hamburger menu in the top left corner to expand the sidebar. The visual container of the master grid will reduce to sm (small) size. This will also reduce the width of the Customer Company Name to 200 pixels.


Apply the tag column-width-tn-NNN to each data field in the grid to set the pixel-perfect presentation whatever the size of the visual container. 

You can selectively apply the tag to the specific columns to ensure the predictability and responsiveness of the presentation. The “fit to width'' mechanism of Touch UI will take care of the remaining columns in the grid. Alternatively apply the column-width- tag to every data field in the grid1 view of the data controller to override the grid column width decisions made by the framework.

Visual Designer and Grids

End users can resize the grid columns by dragging the divider in the grid header. The new width is memorized in the user storage of the browser


Dragging of the grid columns in the “preview” mode by the developer will cause the data fields to be automatically tagged accordingly with the column-width-tn- tags and will make it simple the task of grid configuration. The designer will automatically add the “aliased” fields of the lookup data fields to the grid views when the “alias” column is resized. 

Monday, January 25, 2021PrintSubscribe
Calendar and Reading Pane

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.