Blog: Posts from January, 2016

Blog
Posts from January, 2016
Sunday, January 24, 2016PrintSubscribe
Model Builder, Horizontal Scrolling With Freezing, Conditional Styling, and Geolocation Tracking in Touch UI

Code On Time release 8.5.7.0 has arrived!

The second iteration of the Model Builder has been greatly enhanced. It works faster, creates smaller models and allows quickly expanding the base query model as needed. It is now possible to “add all entities” at once.

Tables are now displayed in a more compact fashion. Only selected, primary, and foreign key columns are displayed on the diagram by default.

image

Models created automatically will not have more than 14 tables included.  Previous implementations of the app generator included every possible relationship with several parent levels up. The default discovery depth remains to be set to 3, but the discovery stops when 14 tables are found.  If the desired relationship is missing then right-click the corresponding foreign key column to add a table to the diagram.

image

image

Grid view style in Touch UI has been enhanced to display all fields defined in the data controller with the help of horizontal scrolling with ability to freeze columns.

image

Touch UI also offers exciting conditional styling options for your data.

Place pictograms next to field values in grids, lists, and forms.

image

Change background color of rows.

image

Display colorful “corners” to elegantly indicate the status of data items.

image

Read the tutorial to learn more about conditional styling of data in Touch UI.

Release Notes

This is the summary of the features and enhancements included in this release:

  • Grid view shows all columns in Touch UI. Previously a subset of columns when displayed if the screen width was insufficient.
  • Horizontal scrolling of columns is enabled in Touch UI grids.
  • User interface option “Freeze” to freeze/unfreeze columns is available in Touch UI. By default the first column is frozen).
  • Geolocation capturing has been enhanced and now works in Touch and Desktop UI. The client app will now store geolocation before Insert and Update to ensure that the user’s permission to track location is captured upon first attempt to edit data. Location watching starts with a 1.5 second delay to support form transitions in Touch UI.
  • Lookup context is correctly passed along with the server-side requests. Both desktop and touch apps can inspect Request.LookupContextField, Request.LookupContextController, and Request.LookupContextView properties.
  • Enhanced sidebar summary allows to click or tap the first field value to see all record properties. The summary is now also displayed in the context menu.
  • Filtering and Sorting are now automatically enabled on formula fields created in Model Builder.
  • New “more” and “less” options are displayed at the bottom of the tables on the diagram.  Tables are presented on the diagram in compact form. Only selected columns, primary, and foreign key columns are visible.
  • Right-click on the foreign key column in Model Builder to connect the table to the diagram.
  • It is now possible to create models for all undefined at once by selecting “add all entities” option in the menu of undefined entities.
  • Discovery depth parameter is now taken into account when Model Builder creates a default model for an entity.

Coming Soon

Next release will bring about a brand new rendering engine for forms in Touch UI. It will be possible to create custom layouts of forms for variuos screen dimensions in a new Form Designer. Also a new Universal Input feature will replace the current “native” inputs of Touch UI to enable unparalleled quality and complexity of form layout presentation and keyboard-friendly and mobile-friendly data entry. 

Field type “DataView” will allow shifting definition of master-detail relationships from pages to the data controllers. Infinite depth of relationships will be possible in both “grid” and “form” views. Form Designer will allow placing “DataView” fields in categories. A custom template will be individually supported on a view level in data controllers. There will be no need to keep a template outside of the data controller definition.

Saturday, January 23, 2016PrintSubscribe
Conditional Styling of Data in Touch UI

Have you ever wanted to give your grids and forms a personal touch? Release 8.5.7.0 makes it possible with the inclusion of conditional CSS rules. These rules allow defining JavaScript expressions that are executed for every row in the view. These expressions have access to the values of each record. When the expression passes, a CSS class will be added to the row. You can then add custom styling to these rows to tell a story.

The picture below shows several examples of custom styling in Touch UI.

image

Adding a View Style Rule

The first step is to define a set of rules that will add CSS classes to the correct rows. The following examples will use the sample Northwind project.

Open the Project Designer. In the Project Explorer, switch to the Controllers tab, and double-click on Suppliers / Views / grid1.

Selecting grid1 view of Suppliers controller.

The view will be opened on the left side of the window. Switch to the Styles tab at the top of the screen.

Adding a new style to the 'grid1' view of Suppliers controller.

On the toolbar, press New | New Style to open the create form. Enter the following settings.

Css Class myapp-country-usa
Test
$row.Country == 'USA'

This rule will add the class “myapp-country-usa” to every row where the “Country” column is equal to “USA”. The Test field is an expression written in JavaScript. The “$row” object is declared by the client library, and each field value is attached to this object when the expression is executed. The “myapp” prefix to the CSS class is added to ensure that there are no clashes with standard rules included in the application.

Press OK to save. Add one more style with the following configuration:

Css Class myapp-contact-title-sales
Test
$row.ContactTitle != null && $row.ContactTitle.match(/sales/i)

This rule will add “myapp-contact-title-sales” rule to every row where the Contact Title is equal to “sales”. The “i” at the end of the regular expression will ignore case.

Press OK to save. On the toolbar, press the Browse button to regenerate the app and open it in your default browser.

Notice that nothing has changed! The grid looks the same as it did before. The rules to add the CSS class has been added, but there have been no presentation changes that the user can see. By using Developer Tools (F12), the correct row can be inspected, and you can confirm that the class is present.

Inspecting the HTML of the page will reveal that the correct class has been added.

Next step will be to add some presentation to these rules.

Customizing Presentation with CSS

Switch back to the Project Designer, and press the Develop button at the top of the screen to open the project in Visual Studio.

In the Solution Explorer, right-click on the “~/touch” folder, and press Add | Style Sheet button.

Adding a new style sheet to the project.

Paste in the following rule:

.myapp-country-usa > .ui-btn:not(:hover):not(.app-selected):not(.ui-btn-active),
.myapp-country-usa > .ui-btn:not(:hover):not(.app-selected):not(.ui-btn-active) .app-frozen-spacer {
    /* change this property */
    background-color: #ffd800 !important;
}

This rule will change the background color of the row, which has the class of “ui-btn”, as well as the spacer used as a background on the frozen column when the grid is scrolled to the right. This rule will not be used when the row is hovered over, clicked, or selected.

The result of this rule can be seen below.

The new CSS rule will add a background color to the relevant rows.

Another way of adding a highlight to a row that does not clash with hover, highlight, or select presentation would be to add a bar on the left side of the row.

.myapp-country-usa .ui-btn::after,
.myapp-country-usa .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    /* change this property */
    background-color:  #ffd800 !important;
}

See the result in the screenshot. Notice that the yellow bar is still visible in the hovered first row, and the selected second row.

The new CSS rule will add a yellow bar to the left side of the relevant rows.

These rules can be combined, like so:

.myapp-country-usa > .ui-btn:not(:hover):not(.app-selected):not(.ui-btn-active),
.myapp-country-usa > .ui-btn:not(:hover):not(.app-selected):not(.ui-btn-active) .app-frozen-spacer {
    /* change this property */
    background-color: #ffd800 !important;
}

.myapp-country-usa .ui-btn::after,
.myapp-country-usa .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 7px;
    /* change this property */
    background-color:  #ffd800 !important;
}

The first row shows the background color, and the second row shows the bar on the left side when the user hovers over with a mouse.

The previous two rules have been combined, showing a yellow background and yellow bar on the relevant rows.

A more subtle way of adding custom styling to a row is to add a colorful triangle to the corner of the record. In this rule, the triangle will only be displayed in “List” presentation style by prepending the class “.app-listview”.

.app-listview .myapp-country-usa .ui-btn::after,
.app-listview .myapp-country-usa .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    width: 24px;
    height: 24px;
    transform: rotate(45deg);
    /* change these properties */
    top: 0;
    margin-top: -12px;
    left: 0;
    margin-left: -12px;
    background-color: forestgreen;
}

Here is the result. Notice that the triangle is still visible on the selected record.

A green triangle has been added to the card.

The previous example places the triangle in the top left corner. It can be easily moved to any other corner by using a combination of “top”, “left”, “bottom”, and “right” attributes, and changing the corresponding margins. The color was also changed.

.app-listview .myapp-country-usa .ui-btn::after,
.app-listview .myapp-country-usa .ui-btn .app-frozen-spacer::after {
    display: inline-block;
    content: ' ';
    position: absolute;
    width: 24px;
    height: 24px;
    transform: rotate(45deg);
    /* change these properties */
    bottom: 0;
    margin-bottom: -12px;
    right: 0;
    margin-right: -12px;
    background-color: red;
}

The picture shows the triangle positioned in the bottom right corner.

A red triangle has been added to the bottom right corner.

Using Glyphicons

Many different glyphicons are included in the application. These glyphicons can be used in conjunction with CSS rules to customize your application even further.

A page that displays all glyphicons can be found at ~/touch/icons.html. Find the glyphicon that you want to use, and you can look up the corresponding class in the file “~/touch/bootstrap.css”.  It will be necessary in order to get the correct character code for the icon.

Finding the correct character code in the 'bootstrap.css' file.

Once the correct code has been located, it can be used in a custom CSS rule. The example below will place a large orange “alert” glyphicon in the “List” presentation style.

.app-listview:not(.app-grid) .myapp-country-usa > .ui-btn::after {
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    position: absolute;
    /* change these properties*/
    content: "\e209";
    color: orange;
    font-size: 8em;
    bottom: 5px;
    right: 0;
    padding-left: 0.5em;
    opacity: .25;
}

The picture below shows the result.

The new rule shows a large orange alert glyphicon in the background of the card.

Glyphicons can also be used in a more subtle way. They can be placed next to any field using the “.app-field-[FieldName]” syntax. This rule will place them next to the correct grid column in the row, and the correct value in other presentation styles.

.app-grid .myapp-country-usa .app-field-CompanyName::after,
.myapp-country-usa .app-field-CompanyName .app-field-data::after {
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: .5em;
    /* change these properties  */
    color: orange;
    content: "\e034";
}

The result is below.

A smaller orange 'flag' glyphicon has been added next to the CompanyName field of the grid.

Conditional styling is also supported in forms too! When the form is in read mode, the classes will be present. Make sure to add the style expressions defined at the beginning of this article to “editForm1” view of Suppliers controller.

The result can be seen below.

The same flag glyphicon has been added to the form.