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

Blog

Wednesday, August 11, 2021Print Subscribe

Touch UI apps offer rich user experience courtesy of Code On Time app generator. By default, a data model configured by the developer will enable the data presentation as grid, list, and cards. Foreign key fields are presented as a versatile lookup input with auto-complete, search, and an option to create new items in-place. Foreign key fields will also enable automatic data charts.

These and many other user interface features will make the life of the end users very comfortable.

Sometimes the end-user comfort is not the ultimate goal. The simplicity of the UI will be driving user satisfaction. Developers may quickly customize the features of the app in the Project Designer. There is also an option to perform the real time user interface customization with code. This option is especially relevant for large applications.

Let’s limit the view style of the Products in the Northwind sample to Grid and convert the lookups to drop down lists without the ability to create new items.

Method 1 - Project Designer

Select the Products / views / grid1 view in the Project Designer and tag it as:

view-style-grid view-style-list-disabled view-style-cards-disabled view-style-charts-disabled

This will limit the view styles available to the end user and set the default style of data presentation.

Next select the Products / fields / SupplierID lookup field and change the view style to Drop Down List. Also clear the value createForm1 from the New Data View property.

Re-generate the app and observe the simpler user interface in action.

Please note that the view style buttons are not visible on the sidebar since the Grid is the only option.

Method 2 - Data Controller Virtualization

Data Aquarium Framework is the foundation of apps built with Touch UI. The server-side code makes it possible to transform the design of the data controller at runtime.

Select your project on the start page of the app generator and choose Settings | Data Model & Business Logic, activate Shared Business Rules tab, and enable the Shared Business Rules. Press Finish to generate your application.

Select the project again and choose Develop. Locate the file ~/app/App_Code/custom/rules/SharedBusinessRules.cs in the Visual Studio and replace its contents with the following:

Make sure to change the namespace MyCompany to the one that matches your application.

The instance of the SharedBusinessRules class is created by the server-side code when processing the requests for any data controller. Your existing business rules must inherit from this class to acquire the shared functionality. Any new “code” business rules created in the future will automatically inherit from it. The framework “consults” the business rules about various aspects of data processing.

The first method SupportsVirtualization is invoked when the XML definition of the data controller has been loaded to process the request. If the method returns true, then the framework will proceed to invoke the customization methods.

The second method VirtualizeController is given a chance to make changes. The code above is reproducing the same steps that were described in Method 1 if the current user does not belong to the Administrators role. The customization of view styles is done with SelectView and SetTag methods of the NodeSet API. There are numerous specialized methods that take the guesswork out of the customization process. Auto-completion in Visual Studio will provide a full list of available methods with the relevant descriptions of their purpose. The configuration of the lookups is performed with the generic Select and Attr methods of the NodeSet API. The former uses XPath expression to locate the elements in XML. The latter selects one particular attribute.

Our customization does not discriminate over field names and will convert all lookup fields into dropdowns without the ability to create new items. This screenshot shows the SupplierID dropdown aliased as Supplier Company Name and CategoryID aliased as Category Name with the list of items visible.

The nature of the real time changes in the XML definition of the data controller is shown below. Please note that the virtualization will change the in-memory copy of the data controller. The physical data controller file remains the same as it was arranged by the app developer.

Our code will work whether your app has 3 data controllers or 1000. Only the Administrators will have the rich user interface capabilities while the rest of the users are offered a more streamlined experience.

Labels: Application Builder, Tips and Tricks

Friday, August 6, 2021Print Subscribe

Auto Highlight/Select, QR Codes, and Custom Input Enhancements

Release 8.9.22.0 introduces new features and multiple bug fixes. Now developers can configure their master-detail “data view” fields to always highlight or select the first record on any level of the dependencies. Any input field on the form can be enhanced with QR code representing its value. The ability to display QR codes is implemented with the help of the Custom Input Enhancements feature of the Universal Input.

Auto Highlight and Auto Select

Code On Time allows configuring the Auto Highlight or Auto Select of the first row in the dataview, which is performed when the page loads. These properties can be set up on the “data view” fields, which makes possible the cascade selection of the first row in the master-detail hierarchies in the forms. The framework resets the auto highlighting and selection to avoid the excessive loading of child data views when the master on higher level is changed.

Now you can force the application to always perform the automatic highlighting or selection. For example, the Order Management Dashboard from the Drag & Drop example can be enhanced with the tag auto-highlight-first-row-always applied to the OrderDetails “data view” field. This will result in the first detail to be always highlighted when a new order is selected.

Tags auto-highlight-first-row-once and auto-highlight-first-row-always are used to control the frequency of automatic highlighting.

Tags auto-select-first-row-once and auto-select-first-row-always are used to control the frequency of the automatic “Select” action applied to the first row/item in the data view. For example, the tag auto-select-first-row-always will cause the dashboard to display the first item of the OrderDetails data view in the form.

Please note that the automatic highlighting/select will not be performed if the new record was created or an existing record was changed. Only the simple refresh/synchronization will result in the highlight or select action.

QR Codes

The majority of the population has been forced to learn and use the QR codes in their daily lives in 2021. You can enhance any field in the form of your app to display a QR code representing the field value.

Try out this feature at https://demo.codeontime.com now! Select a supplier, press Edit and enter any value in the Home Page field. Press Ctrl+Enter on the keyboard or blur the field to see the QR code displayed right next to it.

Tag any data field in the form view as input-qrcode-128x128 and the QR code enhancement with the specified dimensions will be visible just below the field value.

Touch UI recognizes the following tags that will impact the QR Code presentation:

Tag input-qrcode-WxH (enables QR code enhancement)
Tag input-qrcode-color-light-HTML_COLOR - specifies the “light” color
Tag input-qrcode-color-dark-HTML_COLOR - specifies the “dark” color
Tag input-qrcode-correct-level-(L|M|Q|H) - specifies the correction level.
Tag input-qrcode-value-hidden - hides the field value and displays the QR code instead.

Custom Input Enhancements

Custom input enhancement can be activated on any data field with the help of the input-NAME tag. The framework will load the custom script from ~/app/js/daf/input-NAME.min.js or ~/app/js/daf/input-NAME.js. Next it will invoke the method $app.input.methods.NAME._init(field, value, text, placeholder) and pass to it the reference to the data field, its value, text, and the placeholder element positioned below the data field value. Tag input-NAME-WxH will assign the width and height specified in W and H to the placeholder.

Another related tag input-NAME-value-hidden will produce the hidden data value. Only the enhancement will remain visible.

The support for QR codes is implemented as an enhancement that can be activated on any data field by tagging the field as input-qrcode or input-qrcode-128x128. The QR code is visible if the field has the value. The parameter NAME referenced above is represented by qrcode. The implementation can be found at ~/app/js/daf/input-qrcode.js.

Release Details

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

QR Code data input enhancement can be added to any data field with the tag input-qrcode-128x128 with the numbers representing the width and the height of the QR code in the form.
(Blob) Changes in the image will cause the app to fetch the child dataviews if the views suddenly become visible due to the change of the form layout in response to the image loading.
(Touch UI) Method $app.touch.summary('fetch') will cause the summary views to fetch data. This method is useful when the layout of the page is suddenly changed and previously invisible dataviews come into focus. If no scrolling has occurred then the data may remain "unfetched" and the fetching can be forced by calling this method.
(Touch UI) Custom Input Enhancements and QR Code enhancement are now included in the framework.
(Touch UI) Fixed the migration issues that caused exceptions in the "Search On Start" in summary views.
(Touch UI) Hiding of the simple or collapsible container without the visible content will not be performed if the container's visibility is controlled by the Visible When property of the category or if this container belongs to the tab page or wizard step.
(Touch UI) Notifications are not displayed during the page transition to avoid the effect of the shifting page that was visible upon certain conditions.
(Touch UI) Summary view synchronizes itself with the form placeholder instantly for a better user experience. Previously the visual synching was delayed if the page transitions were detected, which has caused a displaced presentation visible to the user for a short period of time.
(Framework) Tags auto-(highlight|select)-first-row-(once|always) allows performing auto select or highlight of the first row upon the review of the view data with an option for this to be performed once or always.
(Client Library) Method dataView.survey() correctly collects the files in the BLOB fields. This resolves the problem with import file uploading and multi-file upload.

Labels: QR codes, 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