Designer

Blog
Designer
Thursday, March 2, 2017PrintSubscribe
Native Online and Offline Apps

The new product release 8.6.0.0 is coming out March 3, 2017. See the video tutorials that explain the development process at https://youtube.com/codeontime.

The release introduces new Touch UI 2017 and provides the foundation for the future Native Online/Offline Apps. The foundation is provided by the following features:

Batch Import in Touch UI 2017.

Native Online Apps

The next release 8.7.0.0 is expected to go out last week of March. This release will introduce generation of native apps for iOS, Android, and Windows 10.

Here is how you will build a native app with the release 8.7.0.0:

  1. Create an application with SPA page model for a "real" database engine such SQL Server, Oracle, MySql, etc.
  2. Indicate platforms required for native deployment. This will enable CORs support in the app.
  3. Publish an app.
  4. App generator will make special versions of all pages in "Native" deployment folders. All scripts and CSS stylesheets will be copied there as well. Native platform code will be also created.
  5. Deploy the server code of the app to the web server.
  6. Deploy the native code to the app stores.
  7. Install the app and run it on native device.The native code will create a native WebView instance and load local instances of the pages, JavaScript, and CSS. Pages will make remote requests to the server side components. User login and session state is managed through the feature called Identity Manager.

Native Offline Apps

Release 8.8.0.0 is expected to be ready in May of 2017.

The new "Offline" property will be available for application pages.

The data controllers will be generated in ".json" format instead of ".xml". We also need that for both new CoT v.9 and Cloud On Time. The new format of controllers is used by built-in Project Designer.

If at least one page is marked as "Offline", then the following will happen when a native app is running:

  1. Native application will download controllers and data in JSON format from the server.
  2. Only offline pages will be visible/selectable in navigation system of the app if there is no connection.
  3. Any requests for offline data will be executed by the local JavaScript library. Data updates will be executed against the offline copy of the data. The log of requests to update data will be maintained and persisted. There is no need for additional software such as SQLite. We are providing a JavaScript equivalent of the server-side code that will use JSON data controllers on the client to work with data.
  4. "Cloud" icon will be displayed on the application toolbar. There will be several states for the icon:
    • Offline
    • Online + No Local Data Changes
    • Online + Local Changes Require Sync
  5. If the app is "online" then "Cloud" button will be in "Online+" state. If the button is pushed then the following will happen:
    1. The log of updates will be send to the server via the Batch Import API introduced in 8.5.12.0 if data synchronization is required.
    2. Conflict errors will be reconciled by the user when needed
    3. Fresh copies of controllers and data in JSON format will be retrieved from the server replacing the previous offline data set.

Transactional Data Input

Native Online and Web apps will benefit from this new "offline" capability as well. Starting with the release 8.6.3.0, forms will work in "offline" mode. It will be possible to enter child records when a new record is created. The data will be posted to the server only when the master record is posted. This capability will be available in all product editions.

Wednesday, September 21, 2016PrintSubscribe
Speeding Up Quick Find

The Quick Find feature is available by default in all data views of an application. This feature allows searching every field available in the grid all at once.

Quick Find can be triggered by pressing on the Search icon in the top right corner of the data view, or by typing when a full screen data view is in focus.

Activating the Quick Find by pressing the Search icon.

Type in a value and hit “Enter” key on the keyboard to begin the search.

Typing in a value to the Quick Find input box.

When the search is complete, the search query will be displayed in the view header and the results will be displayed in the grid.

When Quick Find is triggered, the query is displayed in the header and the results below.

Each word separated by a space will search for results containing both words. Words separated by commas will search for results containing either word. Results can be negated by adding a dash (-) before the word. Exact phrases can be wrapped in “double quotes”. The example below executes the following search:

“Camembert Pierrot”, tea –grandma

The search returns records that contain the phrase “Camembert Pierrot” exactly, or records that contain “tea” and do not contain “grandma”.

Two results are returned.

However, while using Quick Find is perfect for small to medium size tables or views with a small number of columns, it can cause a substantial performance hit when the grid contains many different columns, and there is a large number of records in the table. Each column must be searched for that particular combination of keywords. While it is still possible to use Advanced Search in order to query specific columns, it does not beat the convenience offered by Quick Find.

In order to avoid the performance hit caused by searching every column, it is possible to reduce the Quick Find search scope to an inclusive or exclusive set of fields in the grid.

Excluding Specific Fields Using “$quickfinddisabled”

The quickest way to add performance is to add the tag “$quickfinddisabled” to the Search Options property of the data field. This will exclude the column from the search.

Let’s remove the QuantityPerUnit data field from the Quick Find query of Products page in the sample Northwind project.

Start the Project Designer. Switch to the Project Explorer tab. Double-click on “Products / Views / grid1 / QuantityPerUnit” data field.

Editing the QuantityPerUnit data field of grid1 View of Products controller.

Make the following change:

Property Value
Search Options $quickfinddisabled

Press OK to save. On the toolbar, press Browse.

Navigate to the Products page and execute a Quick Find search. Notice that Quantity Per Unit will now be ignored when using Quick Find.

Quick Find will no longer use Quantity Per Unit field in the filter.

Including Specific Fields Using “$quickfind”

It is also possible to only include specific fields by using the “$quickfind” tag. Let’s reduce the Quick Find scope on Products page to only ProductName and CategoryName fields.

Switch back to the Project Designer. Make sure to clear any “$quickfinddisabled” tags, as these are exclusive.

Double-click on “Products / Views / grid1 / ProductName” data field node.

Editing ProductName data field in grid1 view of Products controller.

Make the following change:

Property Value
Search Options $quickfind

Press OK to save the data field.

The next data field to modify is CategoryName. However, this data field is being used as the Alias for CategoryID data field, and has not been added to grid1 view. We will need to add CategoryName data field to grid1 in order to modify the behavior. This data field will not be rendered twice.

Drag the field “Products / Fields / CategoryName” onto “Products / Views / grid1” view to instantiate a data field for CategoryName field.

Dragging CategoryName field onto grid1 view.  The CategoryName data field has been added to grid1.

Next, change the configuration for CategoryName data field.

Property Value
Search Options $quickfind

Press OK to save. On the toolbar, press Browse. Navigate to Products page and search for “tea”. Notice that Supplier Company Name is not searched - results do not include those with Supplier of “Grandma Kelly’s Homestead”.

The Quick Find query has excluded all fields that were not tagged with "$quickfind".

Wednesday, September 21, 2016PrintSubscribe
Smart Dates

At a glance, dates can be hard to comprehend without having to open a calendar. Starting with release 8.5.11.0, date values will be replaced with Smart Dates. These smart dates represent text labels that will replace the original date value and show simplified versions of the value that are significantly easier to read and understand.

Smart dates will follow this algorithm:

  1. If the date is in the current year,
    1. and the date is in future days,
      1. and the date is tomorrow, the word “Tomorrow” will be shown.
      2. and the date is occurring within the next 7 days, then the shortened day of the week will be displayed.
      3. and the date is occurring 7-14 days in the future, then the label will be “Next” plus the day of the week.
      4. Otherwise, month and date will be displayed.
    2. and the date is today,
      1. and the time is midnight, then the word “Today” will be displayed.
      2. and it was within the last hour, then the words “XX min ago” will be displayed.
      3. and it is happening within the hour, then the words “in XX min” will be displayed.
      4. Otherwise, the time will be displayed.
    3. and the date is in past days,
      1. and the date is yesterday, the word “Yesterday” will be shown.
      2. and the date occurred < 7 days ago, the label will be “Last” plus the day of the week.
      3. Otherwise, the month and date will be displayed.
  2. Otherwise, the full value is displayed.

When the time value is not midnight, then the time will be displayed after the date.

See an example in the following picture.

List of Orders with Smart Dates enabled.

These smart dates are much simpler to read and understand than the original values, displayed below.

List of orders with Smart Dates disabled.

Hovering over the smart date will display the original value, when needed.

Hovering over a Smart Date will show the original value.

The same smart dates are displayed in the form.

Smart Dates displayed in the form

When the user edits the field, the true value will be displayed.

Editing a value in the form, the original date will be displayed.

The user can choose to disable this feature from the Settings panel. Click on the three-bar “hamburger” menu in the top left corner of the web app.

Activating the hamburger menu.

Select the “Settings” option in the panel that appears.

Selecting the Settings panel from the menu panel.

From the list of settings, select “Smart Dates”. Select Yes or No, and confirm to refresh the page in order to enable or disable the feature.

Enabling or disabling Smart Dates from the Settings panel.

The default value for this user setting can be configured in the Touch UI section of the Features page of the Project Wizard.

Modifying the default value for Smart Dates in the Features page of the Project Wizard.