Blog

New tooling in the App Studio 2025

Labels
AJAX(112) App Studio(9) 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(178) 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(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(184) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(3) 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
Monday, April 7, 2025PrintSubscribe
Introducing App Explorer

App Studio 2025 introduces significant enhancements to the Code On Time development environment, focusing on streamlined app customization and improved user experience. Key features include the “App Explorer”, which combines a hierarchical view of app configurations with the Properties Grid, offering both horizontal and vertical layouts, as well as a table mode for easier navigation. “Live Inspection" allows developers to directly interact with the live application UI to select and modify configuration elements, while “Global Search” enables querying across all configuration hierarchies. Additional features such as “Background Inspection”, “Peek Through”, and “Auto Complete” further enhance the development workflow.

The App Explorer provides a tabbed interface for quick access to different configuration sections like Settings, Models, Controllers, and Pages, and it supports both tree and table views with breadcrumb navigation. Live Inspection simplifies the process of locating and modifying configuration elements by clicking on the UI, with background inspection and pulsating icons indicating corresponding UI elements. Global Search allows for comprehensive searches across the app configuration, including specific terms and related items, with search results displayed in a list with full paths and element types.

Transform your app development workflow with the all-new App Studio 2025! Unlock powerful features like Live Inspection, Global Search, and the innovative App Explorer. Ready to revolutionize your development process? Dive into the details and learn more about App Studio 2025 now!

Upcoming features planned for future releases include a standalone mode for launching apps directly from the App Studio homepage, an Assistant panel that provides contextual information and guidance, and a Toolbox panel that facilitates the creation and transformation of UI elements. The API View will also be introduced, allowing developers to work with RESTful APIs of Code On Time applications. These updates aim to enhance the developer experience, streamline the workflow, and make the powerful configuration options of Code On Time more accessible to both new and expert users.

image1.png
The provided screenshot displays the App Explorer following a live inspection of the "Product Name" column header. The image shows the attached hierarchy and properties side-by-side, with the "Label" property of the "ProductName" field selected. A brief description explains the property's purpose. Tabs within the title grant quick access to "Settings", "Models", "Controllers", and "Pages". The right side of the title contains buttons for "Search", "Display Hierarchy as Table", "Split Vertically", and "Close".
image3.png
The ability to view key node properties in a table format is incredibly useful. Clicking on a cell within the table rows will highlight the corresponding node in the Properties Grid and focus on the property associated with that cell. Boolean properties are displayed as checkboxes, allowing you to toggle the property value simply by clicking on them. Click the “Display Hierarchy as Tree” to switch to the standard navigation.
image2.png
Finding application configuration elements is easy with App Studio's built-in search feature. Simply click the "Search" button located in the top toolbar of the studio, and enter your search terms into the provided prompt. The search icon within the prompt will pulsate to indicate that the search is in progress. Results will be displayed as a list of hierarchy nodes, each with its full path, including the hierarchy itself. Select any node to view it in the App Explorer.
Sunday, December 15, 2024PrintSubscribe
App Studio December 2024

Code On Time developers will experience a significant boost in productivity with the release of version 8.9.45.0, which introduces full drag-and-drop support and instant preview of changes in the data controller hierarchy. The new app studio simplifies the process of locating configuration elements through direct and background live UI inspection, even in the most intricate projects. This update marks a significant milestone, as it allows for data controller configuration within live applications.

image4.png

App Studio's background inspection feature displays an inspection frame over the corresponding user interface component in the live app when the selected configuration element in the hierarchy matches the component. App Studio tracks the selection in the active hierarchy and displays it over the live app.

The properties of material symbols can be adjusted using the Property Grid in the associated object's view, such as form views.

image2.png

The primary icon of the form view is previewed directly in the property grid.

The standard icon selector allows search for the icons by exact name or partial match.

image1.png

In App Studio, material symbols can be searched using the standard icon selector, which allows users to search for icons by exact name or partial match. The icon selector can be accessed when adjusting the properties of material symbols using the Property Grid in the associated object's view, such as form views.

The Code Mirror integration allows for the viewing and modification of SQL, JavaScript, and Email business rules.

image3.png

Here's an example of a JavaScript business rule that is triggered when a user clicks the Login button on the built-in login form.

Release Summary

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

  • Touch UI
    • Added a color to the material-symbol icons in the dark theme.
    • The context menu is taking into account the edge proximity tolerance when the popup menu is displayed without an arrow and the right edge of the screen is overlapped. Previously the menu would display having its right side flush with the screen edge.
    • Tap/click on the view selector of a child DataView field in the form will not cause the partially visible child rows to upscroll.
    • The views in the same "Filter Family" will share the filter when users switch between views.
    • The view's Remember property will not retain the user selection when the page is reloaded if the property is set to "No".
    • If the view is tagged as view-selector-remember-none then the user selection of the view is not persisted.
    • Fixed the incorrect positioning of the dropdown arrow when displayed on the right edge of the screen.
    • The scrollbar is not expandable if it contains 'false' in the ''expandable' data variable.
  • Universal Input Controls
    • The auto-complete suggestions displayed in the lookup field will not have the "Clear" option at the end if the field does not allow null values.
    • Deleting a lookup value text in the lookup input will not allow the user to leave the field if the field is "Required".
    • The optimization of the data input popup rendering is not performed if items contain 'color' or 'icon' definitions.
    • The data input popup can display color boxes and icons next to the item text. App Studio shows colors for the theme accent names in settings. App Studio shows various data controller components are shown with the corresponding icons.
  • Advanced Search
    • Changed the style of the "match mode" in the advanced search to "less bold".
  • App Generator
    • The "-CodeFile" parameter specified in the command line argument along with "-Develop" will start the development environment with the specified code file loaded.
    • New actions will have the specified ActionId. The default Id is assigned if the value is not provided.
    • Deleting a controller will clear the controller property of the DataView configuration in the corresponding fields of project data controllers.
    • The references to the deleted controller are cleared from the corresponding DataView fields.
    • Renaming of a data controller will also rename the reference to the controller in the DataView fields.
    • Deleting a data controller will clear the "copy" attribute of the lookups in the controllers that were using the deleted controller for data lookup.
    • The new action is created with the "ActionId" value specified in the "insert" action. This allows App Studio to create efficient "insert" transactions without impact on the legacy Project Designer.
    • The new action group is created with the "ActionGroupId" value specified in the "insert" action. This allows App Studio to create efficient "insert" transactions without impact on the legacy project designer.
    • The renaming or deleting of a view in the data controller will also remove the view references in the DataView fields of all affected project controllers.
  • RESTful API Engine
    • The 'is' and 'null' keywords are allowed in the filter parameter expression. This allows specifying expressions such as field1 is not null.
    • The RESTfulEngineBase.AllowActionPath(string) method allows overriding the action detection in the path of a resource in the POST requests. Action identifiers can be specified in the last segment only. This method allows avoiding an exception when the resource identifier matches the action name.
    • The restful API will not allow invoking actions with the generic names when specified explicitly in the URL. The generic pattern includes a1..a999.
  • Data Aquarium Framework
    • Refactored the XXS attack detection to include the field name in the error message.
    • The RequestValidationService.RequiresValidation(controllerName, fieldname) method returns true if the XXS validation is required.
    • If the missing controller is referenced on the page then the app will still load and display an exception in the UI. Previously the page was not rendered with the server-side error output making the app unusable.
    • The studio mode ignores the app's "ui.scrollbars" settings when activated in the live app.
    • It is now sufficient to specify only the Start Command Name if the Start View is specified when activating a form view. Previously the view Id had to be duplicated in the Start Argument.
    • The $app.survey API now supports the 'cancelText' option that specifies the alternative label for the 'Cancel' button.
  • Tree View
    • Hypermedia actions may define a studio "trigger" as a static value.
    • The typeAlt property is evaluated when figuring the node's property set, which allows it to change the property set dynamically upon arbitrary condition.
    • The static type is assigned to the nodes even when typeAlt is specified. This allows the nodes with the dynamic property sets to be selected.
    • The static nodes with the "iterate" peers will remain hidden until the dynamic items are loaded and created. The parent node appears empty when expanded until the dynamic children are loaded and static items are revealed.
    • The hypermedia action applied to the top-level node will refresh the tree and trigger the 'select' event if an identifier to select is not specified.
    • Refresh of the entire tree in response to the hypermedia action will not freeze the tree content if the selected node is not specified, such as when a top-level node is deleted.
    • The entire tree is refreshed if the top-level object is created or changed/renamed. The node is selected if matched to the specified identifier.
    • The "create" hypermedia action executed on the "_root" node will cause the tree to refresh and select the new node.
    • The Ctrl-click on the selected node without a 'type' will unselect the node.
    • Unified the fetching of the missing "self" hypermedia when right-clicking the node and when the action bar is updated to display the "_root" actions.
    • The "_root" node definition creates an invisible node that lands its actions to the action toolbar and context menu when no node is selected in the hierarchy. This allows users to invoke the top-level commands that apply to the entire hierarchy.
    • (PropGrid) The reset of the property values is correctly reflected in the compound property values.
    • The replaceNode method will re-evaluate the nodeType using the new node data.
    • The 'treeview.app' event contains the nodeType property calculated from the 'type' key of the current node.
    • (TreeView) The "select" event is triggered if the execution of the hypermedia action returns an empty "selectIdentifiers" array in the "result" key. This event signifies that the selection has changed. This allows the property grid to handle the event and to clear the selected object.
    • The "create" and "create-" hypermedia actions will select the "identifier" field in the property grid giving users an option to rename the object after it has been created.
    • If node's hypermedia action has the 'body' key set to null or false, then the action will have no body in the request. Otherwise the {parameters: {data: [node1, node2]}} is created in the body with the data set to an array of selected nodes.
  • Prop Grid
    • The studio trigger defined on the property level will be evaluted against the current data object representing the property grid values.
    • The change of the property set will transfer the selected property from the previous property set to the new one. This ensures the smooth user experience.
    • Specifying a 'validate'expression to the property marked as 'identifier: true' will override the standard " identifier validation. The expression has access to all field values through this and the value argument gives access to the value to validate.
    • The double-click on the information pane divider will rotate the height of the pane to fit the content in its entirety and then to the default height.
    • The property grid is not cleared when the _root element data is fetched.
    • The "reset" property will reset the specified properties to their default values if the "changed" property with the "reset" array has been changed.
    • The node's 'values' property may specify the JavaScript expression that evaluates to a list.
    • The property grid will automatically load the new property set if the node.type is an expression whenever any property values are changed. This allows displaying different property sets for the same node.
    • An exception will be thrown if the property grid was not able to fetch the data for the node selected in the hierarchy.
    • An unsuccessful renaming (changing of the "identifier" property) will cause the app to select the peer hierarchy node that does have the same identifier.
    • A click/tap on the "toggle" of a category or complex property will put the focus back on the scrollable area of the property grid. Subsequent keyboard navigation will remain active. Previously the focus was lost.
    • Missing "identifier" property will not cause an exception when a new object instance is created with "create" in the hypermedia name.
    • Method $app.touch.propGrid.select(propertyName) will choose the "identifier" field of the object.
    • The "node" hint is displayed in the info pane when the last selected property is not visible for the selected node.
    • Collapsing/expanding the focused category or complex property with "Left" and "Right" keyboard keys will refocus the property grid to allow continuous keyboard navigation of properties.
    • The hint of the first selected node in the hierarchy is displayed as a hint in the information pane attached to the properties grid.
    • A pair of "backquote" characters will wrap the contents in the <code> tag. The pair of "**" will wrap the contents in the <b> tag. The sequence of line breaks is replaced with the <br/> tag.
    • The vertical scrollbar is not auto-expandable in the Desktop mode. This prevents accidental scrolling when clicking the "..." and "arrow down"due to the scrollbar covering the buttons in the value input of properties.
  • TBD - 10/30/2024

Next Update

This release gives you changes to instantly improve your productivity and try the new Controller hierarchy configuration. tools of the Code On Time v9. The next update will follow swiftly with the similar productivity tools in the Pages hierarchy.

Wednesday, June 12, 2024PrintSubscribe
Postgres Apps

Code On Time release 8.9.44.0 includes the embedded Npgsql Data Provider that allows rapid development of the offline-capable apps with the built-in RESTful API enhanced with hypermedia directly from the PostgreSQL database..

Release Installation Instructions

Attention: If you are seeing this post in the Install prompt displayed in your browser after launching Code On Time, then you are running the release 8.9.43.0 or older. The App Studio will not be able to install the release 8.9.44.0 due its larger size. Click the Cancel button in the install prompt, close Code On Time and have it uninstalled using the “add or remove programs” of Windows. Download the release 8.9.44.0 at https://codeontime.com/download and have it installed manually. The new App Studio will handle the installation of the future product updates without issues.

Postgres Data Provider

With the integration of the Npgsql Data Provider 8.0.3.0 into the code generation library, Code On Time users can effortlessly build applications from the Postgres database without the need for additional software. These powerful low-code tools enable developers to rapidly create applications from data models derived from the Postgres database schema. The resulting apps are offline-capable and can be deployed to a cloud or on-premises server. Equipped with a hypermedia-enabled true RESTful API, these apps can seamlessly integrate with existing SSO or use the embedded user and role management system. As you develop your application, the RESTful API evolves alongside, making it the backbone of your custom client app built with your preferred technology. With Code On Time, the creation of administrative screens becomes effortless, guaranteeing a user experience that is seamless and intuitive. The quality of the UI in the produced apps is exceptional, potentially leading to cost and time savings due to the out-of-the-box functionality provided.

image1.png

This sample app was built from the DVD Rental database hosted in PostgreSQL. In the screenshot, an actor is selected with her particulars and movies presented in the reading pane. The App Studio, the powerful development environment, is embedded in the live applications built using Code On Time.

Npgsql Data Provider is a .NET library that allows developers to interact with PostgreSQL databases. It is an open-source project that is actively maintained and supported by the community. Npgsql Data Provider is a powerful tool that can be used to build a variety of applications, including web applications, desktop applications, and mobile applications.

Here are some of the key features of Npgsql Data Provider:

  • High performance: Npgsql Data Provider is one of the fastest .NET data providers for PostgreSQL. It uses asynchronous I/O and efficient caching to minimize latency and maximize throughput.
  • Comprehensive support for PostgreSQL features: Npgsql Data Provider supports all of the major features of PostgreSQL, including stored procedures, triggers, and user-defined types. It also supports the latest versions of PostgreSQL, including PostgreSQL 16.
  • Easy to use: Npgsql Data Provider is easy to use and integrate into your applications. It provides a simple and intuitive API that is similar to the .NET Framework's built-in data providers.
  • Open source: Npgsql Data Provider is an open-source project that is available under the MIT license. This means that you can use it for free in both commercial and non-commercial applications.

If you are looking for a reliable and high-performance .NET data provider for PostgreSQL, then Npgsql Data Provider is a great option when coupled with Code On Time app builder.

Miscellaneous

The following features and enhancements are included in this release:

  • (Touch UI) The column dropdown menu in Grid displays the date values formatted as smart dates (when enabled) or have the values formatted as "d", which eliminates the time component from the date. The column menu displays the distinct dates only, which makes the "time" unnecessary. The "smart dates" make it easier to find dates since the values are represented as "Today", "Yesterday", "Last Monday", etc. The applied filter shows the absolute date.
  • (Touch UI) Fine-tuned the CSS for the see-all button in the summary views.
  • (Framework) Filter parameters that do not have the corresponding field in the data controller view are ignored when the SQL filter is constructed for a SELECT statement. This addresses the exception raised in the standard membership manager when selecting a user of a role.
  • (Framework) The database-specific validation is performed when the command configuration is completed at runtime. The Guid parameter values are converted to a ByteArray if the command is executed by ODP (Oracle Data Provider). The datetime parameters are changed to DbType.DateTime2 to remove the timezone sensitivity when the command is executed by Npgsql (PostgreSQL Data Provider).
  • (Oracle) The standard membership tables are enhanced with indexes on user_name and email columns.
  • (App Gen) The generator will create the SiteContent model of the Postgres and Oracle apps in the ~/app/controllers or ~/[Namespace]/controllers folder.
  • (CMS) The CreatedDate and ModifiedDate columns are updated with the Local time. The ApplicationServices.ReadSiteContent() method uses the Local time when searching for the files with a given criteria that were modified prior to the date specified in the last argument. This ensures the natural timestamps in development and production modes. The RESTful App also works consistently across Microsoft SQL Server, Oracle, and Postgres when performing the garbage collection of the expired OAuth resources in the CMS..
  • (App Gen) The "Inserting" command is added to the data controller that has a "uuid" primary key field when the model is derived from Npgsql (Postgres). The command is set to "select gen_random_uuid()" expression.
  • (Postgres) Developers can add the built-in membership and CMS to the Postgres database when configuring a database connection for the project.
  • (Model Builder) IBM DB2 iSeries columns are derived from the original entity. Previously the properties of another column with the same name may have been used when putting together a model.
  • (Model Builder) Enhanced model construction for Postgres databases. The tsvector and Array data types are configured to disable filtering and sorting.
  • (Framework) If the unknown field is specified in the filter then it will be referenced as null without "quotes".