Application Builder

Labels
AJAX(112) App Studio(9) 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(178) 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(184) 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(3) 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
Application Builder
Friday, September 23, 2016PrintSubscribe
Calculating Driving Distance Between Points

In businesses that require a lot of driving and tracking packages, it is invaluable to estimate a driving distance between two different addresses or sets of latitude/longitude. Starting in release 8.5.11.0, C# and Visual Basic business rules now have access to the CalculateDistance() method. This method will query the Google Distance Matrix API to estimate driving distance.

The results from the CalculateDistance() business rule method displayed in a messsage.

It is required to obtain and add a Maps API Identifier to your project in order to use this feature.

Please make sure to follow Google Maps APIs Terms Of Service. Of note is section 10.5.d, which restricts long-term storage of Content.

Let’s add a custom action to the Employees page that, when pressed, will display how far the employee lives from the main office using a code business rule.

First, we need to add an action that will be accessible to the user in order to trigger the code.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on “Employees / Actions / ag1 (Grid)” node, and press New Action.

Adding an action to grid scope of Employees controller.

Enter the following settings:

Property Value
Command Name Custom
Command Argument DistanceFromHQ
Header Text Distance From HQ
When Key Selected Yes

Press OK to save. Next, let’s create a business rule that will be triggered when the user presses the action. Right-click on “Employees / Business Rules”, and press New Business Rule.

Adding a business rule to Employees controller.

Enter the following properties:

Property Value
Type C# / Visual Basic
Command Name Custom
Command Argument DistanceFromHQ
Phase Execute

Press OK to save the business rule. On the toolbar, press Browse to generate the application and create the rule file.

When generation is complete, press “Edit Rule” on the action bar to open the file in Visual Studio.

Editing the rule in Visual Studio.

Replace the contents with the following:

C#:

using System.Data;
using MyCompany.Data;
using MyCompany.Models;

namespace MyCompany.Rules
{
    public partial class EmployeesBusinessRules : MyCompany.Data.BusinessRules
    {
        
        /// <summary>
        /// This method will execute in any view for an action
        /// with a command name that matches "Custom" 
        /// and argument that matches "DistanceFromHQ".
        /// </summary>
        [Rule("r100")]
        public void r100Implementation(EmployeesModel instance)
        {
            // combine address pieces with ","
            string sourceAddress = string.Join(",", instance.Address, instance.City,
                instance.Region, instance.PostalCode, instance.Country);
            string destinationAddress = "1 Microsoft Way,Redmond,Washington";

            // get distance and calculate miles
            decimal meters = CalculateDistance(sourceAddress, destinationAddress);
            decimal miles = meters * 0.00062137m;

            // show result
            if (meters == 0)
                Result.ShowAlert("No path found.");
            else
                Result.ShowAlert("Distance from HQ is " + meters 
                    + " meters, or " + miles + " miles");
        }
    }
}

Visual Basic:

Imports MyCompany.Data
Imports MyCompany.Models

Namespace MyCompany.Rules
    
    Partial Public Class EmployeesBusinessRules
        Inherits MyCompany.Data.BusinessRules

        ''' <summary>
        ''' This method will execute in any view for an action
        ''' with a command name that matches "Custom" 
        ''' and argument that matches "DistanceFromHQ".
        ''' </summary>
        <Rule("r100")>
        Public Sub r100Implementation(ByVal instance As EmployeesModel)
            ' combine address pieces with ","
            Dim sourceAddress = String.Join(",", instance.Address, instance.City,
                    instance.Region, instance.PostalCode, instance.Country)
            Dim destinationAddress = "1 Microsoft Way,Redmond,Washington"

            ' get distance and calculate miles
            Dim meters = CalculateDistance(sourceAddress, destinationAddress)
            Dim miles = meters * 0.00062137D

            ' show result
            If (meters = 0) Then
                Result.ShowAlert("No path found.")
            Else
                Result.ShowAlert("Distance from HQ is " & meters &
                                 " meters, or " & miles & " miles")
            End If
        End Sub
    End Class
End Namespace

Switch back to the web browser, and press the three dot menu button next to any row to reveal the grid action menu.

Activating the grid scope menu for a row in Touch UI.

Press “Distance From HQ” action, and a message box will display the distance.

The results from the CalculateDistance() business rule method displayed in a messsage.

Note that it is also possible to pass a latitude and longitude by separating the values with a comma, such as in the following example:

CalculateDistance(instance.Latitude + "," + instance.Longitude, destinationAddress)
Thursday, September 22, 2016PrintSubscribe
Adding a Google Maps API Key

An API key must be added to the project to use any features that depend on the Google Maps API, such as Maps presentation style, Geocode feature, or CalculateDistance() business rule method. The Google Maps API Key can be acquired here. Make sure to log into your Google account, and press the “GET A KEY” button to get started.

The button to acquire a Google Maps API key.

Once a key has been acquired, start the app generator. Click on the project name, and press Settings. Then, select Features page of the Project Wizard.

Navigating to the Features page of the Project Wizard.

Switch to the Touch UI section. If you have an API key, under “key=” plus the key in the “Google Maps API Identifier” box. If you have a client ID, enter “client=” plus the client ID in the box.

Entering the Maps API Identifier.

Press Next, and proceed to generate the application. The key will be embedded in “web.config” file of the generated application.

The API key can be accessed from any custom code or code business rules via the “ApplicationServices.MapsApiIdentifier” property. It can also be accessed from JavaScript business rules via the “__settings.mapApiIdentifier” property.

It is highly recommended to restrict access to your key to specific websites, IP address, or apps from the Google Developer Console.

Wednesday, September 21, 2016PrintSubscribe
Show Action Buttons

Every form in web applications created with Code On Time display a row of buttons. The typical actions available in the “Form” scope include Edit, Delete, Close/Cancel, Save, and Save and New. In addition, actions that trigger custom calculations are often put in the “Form” scope. The default presentation mode for form actions is called “Auto”.

Auto

The “Auto” mode will present form buttons in the best location depending on the size of the screen. On medium size screens, the buttons will be aligned to the right side of a fixed bar at the bottom of the screen. This ensures that the buttons are in the same position every time a user opens the form, resulting in a smaller learning curve to the application.

On small screens, form action buttons are rendered in a fixed button bar at the bottom of the screen, aligned to the right.

Larger screens will result in the form buttons shifting to the center of the button bar, closer to the field values.

Large screens will render form actions aligned to the center of a fixed bar at the bottom of the screen.

If the screen is too small to display all form buttons, they will be automatically collapsed into a three-dot menu.

When action buttons do not fit in the available space, these actions will be folded under a three-dot menu.

If the screen is both narrow and short, the form buttons will be rendered at the bottom of the form. This will ensure that devices with small screens can maximize the amount of space used for display of field values.

Very small screens will render buttons at the bottom of the form.

None

It may be desirable to hide the form actions bar from the screen. Let’s remove the form buttons from the Orders screen of the sample Northwind project.

Start the Project Designer. In the Project Explorer, double-click on “Orders / container1 / view1 (Orders, grid1)” node.

Modifying view1 that shows Orders grid1 in Orders page.

Make the following change:

Property Value
Show Action Buttons None

Press OK to save, and press Browse on the toolbar to regenerate the app.

When the app comes up in the default browser, click on a record on Orders page to view the form. Notice that the form action buttons are no longer visible. The actions are still accessible in the top right corner of the screen.

The Orders form with form action buttons hidden.

The user can also access all actions by clicking on the three-dot menu in the top right corner to access the action panel.

The form action buttons are still available in the action sidebar.

Top

When Show Action Buttons is set to “Top”, the action buttons will be rendered above the form.

Action buttons are rendered at the top of the form.

Bottom

When Show Action Buttons is set to “Bottom”, the buttons will be rendered below the form.

Action buttons are rendered at the bottom of the form.

Top And Bottom

When Show Action Buttons is set to “Top and Bottom”, the buttons will be rendered both above and below the form. This can be helpful when the form is very long.

Action buttons are rendered at the top and bottom of the form.