Thursday, April 8, 2021
UI State and Logout URL

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.