Application Factory

Blog
Application Factory
Monday, December 19, 2016PrintSubscribe
Cloud On Time For SharePoint Privacy Policy

The SharePoint Add-In “Cloud On Time for SharePoint” does not use, collect, or share any information about the users.

The Add-In is hosted entirely on the servers of SharePoint Online. When using the Add-In, no information is submitted to any external servers. 

Contact our technical support department if you have any questions.

Sunday, October 9, 2016PrintSubscribe
Basket Lookup, Wizards, Smart Dates

Release 8.5.11.0 is here! This release contains several major features, bug fixes, as well as major performance enhancements to the Form Rendering Engine in Touch UI.

Basket Lookups

The headliner feature for this release is Basket Lookups. This feature permits using Lookup, AutoComplete, and DropDownList item styles for many-to-many relationships. Property Target Controller is now visible in Project Designer when one of these view styles is selected. The property must point to a compatible data controller that corresponds to the many-to-many junction table in the database.

DropDownList rendered as a basket lookup allows adding multiple territories to an employee using the dropdown control.

Many-to-many relationships permit connecting records together in any combination. Typically, a list of available values are enumerated in a separate table, and a joining table will connect the primary record with a number of values. For example, a product can be tagged with multiple keywords, such as “New”, “Exclusive”, “Discontinued”, and etcetera.

In read-only mode, many-to-many fields are displayed as a comma-separated list of values.

Many-to-many field values are displayed as a comma-separated list in read only mode.

Upon pressing Edit, each item will be rendered in a box, and the input control will be rendered on the following line.

Each item is rendered in a box, with the lookup control on the next line.

The user can tap on an item, or use arrow and Backspace keys to remove items. Typing in or activating the dropdown and selecting an item will add that item to the list. The basket input control behaves just like the original lookup, auto complete, or drop down list control.

Basket Lookups offer a better alternative to the Check Box List (displayed below) when there is a large number of items to choose from.

The Territories many-to-many field rendered as a Check Box List.

Wizards

The Wizard feature is now introduced in Touch UI. The “Wizard” property has been added to categories. When the client library detects that at least one category has the “Wizard” property defined, the form will be rendered in Wizard mode. A list of steps will be enumerated using the values of the “Wizard” property, and a status bar will be shown for the available steps. The “Visible When” property can be used to conditionality hide steps based on field values. Actions “Prev” and “Next” will be automatically injected into “Form” scope, and the “Cancel” action will be moved to the leftmost position.

New Employees form configured as a Wizard in Touch UI.

Click here to learn more about configuring Wizards.

Wizard is the core feature that enables rapid simplified configuration of projects in the upcoming Code On Time V9.

Responsive Templates

The goal of Touch UI is to ensure a consistent and usable UI across a wide range of screen sizes. Automatically created templates will position fields and categories depending on the width of the screen. Release 8.5.11.0 will allow defining multiple view templates based on the screen width.

For example, the Orders form of the Northwind Demo will render in two columns.

The Orders Form in Northwind Demo on larger screens will be rendered in two columns.

On smaller devices, the form will be displayed in one column.

The Orders Form in Northwind Demo on smaller screens will be rendered in one column.

Developers can define multiple templates for different sizes in the HTML view template file by using the “data-layout-size” attribute.  For example, two form layouts can be defined in a file ~/Views/Customers.editForm1.html:

<div data-layout="form" data-layout-size="sm">
    ...
</div>
<div data-layout="form" data-layout-size="tn">
    ...
</div>

When the user opens the form, the client library will parse the file and use the largest possible template that matches the currently available width (minus the sidebar). The possible values are listed below.

Value Minimum Width (px)
tn 0
xxs 480
xs 640
sm 768
md 992
lg 1200
xl 1440

Batch Edit With Dependent Lookups

The previous release overhauled the Batch Edit functionality by rendering a custom form. Each available field is rendered as a checkbox. When the checkbox is enabled, an input is displayed below, and the value of that input will be used to batch update the selected records.

Release 8.5.11.0 now handles the situation with dependent lookups, to ensure that data validity is preserved. When a series of fields are dependent, these fields will be grouped under the same checkbox, and the user is required to set all related values.

Batch Edit with dependent lookups will group the lookups.

Smart Dates

Date values rendered in Touch UI will now display simplified values, such as “Today” or “Next Mon”. These values are much easier for the user to comprehend without having to consult a calendar. Dates between a week ago and in two weeks will show days of the week. Dates occurring this year will show the month and date. Any dates with time values set to 12:00 AM will hide the time. The original value is still viewable by hovering over the text. This feature can be disabled from the user settings.

Orders grid displaying all possible permutations of Smart Dates.

Click here to learn more about Smart Dates.

“Auto” Action Button Location

In previous releases, form action buttons were displayed above and below the form. The default mode for “Show Action Buttons” has been changed to the new value “Auto”. This will render the action buttons in a fixed footer at the bottom of the screen. This ensures that the user always has easy access to the actions available at the time. It also avoids the visual overhead of duplicate button rows on small forms.

The "Auto" Show Action Buttons mode will display a footer containing the form buttons.

Medium size screens will align the buttons to the right of the footer. Larger screens will align the buttons to the center of the footer, to ensure proximity to the inputs. Very small screens, such as those on mobile devices, will display action buttons at the bottom of the form, in order to maximize usable screen space.

Small screens will render buttons at the bottom of the form.

Object References in Touch UI

Object references have made a return in 8.5.11.0! When the form is in read mode, a chevron will be displayed next to the field value. Pressing on the chevron will load the edit form for that record.

image

To hide the object reference, tag the data field as “lookup-details-hidden”.

Geocode and Calculate Distance

It is now possible to automatically geocode an address value and save the result to predefined Latitude and Longitude fields. Simply tag the relevant address fields with “geocode-city”, “geocode-region”, “geocode-zip”, and “geocode-country”, and tag the positional fields with “geocode-latitude” and “geocode-longitude”. On Insert or Update, if the address values have changed, Google Geocoding API will be queried using the specified API key. The results will be saved in the positional fields.

It is also possible to manually trigger this request inside a C# or Visual Basic business rule, as in the example below.

decimal latitude;
decimal longitude;
if (Geocode(address, out latitude, out longitude))
    Result.ShowAlert("Latitude: " + latitude + ", Longitude: " + longitude);

An additional function has been added to calculate driving distance between two addresses. It can be used in code business rules, as in the example below.

decimal meters = CalculateDistance(sourceAddress, destinationAddress);
decimal miles = meters * 0.00062137m;

Make sure to follow Google Maps APIs Terms of Service when using these functions.

Features and Enhancements

A partial list of new features, enhancements, and fixes in release 8.5.11.0 is shown below.

  • Touch UI
    • Type-sensitive keyboards will be displayed on mobile devices (Number, Phone, URL, Email).
    • “Flicking” horizontally in Grid presentation will scroll one screen at a time.
    • If the HTML file of a view template contains the name of another view template file, that file will be loaded.
    • Forms are now incrementally rendered based on what is visible at the time.
    • Form buttons will align to the right on smaller screens.
    • Auto-complete window will highlight matching text.
    • Field values can now be placed inside category descriptions.
    • If a DateTime field does not allow time selection, selecting the day of the month will hide the input.
    • Tooltip will not cover the Search button in Advanced Search.
    • Resolved issues with Auto Highlight First Row.
    • Resolved issues with Date Picker not setting correct date depending on the order of selection.
    • Mini calendar on sidebar will now resize correctly to display filter values.
    • Removed “Labels In Form” user setting.
    • Actions now support jQuery Mobile icons containing a dash (such as “carat-r”).
    • Removed spinning bar icon in Chrome.
    • Lookups now support Data Text Fields that are numeric types.
    • User theme selection will be differentiated by user name.
  • General
    • Fixed exception with systems that do not have .NET 3.5 installed.
    • Content Framework detection will work with both ASPX controls and HTML pages. This resolves the issue with Bootstrap-based dedicated login pages.
    • Added support for $quickfind and $quickfinddisabled to limit the number of fields included in Quick Find query.
    • Creating a data field in the Project Designer will no longer throw “DataType is undefined” error.
    • Controllers built from data models will use the column configured as the alias as the “Data Text Field”.
    • The “Copy” property will now be configured with the correct name of the field from the lookup controller, instead of the column name.
    • Fixed issue with generated apps using Turkish “i” in the generated code.
    • New JavaScript methods editing() and inserting() can be used in Visible When and Read Only When expressions, as a replacement for this.get_isEditing(). The result is correctly evaluated when user presses “Edit”.
    • Many-to-many fields now show “New Item” if New Data View is enabled, to support adding new items inline.
    • Fixed exception if no models are defined when Project Wizard “Summary” step is opened.
    • Generator will now request to install IIS Express 10.0 if no IIS Express installation is detected.
    • Filter text displayed at the top of views will show a simpler date representation.
    • New implementation of BusinessRules.Whitelist and Blacklist to avoid performance regression.
    • Fields named “Password” or “Pwd” will have Text Mode set to “Password”.
    • Renamed “Click OK” to “Press Save” in resources to account for touchscreen users.
    • Data Objects will no longer create properties for on demand fields.
    • SharePoint Factory option will be hidden if .NET 3.5 is not installed.

In addition to the items listed above, there are a large number of other fixes and performance enhancements.

Thursday, September 22, 2016PrintSubscribe
Geocoding

Geocoding is the process of capturing an address and converting it to exact latitude and longitude coordinates. Starting with release 8.5.11.0, apps generated with Code On Time now support automatic geocoding of address fields with the proper tags, as well as a Geocode() method available in C# or Visual Basic business rules.

Example of result from Geocode method.

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.

Both methods below require addition of a Maps API Identifier. The following examples will use a modified version of the Employees table from the Northwind sample project. Use the following script to add the required columns before creating the project.

ALTER TABLE Employees
ADD Latitude decimal(9, 6) NULL,
    Longitude decimal(9, 6) NULL

If using an existing project, make sure to refresh the application after executing the script. Then, open the model for Employees and check the checkbox next to the three new fields to include them in the Employees controller.

Geocoding with Tags

The easiest way to geocode a set of address fields is to tag the source and destination data fields in the view. If the correct fields are tagged, the values will be geocoded when the user saves a new record or updates an existing record. When updating an existing record, the geocode request will only be sent if at least one of the source fields has been modified, in order to avoid extraneous API requests.

Let’s add the relevant tags to start geocoding employees.

Start the Project Designer. In the Project Explorer, double-click on “Employees / container1 / view1 (Employees, grid1) / createForm1 / c1 – New Employees / Address” data field node.

Selecting the Address data field of createForm1 view of Employees controller.

Make the following change:

Property Value
Tags geocode-address

Press OK to save the data field. Use the above procedure to make the changes below:

Data Field Tag
City geocode-city
Region geocode-region
PostalCode geocode-zip
Country geocode-country
Latitude geocode-latitude
Longitude geocode-longitude

On the toolbar, press Browse. When the application opens in the default browser, create a new employee.

Entering a new employee.

Upon pressing Save, the geocode request will be sent. If a result is returned, the new employee record will have updated Latitude and Longitude fields.

The Latitude and Longitude fields have been updated.

Geocoding in C#/Visual Basic Business Rules

The tag method explained in the previous section is convenient for automatic update of Latitude and Longitude fields. However, if the latitude and longitude need to be used in a calculation, the Geocode() business rule method can be used. Let’s add a business rule that utilizes this method to geocode the employee’s address and show an alert with the resulting latitude and longitude.

In the Project Explorer, switch to the Controllers tab. Right-click on “Employees / Actions / ag4 (ActionBar) – Edit/Delete” and press New Action.

Adding a new action to Employees controller.

Specify the following properties and press OK to save the new action.

Property Value
Command Name Custom
Command Argument ShowLatLong
Header Text Show Lat/Long
When Key Selected Yes

Next, right-click on “Employees / Business Rules” node, and press New Business Rule.

Adding a new business rule to Employees controller.

Configure the rule as following:

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

Press OK to save the new business rule. Then, press Browse on the toolbar to generate the application, as well as create the relevant business rule file.

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

Editing the rule in Visual Studio.

Replace the contents of the file with the following:

C#:

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 "ShowLatLong".
        /// </summary>
        [Rule("r100")]
        public void r100Implementation(EmployeesModel instance)
        {

            decimal latitude;
            decimal longitude;

            // join address parts with "," separator
            string address = string.Join(",", instance.Address, instance.City, 
                instance.Region, instance.PostalCode, instance.Country);

            if (Geocode(address, out latitude, out longitude))
            {
                Result.ShowAlert("Latitude: " + latitude + ", Longitude: " + longitude);
            }
            else
            {
                Result.ShowAlert("Geocode failed to resolve address.");
            }
        }
    }
}

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 "ShowLatLong".
        ''' </summary>
        <Rule("r100")>  _
        Public Sub r100Implementation(ByVal instance As EmployeesModel)
            Dim latitude As Decimal
            Dim longitude As Decimal

            ' join address parts with "," separator
            Dim address = String.Join(",", instance.Address, instance.City,
                            instance.Region, instance.PostalCode, instance.Country)

            If (Geocode(address, latitude, longitude)) Then
                Result.ShowAlert("Latitude: " & latitude & ", Longitude: " & longitude)
            Else
                Result.ShowAlert("Geocode failed to resolve address.")
            End If
        End Sub
    End Class
End Namespace

Switch back to the application running in your default browser, and navigate to the Employees page. Ctrl+click on a row to highlight the row. On the toolbar, press  “Show Lat/Long”.

Activating the "Show Lat/Long" custom action.

A message box will be displayed with the employee’s latitude and longitude.

The popup shows the returned latitude and longitude.