App Studio

New development tools.

Labels
AJAX(112) App Studio(8) 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(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(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
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.

image3.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.

image4.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.

image1.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.

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.

image2.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.

image1.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.

image1.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.

image2.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.
Continue to November 2023 Hotfix