Tips and Tricks

Blog
Tips and Tricks
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".

Sunday, September 6, 2015PrintSubscribe
Calendar View, Mini-Calendar, Multi-Select, Responsive Grid with Auto-Balancing, Hyperlinks, Multi-Column Sorting

We wanted to share with you that Iron Speed, Inc. has discontinued operations. Diligent developers have surely tried Iron Speed Designer and for various reason have turned to Code On Time instead. Read our comment about Iron Speed to learn more. We are charging ahead - expect to be amazed!

Calendar view style

Code On Time update 8.5.5.0 introduces a brand new view style into the already potent mix of visualization methods available to end users of Touch UI. View style Calendar brings a whole new level of interactions with data. Drag & drop is fully supported with numerous enhancements planned ahead. Take a look at the Calendar and other view style supported right now.

Calendar view style in Touch UI

The following tags allowing controlling otherwise fully automatic display of Calendar view style:

  • calendar-date will mark a particular data field as start date or “general” date of event. An event is a database row with a date column.
  • calendar-end specifies the “end” date of the calendar event. Mark a field as “end” date to allow “resizable” events.
  • calendar-text specifies the field value displayed on the event
  • calendar-color specifies option “color” source for the events. For example, an order event can be presented with a different color for each employee associated with it. 24 standard colors are supported.
  • calendar-disabled excludes “date” field from being displayed on the calendar.

Mini-Calendar

A permanent sidekick called mini-calendar is display on the sidebar whenever at least one data field is available to the user. Mini-calendar filters data in all data views and serves as a navigator in Calendar view.

Mini-calendar filters data displayed in Charts view style in the app with Touch UI

Other highlights include responsive grid with auto-balancing, multi-column sorting, and support for Hyperlink Format String property in Touch UI.

Multi-Select

Ability to select multiple rows is now fully supported in Touch UI in Grid, List, and Cards view styles. End user can select up to a 1000 items at once.

Multi-select in the grid view style in the app with Touch UI

Responsive Grid with Auto-Balancing

The responsive Grid view style has been redesigned and now support auto-balancing of data.  Notice that the data is densely distributed on the screen. Built-in screen-size breakpoints automatically reduce the number of fields visible to the user .

Responsive grid view style with auto-balancing in the app with Touch UI

Application framework uses these breakpoints:

  • tn (tiny) – 480px
  • xs (extra small)  - 768px
  • sm (small) – 992px
  • md (medium) – 1199px
  • lg (large) – 1440px
  • xl (extra larget) – anything larger than 1440px

If you want to ensure that a particular data field is display on a tiny screen in Grid view style than tag it as “tn-grid”. The framework will automatically take core of the remaining fields.

Hyperlink Format String

Touch UI now supports hyperlink format strings. Field will be displayed as underline if a hyperlink is present. Context menu will display items for every field with a hyperlink even if it is not visible in the current view style.

Hyperlinks in the app with Touch UI

Multi-Column Sorting

End users are now able to perform sorting on multiple columns.

Multi-column sorting in an app with Touch UI

Other Enhancements

The release also introduces numerous enhancements to both Touch and Desktop UI.

  • High performance reading of many-to-many fields. Framework performs a single database request per many-to-many field to retrieve junction table rows that match the rows of the data page that will be returned to the client. (Desktop and Touch)
     
  • Authorized roles can be assigned to individual data views in SPA applications (Desktop and Touch).
     
  • Import processor assigns the same default values to all imported rows (Desktop and Touch)
     
  • Aggregates are now calculated on result sets based on stored procedures and web services. (Desktop and Touch)
     

  • SQL Business rules allow clearing "Modified" property of field values as follows
      set @FieldName_Modified = 0

    Application framework will not use the field in update/insert/delete operation.
     

  • Single Page Applications allow anonymous calls to data controllers.
     

  • Relationship Explorer links now use shortcuts for data controller URL parameters _commandName and _commandArgument. The new syntax uses _command and _argument.
     
  • HTML page implementation is now also supported in Relationship Explorer links.
     
  • “Borrowed” blob fields are correctly displaying a thumbnail in Touch and Desktop UI
     
  • Touch UI allows right-click of items in all view style with ability to perform quick filtering.
     
  • Paging is now supported in “Summary” presentation in Touch UI.
     
  • Touch UI memorizes tab selection for the last 10 objects on any given page.
     
  • DACL correctly processes parameters @BusinessRules_, @Url_, and @Session_.
     
  • Fixed issue with Oracle Session State throwing "Value does not fall within the expected range".
     

Coming Next

We are bring a controller-level Data Model in the Project Designer. You will be able to set up your own tables, columns, and relationships instead of relying on the app generator to do so. This will give complete GUI-based control over the command and fields in the application baseline.

Also Expect a mini-calendar to become a part of Desktop UI. This handy feature work similar to its counterpart in Touch UI.

Mini-calendar in the upcoming revision of Desktop UI

Saturday, May 16, 2015PrintSubscribe
Adding Integrated CMS to an Existing Application

It is easy to add integrated content management to an app created with Code On Time.

Let’s say you have an application that was created without automatically generated pages. If the membership option has been enabled for the project then the sitemap of the app may look as follows.

Application without integrated content management system.

Select the project name on the start page of the app generator and choose Settings, continue to Database Connection section.

Click “…” button on the right-hand side of Connection String input.

Activate connection string settings to add integrated CMS to the project.

Scroll to Content Management System (CMS) section and choose the desired security system for CMS.

Selecting a security system for integrated CMS.

Click Add button to install the database support for CMS in your project. A confirmation will be displayed.

Confirmation of succesful installation of CMS in the project database.

Click OK button to close the window and press Finish to skip the rest of the configuration steps for the project.

Click Refresh button to add CMS database objects to the project.

Refreshing project in the app created with Code On Time.

The window with the list of available data controllers will be displayed.

Content management system table SiteContent is visible in the list of existing data controllers in the app created with Code On Time.

The screenshot above shows dbo.SiteContent table in the list of project data controllers. The table will be visible in the list if all database tables and views are included in the project.

If the project includes only a subset of database tables and views then the screen may look as follows.

Changing tables/views included in the project.

Click Change Tables/Views button and add SiteContent database table to the app.

Selecting SiteContent database table for a project that will have integrated content management system.

Finally press Refresh button to refresh the project metadata.

The remaining step is to create a page for Site Content management. Activate project designer and create a new page with the name of your choice in the desired location.

Switch to Controllers tab, right-click SiteContent  data controller, and choose Copy. Return to Pages tab in Project Explorer and paste the controller into the new page.

A custom page that allows managing content stored in integrated CMS.

Exit project designer and generate the app. Select CMS option in the navigation menu.

Content management screen of integrated CMS.

Upload test content to see CMS in action.

Uploading sample content to integrated CMS of an app created with Code On Time.

The first content item stored in integrated CMS of an app created with Code On Time.

Try the content in the browser.

Sample content stored in CMS is displayed in the browser.