Web Application Generator

Labels
AJAX(112) App Studio(6) 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(8) OAuth Scopes(1) OAuth2(11) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(10) PKCE(2) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(178) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(80) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) 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 Application Generator
Sunday, April 15, 2018PrintSubscribe
Overview of Data Views

Data views are instances of a data controller. Data views render views of the data controller on the page, along with corresponding data controller action groups. The same data controller can be exposed with data views on the same or multiple application pages.

Data View Properties:

Property Description
Activator Specifies the user interface element that will activate the data view. The available options are Tab, Side Bar Task, and Site Action.
Auto Hide Specifies which user interface element is hidden when the filter value is empty.
Auto Highlight First Row Specifies that the first row will be highlighted when the view loads.
Auto Select First Row Specifies that the first row will be selected in the form of the master data view.
CSS Class Name Assigns a CSS Class to the div that contains the data view.
Command Argument Specifies an argument for the startup command.
Command Name Specifies a command that will be executed when the data view is loaded.
Filter Field #1-#5 Determines which fields in the child data view are filtered by the values of the primary key fields in the master data view.
Filter Source Determines the master data view.
Id The Id is automatically assigned when the data view is created. It can be changed using the Rename context menu option in the Project Explorer.
Page Specifies which page the data view belongs to.
Refresh Interval Specifies how many seconds will pass before the data view is refreshed. When empty, the data view will not refresh automatically.
Roles Controls which user roles are allowed to see the data view on the page.
Page Size Determines how many rows are displayed in the grid.
Search by First Letter Displays a menu of first letters of values in the first column at the top of the data view for quick filtering.
Search On Start Specifies that no records will be retrieved and the advanced search bar will be opened when the page loads.
Selection Mode Specifies single or multiple row selection mode in the data view.
Sequence Provides sequential index for the data view. Data views and controls are rendered within a container in the order of the index when available.
Show In Summary Controls if the select data fields of the current row are displayed in the summary box on the side bar.
Show Action Bar Determines the visibility of the action bar.
Show Action Buttons Determines the location of the action buttons in form views.
Show Details in List Mode Indicates if detail data views are visible when a master data row is selected in the grid view.
Show Modal Forms Specifies that the form views of the child data views are displayed in modal windows.
Show Page Size Determines the visibility of the page size information in the pager.
Show Pager Determines the visibility of the whole pager bar at the bottom of the data view.
Show “Quick Find Controls the visibility of the Quick Find box.
Show Row Number Displays a logical sequence number next to each row.
Show Search Bar Controls the visibility of the Advanced Search Bar.
Show View Description Determines the visibility of the description text above the data view.
Show View Selector Controls the visibility of the view selector in the top right corner of the data view.
Tag Assigns a tag to the controller to use in custom business rules.
Text Specifies the text displayed in the activator.
Visible When Specifies a JavaScript expression that must evaluate as true for the data view to be visible.

Supported Tags:

Tag Description
action-buttons-none Equivalent to setting Show Action Buttons= “None”
calendar-drag-disabled Calendar events will not be draggable.
calendar-mini-disabled Mini calendar in the sidebar will not be rendered.
calendar-mini-twomonths Mini calendar in the sidebar will show two months.
content-stub-none Disables the spacer at the bottom of the form.
grid-fit-none Automatic grid shrinking to fit available space will be disabled. Grid will be sized according to “Columns” defined on data fields.
header-image-none Disables the display of images in the header area.
header-image-original Form header background will use original blob, instead of thumbnail.
inline-editing Inline editing mode is enabled by default.
inline-editing-none Inline editing mode is disabled by default.
inline-editing-option-none Disables the inline editing toggle in the view selector.
modal-always Always render form as a modal.
modal-buttons-fullscreen-none Disables the “fullscreen” icon.
modal-buttons-more-none Disables the “more” icon.
modal-dock-top
modal-dock-left
modal-dock-right
modal-dock-bottom
Docks the modal window to the specified side of the window.
modal-fit-content Shrink the modal to fit the content. These modals will begin stacking, instead of sliding from the right.
modal-auto-grow Automatically resize the modal when field values change. Used in combination with modal-fit-content.
modal-max-tn
modal-max-xxs
modal-max-xs
modal-max-sm
modal-max-md
modal-max-lg
modal-max-xl
modal-max-xxl
modal-max-any
The max width of the modal will be restricted to the selected logical size.
modal-never Never render form as a modal.
modal-fullscreen Modal will always start in "maximized" mode.
modal-tap-out Closes the modal form if the user taps outside the modal area.
modal-title-none Disables the modal title bar.
modal-when-tn
modal-when-xxs
modal-when-xs
modal-when-sm
modal-when-md
modal-when-lg
modal-when-xl
modal-when-xxl
Will begin rendering the form as modal if the screen is at least the specified logical size. Default is “md”.
multi-select-none User will not be able to enable multi-select on the data view.
page-header-none Disables the page header displayed above the form
promo-none Disables “promo” button.
search-on-start-simple When Search On Start is enabled and this tag is added, the simple search will be displayed when the page is loaded.
search-suggestions-none Disables search suggestions displayed on Quick Find.
thumb-person Image fields will be rendered in a circle.
thumb-standard Image fields will be rendered square.
view-style-grid
view-style-list
view-style-cards
view-style-map
view-style-calendar
view-style-charts
The view will switch to this presentation style when the page is loaded.
view-style-grid-disabled
view-style-list-disabled
view-style-cards-disabled
view-style-map-disabled
view-style-calendar-disabled
view-style-charts-disabled
The view will not offer this presentation style.

Use tags to apply an icon to a data view.

Learn to work with data views in the Project Designer.

Learn to drag and drop data views in the Project Explorer.

Common tasks:

Task Description
"Soft" Filtering Learn to activate optional filters on a data view based on a condition.
Customizing the Search Bar Learn to control the fields available for search in the Advanced Search Bar.
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.

Thursday, January 25, 2018PrintSubscribe
Cloud On Time User Guide: Universal Windows Platform

Cloud On Time app runs cloud applications created with Code On Time products directly on your device with an optional offline mode. Integrated access to device camera and sensors contributes to enhanced user experience.

This user guide explains how to connect, install, run, and manage the front-ends of the connected cloud applications in Cloud On Time app.

The home screen of Cloud On Time app displays Connect button if there are no connected clouds.

Home page of native Universal Windows Platform app Cloud On Time when no clouds are connected.

Tap “Connect” to connect to an application running in the cloud. When prompted, enter either the application name or the URL provided by your administrator.

Adding a cloud to native Universal Windows Platform app Cloud On Time.

Tap “Save” to connect to the application in the cloud. The name, icon, and description of the compatible application will be displayed. If the information is correct, then tap OK.

Cloud is found in native Universal Windows Platform app Cloud On Time.

Cloud On Time app will redirect to the application in the cloud to confirm your identity. Enter the username and password for your account to authorize access on the device.

Entering credentials to add a cloud in native Universal Windows Platform app Cloud On Time.

After receiving confirmation of user identity, Cloud On Time app will download the files of cloud application front-end and store them on the device. If the cloud application is configured to work in offline mode, then the data matched with the user identity is also downloaded.

The application is launched automatically after successful installation.

Cloud running locally in native Universal Windows Platform app Cloud On Time.

If you close the Code On Time app and start it again, then the installed cloud is automatically displayed with the same identity that was confirmed during the front-end installation process.

Cloud On Time app will also perform a brief verification of application files by comparing them with those reported by the application in the cloud. Any changes are automatically downloaded before the front-end is displayed.

File verification with the server is skipped if the app front-end is working with local data in offline mode. The process will be performed when the local data is synchronized and successfully committed to the cloud.

Cloud running locally in native Universal Windows Platform app Cloud On Time.

If you need more than one identity to work with the same app, then add another account by choosing “Add Account” option in the user menu.

Using Add Account option in cloud running in native Universal Windows Platform app Cloud On Time.

Confirm the new identity and the Cloud On Time app will install any required unique files on the device.

Adding an identity to a cloud running in native Universal Windows Platform app Cloud On Time.

A local version of the front-end specific to the identity is launched.

Using second identity in a cloud running in native Universal Windows Platform app Cloud On Time.

Use account manager to switch between identities.

If the Cloud On Time app is restarted, then the last used front-end with the last selected identity is launched automatically.

Choose “Exit” option in the user menu to exit the front-end and return to the home screen of Cloud On Time app.

Exiting a cloud running in native Universal Windows Platform app Cloud On Time.

You will see a tile representing the application front-end on the home screen. Tap the tile to launch the front-end of the cloud application.

Home page showing one cloud in native Universal Windows Platform app Cloud On Time.

Use “more” button on the right side of the toolbar and press “Connect a Cloud” to connect another cloud to the home screen.

Connecting additional clouds in native Universal Windows Platform app Cloud On Time.

Enter the name or URL of the cloud application when prompted. Connect the app and proceed to confirm your identity.

Cloud Employee Registry is found and ready to be added in native Universal Windows Platform app Cloud On Time.

Cloud On Time app will display the front-end of the connected cloud application.

Employee Registry front-end is running in native Universal Windows Platform app Cloud On Time.

Use “Exit” command in the user menu to return to the home screen of Cloud On Time app.

Each tile on the home screen provides “more” button with options to run the front-end or to delete the connected app.

Use the more button to remove registered clouds in native Universal Windows Platform app Cloud On Time.

List of registered clouds in native Universal Windows Platform app Cloud On Time.

To prevent unauthorized access to the application, use Logout option in the user menu.

Activating the Logout option in the front-end running in Universal Windows Platform edition of Cloud On Time app.

You will return to the home screen of Cloud On Time app. The tile of the cloud application will remain on the home screen.

An attempt to launch the “logged out” cloud application front-end will require confirmation of user identity in the cloud. When confirmed, the required files will be re-installed from the local cache on the device. The front-end will be launched with a minimal delay.

The cloud application can be configured by administrator to always confirm the user identity on the device when the front-end is started and to log the user out when the app is closed.

Continue to Cloud On Time App