Code On Time: Release Notes

Blog

Release Notes

Saturday, July 31, 2021Print Subscribe

Clipboard, Drag & Drop, Auto-Refresh, Alt Master-Detail, and Property Grid

Code On Time release 8.9.21.0 introduces the clipboard and data drag & drop support in Touch UI. Dashboard data controllers can be enhanced to perform automatic refresh of the DataView fields according to the specified interval. DataView fields can also be connected into master-detail relationships even if there are no natural foreign key relationships. The Property Grid is the new exciting feature of the framework - keep reading to learn more!

Clipboard & Drag & Drop

In a matter of minutes developers can configure the app to allow Cut/Copy/Paste and dragging of items from one data view to another. A simple programming model makes it easy to implement processing for the system commands CutPaste, CopyPaste, and DragDrop. The persistent clipboard allows moving data from a data view on one page of the app to another.

Auto-Refresh in DataView Fields

DataView fields of a data controller can now be configured to refresh after a specified interval. Specify the Refresh Interval property in the Data View section of the data field in the “form” view. The interval is expressed in seconds.

This feature can be useful when implementing the monitoring dashboards. The framework will ensure that the app is not busy and the dataview is interactive and visible to the user when performing the synchronization of the view data with the server.

Alternative Master-Detail Linking in Forms

DataView fields can have a master-detail relationship with the other DataView fields in the form even if there is no natural foreign key relationship between them. The Clipboard and Drag & Drop tutorial demonstrates this in action by setting the link between the orders and the menu of products. The property Filter Source of the products is pointing to the orders and no filter fields are specified. If the order selection is changed then the products are refreshed. The server-side code can perform custom filtering based on the arbitrary condition.

Announcing Property Grid

We are pleased to announce that the new feature called Property Grid is now included in the framework. The screenshot shows the property grid displayed in response to the inspection of the display object on the page, that was constructed with the Content Hub Add-on and Display Flow.

Soon you will see the Property Grid in the development mode of your own apps when configuring the ~/app/touch-setting.json or the project properties. The same component will be sliding out from the side of the screen when editing the content in the upcoming community site and when building the data-driven surveys at runtime.

Property Grid is the Touch UI form driven by the metadata. The developer-friendly data input mode with the comprehensive keyboard support makes the grid suitable for various configuration tasks when building apps and content. It will be also possible to tag a form view as a property grid. The form view configuration will be converted into the Property Grid metadata by the framework at runtime and the end user will be presented with a sliding panel to edit the data.

Release Details

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

Data Clipboard with support for Cut/Copy/Paste and Drag & Drop
(Inline Editor) Focus frame is not visible when the grid with a large number of columns is scrolled and the focused field is out of view.
(Blob) Default blog image is triggered on the existing record. Previously this happened only if the existing blob was cleared.
(Touch UI) Removed the delay context scope reset when the panel action is executed on close. This eliminates the problem with the incorrect set of actions in the form views.
(Clipboard) If the data view is tagged as view-paste-Controller or view-drop-Controller then the current row or target row is ignored. Only the master values are supplied for the row representing the target of Paste or Drop.
(Cloud On Time) The app will not raise an exception when processing requests without the UserAgent header received from Cloud On Time during the custom app installation.
(Touch UI) Externalized the CSS rule that controls the visibility of the child dataview to improve performance.
(Touch UI) Child dataview field will behave as a dependent even the Filter Fields are not specified. The property Context Fields will be set to the value of the filter and is passed to the server for custom filtering with the access control rules.
(Touch UI) If the dependent data view of the master-detail relationship is not visible and there are no other visible elements in the simple or collapsible container then the container is also hidden until a data item the master data view is selected.
(Client Library) Method dataView.syncOnce() will synchronize the dataview when it stops being busy and is on the active page and ready for interaction. The first argument of the method specifies the name of the child DataView field. The corresponding dataview will be synced when the argument is specified. The second argument will force the immediate attempt to sync if set to true.
(Touch UI) Property Refresh Interval of the DataView field on the form will cause the data to refresh after the period of time expressed in seconds.
(Classic UI) Method dataView.data() returns an object with correctly assigned "unmodified" properties. Previously the "null" value was assigned to the property that was not changed.
(Classic UI) Method dataView.data() returns an object with correctly assigned "unmodified" properties. Previously the value "null" was assigned to the property that was not changed.
(Client Library) Simplified the dataView.survey() method by removing the legacy processing of Classic UI.
(Client Library) Data objects returned by the method dataView.data() invoked on an instance of the data view will not have the "_modified" property with the properties of the original row instance. Invoke the method with the 'modified' parameter if you require the "changes" included.
(Clipboard) Method $app.clipboard.paste() will raise the client-side CopyPaste|CutPaste|DragDrop in the "Before" and "After" phases. The former may return a "promise" object to delay the command until resolved or false to prevent the command. The latter allows executed the custom in JavaScript upon completion.
(Framework) DataView fields with have access to the other DataView fields in the same master form if their names are listed in the Context Fields property. For example, MyOrderID=Orders will result in the primary key of the selected order in the Orders field to be available to be used in custom access control rules.
(Touch UI) Descriptions of items in the context menus have a unified 12px font size and are limited in width.
(Touch UI) Event keyboardpreview.app is triggered in the scrollable element of the virtual page.
(Touch UI) Event datainputfocus.app is triggered when the data input is styled to indicate the "focused" state.
(Touch UI) Notifications are displayed as centered when the docked virtual page is active.
(Touch UI) Event scrollablepageready.app is triggered on the scrollable wrapper of the virtual page. This event is triggered prior to the page transition and can be used to change the initial vertical scroll position in the form.
(Touch UI) Event pageautofocus.app is triggered on the active page.
(Touch UI) Event datainputmove.app is triggered on the current data input instead of the document.
(Touch UI) Event keyboardnavigation.app is triggered in the scrollable element of the page. Previously this event was triggered on the document.
(Inline Editor) The handler for keyboardnavigation.app event does not attempt to move the focus if there is no active focus frame of the inline editor.
(Touch UI) $app.touch.hasFocus() method removes focus from any other focused elements if the element specifed in the argument is focused.
(Touch UI) Event pageautofocus.app is triggered on the document. If the default is prevented then no attempt to set the focus is performed.
(Touch UI) Method $app.touch.scrollIntoView() will ensure the visibility of the element specified in the argument.
(Touch UI) REMOVED. Event beforefocus.app is not triggered anymore.
(Touch UI) Event datainputlabel.app is triggered on the data input label. If the default is prevented then no attempt to focus the corresponding input is performed. Property Grid of v9 designer uses this event to set the visual focus on the label.
(Touch UI) Enhanced the app-has-focus removal from the labels/values.
(Touch UI) Double click/tap on the label of the field in the form will trigger the vdblclick event on the label element.
(Touch UI) Method $app.touch.layout() will perform the layout of the form. Method must be called if the initially invisible regions of the form layout become visible. Property Grid uses this method when collapsed complex properties and categories are expanded.
(Touch UI) Method $app.dblClick(elem) will return true if the elements was clicked or tapped twice in the past 500 milliseconds.
(Touch UI) Double click on the Drop Down List label will cycle the input value.
(Touch U) The drop down list button has a non-transparent background for improved presentation of input with the long lookup values.
(Touch UI) Delayed focus removal eliminates blinking of the focus indicators when the value of the input has changed after the focus loss and recovery.
(AppGen) Application generator creates a valid Visual Studio project when the word "Global" is included in the project name.
(Touch UI) Data view tagged as class-name-CSS_CLASS_NAME will assign the specified CSS class name to the "div" element of the virtual page.
(Client Library) Method $app.prettyText(text, capitalize) will capitalize the leading character if the second argument is set to true.
(Client Library) Method $app.prettyText now detects the national Unicode upper-case characters and treats as words the sequences of numbers. For example, the following calls will return the arguments with 3 spaces placed in front of the upper-case letter and the first digit:
    x1 = $app.prettyText('NextNewYear2021');
  x2 = $app.prettyText('PróximoAñoNuevo2021');
  x3 = $app.prettyText('ΕπόμενοΝέοΈτος2021'),
(Touch UI) Fixed issued with the incorrectly migrated labels when input-blob.js was extracted from touch.js.
(REST) Robust processing of REST API request to ~/_invoke/auth for authentication to obtain and renew the tokens.
(REST) Server-side framework implements the _invoke/auth API to allow obtaining and refreshing the access tokens.
(Framework) Refactored application services to support handlers with custom parsing of arguments to support the REST 2.0 and the upcoming Graph QL engine.
(AppGen) Fixed incorrect references to the ReportViewer DLLs v14 and v15.
(AppGen) Projects based on the class library will correctly copy the runtime-loaded minified *.js files to the ~/app/js folder of the solution. That includes touch-draw, daf-search, daf-import, and daf-flow.
(Touch UI) Last input focus is restored on mouse-driven devices if the dragged away modal form restores its position in response to the user's click on the background.
(Touch UI) Windows focus will not cause an exception when the core framework is still being constructed.
(Classic UI) Fixed the problem with uploading of images in BLOB fields.
(Classic UI) Font preloading instruction is not included in the HTML pages.
(Framework) Nielsen Batista has contributed the pt-BR localization. Submit your own files with the support and we will have them included in the future releases of the product.

Labels: Release Notes

Sunday, June 27, 2021Print Subscribe

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.

Labels: Form Builder, Release Notes

Friday, June 25, 2021Print Subscribe

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