Web App Generator

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(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(183) 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
Web App Generator
Monday, November 18, 2019PrintSubscribe
Offline Sync and Offline Data Processor
Code On Time release 8.9.0.0 delivers unprecedented power in the hands of application developers. It makes possible creating apps that work online and offline without writing a single line of code.



The framework in the foundation of apps created with Code On Time relies on a unified API to get data and to execute actions. The models, user interface elements, and relationships are stored in the data entity configuration files on the server. The server-side code of the app relies on entity configuration to handle the requests received from the GUI of the app.


Offline Data Processor (ODP) is the new core feature of the framework. It injects itself in the unified API on the app pages marked as "offline". ODP monitors communications between the GUI and the server. If a request to change data is detected, then ODP intercepts the request, downloads data from the server to the client device, and executes the request on the JSON representation of the data replica. Subsequent requests are also executed on the replica and logged.  The log is committed to the server when the master form is saved. This enables transaction data input in apps created with Code On Time. ODP is available in all product editions.

Cloud On Time is a general moniker for the collection of native apps created by Code On Time LLC. The purpose of the collection is to allow executing online apps created with our products on the mobile devices. The app is available on iOS, Mac OS, and Windows platforms. Android version of the app is coming soon!

The app allows installing multiple custom applications on a mobile device. The user interface components of a custom application are downloaded and stored locally. Cloud On Time app loads application pages from the device storage and channels the requests to read/write data from the application GUI to its server-side components.

End users can access online applications created with Code On Time either in the web browser or with Cloud On Time app. White-label versions of Cloud On Time tailored for a particular online application will be available soon.

Offline Sync is the new product that makes possible executing custom applications in a disconnected/offline mode in Cloud On Time app. Our innovative solution relies on the Offline Data Processor of the application framework to pre-load the server-side data to the device when the custom application is installed on the device. ODP interacts with Offline Sync to read and write data. End user must explicitly request Synchronization of changes with the server.

Custom application running in Cloud On Time app or its white-label version is not affected by connection drops or unreliable online connectivity if it has Offline Sync enabled. Such application is always working in offline mode until the next time the end user chooses to synchronize data with the server.

The best part is that there is no code to write! Just enable the Offline Sync Add-on in the application features and re-deploy your app to the server.

ATTENTION: The refreshed versions of Cloud On Time app compatible with release 8.9.0.0 and Offline Sync have been submitted to the corresponding app stores for approval. Offline Sync Add-on will ship on November 19 and will be initially compatible with Cloud On Time for Windows 1.8.9.0. Cloud On Time 1.8.9.0 for iOS, Mac OS, and Windows 10 will become available later this week upon approval by corresponding app store providers. Android version is expected to ship before the end of the year.

The following features and bug fixes are included in release 8.9.0.0:
  • (Touch UI) Components of Classic UI were moved to the dedicated classic.js file. The file is included in the app with the legacy user interface only.
  • (Touch UI) Material icons are not visible until the font is completely loaded.
  • (Touch UI) Fantom "empty" tool-tips are not displayed in Microsoft Edge browser.
  • (Touch UI) View selector display Select All option next to "Multi Selection" to allow selecting all items in Gird/List/Cards mode.
  • (Touch UI) SQL business rule calling set @Result_RefrehsChildren = 1 and "code" business rule calling Resutl.RefreshChildren() will correctly synchronize the child data view fields.
  • (Universal Input)  New client library method $app.input.reset("FieldName") will cause the lookup input to reset its items. Anny cached items are cleared. Static items are re-fetched from the server.
  • (Framework) Optimized server-side population of static lookup items.
  • (Framework) Check for aspnet_SchemaVersions is now wrapped in try/catch to prevent exceptions.
  • (AppGen) Restored ability to build projects with the framework in the class library when only VS2019 is installed.
  • (Touch UI) Pages with infinite data scrolling instantly update the menu on the toolbar instead of waiting for data to become available.
  • (Touch  UI) New option ui.multiSelectMaxRowCount controls the maximum number of rows that can be selected at once when specified in ~/touch-settings.json . The default value is 1000.
  • (Publish) Publishing will delete _server folder before the app is compiled to avoid  conflicts with Microsoft One Drive on Windows 10 trying to backup the folder.
  • (Touch UI) Basket input will cause the DataView fields to to move down with the content when items are wrapped to the next line.
  • (Touch UI)  Keyboard entry in the basket input will stay i the inbox box after hitting Enter key. Previously the first item in the basket was selected
  • (Batch Edit) Borrowed fields specified in the Copy property of lookups are visually presented in the Batch Edit form.
  • (Calendar) Popup calendar displays a count of events for individual dates when the option dates.calendar.countEvents is set to true in ~/touch-settiings.json  or if the data field is tagged as calendar-count-events. By default, the counting of events will be performed only in the calendar displayed on the sidebar. Previously counting has been performed always.  This feature improves performance.
  • (Touch UI)  Button "Show Less" is visible both on the Advanced Search form and in its context.
  • (Client Library) Gird/List/Cards collects the current row exactly as the form does when actions are executed.
  • (Touch) Fixed the issue with the page stub adjustment when the stub is not available.
  • (Touch UI) User interface behaviours conditioned on a return to the previous "virtual" page (previous form) are executed exactly at the end of the processing cycle. Previously this was not the case, which caused various GUI imperfections under some conditions.
  • (Client) Collection of action argument values does not include "null" field values that are not changed or read-only. This significantly reduces the payload of actions stored in the log by ODP.
  • (Framework) Added token-based resource translation to surveys.
  • (Framework) Visual Basic compatible FieldValue constructor.
  • (Touch UI) Event menuinit.app is raised just after the initialization of the navigation menu nodes.
  • Method BlobValidateAccess returns true if a request is received from ReportViewer. Such requests provide the validation key of the app and can be trusted.
  • (Framework) FieldValue instance constructed with new and old values is marked as modified only if the values are not the same.
  • (Touch UI) Blob upload prompt has a uniform height both on mobile and desktop devices.
  • (Touch UI) The default view style to present items on small screen is Grid. Previously the width of the screen was taken into account to present data as 'List' instead. List view style is selected automatically if long text or blobs are detected in the fields.
  • (Touch UI) Image preview will be displayed as semitransparent if it is going to be cleared after update.
  • (Offline Sync) Navigation menu is trimmed when online/offline status of the device is changed.
  • (ODP) Offline Data Processor is enabled automatically on pages marked as "offline".
  • (ODP) A dedicated data processor is assigned to any child form to allow multi-level transactional input.
  • (ODP) Numerous enhancements of many-to-many and BLOB field processing. ODP creates client-side actions to delete/insert junction table entries and marks the m2m field with Scope="client".
  • (ODP) Synchronized commit of logged actions with multiple instances of Data Processor.  Now commit and cancellation of in-memory data works correctly.
  • (ODP) If option odp.compressLog is set to false in ~/touch-settings.json, then no compression of log is performed. Log compression is enabled by default to combine multiple insert/update requests into a single request with an extended set of values.
  • (ODP) Server-side Calculate and New commands are executed by data processor if the app is not working in offline mode and if the device is online.
  • (ODP) Pending files of pending deleted records will not be uploaded when the master record is committed to the server.
  • (Client) JSON data is parsed with the standard JSON.parse if native data conversion is not required. This improves performance of ODP and Offline Sync.
  • (Project Designer) New property "text" is now supported in the data controllers. The value of the property is displayed as a user-friendly name of the data controller by ODP and Offline Sync.
  • (ODP) "Report..." and "Export..." commands will not execute and display a warning when:
    1) There are pending changes it the form.
    2) The app is offline and and the sync has not been performed.
    3) The device is not online.
  • (Framework) All views in MyProfile data controller are tagged as odp-enabled-none to facilitate server-side calls both in online and offline mode.
  • (OfflineSync) If offline sync is not enabled then $app.odp.offline() always returns false. Previously a value of 0 could have been returned when there are no offline data controllers.
  • (ODP) Multi-odp pass-through submission of files/blobs works correctly.
  • (ODP) If a new file/blob is submitted and later cleared by the user then there will be no attempt to submit a new blob when the record is committed.
  • (ODP) The cache of "load data" server responses in maintained in the master ODP instance. Previously a global ODP cache was used.
  • (ODP) No attempt to load data from the server is made if negative values are detected in external filter in the $app.odp.getData method. This will be the case when working with "new" data rows.
  • (Client Framework) Avatars are not added to the local storage when the token is refreshed in "hosted" mode in Cloud On Time or its derivative.
  • (OfflineSync) Logged transactions are stored in separate files for improved performance.
  • (Client Framework) Method $app.AccountManager.avatar is compatible with online and native modes.
  • (Touch UI) Added fail safe code to ensure that $app.input.focus will not fail if called before the app is initialized to ensure Mac OS compatibility.
Monday, April 9, 2018PrintSubscribe
Changing Field Values Via JavaScript Business Rules

Some form of validation is required in every application to help the user insert the correct data. Applications created with Code On Time app generator offer validation in the form of business rules.

Validating the Last Name field of the New Employees form.

Let’s add validation business rules the Employees controller of our sample Northwind app.

Open the Project Designer. In the Solution Explorer, switch to the Controllers tab, right-click on Employees / Business Rules node, and press New Business Rule.

Creating a new business rule on Employees controller.

Specify the following:

Property Value
Type JavaScript
Command Name Insert
Phase Before
Script
if ($row.LastName == 'Smith') {
    this.preventDefault();
    $row.LastName = null;
}

The above script will run when the user presses Save. It will check if the user has specified a Last Name of “Smith” – if so, it will cancel the save operation and clear the field.

Save the new business rule. On the toolbar, press Browse to run the app. Navigate to the Employees page and create a new record.

Creating a new employee with Last Name of "Smith".

Enter values for the employee and press Save. The save operation will not be executed, and the Last Name field will be cleared.

The Last Name field has been cleared.

Our business rule does ensure the user does not enter an incorrect value, but it does not make it clear to the user what is going on. We will want to add some feedback in the form of a message box to help the user understand.

Change the business rule as shown below:

if ($row.LastName == 'Smith') {
    this.preventDefault();
    // show message box
    $app.alert('Last Name "Smith" is not allowed.').done(function () {
        // update field value to null
        $app.input.execute({
            values: [
                { name: 'LastName', value: null }
            ]
        });
        // focus on the field
        $app.input.focus({ fieldName: 'LastName' });
    });
}

Our updated business rule has a few changes. Notice that the $app.alert function is used to display a message to the user. However, this alert will show a different form and change the current context. Attempting to update the field LastName after an alert is displayed will attempt to update a LastName field inside the alert form – which does not exist. Therefore, a done handler will need to be added to the $app.alert method call in order to execute code after the user closes the alert.

One more point to notice is that the $row variable is only in scope during the execution of the business rule. The asynchronous code in the done handler is executed when $row is out of scope. Therefore, it is necessary to use the $app.input.execute API to update the field values when the user returns to the Employees create form. The execute method accepts an object with the property values that contains a list of key value pairs. The $app.input.focus API is called in order to focus on a field called LastName as well.

Save the business rule and regenerate the project. Create a new employee with the last name of “Smith” and attempt to save. Notice that a message box now notifies the user that the last name is not allowed.

Alert message box is displayed to the user.

Press OK to close the message box. The Last Name field has been cleared and is currently focused.

The last name field is cleared and focused.

There are other ways of displaying a message to the user without interrupting the workflow. Let’s try the following:

if ($row.LastName == 'Smith') {
    this.preventDefault();
    $row.LastName = null;
    // focus and show message next to field
    this.result.focus('LastName', 'Last Name "Smith" is not allowed.');
}

The example above will clear the field, and use the result.focus() method to focus on the field, and display a message next to the input. The result can be seen below.

Focus message displayed next to the LastName field.

Another technique is to use the notification API to display a transient message to the user at the bottom of the screen.

if ($row.LastName == 'Smith') {
    this.preventDefault();
    $row.LastName = null;
    this.result.focus('LastName');
    $app.touch.notify('Last Name "Smith" is not allowed.');
}

The result can be seen below:

image

The notification will disappear after a default of 2 seconds.

Wednesday, March 7, 2018PrintSubscribe
App Factory vs App Factory (Advanced)

When users create a new project in the app generator using release 8.6.6.0 and later, the project type will now be App Factory.

App Factory projects will create an ASP.NET-hosted web site project, deployable to any server running Microsoft Internet Information Services (IIS).

These projects contain both a REST API web server and stream HTML, CSS, and JavaScript to web browsers, to support user interaction through a publicly accessible web site. App Factory projects also function as a REST API server for native Mobile Apps.

Developers can also enable App Factory integration with DotNetNuke and SharePoint.

App Factory project folder directory root contains metadata files required by the app generator, as well as the Visual Studio solution file. An “app” folder contains the generated code required to run the server.

Project structure of App Factory projects.

Note that projects created before release 8.7.0.0 will use the “WebSite” folder name instead.

The app folder contains a set of resources required for the application to function. The App_Code folder contains the application framework. Upon running the application, the code in that folder is automatically compiled and executed.

All styling is stored under ~/css folder. All client-side scripts are stored under ~/js folder. Standard styling and script files are read by the framework, joined together, and streamed to the client (native app or web browser). The “_ignore.txt” file located in the two directories enumerates which non-standard files and directories are included in the output.

App folder of App Factory projects.

App Factory (Advanced)

An additional checkbox is now present on the New Project screen – “Implement application framework as class library (for experienced users only).”

Implement application framework as class library.

When this option is enabled, the application framework code is placed in a separate class library project, named after the project’s namespace.

Folder structure of App Factory (Advanced) projects.

The developer must have an instance of Visual Studio 2010, 2012, 2013, 2015, or 2017 installed on the development computer in order for the application to run. At compile-time, the Microsoft Visual Studio compiler must compile and package the application source code stored in the namespace folder into a *.dll file under the app folder. Only then will hosting software (Microsoft IIS) will be able to run the application.

App Factory (Advanced) projects store standard CSS and JS files under the class library. Upon compilation, these files are saved as embedded resources and read from the class manifest.

Custom CSS files can be placed under a “css” folder under the “app” directory. Custom JS files can be placed under the “js” folder under the “app” directory. The framework will read any files in those directories and not excluded by the “_ignore.txt” file, and stream them with every page request.

Pros of App Factory (Advanced)

  • Application source code is stored in a re-usable class library.
  • Hosting provider or customer is unable to view or edit the application source code.
  • Developer can only modify code during debugging if solution platform is switched to x86.

Cons of App Factory (Advanced)

  • Microsoft Visual Studio is required.
  • Application takes longer to generate and compile.
  • Developer cannot modify code files while application is running.

Old Project Types

A number of project types have been deprecated or disabled:

  1. Web Site Factory – renamed to App Factory.
  2. Web App Factory – renamed to App Factory (Advanced).
  3. Mobile Factory – a variant of Web Site Factory with Classic disabled. Deprecated. Use App Factory with User Interface set to “Touch UI” instead.
  4. DotNetNuke Factory – a variant of Web App Factory designed to work as a DNN module in DNN 7 and below. Deprecated. Use App Factory with DotNetNuke Connector instead.
  5. SharePoint Factory – a variant of Web App Factory designed to work as a SharePoint extension in SP 2010. Deprecated. Use App Factory with SharePoint Add-in instead.