Blog: Posts from June, 2021

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(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(183) 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(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
Posts from June, 2021
Sunday, June 27, 2021PrintSubscribe
Modal Form Dragging

 Release 8.9.20.0 makes your apps even better!

The responsive forms of Touch UI framework may render in fullscreen mode or as modal popups. Modal forms can now be dragged into arbitrary positions with a touch or mouse pointer. Simply grab the title and move the form to the new position.


Keep dragging the form by the title to reveal more of what is hidden beneath. The forms can be dragged almost entirely offscreen. 



Tap on the background to instantly return to the original position. Setting focus on any field in the form will also restore the position. The resizing of the WebView will have the same effect.



Touch UI has a built-in Drag Manager that works with the scrollbars, column dividers, panels, etc. The most recent use case for the drag manager was the Drawing Pad. Now we have found a new application for this powerful mechanism - modal forms. The following bug fixes are also included in the release:
 
  • (Touch UI) Modal forms support dragging of the form title.
  • (Touch UI) Fixed the issue with the missing function that was not migrated from the touch.js to daf-search.js.
  • (Touch UI) Fixed broken background and column width caused by the scrolling of the grid with the data fields that have "column-width-" tag applied to them. Use the tag to control the precise width of columns in the grids.
  • (Touch UI) Promo button has a pronounced background color change on hover with the mouse pointer.
  • (Touch UI) Fixed the broken Lacquer accent rendered in Dark theme.

Friday, June 25, 2021PrintSubscribe
Drawing Pad, Responsive Grids, Faster Framework

Code On Time release 8.9.19.0 introduces the Drawing Pad and Responsive Grid features along with the significantly improved performance of apps based on Touch UI. 

Performance Enhancements

Touch UI is a very compact framework. As of today the total script library payload stands at 405 kB compressed while the only CSS resource is $49.7 kB compressed. The upcoming new feature Content Hub Add-on will transform the framework into the first rate publishing platform. We are remaking our website, this blog, the help desk, and the new community forum as the Code On Time apps. This imposes various Core Web Vitals requirements and many new features in this release are related to this effort. The framework now performs the pre-loading of web fonts and externalizes the search and import features. As a result all applications re-generated with this release are faster and smaller.

Images in the list items, cards, and forms are not retrieved unless visible. This feature reduces the number of the requests handled by your applications and also benefits the Content Hub pages with the images.

Radio Button List lookup instantly triggers the event to inform the app about the value change and then starts playing the button status change animation. Previously the change event would not trigger until the animation has completed. If your forms have the conditional dependencies on the radio button lists, then the new release will make your app appear more responsive.

Forms with the categories of data fields configured as Wizard steps will appear more responsive if the “steps” include the child DataView fields. The new framework will cause the child data views to fetch values as soon as the “step” contents become visible.

Kiosk UI and UI Automation are significantly faster. The next update will bring about the Camera-based scanner directly in the application.

Drawing Pad

If the image is uploaded as the BLOB field, then the Drawing Pad becomes available.


Default blob field values can now be provided as icons or external image URLs. The former provides a simple way to create the image placeholders as large colorful material icons.The latter introduces the foundation for sketching in your application. 

The upcoming Content Hub will allow drawing on the user-submitted images and screenshots taken directly from the live application when submitting the help desk tickets or creating the community forum posts.

Responsive Grid

The new tag column-width-(tn|xxs|xs|sm|md|lg|xxl)-NNN makes it possible to specify the default and responsive width for individual columns expressed in pixels.


Advanced Search

We are hoping that the subtle change to the Advanced Search will increase its usability. The data fields with the “required” and “suggested” search mode are always included in each “Match” group of fields even if some of the suggestions were not used in the previous search. The end user can progressively engage the suggested fields to refine their search.



The following features, bug fixes, and performance improvements are included:

  • (Touch UI) Enhanced font preloading and eliminating the transparent/missing icons at 90%, 110% and other irregular zoom values in the Chrome, Edge, and Safari.
  • (Touch UI) Clicking anywhere outside of the inline editor will cause auto-post of the row unless initiated with the Escape key or the explicitly selected Cancel command.
  • (Touch UI) New tag modal-title-minimal will force the modal form to display a minimal modal title permanently. Typically the minimal title is displayed in the minimal state only if the modal form content is scrolled down.
  • (Touch UI) Advanced Search will always display the default suggested and required fields in every match group. Previously the suggestions were not visible and only the previous search conditions were retained. The new behavior makes it easier for the end user to refine their search if the previous search has not yielded the desired result.
  • (Universal Input) Enhanced the speed of response of the radio button list. The "click" processing happens before the animation has been completed for a more responsive GUI.
  • (Universal Input) Lookup data field tagged as lookup-auto-advance will migrate to the next input in the form.
  • (Universal Input) Lookup data field tagged as lookup-auto-advance-row will migrate to the next input in the same row container.
  • (Universal Input) Radio button list uses the styling that does not create an empty dot in the middle of the selected radio button list on some monitors. If lookup-auto-advance tag is applied then the "focus" frame is not displayed during the transition from the radio button list to the next input.
  • (Blob) Drawing Pad is available to markup the images directly in the app.
  • (Touch UI) Option ui.menu.position controls the position of the navigation menu in the sidebar.  The default is top. The second supported value is bottom.  Requires ui.menu.location to be set to sidebar in touch-settings.json. Previously the sidebar menu always displayed at the bottom of the sidebar by default.
  • (Model Builder) Enhanced serialization of the database metadata uses a simple loop instead of the recursive calls and improves ability to handle huge databases faster. Previously a database with more that 1500 tables has failed to serialize due to the stack overflow.
  • (Touch UI) The default dedicated login page created by the app generator is now programmed to allow the app to decide the landing page after the successful login. The URL returned by the method ApplicationServices.UserHomePageUrl() will determine the landing page. The default landing page is ~/pages/home. Override the method the partial class implementation to introduce your own landing pages.
  • (Touch UI) Wizard form buttons are correctly refreshed when the form is opened in the reading pane.
  • (Framework) Logout will not cause the exception in the server-side code when vi-VN culture is set.
  • (Touch UI) New tag column-width-(tn|xxs|xs|sm|md|lg|xl)-NNN will define the precise width of the grid column for a particular page width.
  • (Touch UI) Modal form with fitted height ignores the virtual keyboard stub when calculating the height.
  • (Touch UI) Font preloading instruction is included in the pages automatically.
  • (Touch UI) Externalized import API into ~/js/daf/daf-search.js to reduce the required footprint of Touch UI.
  • (Touch UI) Externalized implementation of import into ~/js/daf/daf-import.js to reduce the size of the core framework.
  • (Framework) Method $app.saveFile(name, text, type) will cause the WebView to display a prompt to save a file with the given name text in UTF-8 encoding with the option type, which defaults to text/plain.
  • (Import) Import handles the child data view lookup fields that have their names not matched with the master table field name.
  • (Touch UI) Collapsible menu in the sidebar will not be visible when expanding/collapsing transition is intersecting with the sidebar mini calendar.
  • (Touch UI) Blob thumbnail will open a "save file" prompt when clicked. Previously the internal preview popup was displayed.
  • (Touch UI) Blob thumbnail will open a "save file" prompt when clicked. Previously the internal preview popup was displayed.
  • (Blob) If the  blob field is tagged as image-user-defined-none then tap on the image will activate the drawing pad. Otherwise the file selection window is presented.
  • (Touch UI) Numerous core classes from the legacy jQuery Mobile have been removed for improved performance.
  • (Touch UI) Item in the panels do not trigger taphold.
  • (Multifile Upload) Drawing pad is available if only one file is selected for upload.
  • (Multifile Upload) The names of the files are automatically trimmed if they exceed the length of the "name" field. Previously the upload was rejected due to inability to insert the placeholder record into the database.
  • (Framework) The external filter of the parent is passed when actions are executed on the child data view when there is not direct master-detail relationship between the two.
  • (Framework) The external filter of the child data view is included with the Execute requests in its forms.
  • (Framework) Multi-file upload will pass the external filter of the data view with the Insert requests.
  • (Blob) Field tagged as image-editor-none will not allow manipulation of the image on the client.
  • (Blob) Clearing of the blob in the form will trigger getdefaultblob.app event on the document to allow the default value to be supplied.
  • (Blob) Event getdefaultblob.app will cause the drawing of default image as a material icon if e.blob.icon property is specified. The optional color can be specified in e.blob.color property.  The default image based on the icon is drawn only if the blob field is tagged as image-size-WxH where W and H are the width and the height of the default image.
  • (Framework) New method $app.intersect returns true if the two objects specified in the augments are intersecting. Objects may represent the ( x,y) point, the rectangle, or the DOM element.
  • (Universal Input) New "slider" input is now a part of the framework.
  • (Touch UI) The alert popup displays the message as a note to ensure that the entire text is visible.
  • (Framework) Html detection also includes the search for encoded characters and symbols.
  • (Survey) Enhanced error reporting when loading survey definition from the server.
  • (Kiosk UI) Modal background and glass pane are invisible if the Kiosk UI is displayed above the app.
  • (Touch UI) Fullscreen pages without gap with the buttons will take into account the safe area at the bottom on iOS devices.
  • (Barcodes) Significantly improved performance of the barcode processing during UI Automation. Automation processor uses a fast check for the first IfThisThenThat condition to trigger in response to the barcodes triggered. App pages of the app are ansible while the Kiosk UI is active.
  • (Touch UI) Eliminated the double divider at the bottom of the list of items in the sidebar.
  • (Touch UI) Tooltips of the buttons in the fullscreen form without gaps are displayed above the parent toolbar.
  • (Blob) Image preview is not draggable in the desktop browsers.
  • (Touch UI) Image loading observer will keep track of resolved/observed URLs for enhanced performance.
  • (Touch UI) Method $app.touch.observe(url) will return the observed URL if the URL has been observed already on the page.
  • (Touch UI) Method $app.touch.observe(enable, container) will start observing the element visibility.
  • (Upload) Dropping the non-file content on the drop target will not cause the field to clear.
  • (Touch UI) Field footer text of  empty values is NOT displayed in "lower-case". 
  • (Touch UI) Method $app.touch.show({headerText: 'Text 1', controller: 'c1', startCommand: 'New', startArgument:'createForm1'}) will correctly assign the  value of the headerText option to the page header of the form when the command option is set to New.
  • (Touch UI) Method $app.touch.pointrer('pen') returns true if the last touch was with the "pen" pointer.
  • (Virtual Keyboard) Virtual keyboard is not activated if the input is touched with the "pen" pointer. It allows the user to write on top of the input without interruption.
  • (Universal Input) The numeric input type is not set to "number" on mobile devices if the input was touched with the "pen" pointer.
  • (Touch UI) Click the blob drop area will cause the BLOB field to become focused.
  • (Blob) Drawing survey is displayed when "draw" icon is tapped.
  • (Touch U) If the "fullscreen" button is hidden with the modal-buttons-fullscreen-none then the button on the left side of it is shifted to the right to fill the gap.
  • (Display Flow Designer) Arrow keys Up/Left/Down/Right with Shift and Control modifiers will select / deselect display objects in the flow if the there is no active text input.
  • (Data Aquarium) Command Search will activate the confirmation controller specified as _controller=Name variable in the Confirmation property of the action. It will restore the previous search values. The search is cleared when the filter is  canceled by the user.
  • (Touch UI) Custom search is activated when the controller with Search action in Action Bar scope is specified as the lookup of another controller.
  • (Data Aquarium) Action with command name Search will not cause the  SyncKey data conversion error on the server.
  • (Display Flow) Ctrl|Shift + Up|Left|Down|Right will make the first/last selected display object visible in the WebView.
  • (Touch UI) Default values for BLOB fields are now supported.  The getdefaultblob.app event handler will specify the default blob file for the field. The specified file is automatically downloaded and selected as the blob value.
  • (Framework) $app.getScript loads the dynamic dependencies and executes the callback when the resources and their dependencies are available.
  • (Display Flow) "Code" blocks render with the Code Mirror in IE11.
  • (Display Flow Designer) All  resources of Code Mirror are loaded on demand when the "code" display objects are included in the display flow.
  • (Display Flow) "Code" display blocks are provided with a caption showing the code type and the optional description.
  • (Data Aquarium) Files codemirror.min.js and codemirror.min.css are included in ~/js/lib folder when the app is generated. This library is automatically loaded in Display Flow pages with the code blocks (sample C#, HTML, JavaScript, etc.)
  • (Touch UI) Multiple keyboard shortcuts for the same char code are now supported. For example, Ctrl+V and Ctrl+Shift+V will paste the content in Display Flow page before and after the selected block of display objects.
  • (Display Flow Designer) Copy and Cut work with the internal buffer to allow easy manipulation of the content.
  • (Touch UI) Typography of H1-H6 tags in two different variations and the jumbo version. The second large font size starts on "large" screens (>= 992px)
  • (Touch UI) Method $app.elementAt(p) returns the jQuery element at the specified point in the page. If there is no argument, then the element at the last touch/click point is returned.
  • (Touch UI) Optimized the code base to use $app.clientRect and $app.elementAt methods.
  • (Touch UI) Reduced the right margin of material icons to 1/20 of the element in Bootstrap and Display Flow content pages. 
  • (Bootstrap) Removed the leading spaces after the material icons in the Bootstrap content templates.
  • (Touch UI) Material icons have the fixed width of 1em in the Bootstap and Display Flow pages to avoid the horizontal shifting while the stylesheets are loading.
  • (Data Aquarium) Method $app.getScript(url, callback) will load the script from the app and invoke the callback. It enables dynamic loading of client library files with support for debugging in Visual Studio.
  • (Touch UI) New dynamic BLOB image loading will delay the loading of image thumbnails until the image is in the view of the end user.
  • (Framework)  Meta tag  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge" /> is added to the page on the server if IE 11 client is detected.
  • (Framework) Content Type header of combined CSS and JavaScript is provided with the chartset=utf-8 instruction.
  • (Framework) Meta definition of the character set is the first element of the page head element.
  • (Framework) Meta tags of the page are not closed.
Labels: Release Notes
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. 

Continue to Drawing Pad