Touch UI

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
Touch UI
Friday, January 20, 2017PrintSubscribe
Configuring SharePoint Web Part

Starting in release 8.5.12.0, Code On Time web applications created with Premium or Unlimited can operate in Software-as-a-Service mode. Give access to your line-of-business web app from SharePoint Online using this mode. User will be authenticated by SharePoint, and logged into the app as a user account with matching identity. If a user account with username equal to the email address of the SharePoint user is not found, then a new user record will be created. The user’s password and password answer will be randomly generated, to ensure that it is impossible to sign in directly without being authenticated by SharePoint. User roles are synchronized with the groups of the SharePoint identity upon every sign in.

Please note that it is highly recommended to deploy your app with SSL – otherwise, browsers must be placed in “low-security” mode in order for the web part to work.

We provide a free add-in for SharePoint, called Data Connector for Cloud On Time. The purpose of this add-in is to allow easy integration of Code On Time and Cloud On Time applications into SharePoint websites.

Installing the Add-In

The first step to configuring the Data Connector for Cloud On Time add-in is to install the app to your SharePoint site.

Navigate to your SharePoint site, and log in. In the top right corner, press the Gear icon and press “Add an app”.

Adding an app to the site.

On the left side of the screen, press “SharePoint Store”.

Adding an app from the SharePoint Store.

In the search box, paste “WA104380704” and press “Enter” on your keyboard. Select the app from the list.

Finding the Data Connector for Cloud On Time app in the SharePoint Store.

Press the “ADD IT” button to install the app to your SharePoint site.

Adding the Data Connector for Cloud On Time app in the SharePoint Store.

Once complete, a confirmation screen will be shown. Press “Return to site”.

The app has been installed.

Finally, press “Trust It” to finish installation.

Trusting the app.

Adding the Web Part to a Page

Once the add-in has been installed, the “Data Connector for Cloud On Time” web part can be added to any page of your site.  The following instructions explain how you can create a new page and connect an existing Code On Time or Cloud On Time application to your SharePoint instance.

Navigate to the home page of the SharePoint site, click the “PAGE” tab of the ribbon at the top of the screen, and select “View All Pages”.

Selecting 'View All Pages' of the SharePoint site.

Next, select “New” on the toolbar, and choose “Wiki Page”.

Adding a new Wiki Page to the site.

Give the page a name and press “Create”.

Giving the wiki page a name.

After pressing “Create”, you will navigate to the new page. On the ribbon at the top of the screen, select the “INSERT” tab and press “App Part”. Pick “Data Connector for Cloud On Time” from the list of parts, and press “Add”.

Inserting the "Data Connector For Cloud On Time" web part to the page.

The web part will be added to the page.

The "Data Connector For Cloud On Time" web part has been added to the page.

Registering The App

The next step is to register the app in order to enable your web application to authenticate users and query user groups. Click on the “REGISTER YOUR APP” link displayed in the default web part contents, or navigate to “https://mysite.sharepoint.com/_layouts/15/AppRegNew.aspx”, making sure to replace the root with your SharePoint site URL.

Press “Generate” next to Client Id and Client Secret fields to generate new values. Enter a title for the app, and specify the app domain. The Redirect URI must be equal to the app domain with the path “appservices/saas/sharepoint” appended to the end.

Specifying the new app registration properties.

Press “Create” to complete the app registration. Make sure to copy the registration details from this screen, as shown below.

Copying the app registration properties.

Next, navigate to your Cloud On Time or Code On Time application, sign in as a user with administrative role, and navigate to your Site Content page. Create a new record with the following properties. The Text property can be composed from the text copied from SharePoint, with the Client Uri added on the next line.

Property Value
Name sharepoint
Path sys/saas
Text

Client Id:
aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa 
Client Secret:
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa/aaaaaaaaaaaa= 
Title:
Northwind Demo 
App Domain:
demo.codeontime.com 
Redirect URI:
https://demo.codeontime.com/northwind/appservices/saas/sharepoint
Client Uri:
codeontime.sharepoint.com

Press OK to save the service registration.

It is necessary to associate a system identity to the registration in order to synchronize user roles with their assigned SharePoint groups. Select the row one more time, and press “Add System Identity”.

Adding system identity to the sharepoint registration.

You will be required to sign in and “Trust” the app. Make sure to log in with an administrative SharePoint account. Upon completion, you will be transferred back to the Site Content page, and the SharePoint registration record will be updated with the granted access token.

Configuring the Web Part

Return back to SharePoint and continue configuration of the web part. In the top-right corner of the web part, press the down chevron and select “Edit Web Part”.

Editing the web part properties.

The web part properties window will open. Under “Appearance” section, change Chrome State to “None”. Expand the “Software as a Service” section, and specify the URL of your cloud app in the Cloud property. Optionally specify a Start Page or disable the navigation.

Editing the web part properties.

Press OK to save changes.

Using the Web Part

If the registration has been configured correctly, the Cloud On Time or Code On Time application will load in the web part zone. This application will “talk” directly to your SharePoint instance via OAuth protocol to obtain the user name, email, and groups. The result of this conversation is a prompt displayed to the end user asking to trust the application.

Web part displaying permission request.

If the user presses “Trust It”, then the application will sign the user in with the user’s SharePoint identity, and assign their groups as roles to that user. The user will then be redirected to the start page specified in the web part properties.

The web part navigated to the correct page in SaaS mode, with user and roles automatically created.

Cloud On Time For SharePoint privacy policy can be found here.

Wednesday, January 11, 2017PrintSubscribe
Announcing COT v9

We are pleased to announce that the new year brings about an all-new version of Code On Time, called COT v9. This product will come in three flavors: Code On Time, Cloud On Time, and Cloud On Time Private Edition.

The new version brings a unified development environment directly into your application. Users with development privileges will be able to activate the Project Designer from within the live app. The Project Explorer will be displayed alongside application pages and will synchronize itself with the currently visible content. Changes to the project will be reflected instantly in the presentation. The Project Designer communicates with the backend, implemented differently for every flavor of COT v9.

The “Code On Time” flavor of v9 will interact directly with the application generator that you are familiar with. The app generator will run in a batch mode in response to developer actions. Application code will be created, generated, and modified in the exact same fashion you are used to. Visual Studio IDE will be launched when you need to see a C#/Visual Basic business rule, or would like to see the source code of the project. The source code is stored on your computer. You can use your own version control system. You can work with any supported database engine. You will install COT v9 on your computer. The price for Code On Time edition of v9 will remain the same as the current shipping version of the product. Licenses will continue to be perpetual. Active customers will receive “Code On Time” flavor of v9 as a regular product update.

The “Cloud On Time” flavor of v9 will interact with a hosted version of the application generator. Applications and data are stored in the Microsoft Azure Cloud. A built-in Database Designer will be used to create database tables and views within the live app. Developers will be offered a choice of SQL, JavaScript, and Email business rules. “Cloud On Time” does not require installation, and works on any web-enabled device. A monthly subscription fee is based on the number of developers and the number of records in the database. A free trial will be available.

The “Cloud On Time Private Edition” flavor of v9 will interact with a hosted version of the application generator installed on the customer premises. This product is targeted towards privacy-conscious customers with a need for rapid application development. It will be possible to create business rules with C# or Visual Basic to extend applications. The product will be sold with a perpetual license with 6, 12, or 24 months of updates.

Applications created with COT v9 support code-free integration with Google Apps and popular content management systems, such as SharePoint or DotNetNuke.

Rapidly build universal business apps on any device, and in any environment.

Modal login form with three external login options.

Split view displayed on Suppliers page created with Code On Time.

Context panel with new material icons in application using Touch UI.

Image headers and form action bar in Categories form.

Modal page sliding when opening additional pages.

Modal page with mini sidebar.

Pricing for “Cloud On Time” and “Cloud On Time Private Edition” will be announced soon.

We are estimating that COT v9 will become available in March-April of 2017.

We know that many of you awaiting anxiously for the next product update. Release 8.5.12.0 is expected to arrive very soon, and brings many features of COT v9 into your hands. Please stay tuned.

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.