Code On Time: Tutorials

Blog

Tutorials

Monday, September 26, 2016Print Subscribe

Conditional Visibility in View Templates

Conditional visibility on data fields and categories allows hiding or showing page elements based on field values. View templates give the ability to define custom presentations. When a custom template is defined for the view, the client library is not able to determine which page elements should be displayed or hidden based on the conditional visibility expressions. As such, the creator of view templates must mark up the template in order to bind these expressions with the correct elements.

When the template has been correctly defined, data fields, categories, and even custom page elements will be able to displayed or hidden depending on field values. For example, a large label is displayed in the sample below when the order has been shipped past the required date.

Let’s use the create form for Orders in the Northwind sample database.

Arranging Data Fields into Categories

First, let’s rearrange the data fields into multiple categories, in order to control visibility of each category, instead of each individual data field. The user will only be able to enter shipping information if a shipped date is assigned.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on “Orders / createForm1” view node, and press New Category.

Define the following settings:

Property	Value
Header Text	Ship Info
Visible When	$row.ShippedDate != null

Press OK to save the category. Next, drag data fields ShipVia, Freight, ShipName, ShipAddress, ShipCity, ShipRegion, ShipPostalCode, and ShipCountry into the new category.

Adding Data Field Visibility

Users should not be able to set the shipped date until the order date has been set. Let’s add a data field conditional visibility expression to ShippedDate data field.

Double-click on “Orders / Views / createForm1 / c1 – New Orders / ShippedDate” data field node.

Make the following change:

Property	Value
Visible When	$row.OrderDate != null

Press OK to save the data field.

Adding the View Template

Let’s add a custom view template for editForm1 of Orders controller.

On the toolbar, press Develop to open the project in Visual Studio. In the Solution Explorer, right-click on the “WebSite” node and press “Add / New Folder”.

Give this new folder the name “Views”. Next, right-click on the folder and press “Add / HTML Page”.

Give this page the name “Orders.createForm1.html”. Replace the contents of the file with the following:

<div data-container="collapsible" data-header-text="New Order">
    <div data-container="row">
        <div data-control="description">Enter new order information below.</div>
    </div>
    <div data-container="row">
        <div data-control="label" data-field="CustomerID">CustomerID</div>
        <div data-control="field" data-field="CustomerID">CustomerID</div>
    </div>
    <div data-container="row">
        <div data-control="label" data-field="EmployeeID">EmployeeID</div>
        <div data-control="field" data-field="EmployeeID">EmployeeID</div>
    </div>
    <div data-container="row">
        <div data-control="label" data-field="OrderDate">OrderDate</div>
        <div data-control="field" data-field="OrderDate">OrderDate</div>
    </div>
    <div data-container="row">
        <div data-control="label" data-field="RequiredDate">RequiredDate</div>
        <div data-control="field" data-field="RequiredDate">RequiredDate</div>
    </div>
    <div data-container="row" data-visibility="f:ShippedDate">
        <div data-control="label" data-field="ShippedDate">ShippedDate</div>
        <div data-control="field" data-field="ShippedDate">ShippedDate</div>
    </div>
    <div data-container="row" data-visible-when="$row.RequiredDate < $row.ShippedDate">
        <h3 style="color:red">WARNING: THIS ORDER HAS BEEN SHIPPED LATE</h3>
    </div>
</div>
<div data-container="collapsible" data-header-text="Ship Info" data-visibility="c:c2">
    <div data-container="row">
        <div data-control="description">Enter shipping information below.</div>
    </div>
    <div data-container="row">
        <div data-control="label" data-field="ShipVia">ShipVia</div>
        <div data-control="field" data-field="ShipVia">ShipVia</div>
    </div>
    <div data-container="row">
        <div data-control="label" data-field="Freight">Freight</div>
        <div data-control="field" data-field="Freight">Freight</div>
    </div>
    <div data-container="row">
        <div data-control="label" data-field="ShipName">ShipName</div>
        <div data-control="field" data-field="ShipName">ShipName</div>
    </div>
    <div data-container="row">
        <div data-control="label" data-field="ShipAddress">ShipAddress</div>
        <div data-control="field" data-field="ShipAddress">ShipAddress</div>
    </div>
    <div data-container="row">
        <div data-control="label" data-field="ShipCity">ShipCity</div>
        <div data-control="field" data-field="ShipCity">ShipCity</div>
    </div>
    <div data-container="row">
        <div data-control="label" data-field="ShipRegion">ShipRegion</div>
        <div data-control="field" data-field="ShipRegion">ShipRegion</div>
    </div>
    <div data-container="row">
        <div data-control="label" data-field="ShipPostalCode">ShipPostalCode</div>
        <div data-control="field" data-field="ShipPostalCode">ShipPostalCode</div>
    </div>
    <div data-container="row">
        <div data-control="label" data-field="ShipCountry">ShipCountry</div>
        <div data-control="field" data-field="ShipCountry">ShipCountry</div>
    </div>
</div>

Notice that there are three highlighted pieces in the sample above.

The yellow highlight shows how to apply data field-level visibility to an element by using the attribute “data-visibility”, and setting the value to “f:” followed by the name of the field. This will inherit the visibility from the field “ShippedDate”.

The green highlight shows how to apply category-level visibility to an element. Use the attribute “data-visibility”, and set the value to “c:” followed by the category ID. The example will inherit visibility from the category “c2”.

The orange highlight shows how to use custom JavaScript expressions to set visibility. Use the attribute “data-visible-when”, and set the value to your JavaScript visibility expression.

Switch back to the browser, navigate to the Orders page, and create a new order. Notice that the OrderDate data field, custom header, and shipping category are hidden.

Enter a value for Order Date. Notice that the Shipped Date data field will appear.

Enter a value for Shipped Date. The Ship Info category will appear.

If the Shipped Date is after the Required Date, the warning text will appear.

Labels: ASP.NET, Features, JavaScript, Touch UI, Tutorials, User Interface, Web Application Generator

Wednesday, September 21, 2016Print Subscribe

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:

If the date is in the current year,

and the date is in future days,

and the date is tomorrow, the word “Tomorrow” will be shown.
and the date is occurring within the next 7 days, then the shortened day of the week will be displayed.
and the date is occurring 7-14 days in the future, then the label will be “Next” plus the day of the week.
Otherwise, month and date will be displayed.

and the date is today,

and the time is midnight, then the word “Today” will be displayed.
and it was within the last hour, then the words “XX min ago” will be displayed.
and it is happening within the hour, then the words “in XX min” will be displayed.
Otherwise, the time will be displayed.

and the date is in past days,

and the date is yesterday, the word “Yesterday” will be shown.
and the date occurred < 7 days ago, the label will be “Last” plus the day of the week.
Otherwise, the month and date will be displayed.

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.

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

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

The same smart dates are displayed in the form.

When the user edits the field, the true value 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.

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

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.

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

Labels: Application Builder, Calendar, Designer, Features, Touch UI, Tutorials, Web Application Generator

Thursday, September 15, 2016Print Subscribe

Calculating Values with C#/Visual Basic Business Rules

It is a common requirement for forms of the application to feature a custom calculation or operation that must be triggered by the user pressing a button visible on the screen.

For example, let’s use the Orders page of the Northwind sample project. It may be useful to have an action that will mark the order as shipped by populating the Shipped Date field, and setting a default value for Freight if it has not been specified.

The first step is to add an action to the form scope that the user will be able to press to trigger a business rule.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on “Orders / Actions / ag2 (Form)”, and press New Action.

Set the following properties:

Property	Value
Command Name	Custom
CommandArgument	MarkAsShipped
Header Text	Mark as Shipped
When Last Command Name	Edit

Press OK to save the new action.

Next, let’s create a business rule that will perform the calculations. Right-click on “Orders / Business Rules” node, and press “New Business Rule”.

Specify the following values so that the business rule will be triggered by the action created above.

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

Press OK to save the business rule. On the toolbar, press Browse to regenerate the application and ensure that the rule file is created.

When generation is complete, press “Edit Rule” on the action bar. This will open the business rule in Visual Studio.

Replace the contents of the file with the following code.

C#:

using System;
using System.Data;
using MyCompany.Data;
using MyCompany.Models;

namespace MyCompany.Rules
{
    public partial class OrdersBusinessRules : 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 "MarkAsShipped".
        /// </summary>
        [Rule("r100")]
        public void r100Implementation(OrdersModel instance)
        {
            instance.ShippedDate = DateTime.Now;
            if (!instance.Freight.HasValue || instance.Freight == 0)
                instance.Freight = 13.5m;

            PreventDefault();
        }
    }
}

Visual Basic:

Imports MyCompany.Data

Namespace MyCompany.Rules

    Partial Public Class OrdersBusinessRules
        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 "MarkAsShipped".
        ''' </summary>
        <Rule("r113")>
        Public Sub r113Implementation(instance As OrdersModel)
            'This is the placeholder for method implementation.
            instance.ShippedDate = DateTime.Now
            If Not instance.Freight.HasValue OrElse instance.Freight = 0 Then
                instance.Freight = 13.5D
            End If
            PreventDefault()
        End Sub
    End Class
End Namespace

The code will set the ShippedDate field to the current date and time. It will then check if Freight has a value, and if the value is equal to 0. If so, then the Freight will be set to the decimal number 13.5. Finally, PreventDefault() is called in order to prevent the form from navigating back to the grid.

Save the file, and refresh the web browser. Navigate to Orders page and edit a record. Notice that the “Mark as Shipped” action is now available. Pressing this action will now populate the Shipped Date with the current date and time. If the Freight field was empty, then it will be set to $13.50.

Labels: Application Builder, ASP.NET, Code Generator, Tutorials, Web Application Generator