Web 2.0

Blog
Web 2.0
Tuesday, March 5, 2019PrintSubscribe
Build Apps Faster With Maps and Postal Address Verification
Code On Time release 8.7.9.0 brings the upcoming live designer another step closer to reality and introduces various cool features in the application framework including Postal Address Verification, external JavaScript business rules, enhanced batch editing of many-to-many fields, maps in forms, and much more. We also hope that you will notice the significant increase in the code generation speed.

For the past few years we were developing a new innovative development environment to revolutionize Rapid Application Development of custom business applications that work offline, online, and on-premises. This particular release makes your apps ready for Code On Time v9. Today you are starting the Design environment by selecting the corresponding option in the project wizard. In the very near future your own app will be launched with the new design environment  overplayed on top! The upcoming live designer is implemented as addon.appbuilder.dll automatically included in the ~/app/bin folder of apps created with v9. The add-on integrates its own scripts in the application. The design environment is composed of Project Explorer and Object Inspector. Developer can click on user interface elements of their live app to inspect properties of the corresponding elements and have them changed when needed.  Changes to some properties (such as labels), will provide instant feedback in the user interface of the live app. Any significant changes will cause the app to be re-generated and restarted when the developer is ready to see the end result.

The mechanism of code generation has been changed significantly in release 8.7.9.0 to speed-up the code generation and improve the start time of the app. In many cases the app generator will replace only a few files in the source code and eliminate the need for hard restart of the app.

Published app will not include the add-on DLL in the output. App Builder add-on is not required for your apps to work. It is activated only if Code On Time generator is installed on the machine and if your app is accessed via localhost address. Both Touch UI and Classic UI apps will work with the new app builder, when released. You will be able maintain the source code of your apps in Visual Studio and work with the source control systems such as Git. Nothing will change from the development prospective.

Autofill and Postal Address Verification

Postal Address Verification is the new feature built on top of Autofill, the mechanism embedded in the universal input elements of apps created with Unlimited Edition.



An autofill group is created by tagging multiple fields with tags that start with "autofill-" prefix. For example, autofill-address-city. Component "address" in the tag defines the name of the group. Component "city" is the group-specific purpose of the field and does not need to match the physical field name. The trigger field in the group will cause "AutoFill" command to execute. More than one trigger can be declared by tagging multiple fields with autofill-[groupname]-trigger attribute. All trigger fields must have values for "AutoFill" command to execute.

The framework implements processing of autofill-address-, autofill-geocode-, and autofill-map- groups. Group address will verify postal addresses with Google Geocoding API. Addresses in the United States can be also optionally verified with USPS.  Group geocode will perform address lookup from latitude and longitude fields in the group. On-Demand field tagged as autofill-(address|geocode)-map will resolve the address into a static map presented to the user.

Event menuitem.app

New event menuitem.app is triggered on the document to allow a custom script to form. For example, the following script will display a login form if Test item is selected in the menu.

(function () {
    $(document).on('menuitem.app', function (e) {
        if (e.item.url === '/pages/test') {
            $app.touch.show({
                controller: 'MyProfile', 
                view: 'loginForm',
                startCommand: 'New',
                startArgument: 'loginForm'
            });
            return false;
        }
    });
})();

This is how the app will behave in response to the user actions:


External JavaScript Business Rules

It is now possible to create JavaScript business rules without explicit definition in the data controller. Save the file in ~/js folder of the app, put a breakpoint, and hit Ctrl+F5 when the app is loaded in the browser. Your custom business rules will execute in Before phase giving you complete control over various behaviors of the app. This type of business rules is also support in native mode.

This particular sample when force the user to enter USA in the Country field of Suppliers controller for the record to save. This is a perfect example of client-side validation.

Also the user will not be able to execute New command and therefore will not be able to bring up the form to create new records.

(function () {
    $app.rules = {
        'Suppliers': {
            'Update':
                function (dataView, args) {
                    var data = dataView.data();
                    if (data.Country !== 'USA') {
                        $app.input.focus({
                            fieldName: 'Country',
                            message: 'Only USA is allowed in this field.'
                        });
                        return false;
                    }
                },
            'New': function (dataView, args) {
                $app.touch.notify('You are not allowed to create new records.');
                return false;
            }

        }
    };
})();

This how it make look at runtime:


Also Included


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

  • (Batch Edit) Many-to-Many fields display "keep original selection" and "delete original selection" options to allow either expanding the set of selected options or to have it replaced with a new set.
  • (EASE) Tracking of created/modify by/on fields does not overwrite the values of Created By/On fields when blobs are uploaded.
  • (EASE) Modified/Created By/On fields are displayed on form views in edit/read mode.
  • (EASE)  Modifed/Created By/On fields are not displayed in form views in "new" mode.
  • (Classic UI) Projects with advanced options and "Classic UI" are correctly generating the theme folder.
  • (Framework) Data access objects based on models without a primary key will not result in compilation error when the app is generated.
  • (Touch UI) Floating category without wrapping will display 2 or 3 columns of fields with the minimal width of the form equal or greater than MD and LG accordingly.
  • (Touch UI) Floating category with wrapping will display 2, 3 or 4 columns of fields with the minimal width of the form equal or greater than SM, MD,  and LG accordingly.
  • (Touch UI) Import treats dates serialized in Excel files as UTC dates and performs de-serialization equivalent to the one performed when getting data from the server.
  • (Touch UI) Smart dates are instantly refreshed if a date value is changed by user via direct input without using the calendar popup.
  • (Touch UI) Map locations on iOS and Mac open via OS-specific URLs.
  • (Touch UI) URLs prefixed with "_blank:" will open in the default OS web browser when running in native mode (Cloud On Time or branded host app).
  • (Classic) Modal forms with conditionally visible content are resized after dragging.
  • (Classic) Initial state of "form" buttons with When Client Script expressions is calculated correctly.
  • (Touch UI) JavaScript expressions specified in When Client Script property of actions are evaluating the current row using the same mechanism as the Visible When and Read Only When expressions of fields and categories. This improves performance and addresses issue of incorrect values tested when form views are opened.
  • (Touch UI) RTF editor toolbar is fully visible whatever the position of the "Rich Text" field in the form view.
  • (Touch UI) RTF fully supports "Dark" theme.
  • (Touch UI) Calendar view does not display "New/grid1" option when user clicks the calendar to create an event.
  • (AppGen) Display name of the projects is used as application name when the app name is not defined in the project features.
  • (Touch UI) ListBox/RadioButtonList/CheckBoxList do not cut the bottom of item in FireFox browser.
  • (Classic)  Dedicated Login page correctly links bootstrap CSS file.
  • (AppGen) It is now again possible to create new projects based on ASPX page model with the framework in the class library.
  • (Framework) Message "unable to load..." with either the name of the resource script of path to the script is reported if there was an exception while enumerating client library scripts.
  • (App Gen) All translated files are created with UTF-8 encoding Byte Order Marker. If the translated resources are the same, then the files are not overwritten.
  • (AppGen)  All files are saved in UTF-8 format with explicit Byte Order Marker during the build process of the project.
  • (AppGen) VB projects with the core framework in the class library are generated correctly.
  • (Touch UI) Confirmation controller will display the value of "data field" of the context record in the header of the form.
  • (Touch UI) Action with confirmation controller will cause explicit validation of field value before execution. If action causes validation error, then the confirmation controller will not execute until all validation errors are fixed.
  • (Action State Machine) Calling BusinessRules.PreventDefault() method will cause action state machine to stop processing of actions unless Result.Continue() was explicitly requested or the command name was Insert|Update|Delete. 
  • (Action State Machine) If a value is assigned to Result.NavigateUrl in business rules, then the framework will stop processing of the actions unless Result.Continue() is called explicitly in business rules.
  • (Touch UI) Event createlayout.dataview.app is triggered on the document whenever a form layout is required. Event generatelayout.dataview.app is triggered once and the output is cached as needed.
  • (Project Wizard)  App generator version is embedded in DataAquairum.Project.xml to ensure regeneration of core framework files when f the project has been cloned/copied after a product update installation.
  • (Project Wizard) Data Model List or Business Entity List is automatically focused when Data Model & Business Logic page is activated.
  • (Project Wizard) Data Model List is fully redrawn after a new model is added.   Business Entity List is fully extended when there are no models.
  • (Client Framework) Method $app.execute accepts filter in the form of an object. For example, filter: {CategoryID:5}.
  • (Client Library) Method DataView.data() returns an object with properties representing current values of fields. New object property "_modified" will have its own properties representing old values of modified fields.
  • (Framework) XmlConverter automatically locates the first element in XML document and takes its name for the root JSON property if the root is not specified.
  • (AppGen) Removed redundant parenthesis for simple "Not" unary expressions in the code of c# projects.
  • (Framework) XmlConverter performs a robust enhanced conversion of XML to JSON to support v9 Project Designer and Inspector.
  • (Framework) User settings embedded in the page do not include "server" section from ~/touch-settings.json. This section is removed before inclusion in the page.
  • (Framework) Developers can implement method ApplicationServices.ValidateBlobAccess to alter the verification of user access to the row with the blob and the blob field itself. The overridden method can return false to disable blob access validation.
  • (Framework) Removed "download done" cookie creation when Blob.DirectAccessMode is true.
  • (Touch UI) Partially visible summary view is not scrolled into view when an option on its toolbar is selected.
  • (Touch UI) Fixed the bug in the implementation of auto focus on the last input when the window is activated.
  • (Framework) Added auto-registration of Code On Time App Builder v9.
  • (Touch UI) Reduced redundant functionality of jQuery Mobile for a more compact code.
  • (Touch UI) JavaScript business rules automatically skip updating values of fields with unchanged values.
  • (Touch UI) JavaScript event menuitem.app is triggered on document object before the menu option is selected. Event property "item" provides access to "url", "description", "title", and cssClass associated with the selected menu item. If an event handler returns false or prevents default then the menu option is not processed by the framework. Use this method to execute custom actions always available in the user interface.
  • (Client Framework) Added support for declarative JavaScript business rules that do not require explicit definition of the rule.
  • (Touch UI) Method $app.touch.show accepts object as "filter" property in the options for simplified syntax of filter definition.
  • (Framework) TLS12 is always enabled in the apps.
  • (Framework) Apps with ASPX page implementation do not serve files with *.json extension over HTTP.
  • (Framework) Denies HTTP access to acl.json, touch-settings.json, ~/permissions, and ~/reports folders in apps with SPA implementation of pages.
  • (Framework) Default settings from ~/touch-settings.json are stored in application cache for improved performance.
  • (Touch UI) Email icon is displayed in context menu as an independent action for "email" fields.
  • (Touch UI) Script error is displayed as notification when an exception is raised in the rendering phase of the view on the client
  • Saturday, May 19, 2018PrintSubscribe
    Home Page and Toolbar

    Let’s explore a few customization ideas for the home page and toolbar of your app.

    The default home page displays a table of contents. The toolbar has “hamburger” button (“bars” icon) of the left side and content menu button (“more” icon) on the right sidebar. The illustration is presented in Light theme with Modern accent.

    The default home page of app based on Touch UI features a table of contents.

    A customized home of an app based on Touch UI may display marketing and informative content to the end users instead of a default table of contents. Let’s remove the table of contents from the home page and replace it with a marketing message for the end users of the app.

    A customized home of an app based on Touch UI may display marketing and informative content to the end users instead of a default table of contents.

    Have you noticed that the new design does not have the Menu and More buttons on the toolbar?

    By default the data pages of the app do display both buttons just like the default home page with the table contents.

    The standard features of the toolbar in apps based on Touch UI are Menu and Context buttons.

    Let’s hide the Menu and More buttons on the toolbar on the data pages as well.

    The toolbar of a Touch UI app without Menu and Context button.

    This is how the data pages will look when the left sidebar is expanded.

    Customized toolbar of a Touch UI with the sidebar expanded.

    Select the project name on the start page of the app generator and locate “Home” page in the Project Explorer on the right hand side of the Project Designer.

    Hierarchy of pages in Project Explorer of Code On Time app builder.

    Right-click and delete both containers on the page.  This will remove the table of contents displayed to the authenticated users and the welcome message displayed to anonymous users.

    Double-click the home page, select Jumbotron as the Template, save changes, and generate the app. Inspect the home page. It will look similar to the one in the picture. Try other templates to find the best fit for your app.

    Sample customization of the home page in an app based on Touch UI.

    Lock the page from being overwritten during the code generation before making any changes to the content of the template. Double-click the home page in the Project Explorer and specify First Time Only in the Generate property. Save the changes. The home page icon will display with the “lock” indicating that any changes to the app will be preserved if the page exists already.

    Locked icon of a page in Project Explorer indicates that the page will not be ovewritten.

    Click Develop on the toolbar of the Project Designer and add a new stylesheet with the name of choosing under ~/app/css/ folder.

    Custom stylesheet in an app based on Touch UI created with Code On Time app generator.

    Enter the following CSS rules in the file app/css/StyleSheet.css.

    /* 1. Hide "hamburger" button when the toolbar does not have the "Back' button  */
    
    .app-bar-toolbar:not(.app-has-back) #app-btn-menu {
        visibility: hidden;
    }
    
    /* 2. Hide the context button with "more" icon*/
    
    .app-bar-toolbar #app-btn-context {
        visibility: hidden;
    }
    
    /* 3. Align the logo area of the page with the content when there is no sidebar on the left side */
    
    body:not(.app-has-sidebar-left) .app-bar-toolbar .app-logo {
        left: 16px;
    }
    
    /* 4. Shift the logo text more to the left in the expanded sidebar */
    
    body.app-has-sidebar-left:not(.app-has-minisidebar-left) .app-bar-toolbar .app-logo {
        left: 20px;
    }
    
    /* 5. Move the "icon" buttons of the toolbar to the right */
    
    .app-bar-toolbar .app-btn-cluster-right .app-btn {
        margin-right: -28px;
    }
    

    The comments provided next to the CSS rules explain their effect on the User Interface of the app.

    Rules (1) and (2) are hiding Menu and More buttons on the toolbar. Rule (3) shifts the text in the Logo area to the left when the sidebar is not visible.

    Customized home page of an app based on Touch UI presented on a narrow device.

    The same rules also apply to data pages. A data page of an app based on Touch UI with customized toolbar on a narrow screen is shown next.

    A data page of an app based on Touch UI with customized toolbar on a narrow screen.

    If the screen of the device is narrow then modal pages will be automatically replaced with fullscreen pages. In that case rule (1) does not apply and the Back is visible next to the name of the previous view.

    A fullscreen page in an app based on Touch UI.

    In this screenshot the user continues to drill into data and views the Category information of a product. Button Back remains visible and button More is not displayed. Rule (4) shifts context actions to the right of the toolbar.

    A fullscreen page in an app based on Touch UI with the image preview in the page header.

    Here is how the same changes will look in Dark theme with Construction accent.

    This is the home page without Menu and More buttons on the toolbar.

    A customized toolbar and home of an app based on Touch UI created with Code On Time app generator.

    This is the data page with the expanded sidebar.

    Expanded siderbar on app based on Touch UI.

    This is the data page with the collapsed sidebar in inline editing mode.

    Inline Editing mode of a data row in an app based on Touch UI created with Code On Time app builder.

    This is the same app on a small device without More button in the toolbar. A fullscreen page of an app created with Code On Time application generator presented on a narrow screen.

    A fullscreen page of an app created with Code On Time application generator presented on a narrow screen.

    Touch UI is entirely CSS-driven and allows customization of various aspects of user interface.

    Friday, May 11, 2018PrintSubscribe
    Inline Editing and Native Client

    Release 8.7.0.0 is finally here and introduces many new amazing features! Your apps will run in a native mode with inline editing, multi-level master-detail data views, transactional data input, and more.

    Inline Editing mode in a form of app based on Touch UI created with Code On Time app generator.

    In the coming days we will post multiple video tutorials covering the new features available in your apps. Subscribe to our YouTube to say up-to-date at https://youtube.com/codeontime

    Please make sure to watch the following tutorials right now:

    1. Controlling Inline Editing
    2. Multi-Level Master-Detail
    3. Wide Scrollbars
    4. Default Actions in Grid/List/Cards
    5. Transactional Data Input

    Native Apps are discussed in these tutorials:

    1. Mobile Development with Code On Time
    2. Online and Mobile Preview
    3. Configuring Application for Cloud On Time.

    Inline Editing

    We are very excited to offer the first practical and universal implementation of inline editing in Touch UI. Inline Editing is the built-in feature available in apps created with Premium edition of Code On Time. It requires zero configuration and offers a high level of control when needed.

    The feature is stable and ready for production use. We have a long list of various enhancements planned already. Many of them will be addressing some imperfections that we know about. 

    Another minor release will go out in about a week and will introduce a performance enhancing feature called Optimistic Saving. This feature will be enabled by default in all apps. It will further enhance inline editing and change our approach to data saving via forms in general.

    Native Client

    The native client is here. We have started with two native clients for Windows 10 and Windows 7. Our app generator is a Windows-based product. We wanted to make sure that you can build native apps without requiring anything else on the development machine. In the next 45 days we will release support for iOS with Android and MacOS to follow.

    Download the universal native client for Windows 7 and above at https://codeontime.com/releases/cloud-on-time-for-windows-7.

    Download the universal native client for Windows 10 at https://www.microsoft.com/en-us/store/p/cloud-on-time/9nblggh404nb.

    Multi-Level Master Detail

    Touch UI now supports multi-level master-detail relationships between data views in dashboards, full-screen, and modal forms. Data View fields can another such field in the data controller serve as the filter. Developers can configure relationships with any number of levels and complexity.

    Multi-level master-detail form in an app based on Touch UI created wtih Code On Time app builder.

    Data Pre-Fetching

    Build a new app and try it in a web browser. You will notice that the data displays virtually instantly. Open the source of the page with CTRL+U and you will see that the data comes embedded in the page. This is a performance enhanching feature targeting web users of your apps. We are preparing a tutorial explaining how that works.

    Transactional Data Input

    Transactional data input is now available. The feature is disabled by default. Enter odp.enabled=true in ~/touch-settings.json and your will be able to enter data in transactional fashion if you add Data View fields in createForm1.

    Note that inline editing is not yet compatible with ODP (Offline Data Processor). Some features of the server-side framework are also missing.

    Release 8.8.0.0 will go out in June of 2018 along with a new product called Offline Sync Add-On. The release will make ODP a standard feature enabled by default and will make possible to build apps that work in disconnected/offline mode without writing any code. The majority of the code has been completed. We are preparing the infrastructure to start selling Offline Sync.

    New Folder Structure

    New apps will have a new folder structure. Learn more at http://codeontime.com/blog/2018/03/app-factory-vs-app-factory-advanced.

    Real Time with Code on Time

    We are planning to start hosting live video sessions on our YouTube channel each Friday at 10:00 AM. The purpose is to provide a real time demonstration of various product features. Viewers will be able to submit questions ahead of time, watch the show live, or review the latest episodes at their own convenience. Each session will include answers to your questions, we will tell you about the new stuff we are working on. The primary purpose will be to demonstrate how to use our product with practical exercises.

    Release Summary

    This is a brief description of the features and bug fixes included in this release:

    • New field values changed with custom actions are displayed when user activates the invisible content with tabs. Previously the original row values were displayed instead.
    • Method $app.execute now supports argument property "background" to control if the UI is to be blocked. If set to true then a non-blocking background call is executed without any indication of progress.
    • Data views displaying data in grid are automatically synced when user returns to the previous pages and there were changes to the same data controllers prior to return.
    • Wide scrollbars are enabled if (1) ui.scrollbars.wide == true or (2) ui.scrollbars.wide == 'pointer' and the pointing device is not "touch".
    • Tags inline-editing, inline-editing-none, inline-editing-when-pointer, and inline-editing-option-none are controlling "Inline Editing" mode in the view.
    • Web.config now includes <authentication mode="None"> for apps with no membership.
    • Ensured js/_ignore.txt is copied to output directory in Web App Factory projects.
    • ListBox, CheckBoxList, RadioButtonList styling is matched to accents.
    • Fixed issue with agenda not selecting rows properly.
    • Fixed issue with incorrect page being displayed as selected in site menu.
    • Added support for "view-selector-none" tag to disable view selector on lookup fields.
    • URL Hashing replaces spaces with "+" when getting from URL to avoid exception.
    • Fixed Azure Publish re-authentication bug.
    • Dbl-click on modal title bar will toggle fullscreen mode of a form.
    • Added haxisformat and vaxisformat properties to allow formatting the axis values using the following options: none, decimal, scientific, percent, currency, short, long.
    • Publish now supports FTPS by using "ftps" in the URL.
    • Blob Handler now checks if user has acess to BLOB column and requested row before streaming to user.
    • Blob adapters are publicly accessible if no membership is enabled.
    • ApplicationServices.HandleError and ApplicationServices.HandleException is now overridable to allow for custom error logging.
    • If command Confirm with argument set to the name of the child dataview field is specified then field values are accessible in business rules of custom data controller as @Parameters_MasterFiel1, etc. It is now possible to implement custom search with stored procedures as explained at https://www.youtube.com/watch?v=ClCHL8JuuMg&t=0s&index=4&list=PLy2g3SjvDe2b2cl9i0msBaMVLntQucZtb.
    • SQL business rules support @[FieldName]_FilterValue1 and @[FieldName]_FilterValue2 for reading filter values.
    • New Advanced Search tags for data fields.
        - tag “search-sample-distinct” will force distinct samples
        - tag “search-sample-all” will force all samples
    • Field values with HtmlEncode = false and containing HTML content will not be trimmed.
    • Advanced Search displays "yes" and "no" options for Boolean fields.
    Continue to Scrollbars