Code On Time: Features

Blog

Features

Thursday, September 30, 2021Print Subscribe

Multi-factor authentication

A combination of a username and password provides access to the personalized features of applications. Unfortunately both elements of the online identity are the primary source of the security breaches. Username and password are obtained by perpetrators through social engineering attacks, spy programs, and other nefarious means. The complexity of our lives forces us to share the passwords with loved ones and friends. The robust mechanisms of online identity protection are urgently needed in every application.

Many organizations adopt security systems that require the end users to enter a numeric time-based verification code generated by an authenticator app installed on the user’s mobile device. The unique secret key is associated with the user account in the application database. Authenticator app uses the same secret to generate a new verification code periodically and does not require a network interaction with the application. If the correct verification code is not provided at the time of sign in, then the access to the application is not granted even if the user is entering the correct username and password combination.

The username, the password, the text message or email with the verification code, the phone with the authenticator app with optional fingerprint scan or face recognition are the components of the multi-factor authentication.

2-Factor Authentication Setup

Applications created with Code On Time can force the end users to provide an additional piece of information to confirm their identity after the username and password were confirmed. By default, the 2-Factor Authentication is the opt-in feature. It can be enabled in the user context menu.

The option “2-Factor Authentication” is available to the authenticated user. The 2FA setup is not available to the end user if the user identity is confirmed by an OAuth provider. Application will rely on the authentication verification methods of the provider instead. The initial activation of 2FA will require the user to confirm their password.

Next the user is giving a consent to enter a verification code after the successful sign in. By default two verification methods are offered. Users may opt into getting a verification code via email and to use an authenticator app.

The verification code delivery via email will rely on the email address associated with the user account. This is a less secure method than using an authenticator app since there may be other individuals who can read the user’s emails.

Choosing the more secure method of verification will present the user with the QR code that needs to be scanned in Google Authenticator, Microsoft Authenticator, or another similar app. The QR code includes the information about the secret associated with the user account, the name of the app, and the name of the user along with some additional configuration data.

Google Authenticator immediately begins showing the verification code after the scan of the QR code. The time code will change every 30 seconds. There is no need to write down the verification codes since they will not be usable in the future. Other authenticator apps have a similar user interface and may require fingerprint scan or face recognition to display the verification codes.

If the user is not able to scan the QR code then they may opt to enter the setup key manually directly in the authenticator app.

Users may also indicate that they need help installing an authenticator app. Three apps are offered by default. Scanning of the QR code with the camera of the mobile device will direct the user to the corresponding app store.

Users must press the Next button when their authenticator app is configured through the QR code scan or after the direct input of the setup key.

The configuration screen will present the list of the one-time use backup codes The backup codes are also available for the other verification methods including email, text message, and call.

The backup codes are stored directly in the user account. Each backup code can be used one time only as an alternative to the verification code in the situations when the mobile device with the authenticator app is not available and there are no other means of getting a verification code. Button Save will create a file with the current set of backup codes. Button Generate will produce a new set of backup codes. It is recommended to print the backup codes and have them stored in the safe place.

Users complete the configuration by pressing the Enable button. This will result in the request to enter a verification code. Type in the verification code displayed in the authenticator app or get the code via email. Successful input of the verification code will enable the 2-factor authentication for the user account. The backup codes are not accepted during the setup verification. The objective of the setup verification is to ensure that the user is able to get the verification codes with the selected methods of delivery

Living With 2-Factor Authentication

The application will still require the user to enter the username and password in the custom or standard Login form.

Successful identification of the user will present the request to input the verification code. The user may opt to enter a one-time use backup code as an alternative to the verification code. Input of the incorrect verification or backup code will count as a failed login attempt. Multiple failed attempts to verify the username and password will result in the locked user account.

If the device can be trusted then the further requests to input the verification code can be suppressed by selecting the “Trust this device” option. The encrypted cookie with a unique verification code associated with the user name will be created. The application will verify the code stored in the cookie after the successful sign in to confirm the user identity.

Selection of the verification method may reveal the Get Verification Code button. The verification code is delivered when the button is pressed.

The setup screen can be re-entered by choosing the same “2-Factor Authentication” option in the user context menu. Users will be greeted with the verification code input screen before the setup options are presented. Users may change the verification code delivery methods, download the backup codes, or generate a new set of backup codes. Changes will be saved after another successful verification code input.

Disabling 2-Factor Authentication

Users may disable the 2-factor authentication by withdrawing the consent to enter a verification code. The withdrawal of the consent in the setup screen will disable the 2FA for the user account when the Save button is pressed.

The multi-factor authentication can be permanently disabled in the application by setting the server.2FA.enabled option to false in the ~/app/touch-settings.json configuration file.

Prerequisites

2FA requires the additional data to be stored in the user account in the application database. If you have enabled the standard membership feature in your Code On Time app, then there is no need to do anything else. The application will store the 2FA setup in the Comment field of the user membership account.

The screenshot below shows the Comment field of the admin user configured for multi-factor authentication.

If the custom membership manager is configured for the Code On Time application, then make sure to map the Comment logical field to the corresponding column in your own “Users” table.

The application framework provides two methods in the ApplicationServices class to read and write the user authentication data. Developers may override the methods ReadUserAuthenticationData and WriteUserAuthenticationData to store the data elsewhere.

Verification Code with SMS and Call

Developers may enable three additional methods of verification code delivery in the app. These include sms, call, and dial. Enter the following options in the touch-settings.json file of your application to enable these methods:

Re-enter the 2FA setup and enable the verification code delivery via text message and call. Save the setup.

Verification methods app and email are enabled by default and available on the 2FA setup screen. Delivery via email will require specifying the SMTP server parameters in Settings | Features | Smtp Configuration section of the project configuration.

There is no built-in support for sms or voice call delivery of the verification code in the framework. Developers may sign up for the text and voice delivery services from their favorite messaging provider and override two methods in the ApplicationServices partial class.

Method OtpVerificationData must provide the means of verification code delivery for the given username parameter. The implementation below uses the sample static values.

Method OptAuthenticationSendVerificationCode implements the physical delivery of the verification code. The implementation must send the contents of the message parameter to the contact using the code specific to the messaging provider.

Users will initiate the delivery by selecting the corresponding method and pressing the Get Verification Code button. The delivery confirmation message will be displayed at the bottom of the screen. The framework obfuscates the email addresses and phone numbers available in the list of methods.

The dial verification method entered in the server.2FA.verify.dial option in touch-settings.json file. It will provide the user with the phone number to call. Use this delivery method if the live operator will be available to the application users to assist with their identity verification. The operator may enter the one-time use backup code directly into the user account in the Membership Manager or in a custom form. This backup code may be a word or a number that the operator will communicate to the user after their identity is confirmed.

Trust No One

Developers may force the users to always enter the verification code when signing into the app.

Parameter server.2FA.trustThisDevice must be set to 0 in touch-settings.json to hide the “Trust this device” option on the verification code input screen.

The default value of the parameter is 180. It specifies the number of days during which the user will be able to avoid entering the verification code when signing into the application after the initial verification with the “Trust this device” option.

If the user has lost access to the “trusted” device then the 2-factor authentication must be disabled and enabled one more time on the user account to invalidate any previous trusts.

Verification Code Length and Period

The default length of the verification code is set to 6 digits that are changing every 30 seconds. Application framework will compare the provided verification code with the codes produced in the 180 second window.

The length of the verification code, the period of change, and the testing window can be changed like this:

The longer testing window can be specified if the delivery of the verification codes is slower than 3 minutes.

Parameter server.2FA.code.window is provided exclusively for the application. It will generate multiple verification codes in the specified time window to find the match to the verification code provided by the user.

Do not change the length and period if you expect the end users to work with the authenticator apps from Google or Microsoft. These apps will ignore the parameters and generate the 6 digit code every 30 seconds.

Salesforce Authenticator will respect the length and period parameters. It will correctly generate the 4-digit verification code every 60 seconds as instructed by the app.

Developers can specify their own set of the authenticator apps to be available on the setup screen. Option server.2FA.setup.authenticators is an array of name/url pairs in touch-settings.json. This custom set is presented to the user asking for help with the installation of the authenticator app. Users are prompted to scan the QR code with the device camera, which will present the link leading to the app store directly on the device.

Backup Codes

By default the 2FA setup will produce ten 8-digit backup codes. Developers may opt to configure their own set of backup codes.

This configuration will produce the set of five 3-digit backup codes.

Users must print or save the backup codes and use them if the access to the verification methods selected during the setup is lost.

Auto-Setup

By default the 2-factor authentication requires the users to opt in. Developers have an option to automatically generate the 2FA setup for the user accounts at the moment when the user is singing in.

For example, the following configuration in touch-settings.json will automatically create the 2FA setup with the email-based delivery of verification codes.

Users will enter the username and password and press login. The framework will create the 2FA setup if it does not exist. Users will be immediately presented with the request to enter the verification code. The only option to get the verification code is the email.

Make sure to set up the SMTP Configuration in the Settings | Features of the application. Otherwise users will not be able to access the application.

Applications may support the other methods of verification that can be configured in server.2FA.verify section of touch-settings.json as explained above. Users will need to enter the setup mode through the user context menu to change their verification preferences.

If a user withdraws the consent to enter the verification code, then the application will perform the automatic setup during the next sign in to keep the user accounts protected.

Login Without Password

Automatic setup makes it possible to disable the requirement to enter the password during the setup. Set the server.2FA.disableLoginPassword to true and server.2FA.setup.mode to auto in touch-settings.json. Optionally specify the automatic setup methods. The default setup method of verification code delivery is email.

The built-in login form will not ask the user to enter the password.

The framework will locate the user account by name. If the user is found, then the automatic 2FA setup is performed when needed. The user will be asked to enter a verification code to sign in.

The initial verification is done via email. Users may opt to enable the authenticator app verification in the setup. We recommend also setting the server.2FA.trustThisDevice option to 0 to ensure that the verification code is always requested.

Labels: Application Builder, ASP.NET Membership, Features, OAuth, Security

Friday, August 20, 2021Print Subscribe

August/September 2021 Roadmap

We are very pleased to announce the host of new features that are becoming available in the next few weeks. 2-Factor Authentication, new REST API v2, and barcode scanning with the device camera, are just some of the features that are coming at the end of the summer.

2-Factor Authentication

The next release 8.9.23.0 will introduce 2-Factor Authentication that will be enabled by default in apps created with the Unlimited Edition of Code On Time.

End users will have an option to strengthen their username and password with the one-time verification codes that are delivered via email, text message, or “authenticator” apps such as Google Authenticator or Microsoft Authenticator.

User context menu provides a new option that helps the authenticated user to set up the 2-factor authentication. If the user has the “authenticator” app on their mobile device, then a simple scan of the QR code on the setup screen will configure that app to generate the verification codes to confirm to sign in.

Authenticator app does not have a physical connection to your application. The scan of the QR code during the setup allows the app to retrieve the secret stored in the user record. The app generates a new verification code frequently. There is no need to remember the code. You will be able to sign in as long as you have access to your phone.

You will be required to enter the username and password.

The successful sign in will result in the request to enter the verification code if the 2-factor authentication was set up for the account previously.

Another default option is to receive an email with the verification code that expires in a few minutes. Developers also have an option to instruct the app to send a text message or call the user with the verification code.

If the correct time-based verification code is entered, then the user is signed in. Incorrect input of verification code will count as a failed login attempt with the eventual lockout of the user account.

“Authenticator App” is a very secure option since there is no communication with the 3rd party systems. The default “Email me at...” option can be disabled in the application if required.

Users can also enter the single use backup codes provided to the user during the setup process.

REST API v2 / App Middleware

We are pleased to announce the new REST API v2 available in the apps created with the Unlimited Edition.

The server-side framework automatically responds to the requests to read and write data by creating JSON or YAML based output. Hypertext Application Language links are automatically included in the responses to enable the API discovery.

The new REST API is the automatic reflection of your data controllers, lookups, and dataview fields. The root entry point of the API serves as the introspection end-point that helps to learn what’s possible.

API Keys and access tokens help authenticating the request. The new API can be used internally and also as a middleware for the projects that require database access. Developers can even enable the “middleware” mode when no user interface options are available and only the API requests are being handled.

Camera-Based Barcode Scanning

Your apps will finally have an option to scan the barcodes and QR codes without relying on the external scanners. The powerful UI Automation and Kiosk UI already available to the app developers are getting a boost! The QR code icon on the toolbar activates the camera-based scanner powered by the Zxing (zebra crossing) library.

The camera scanner icon is available when barcode support is enabled. Developers will also have an option to automatically activate the scanner when a particular form is displayed or a field is focused. The scanned barcodes and QR codes are placed in the barcode processing queue, which is also populated by the external scanners and readers.

The simple and powerful IfThisThenThat API allows creating complex rules that force the UI of the app to perform various actions in response to the contents of the barcode queue.

V9 and Integrated Community

We have made great progress in delivering the new browser-based development environment for your apps. The screenshots above show the live preview mode of upcoming v9. It will become the default mode for Code On Time developers and provide property grids and toolbars with drag & drop configuration and point-and-click inspection of live apps.

The community forum is integrated into the new development environment and will allow discussing and documenting various features right from the property grid. The news feed will also be readily available along with the place to see the latest discussions, tickets, and blog posts.

Labels: Application Builder, Barcodes, Features, REST, Security

Friday, July 30, 2021Print Subscribe

Drag, Cut, Copy, and Paste Your Data

Clipboard is an indispensable tool if you are composing an email, creating a document, or writing code. “Cut and paste” helps us to rearrange our thoughts. “Copy and paste” comes handy when we are out of ideas.

An input field in a custom business app provides instant access to the system clipboard when editing a value. A selected fragment of text can be dragged and dropped into a new position. App users work with the collections of data items. A data item represents a group of related fields. Wouldn't it be great to take advantage of the clipboard and drag & drop to copy or move the items between or within the data collections?

Clipboard and Drag & Drop With Structured Data

The clipboard commands and drag & drop can benefit a business app when applied to the structured data. Consider the Order Management Dashboard presented below.

You can see the end user dragging the product from the menu and dropping it directly on the list of details of the selected order. The product Boston Crab Meat is semi-transparent in the menu of 77 products while it is being dragged. The “drop” frame outlines the Order Details as a target accepting the product. The mouse pointer is displayed as the “copy” arrow. The tooltip with the name of the dragged item is shown next to the pointer.

The result of the product “drop” is shown next. The product is no longer visible in the menu of 76 products presented on the right-hand side of the dashboard. The dropped product is now linked to the selected order. It is visible in the list of details. The “drop” frame has disappeared.

The following screenshot shows the state of the dashboard just moments after the user has started dragging the product. The list of details is still empty. The mouse pointer is a no-drop icon indicating that the drop is not accepted in the current position. The “drop” frame will appear when the pointer is over the list of details.

The end user can select the Copy command from the context menu of a product. The “drag indicator” doubles as the “more” menu when tapped or clicked. The command is also visible on the toolbar of the Products grid.

Here is the result of the Paste command executed three times on the Order Details. The product Aniseed Syrup has disappeared from the menu of products, which is now reduced to 75 items. The product is visible in the list of order details with the quantity set to 3. The Paste command on the toolbar of the details shows the tooltip with the description of the copied item and its source.

This application also enables the drag & drop capabilities for the Shippers. It may be useful when implementing the rearranging of items.

The “drag indicator” icon is shown in each row next to the values in the first column of the grid. It replaces the standard “more” icon. The mouse pointer switches to the “grab” style when hovering over the icon. It prompts the end user that the corresponding item can be dragged.

Dragging of the item will switch the pointer to “no-drop” when dragging over the targets that do not accept the drop. The dragged item is semi-transparent and the tooltip next to the system pointer explains what is being dragged.

The list of shippers is configured to accept the drop of its own items. The mouse pointer style is “move” when hovering over the items in the same list.

Dragging to the other user interface elements of the Shippers grid will cause the entire list to become the “drop” target.

Cut/Copy/Paste and Drag & Drop in Touch UI

Touch UI provides the built-in data clipboard with the persistent state. System actions Cut/Copy/Paste and item dragging is enabled in the app with the simple tagging of the corresponding data views. Commands CutPaste, CopyPaste, and DragDrop are automatically executed by the framework in response to the user actions. Developers can create custom JavaScript, SQL, and Code business rules responding to the commands. The command argument indicates the name of the source data controller. Developers have access to the target row of the command and the row that was cut, copied, or dragged. The source row fields are prefixed with the name of the source data controller. There is no built-in processing for the commands and their interpretation and security is left up to the application developers. If multiple items were copied, cut, or dropped, then the corresponding command is executed for each item in the context of the transaction. The successful execution of the command for all items will result in the automatic commit. An error will rollback the effect of CutPaste, CopyPaste, and DragDrop for all items. Clipboard objects created with Cut and Copy commands are available to all pages of the application. This makes it possible to offer a comprehensive clipboard experience with the structured data. The clipboard contents remain persisted until the next Cut/Copy is executed by the user. This enables pasting the same data multiple times. Developers may opt to clear the clipboard after each CutPaste or CopyPaste command when needed. The unique unified data processing of Touch UI allows creating a consistent clipboard and drag & drop experience for the structured data. Let’s learn how to build this Order Management Dashboard.

Dashboard Configuration

Begin by creating a new project with Code On Time. Connect to the instance of the Northwind database. Create the following models with the default settings: Orders, Customers, Employees, Shippers, OrderDetails, Categories, Products, and Suppliers. Optionally configure the orders to sort by dates with the most recent ones at the top. Activate the project designer and create the new custom data controller with the name Dashboard1. This controller is not based on any data model. Select Orders, OrderDetails, and Products controllers with Ctrl+click and choose Copy in the context menu of either one of them. Right-click the Dashboard1 controller and choose Paste. This will create the corresponding DataView fields. Set the Filter Source of OrderDetails field to Orders and Filter Field #1 to Order ID. This will enable the master-detail relationship between the Orders and the Details in the dashboard. If the order is selected, then the details will be filtered to show the linked items. Set the Filter Source property of the Products field to Orders but do not select any filter fields. The product menu will behave as any other detail in the master-detail relationship. It will hide if there is no order selected in the dashboard. It will show up and refresh when the order selection has changed. The server-side code will also have access to the primary key of the order. Create the view form1, set its type to Form, the label to Order Manager, and tag it as material-icon-category. Create two categories in the form1. Set the flow of both categories to New Column. Rename the categories by selecting the corresponding command in the context menu to orders and products. Drag the Orders and OrderDetails fields to the first category. Set the Page Size of the Orders data field to 3. Also set its Auto Highlight First Row to Yes. This will ensure that only the three most recent orders are visible with the first one selected when the dashboard is loaded. Next set the Page Size of the OrderDetails data field to 25. Drag the Products field to the second category and set the Page Size of the created data field to 7. The Dashboard1 data controller will look like this in the Project Designer on the Controllers tab.

Now it is time to configure the Cut/Copy/Paste and Drag & Drop. Tag the Dashboard1 / views / form1 / orders / OrderDetails data field as shown below to enable the pasting and dropping of Products into Order Details

item-paste-Products item-drop-Products

Tag the Dashboard1 / views / form1 / products / Products data field with the following tags to enable Cut, Copy, and dragging of Products:

item-cut item-copy item-drag myapp-product-menu

The custom tag myapp-product-menu will be used later when filtering the product menu. Create the page called Dashboard and drag it after the Home page. Copy and paste the data controller Dashboard1 onto the page. Set its property Show Action Buttons to None. Enter Wide in the Icon / Custom Style property to remove the sidebar on the page. The visual configuration of the dashboard is now complete!

Implementing Paste and Drop

Commands CopyPaste, CutPaste, and DragDrop are executed on the OrderDetails data controller when the user pastes the previously cut or copied product or drags and drops one from the product menu onto the view. We will create a single SQL business rule to handle all of these situations. Our objective is to insert or update a record in the Order Details table.

Create a new SQL business rule in the OrderDetails data controller. Set its phase to Execute and its Command Name to CutPaste|CopyPaste|DragDrop regular expression. Enter the following script:

The business rule is triggered when the command with the name matching the regular expression is detected by the app framework on the server.

The SQL script will attempt to increment the Quantity column of the existing [Order Details] row with the product ID matching the parameter @Products_ProductID. This parameter is supplied by Touch UI and its value is set to the dragged, cut, or copied ProductID. Note that it is possible to access any other property of the product by specifying the name of the data controller as a prefix separated with the underscore character from the field name.

Touch UI also supplies the value of the parameter @OrderID. It is set to the value of the OrderDetails.OrderID field in the “drop” or “paste” target item. If the target is the entire Order Details view then the field values are set to NULL with the exception of the fields specified in the Filter Fields property. The values of these fields are borrowed from the selected master row. The business rule has the value of the selected OrderID regardless of the drop or paste target.

If no rows have changed after UPDATE then the SQL business rule will INSERT an order detail with the same product and order identifiers with the quantity of 1.

Filtering Items in the Product Menu

Let’s make it so that the product menu in the dashboard is empty unless an order is selected.

Choose the Products data controller in the Project Designer and set its Handler property to ProductsBusinessRules. Browse the app to generate the placeholder file ~/app/App_Code/custom/Rules/Products/ProductBusinessRules.cs. Right-click the controller and choose Edit Handler in Visual Studio.

Enter the following code:

Method EnumerateDynamicAccessControlRules will impose the access control restrictions when the app is retrieving the data for grid1 view of the Products tagged as myapp-product-menu. This is exactly how the product menu is configured in the dashboard. The name Orders specified in the Filter Source property of the data view field Products is ensuring that the order ID selected in the dashboard is available under the “Orders” alias to the business rules.

If the order ID is not available, then our list of products will be limited to those with the primary key set to -1. Such products do not exist and therefore the user will see the empty list of products.

Otherwise we will deny access to the products that are already linked to the details of the selected order. Such products will not be visible in the product menu.

Trying It Out

Run the app and try populating order details with Cut/Copy/Paste and Drag & Drop. You will notice that the product menu gets shorter as more details are created in the selected order. The framework automatically syncs the details and the product menu with the server after each successful CutPaste, CopyPaste, or DragDrop command.

If you insert a new detail with the help of the New command or delete a few details from the order then the product menu will become out of sync. The selected order is not changed if you perform these operations. The menu will have to be refreshed manually.

Copy and Cut commands move data to the app clipboard. The data remains there even when you refresh the page or restart the browser and sign in with the user identity. You may want to clear the clipboard after each Paste.

Paste and Drop do not display a confirmation message and execute instantly. There may be circumstances when the user assent is required.

JavaScript Business Rules

Let’s perfect the syncing of the product menu and provide some pre and post processing when products are pasted or dropped onto the order details.

Create the file ~/app/js/dragdrop.js with the following code. It declares the syncProductMenu() function and the custom client-side business rules for OrderDetails.

The function syncProductMenu() will locate the product menu on the dashboard and request it to sync once. The default ID of the Dashboard1 data controller instance is view1. The name of the dataview field Products is specified as the argument of syncOnce method. This method will wait for the user interface to stop being busy and sync the data. Subsequent calls to syncOnce will cancel the previous requests to avoid redundant calls. Use this method whenever a dataview on the page requires a data refresh.

The business rule responding to the CopyPaste command will interrupt the execution and display a confirmation. The method $app.confirm returns a promise to the framework. Touch UI will proceed to execute the command if the promise is resolved, which happens when the user agrees to proceed by pressing the OK button in the confirmation prompt.

The post-processing will sync the product menu after the details are inserted or deleted.

If the copy CopyPaste command has completed successfully, then a custom confirmation with the text describing the clipboard contents is displayed.

The command CutPaste is followed by the clearing of the clipboard.

Advanced Techniques

The default scope of the app clipboard is “global”. Data placed in the clipboard is available on all pages of the app to Paste. You can limit the scope of the clipboard to the current page by setting the option clipboard.scope to “local” in ~/app/touch-settings.json file.

Tags item-paste-Controller and item-drop-Controller make it possible for the user to target individual items in the data view. End users can also paste and drop data by targeting the entire view. There will be situations where the items shall not become the target. Tag view-paste-Controller will make it possible to paste only through the context menu of the dataview. Tag view-drop-Controller will cause the drop target to extend to the entire view when its item is target.

Cut/Copy/Paste and Drag & Drop are relying on the clipboard to accumulate and perform execution of the CutPaste, CopyPaste, and DragDrop commands. There is no default interpretation for these commands. If your app is relying on the Offline Data Processor to allow transaction input of master-detail records, then the server-side execution of these commands makes little sense. The master-detail data is accumulated and staged by the ODP directly in the WebView. Only the saving of the master record will cause the transaction to be executed on the client. If you want to support the data clipboard and drag & drop with ODP then you will need to write a custom interpretation of the commands in JavaScript.

The live app https://demo.codeontime.com allows cutting and pasting products between supplier and category masters. ODP is enabled on the Categories and Products pages, since their Offline property is set to yes. ODP is enabled in the "offline" pages loaded in the web browser and also in the disconnected mode when the app is hosted in Cloud On Time. following script implements a custom CutPaste and CopyPaste, which will replace the category or the supplier of the pasted product.

Conclusion

The dashboard can be further enhanced to allow dragging and dropping the order details onto the product menu to provide an alternative method to delete the details.

If the order detail is dropped onto another order, then the detail product can be moved between orders.

The dedicated Products page can provide the Copy and Cut commands. The pasting of the products into Order Details will automatically work on the dashboard page since the clipboard contents are persisted.

If the items in the dataview have a sequential order, then tagging the dataview as item-drag item-drop-Controller will enable the drag & drop movement of items. Use the physical name of the data controller instead of “Controller” in the tag. Implement the business rule to change the item indexes in the response to the DragDrop command.

The consistent user interface of Touch UI makes it possible to create amazing apps with spectacular results that are impossible to achieve with any other tool.

Labels: Application Builder, Features, Form Builder, Tips and Tricks, User Interface