App Studio

Live editing of fields in App Studio, menu item alignment, and simplified SSO.

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(8) OAuth Scopes(1) OAuth2(11) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(10) PKCE(2) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(180) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(80) 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
App Studio
Thursday, March 28, 2024PrintSubscribe
Live Editing in Studio, SSO, Menu Alignment, etc

Release 8.9.40.0 introduces new features and product enhancements. These include live editing in app studio, simplified single sign-on, alignment control for menu items in the app toolbar, improved logging in Sync.*.xml files, and a significant productivity increase over the legacy Project Designer.

Editing Fields in App Studio

This is the first release that includes the App Studio capable of making changes to the configuration properties of the fields and having them persisted in the project design. The following field properties can be changed in this release: Type, Length, Allow Filtering, Allow Sorting, Label, Primary Key, Read Only, Virtual, Show In Summary, Data Format String, and Allow Nulls. Please continue using the legacy Project Designer to make other changes to your application.

App Studio performs instant changes to the data controllers and also logs the corresponding entries in the Sync.*.xml files to ensure the next project refresh will reproduce your work and merge it with other developers' changes. There is no need to generate the app - just click on the “frozen” application to have it reloaded with the new configuration of data controllers.

The logging in the Sync.*.xml files have also been improved. The studio will continuously update the last log entry with the additional property values. Changes to multiple properties of a project configuration element are included in the same log entry, which significantly reduces the size of the log.

The legacy Project Designer creates ten entries in the log if you make ten modifications to the field label. You must also generate the app to preview the changes. The new App Studio creates one log entry with the last variation of the field label as long as you do the edits within ten minutes of the last change. The app must be reloaded to preview the result of changes.

App Studio offers tremendous increase in productivity over the legacy Project Designer.
image3.png

Changes to field properties are now persisted in the project configuration. Edits of the field labels will be reflected instantly in the user interface.

The Project Explorer hierarchy in the App Studio now displays the views, categories, and data fields. Make sure to inspect your own project to verify that the hierarchy is correctly representing your app's data controllers. Actions, business rules, and commands are expected to be included in the next release's hierarchy.

We are adding the universal search capability in the App Studio. It will allow you to locate configuration elements of your app by typing a few characters. Selection in the search result will instantly open the corresponding hierarchy and focus on the matching property.

Single Sign-On Enhancements

Federated Identity Management is now possible with the identity providers and consumers published to a virtual folder on a web server, powered by IIS or IIS Express.

Registering client applications is greatly simplified. The consumer registration dialog shows the Provider Uri that can be copied along with the Client Id and Client Secret to the consumer application.

image1.png

The streamlines identity consumer registration makes it easy for the app administrator to configure the single sign-on.

The Redirect Uri can be copied to the identity consumer app registration when the identity provider is registered in the client app.

image2.png

The identity provider registration form was reorganized to streamline the copying of configuration parameters from the identity provider app.

The OAuth Identity Provider also simplifies registration of identity services from Google, Microsoft, etc.

Menu Alignment

The menu items in the toolbar are automatically centered by default if three or more menu items are available to the user. Otherwise the menu items are aligned to the left.

image5.png

The menu items in the application toolbar are now centered by default. Configure the menu alignment in the Client / User Interface section of the project settings in the App Studio.

Developers can specify the preferred menu item alignment in the Client / User Interface / Menu / Location / Align property directly in the application settings with the help of App Studio..

image4.png

This is the Settings hierarchy presenting the item alignment options for the menu located in the toolbar.

Summary

The following new features and product enhancements are included in the release:

  • (Framework) Resizing of the sidebar will cause the toolbar menu to refresh without fade-in effect.
  • (Framework) The ui.menu.align option in the ~/app/touch-settings.json controls the horizontal alignment of the menu items in the toolbar. By default the options are centered if there are at least three items in the menu. The supported menu alignment values are auto, left, center, and right.
  • (SSO) Identity consumers report a JSON error directly in the browser when the provider is refusing the connection.
  • (SSO) If the identity provider is configured as "Auto Login", then the consumer app will display an error message if the identity provider is not online.
  • (SSO) The identity consumer app will not attempt to redirect to the identity provider if it is not online.
  • (SSO) The calculated provider_uri becomes visible in the OAuth Identity Consumer registration form when the new consumer record is saved.
  • (SSO) Federated Identity works correctly in the provider and consumer apps deployed to a virtual folder.
  • (Touch UI) The TreeView API implements createNodes and replaceNode methods.
  • (App Studio) The appearance of the changed object properties is reflected in the hierarchy above the Properties Window..
  • (Universal Input) Tag a data field as text-style-(primary|large|medium|important|accent) to change its presentation style.
  • (Touch UI) The default menu alignment is now centered if there are at least three items available to the user.
  • (FIM) Federated Identity works with the providers and consumers of identity that are deployed to a virtual folder on the IIS Web Server.
  • (App Studio) The studio log will display the runtime server errors when the app fails to reload after it has been re-generated or synced. This allows them to continue using the studio tools to address the issue even if the app is inoperable.
  • (Data Aquarium) The $app.cookie() method will set the 'path' of the cookie to the baserUrl of the app without the trailing "slash".
  • (Data Aquarium) The $app.urlArgs(url) method correctly detects parameters with empty values specified in the argument. A map of parameters is returned.
Friday, March 1, 2024PrintSubscribe
Enterprise Edition, Resizable Sidebar, Tree Menu

Code On Time app builder version 8.9.37.0 introduces new product editions, resizable sidebar, menu items rendered as tree, multiple Offline Data Processor enhancements, and miscellaneous bug fixes.

Enterprise Edition

The new “Enterprise Edition” of Code On Time app builder combines Offline Sync with the formerly Unlimited Edition. Offline Sync is the magical ingredient that turns an online app into an offline application capable of running without Internet connection in all major browsers and in the native mode.

Community Edition

The new “Community Edition” is the special version of the Enterprise Edition. Developers can use this new product to create any number of apps with any number of users for educational, nonprofit, and commercial purposes. Download the Community Edition now and start building your first offline or online app!.

Resizable Sidebar

An app displays a sidebar when the device screen or browser window is large enough and has a landscape orientation. Users can resize the app sidebar by dragging the right border separating the sidebar from the page contents. A double-click on the sidebar divider will toggle its width between the default and mini state. Developers can now set their preferred sidebar width in the Client / User Interface section of the App Studio settings.

image2.png
The screenshot shows the sidebar resized to take up half of the app window. The list of suppliers shows the cards formatted by a custom render. The user-defined width of the sidebar will be adjusted to make sure that it never exceeds the 50/50 proportion when the display orientation or window size is changed.

The sidebar will switch to a mini state when users drag the sidebar divider all the way to the left.

Tree Menu

The new Tree presentation style of navigation menu is activated when developers use the App Studio to set the Settings / Client / User Interface / Menu / Location property to have the Sidebar value.

image1.png
Developers may choose to display the app navigation menu in the sidebar. The default presentation style of the sidebar menu is set to Tree. The compact navigation hierarchy blends seamlessly in the user interface.

The ThreeView is the new user interface component of Touch UI. It was first introduced in the App Studio tools to present hierarchies of the data controllers, navigation menu, data models, and settings. The future product released will demonstrate other exciting uses for this simple and powerful feature.

Features

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

  • (Framework) Integrated jQuery 3.7.1 in the application framework.
  • (Framework) Upgraded to the latest Newtonsoft.Json and YamlDotNet.
  • (Touch UI) The sidebar is now resizable.
  • (Touch UI) Added the TreeView-based menu to the app sidebar.
  • (ODP) The offline data processor detects the undefined context values and converts them to null when populating the static lookup items with the context dependency.
  • (ODP) The offline data processor is using the controller metadata to construct the filter when performing requests. Previously the data fields in the PageView instance were used instead, which provided an insufficient set of fields in some instances.
  • (Framework) Fixed incorrect population of the static lookup values for the fields with context mapping when the value of such a field is first changed and then restored by the user.
  • (Framework) The SQL exception is not raised when users search/filter views that have both the many-to-many fields and "formula" fields.
  • (App Gen) Add-ons section is disabled in the Project Wizard. All existing and future add-on features are now added to the apps created with the Enterprise Edition.
  • (Data Aquarium) The JavaScript business rules engine will report the runtime exceptions in a notification.
  • (Touch UI) Context menu renderer ignores the leading dividers that may be occasionally available under some conditions. This eliminates the "thick" dividing lines in the sidebar and list menus.
  • (Reporting) BLOB-based images in the RDLC reports are using the hash of the validation key for the request validation purposes.
  • (Touch UI) The $app.touch.notify() method invoked with the "block:true" option will block the incoming notifications until the specified notification is dismissed. This prevents the App Studio from blocking an exception raised when an app is started in development and the server-side exception is reported on the start.
  • (Framework) The new ReportBase.ToReportDefinition(string) method allows overriding the contents of the RDLC report definition XML document at runtime.
  • (Touch UI) Removed the legacy theming of the "native" apps.
  • (Framework) The cache key for the combined CSS included the theme, accent, and the authentication status of the current user. The latter was not included previously.
  • (Touch UI) The menu treeview in the sidebar is positioned below the list of context actions if 'ui.menu.position' is set to 'bottom'.
  • (Offline Sync) The Settings option is not available to the offline users on offline pages.
  • (Touch UI) The "My Account" option is not available if the device is not online.
  • (Offline Sync) The standard offline/offline123% user account is automatically created when the membership is installed in the database.
  • (App Studio) The "thin" scrollbar is displayed in the code generation log when the app is generated or synchronized in the studio.
  • (App Studio) The app is surrounded with a thin border when the studio mode is activated.
  • (Offline Sync) The "cloud" icon on the toolbar will reflect the pending uploads when the static pages are without data.
  • (PWA) The worker closes the "offline" database in the IndexedDB if there "blob" store is not found.
  • (Offline Sync) The offline-sync.js is linked to the app payload only if the user is in the “Offline” role.
  • (Offline Sync) The offline capability is integrated in the apps created with the Enterprise Edition and Community Edition of Code On Time.
  • (Touch UI) The menu options, app buttons, and user avatar icon are instantly visible on the content pages, fullscreen data pages, and summary pages when the physical HTML page is loaded in the browser window.
  • (App Studio) The correct theme is loaded for the App Studio when the user toggles the Light|Dark theme in the settings.
  • (Touch UI) The Quick Find displays the auto-complete results fetched from the data visible in the view. This functionality was broken in the previous release.
  • (App Gen) The legacy versions of jQuery are removed from the project when the solution file is revised.
  • (Touch UI) The default sidebar width is specified in the ui.sidebar.width parameter in ~/app/touch-settings.json.
Wednesday, November 1, 2023PrintSubscribe
November 2023 Hotfix

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

  • (Framework) The errors are displayed as notifications when evaluating the availability of actions in the given context. Developers will see a notification displayed if there is an error while evaluating the When Client Script expression specified on an action. Such expressions are written in JavaScript and allow implementing the conditional availability of actions.
  • (Framework) The legacy syntax [FieldName] will not conflict with the new recommended method of referencing fields in the When Client Script expressions of actions. The recommended syntax is this.FieldName. For example, this.UnitPrice > 100.
  • (Designer) The Windows-based legacy designer does not crash when selecting the Controllers, Fields and a few other nodes in the Project Explorer.

We are aggressively executing on the roadmap of the App Studio, the new embedded development environment for applications created with Code On Time. The App Studio is available in the apps with the HTML page model and Touch UI. Make sure to inspect the various user interface elements of your application and view their properties in the new Project Explorer hierarchy.

Developers that rely on the ASPX page implementation or Classic UI will have an opportunity to try the new tools in the upcoming releases. The project list and the standalone tools will appear directly in the same page that presently provides the newsfeed when the app generator is started.

image1.png
The Project Explorer hierarchy is displayed when a field in form or grid/list/cards is inspected. An individual without any understanding of the application will have instant access to the project configuration directly from the live app running on the locahost in their favorite browser. The hierarchy is working in the readonly mode in this release.

A few clicks allow making changes to the application behavior in the Settings hierarchy in a live application running on the localhost.

image2.png
Click the Settings button on the App Studio toolbar to activate the Settings hierarchy. Multiple properties can be configured directly in the live application right now.