Blog

Commonly, multiple screens are connected and the user is required to page through these forms in order to complete their task. This pattern of presentation is called the “Wizard”. Starting with release 8.5.11.0, it is possible to create wizards in Touch UI. The picture below shows an example of a Create Employee Wizard in the Northwind sample database.

Each step of the wizard contains one or more categories. If all categories belonging to a particular step are rendered invisible via the Visible When property, then that step will be hidden.

Let’s implement the wizard shown above.  Start the Project Designer. In the Project Explorer window, switch to Controllers tab. Double-click on “Employees / Views / createForm1 / c1 – New Employees” category.

Make the following changes and press OK to save:

Next, let’s create several new categories. Right-click on “Employees / Views / createForm1” and press “New Category”.

The second category will display in a new column alongside the previous category in the first step of the wizard.

The next category will have the following configuration. Note the use of curly brackets wrapping field names. These will be replaced by the value of the field at runtime.

The last category representing the final wizard step is configured below. Notice that the Visible When property is configured to hide the category when the Title field is equal to the value “President”.

$row.Title != 'President'

Any categories that do not have a “Wizard” property assigned will be displayed on every step, either above or below the wizard content, depending on the position of the category relative to the first wizard category.

Rearrange the data fields as presented in the picture below using drag & drop.

On the toolbar, press Browse to regenerate the app. Once generation is complete, navigate to the Employees page and create a new employee.

Notice that a Status Bar has automatically been defined. The “Prev” and “Next” actions have been automatically injected into the form action group. Enter some values for the fields, including specifying “President” in the Title field.

Notice that the “Employee” tab has been removed from the Status Bar. By pressing “Next”, the Address wizard step will be displayed. The field names surrounded by curly brackets have been replaced with the field values defined by the user.

Note that when using custom form templates, wizards can be defined by encapsulating each step by a container of type “wizard”, containing the attribute “data-wizard-step”. The value of the attribute will be displayed in the status bar. See a simplified example below:

<div data-container="wizard" data-wizard-step="General">
    <div data-container="collapsible" data-header-text="General Info">
        ...
    </div>
    ...
</div>
<div data-container="wizard" data-wizard-step="Address">
    ...
</div>

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:

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.

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.