Web Form Builder

Blog
Web Form Builder
Sunday, June 20, 2021PrintSubscribe
Drawing Pad

Taking photos in business apps often requires the visual annotation of the image. Another common scenario is sketching on the pre-defined template. Touch UI provides a built-in drawing pad that works seamlessly with the BLOB fields of your app. The feature is enabled by default and can be activated with a tap on the “Draw” button.


The drawing pad will be immediately displayed in fullscreen mode in response to the tap. It offers several tools: pen, highlighter, blur, and eraser with multiple levels of undo and redo. You can draw with a finger or a stylus compatible with the touch-screen device. Mouse pointers will also work. 

The “pen” and “highlighter” will impact the image as one would expect. The “blur” tool will blur the image contents. The “eraser” will remove the effect of the other tools.


Developers can handle the blobdrawtoolbox.app event triggered on the document and override the available tools and their properties such as the width of the stroke and the color choices. The toolbox property of the event provides access to the default tool configuration.

The drawing is composed of multiple layers. Saving of the drawing will compose the final image that will be submitted to the server when the data record is saved. The end user can perform multiple sessions of drawing prior to the submission since the layers remain preserved until the record has been saved.


Sketching on the template will require a default image to be provided. Create a custom script to handle the getdefaultblob.app event. The field property will indicate the name of the blob field that does not have a value. If e.blob.url or e.blob.icon properties are assigned in the event handler, then the corresponding image will be downloaded or a material icon will be drawn.


For example, the following handler will cause the framework to create a blue material icon for the category picture in the application.


The default image based on an icon may serve as a blob stub whenever the optional image is required. The end user may tap on the image and have it replaced with their by either taking a photo on the device or choosing a previously created image.



Tapping on the default blob image will always activate the drawing pad if the BLOB data field is tagged as image-user-defined-none. The end user will not be able to replace the template image.

The end users may take real-world photos and provide the visual comments with the drawing pad tools. Keep in mind that the huge photographs taken by modern day cameras will likely be redundant for business purposes. Make sure to specify the image-size-WxH tag to engage the image preprocessor to enforce the pre-defined image photo size and graphical annotations. 


Drawing pad provides a powerful tool for the line-of-business apps. Naturally it may not always be desirable to allow image alteration. Tag the blob data field as image-editor-none to disable the drawing pad.


By default the blob images are rendered as thumbnails. Tag the data fields as image-original-always if the original image must be displayed both when the users are viewing and editing the data. The field with the tag image-original-editing will show the original image if the blob is presented in the “edit” mode. End users may still download the original image when viewing the record.


The drawing pad will work on the small devices, tablets, and huge desktop monitors.
Monday, October 14, 2019PrintSubscribe
Announcing Offline Sync Add-On
Code On Time is pleased to announce Offline Sync Add-On!  This new product converts your online application into an offline app capable of running in disconnected mode on tablets, phones, and laptops. Simply enable the add-on in the project and mark a few pages as “offline”. This is it!


The application shown in the next screen shot has been rapidly constructed with Code On Time app generator.


End users can access this app in any modern web browser on a device with Wi-Fi and Cellular connectivity.

What if your end users do not have a robust network connection? Offline Sync is the answer!

Enable the add-on in the Settings | Features of the projects.


Click Finish and activate Project Designer

Select a data page that will be available in disconnected / offline mode. Enable “Offline” checkbox and save the page. Repeat as needed.

Exit designer and proceed to generate the app. 

Copy the URL of the app in the web browser.

Install Cloud On Time app from the App Store of your mobile device. This app is available for  iOS, Mac OS, Windows, and Android (November 2017).

Start the app on the device. Cloud On Time app looks virtually the same on all platforms.


Tap the Connect button, paste the application URL in the input and press Save. 


Tap OK and Cloud On Time will load your online application in the hosted web view. 

Cloud On Time will proceed to install the front end of your application as soon as you sign in. The front end is composed on HTML pages, JavaScript, CSS, and Fonts. The front end files are transferred from the online application to the device.



This will be followed by downloading of data linked to “offline” pages. Offline Sync will follow the discovered data relationships and transfer the relevant records. User identity and application access control rules will limit the number of records. Downloaded information is persisted in JSON format on the device next to the front end files.


Your application is now running on the mobile device in hosted web view.


The cloud icon with a checkmark is displayed next to the user avatar indicating that the user is working in offline mode. The availability of network connection is irrelevant since Offline Sync is executing all data requests directly on the device.


If data is changed then Offline Sync executes the requests to update, insert, and delete records directly on the JSON copy of data while storing the requests in the log file. The cloud icon will change to indicate that the synchronization with the cloud is required.


End user can work with the app for extended period of time, close the app and restart the device as needed. The changes are safely persisted on the device. If the application on the server is down then this fact will have no impact on the “offline” users.

A tap on the cloud icon will activate synchronization. This process does require a network connection and the application on the server to be running.


If the user taps on Synchronize button, then the log of changes is submitted to the application on the server for execution. Errors are returned to the device for user review and reconciliation. 

If the synchronization was successful and “Refresh Data” checkbox is not selected, then the log of changes on the device is cleared and the data on the device is considered to be “in-sync”. It means that the local data does not reflect the true state of the database on the server. 

If the user elects to refresh data, then the successful sync is followed by synchronization of the front end files and downloading of the complete dataset from the server. Once again the data will be limited to those records that the user can access as defined by application access control rules.

The pricing for Offline Sync starts at $9 USD per device per month. See the license agreement and pricing examples at https://codeontime.com/documents/offlinesync-eula.pdf


Code On Time will begin shipping purchased licenses on October 18, 2019. Links to download the software will be delivered via email. The automated distribution system for Offline Sync Add-On will be launched later this year.

Offline Sync Add-On relies on the Offline Data Processor (ODP) included in the framework of applications created with Code On Time app generator. ODP does not require licensing and enables the exciting new feature Transaction Data Input in both offline and online applications. 

If at least one Data View field is included in the form used to create new records, then the end user will be able to enter child data rows along with the master on the pages marked as “offline”. ODP accumulates new child records on the client and submits them alone with the master in a single transaction when the master record is saved.



Watch this cool feature in action at https://www.youtube.com/watch?v=szwlCLSS2JI&list=PLy2g3SjvDe2b2cl9i0msBaMVLntQucZtb&index=37&t=0s.

Offline Sync Add-On and Offline Data Processor are compatible with Code On Time v8.9.0.0 and up.

Tuesday, June 11, 2019PrintSubscribe
Changing Styling of Values and Labels in Forms
Use simple CSS rules to change the presentation of data in the forms. For example, you can  make the label of a particular field to appear bold and color the value of another like this:



Place the following CSS rules in the file ~/app/css/mystyles.css.

[data-field="CompanyName"][data-control="label"] {
    font-weight: bold;
}

[data-field="ContactName"][data-control="field"] {
    font-weight: bold;
    color: blue;
}

Make to press Ctrl+F5 to refresh the resources loaded in the browser. This will integrate the new stylesheet in the app. Do so every time you make changes.

This is how the customization will look in the Dark theme with Citrus accent.


If you do choose to use colors then make to test presentation with a few theme and accent combinations.

CSS is a powerful mechanism to alter presentation of HTML documents without making physical changes to the markup itself.