Application Builder

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
Application Builder
Friday, September 30, 2016PrintSubscribe
Displaying Field Values in Category Descriptions

Data fields displayed in forms of applications created with Code On Time are organized in categories. By default, all data fields are rendered top down in a single category. It is possible to use categories to enable the rendering of data fields in multiple columns, tabs, a wizard, or a combination thereof.

Each category is rendered with a bar at the top displaying the header text. When the user presses on the bar, the category will collapse or reveal itself. The categories’ Description property is displayed underneath the collapsible bar. Data fields belonging to the category are rendered in row containers, with the label on the left side, and the input control on the right side.

The Employees page with a multi category layout in two tabs. Field values are displayed in the category description.

Let’s configure the Employees page of the Northwind sample project into multiple categories, and customize the descriptions for each category. We will display the field values in the category descriptions in order to provide context to the user.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Double-click on “Employees / Views / editForm1 / c1 – Employees” category node.

Editing c1 category of editForm1 view of Employees controller.

Make the following changes.

Property Value
Header Text Person
Description View the personal information.
Tab Employee

Press OK to save. Next, create a new category by right-clicking “Employees / Views / editForm1” and press New Category.

Creating a new category in 'editForm1' view of Employees controller.

Configure as follows and press OK to save the category.

Property Value
Header Text Hire Info
Description The hiring info is displayed below.
New Column Yes
Tab Employee

Create another category with the following properties. Notice the use of field names wrapped in curly brackets. The text will be updated at runtime with the field values.

Property Value
Header Text Address Info
Description The address of {FirstName} {LastName} is displayed below.
Tab Address

Finally, use drag & drop to reposition the data fields in the correct categories, as shown in the picture below.

The data fields have been repositioned in the correct categories.

On the toolbar, press Browse to generate the application. When the application comes up in your browser, navigate to the Employees page and select a record. Notice that the data fields have been rendered in two tabs, with the first tab displaying two columns. Each category displays the specified category description.

Two tabs are rendered in editForm1 of Employees page, with two columns in the first tab.

Switching to the second tab will display the “Address Info” category. Notice that the fields in curly brackets have been replaced with the field values.

The second tab displays field values in the category description.

Note that the same functionality is available in Desktop user interface.

The Desktop user interface also displays field values in the category description.

In custom form templates, category descriptions can be added by inserting a row container, with a description control inside. Field values can be displayed by using a “field” control marked as read-only.

<div data-container="collapsible" data-header-text="Address Info">
    <div data-container="row">
        <div data-control="description">
            Where does 
            <span data-control="field" data-field="FirstName" data-read-only="true"></span>
            <span data-control="field" data-field="LastName" data-read-only="true"></span>
            live ?
        </div>
    </div>
    ...
</div>
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.

Continue to Show Action Buttons