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

Blog

Thursday, April 8, 2021Print Subscribe

Code On Time release 8.9.17.0 introduces new controls over the user interface state and make a slight but significant change to the logout process. There are various performance improvements and changes to the Display Flow of the upcoming Content Hub Add-on, that serves as the foundation of the new Community Forum. Continue reading to learn more.

UI State Storage

Touch UI application in the screenshot is running as the Progressive Web App (coming soon) and behaves just like the app in the web browser. It retains the minimized sidebar, the data filter, and the reading pane mode when restarted by the end user. The new UI State Storage and Cleanup options ui.state.storage and ui.state.clear can be specified in the application configuration file ~/touch-settings.json to control where exactly the user interface state is being preserved and when it is cleared.

Logout URL

Starting with this release the default logout behavior of the apps built with Code On Time is changing. Previously the successful logout request to the server was followed by reloading of the current URL visible in the address bar of the browser. The server-side code would redirect the user to the login page and return to the same location if the user has opted to sign in again.

The new framework will redirect the user to the root of your app instead and this will cause the ApplicationServices.UserHomePage() method to be invoked giving the developer a chance to redirect the anonymous user to the desired start location on the first visit after the logout. The default location is ~/pages/home.

New Configuration option membership.logoutUrl specifies what happens when the user signs out. The default value is root, which will cause the web view to redirect to the root of the app. Value current will reload the current page and force the user to confirm their identity. This is the framework behavior prior to this release. Any other URL will cause the app to redirect upon the successful logout. For example, https://codeontime.com specified in membership.logoutUrl option of ~/touch-settings.json app configuration file will navigate to the corresponding web resource. The relative path ~/forum/topics will redirect the app to the page /forum/topics.

Content Hub, Display Flow, and Community Forum

The content presentation framework Display Flow was first introduced as the part of Kiosk UI. Here at Code On Time we are trying to do a lot with as little effort as possible to keep things efficient and tidy. We are using the Display Flow in the Content Hub Add-on to bring the powerful interactive live content designer and content publishing capabilities in the apps created with Code On Time generator. The new Community Forum is coming to https://my.codeontime.com and will demonstrate this exciting technology. It will power our interactions with the customers and will also be available as an add-on for your apps.

The live content designer shares the Object Inspector (Properties Window) with v9 to allow the visual configuration of the Display Flow objects. We will bring the v9 design capabilities in your apps as early as next month. The live project designer of v9 will first enable the full visual editing of all available properties of ~/touch-settings.json. Finally the guesswork will be over. Gradually we will increase the scope of Project Configuration capabilities with every incremental release of 8.9.x.x app generator. The version number will shift to 9.0.0.0 when the scope of configuration meets the level of current Project Designer implemented with Windows Forms. The migration to v9 will be subtle and pain-free. Eventually you will be building your apps entirely in your favorite web browser (Chrome, Edge, Firefox, Opera) with the app generator running in the icon tray.

Release Summary

The following new features and fixes are included:

(Touch UI) Form buttons will appear centered when the full-screen or non-modal view has the "md" width or larger. Otherwise the buttons are aligned to the right.
(Installer) MSI file is marked with the correct version number of the app generator release.
(Touch UI) Configuration option membership.logoutUrl controls what happens when the user signs out. The default option is root, which will cause the app to redirect to the root of the app. Value current will reload the current page and force the user to confirm their identity. Any other URL will cause the app to redirect there upon the successful logout.
(Touch UI) Option ui.state.clear allow controlling when the user interface state variables are cleared. The default value is 'never'. Option value always will clear the UI state on login and logout. Value logout will clear the UI state on logout only.
(Display Flow) Flow Designer maintains the scroll position of the top-most visible display object when the page is resized.
(Display Flow) Properties spacing, align, and color are handled in more configuration variations of display objects.
(Display Flow) Display flow designer allows Click, Shift+Click, and Ctrl+Click selection of display objects. A count of objects is displayed when the selection is made. Read-only objects are not selectable. This makes possible creating forum posts with the ability to design enabled on the reply or comment only.
(Touch UI) Content pages will display a 3d shadow on the app toolbar when scrolled down.
(Display Flow) Content display object supports the "color" attribute to allow an explicit content color definition overriding the color of the theme and accent.
(Display Flow) Tags h1-h6 appear larger in the "hero" display blocks on lg, xl, and xxl screens
(Touch UI) Page menu is erased when an article is added to the page.
(Touch UI) Page header is invisible if the page is using the content framework (Bootstrap or Display Flow).
(Touch UI) Property $app.agent has ie, iOS, chromeOS, and other properties to provide quick shortcuts identifying the web view agent.
(Touch UI) Option ui.state.storge with the values local and session will control how the state of the GUI is persisted. The default value is local.
(Touch UI) Last vertical scroll position of the Bootstrap and Display Flow page is memorized in the session storage.
(Touch UI) Content pages will memorize the scroll position and have it restored when navigating back or forward to the page.
(Farmework) Font files are cached up on the client for 1 year .
(Touch UI) Icon class names are removed from the page body at runtime. Previously this has affected the page layout under certain conditions.
(Touch UI) Implemented an efficient assignment of display width breakpoints to the page. Classes app-min-xxs through app-min-xxl are assigned and removed only as needed for smooth animations and faster rendering.
(Display Flow) Increased the font size of "code" blocks to 3/4 or rem.
(Touch UI) Pages with the explicitly defined data-app-role="page" and data-container-framework="bootstrap|display-flow" attributes will not have a dedicated container page and will have their contents placed into the "Main" page if there are no other "virtual" pages in the markup. This speeds up the first paint in the browsers.
(Touch UI) Modal page header background color is not affected by the presence of the sidebar.
(Touch UI) The trailing list divider is not rendered in the mini sidebar.
(Classic UI) Fixed the exception raised when the New and Duplicate commands are executed.

Labels: Release Notes

Wednesday, April 7, 2021Print Subscribe

UI State Storage & Cleanup

The state of the user interface in the apps built with Touch UI is maintained on the client. Authenticated users find the search criteria, filters, sort expressions, view styles, theme choice, and many other traces of their interactions with the app to be persisted between sessions. This makes it easy to pick up where you left off on the same device even when the browser window is closed and opened again. The app framework uses the local storage of the web view for this purpose. Each identity used to sign into the app will have its own UI state.

Touch UI can be configured to keep the user interface state in the session storage of the web view instead. The user interface state will persist while the browser window is open. App users start with the clean slate when the session is started in the new window.

Set the option ui.state.storage to session in ~/touch-settings.json configuration file to enable this behavior of the UI.

User identities and avatars are still persisted in the local storage to avoid having the user to sign in while moving between the app pages and browsing sessions. So are the global choices such as the theme and the presence of the sidebar.

Another related option allows controlling whether the user interface state is cleared when the user logs in or logs out. Option ui.state.clear is set to never by default. Developers may choose to clear the user-specific application state on the client upon logout. Value always will force the app to clear the UI state both on login and logout.

If the app is expected to be used on the shared devices, then setting the UI state storage to session and having it cleared always will eliminate any potential data exposure that can be exploited by the individuals with the physical access to the device. Recommend the end users to sign out and to close the browser or app when not in use.

Cloud On Time app executes the front end of the applications created with Code On Time from the locally stored HTML pages. Neither localStorage nor the sessionStorage objects are available in the web view. The entire set of local data specific to the user is removed from the device when the user signs out.

Touch UI application in the screenshot is running as the Progressive Web App and behaves just like the app in the web browser. It will retain the minimized sidebar, the data filter, and the reading pane mode when restarted by the user if the options ui.state.storage and ui.state.clear are not specified in the application configuration.

Labels: Application Builder, Native Apps, User Interface

Tuesday, March 30, 2021Print Subscribe

Grids, Label Icons, Collapsible Menus

Code On Time release 8.9.16.0 introduces the significant enhancements to Touch UI.

Vertical grid lines are now displayed in the grid view style be default. Developers can selectively hide the vertical lines in the grids and the horizontal lines in both forms and grids.

Label icons are now supported. Tag the data field with the label-icon- tag and include the icon name in it. The icon will be displayed next to the field value instead of the text label. For example, the tag label-icon-work-outline will assign the material icon work_outline to the Title data field in the screenshot.

The vertical navigation menu rendered in the sidebar will display the icons assigned to the page. The vertical rendering of the navigation menu in the sidebar and sliding panels feature the collapse/expand buttons next to the menu items with the children. Only the node of the current page is expanded by default to conserve the vertical space.

The app toolbar displays the text of the left most "icon" button if there is no button bar in the form. This provides a mode of presentation on small form factor found in modern mobile operating systems.

Command New Row is now implemented. It will activate the inline editing mode and scroll the view to the very bottom while placing the input focus on the "new row" template marked with the "plus" icon.

The 3rd party icon web fonts can be now configured in the app.

The following features are introduced along with the numerous bug fixes:

(Touch UI) Fully-functional animated main menu is displayed in the sidebar and context panels with the ability to expand/collapse items while maintaining the vertically scrolling of the panel.
(Touch UI) Option ui.menu.autoExpand controls the state of the navigation menu. The default value is current causing the current menu node to display in the expanded state while the remaining items with the children are collapsed. Set the value to "all" to force all items to expand. Set the value to false to prevent the current menu node from being expanded.
(Charts) Fetching of calendar data will not cause an exception when the data view has changed and is not available at the time of the attempt to fetch.
(Touch UI) Optimized the fitting of buttons in the form toolbar for speed and precision.
(Reading Pane) Button with the "Close" icon is displayed on the left side of the reading pane detail toolbar to allow quick closing to the detail pane.
(Touch UI) The toolbar of the sidebar is hidden if the settings button is disabled and the menu is positioned in the sidebar when it is fully expanded.
(Touch UI) Page name is displayed in the accent color on toolbar when the menu location is in the sidebar. The color changes to neutral when the reading pane detail is visible.
(Touch UI) Menu items show the icons when the location of the menu is in the sidebar. Primary page icons are not displayed in the toolbar of the sidebar when the sidebar is fully expanded since the menu items are visible.
(Touch UI) Compact styling of the context values of the current master record when rendered in the sidebar.
(Calendar) Calendar events visually reflect the end time of the event instead of displaying the event with the fixed height.
(Framework) Client-side business rules returning a deferred object will not perform a duplicate invocation of the method. The flow of execution will continue if the deferred object is resolved.
(Touch UI) Fixed incorrect bottom border color of the app name in the context panel.
(Touch UI) The leading header text is now displayed in the sliding panels if header is the first item in the context.
(Touch UI) Field labels are now displayed with the font size of 12 in all display densities for a consistent presentation in grid/list/cards/panels/sidebars.
(Touch UI) Fixed incorrect position of "dropped" chevron in the lookups.
(Touch UI) Focused item outline remains visible in list box/radio button list, and checkbox list when the input is focused.
(Touch UI) Setting ui.form.lines.horizontal set to false and the tag form-lines-horizontal-none will hide the horizontal lines in the forms.
(Touch UI) Setting ui.form.lines.input set to true and the tag form-lines-input will show an solid outline around the text inputs.
(Touch UI) Frozen part of the grid row with the averages will display with the same background color as the rest of the grid.
(Touch UI) Fixed incorrect "new row" execution under certain conditions in the summary views.
(Touch UI) Eliminated the erratic horizontal scrolling when the item in the list box, radio button list, and check box list with the large number of items.
(Touch UI) Placeholder "Optional" is displayed in the nullable field values when the horizontal lines are hidden in the forms.
(Universal Input) Keyboard navigation in radio button list, list box, and check box list is handling the focus transition correctly when Left and Right buttons are pressed on the keyboard.
(Touch UI) Tag gird-lines-horzontal-none applied to a data view on the page will hide the horizonal lines in the grid presentation style.
(Touch UI) Option ui.grid.lines.horizontal will hide the horizontal lines in the data grids globally if set to false.
(Touch UI) Selection of the main menu item on the toolbar will switch the "selected" state to it while the selected URL is being loaded.
(Touch UI) Click on the app toolbar menu options will immediately switch the selection in the menu as the page loads to provide a faster selection feedback.
(Touch UI) Simplified the horizontal scrolling in the grid.
(Inline Editor) Refreshing of the data view will cause the editor frame to display if the item is in the view.
(Inline Editing) Command New Row works in infinite and summary data views. The last "Row Template" is selected in response to this command to enable inline input of the new row.
(Touch UI) Page header main icon is consistently aligned with the top of the header in any state of the page.
(Reading Pane) The reading pane detail is displayed with a fade-in animation if there is no content in the detail area.
(Touch UI) Tags h1-h6 used to present the field values in grid/list/cards have the font size of 1 element.
(Touch UI) Sort order icon in the grid header will toggle the sort order if clicked with a mouse pointer.
(Touch UI) Apps button will display the navigation menu panel on the left side of the screen if the reading pane is enabled.
(Touch UI) Grid views are resized on the legacy pages with multiple container/data views when the page is resized.
(Touch UI) The app toolbar will display the text of the left most "icon" button if there is no button bar in the form. This provides a mode of presentation on small form factor found in modern mobile operating systems.
(Inline Edior) Notification bar is instantly hidden when the inline editor is activated on the field
(Touch UI) Aggregate values are displayed with the label in the grid.
(Touch UI) Aggerate bar uses the new cell separator between the values.
(Touch UI) Tap/click on the tab bar with the navigation icons will switch the focus to provide a fast visual response after navigation has been initiated.
(Inline Editor) The focus frame shows above the horizontal scrollbar when the new row is entered in the summary view.
(Touch UI) Collapsible container body hides the overflow content.
(Touch UI) External URLs are opened in the modal pages if the reading master or derail, or if another modal page is active.
(Touch UI) Zooming to fullscreen of a modal content page does not raise an exception.
(Rich Text) Does not create nested paragraphs when the cursor is positioned at the end of the paragraph. Instead a new sibling paragraph is created to ensure a clean document structure.
(Rich Text) Consistently inserts BR element across all platforms when Shift+Enter is pressed.
(Touch UI) Enabled ability to configure multiple icon fonts in the app.
(Touch UI) Tab bar at the bottom of the app senses the notch on the iOS devices and displays the tabs with the padding above the swipe bar.
(Touch UI) Fixed incorrect positioning of checkbox slider with the footer text.
(Touch UI) Geolocation map displayed in the forms is rendered in the DPI of the device for the maximum qualify of presentation.
(Touch UI) Collapsed categories are not expanded when automatic form focus is set in the form.
(Touch UI) Input focus forces the collapsed category to initialize the layout when the field in the collapsed category needs to be activated.
(Touch UI ) Added more font size variations for the prompt to click/tap the blob for upload.
(Touch UI) The toggle for the categories is not selectable anymore.

Labels: Release Notes