User Interface

Labels
AJAX(112) App Studio(8) Apple(1) Application Builder(245) Application Factory(207) ASP.NET(95) ASP.NET 3.5(45) ASP.NET Code Generator(72) ASP.NET Membership(28) Azure(18) Barcode(2) Barcodes(3) BLOB(18) Business Rules(1) Business Rules/Logic(140) BYOD(13) Caching(2) Calendar(5) Charts(29) Cloud(14) Cloud On Time(2) Cloud On Time for Windows 7(2) Code Generator(54) Collaboration(11) command line(1) Conflict Detection(1) Content Management System(12) COT Tools for Excel(26) CRUD(1) Custom Actions(1) Data Aquarium Framework(122) Data Sheet(9) Data Sources(22) Database Lookups(50) Deployment(22) Designer(177) Device(1) DotNetNuke(12) EASE(20) Email(6) Features(101) Firebird(1) Form Builder(14) Globalization and Localization(6) How To(1) Hypermedia(2) Inline Editing(1) Installation(5) JavaScript(20) Kiosk(1) Low Code(3) Mac(1) Many-To-Many(4) Maps(6) Master/Detail(36) Microservices(4) Mobile(63) Mode Builder(3) Model Builder(3) MySQL(10) Native Apps(5) News(18) OAuth(9) OAuth Scopes(1) OAuth2(13) Offline(20) Offline Apps(4) Offline Sync(5) Oracle(11) PKCE(2) Postgre SQL(1) PostgreSQL(2) PWA(2) QR codes(2) Rapid Application Development(5) Reading Pane(2) Release Notes(184) Reports(48) REST(29) RESTful(29) RESTful Workshop(15) RFID tags(1) SaaS(7) Security(81) SharePoint(12) SPA(6) SQL Anywhere(3) SQL Server(26) SSO(1) Stored Procedure(4) Teamwork(15) Tips and Tricks(87) Tools for Excel(2) Touch UI(93) Transactions(5) Tutorials(183) Universal Windows Platform(3) User Interface(338) Video Tutorial(37) Web 2.0(100) Web App Generator(101) Web Application Generator(607) Web Form Builder(40) Web.Config(9) Workflow(28)
Archive
Blog
User Interface
Monday, August 6, 2012PrintSubscribe
Custom CSS in DotNetNuke Factory Web Apps

Cascading style sheets are a series of rules that determine the look and formatting of web page contents. Code On Time applications exclusively use CSS to stylize the pages. DotNetNuke Factory is a special kind of web application designed to work within DotNetNuke portal. All cascading style sheets of a module created with DotNetNuke Factory are compiled as binary resources into the application DLL.

Developers can add their own custom CSS rules in standalone web applications. This technique will not work with a DotNetNuke application. The alternative is to create extensions for the standard themes of the code generation library.

Let’s create a CSS rule that will render text in all inputs as bold for Grapello theme in a DotNetNuke Factory application.

Run Visual Studio. On the toolbar, press File | New | File option.

Create new file in Visual Studio.

In the window, select Style Sheet and press Open.

Create a new stylesheet file.`

A new .css file will open in the editor. Paste in the following rule.

@import "../../Library/_Client/Themes/_Shared/jquery.ui.all.css";

table.DataView tr.CategoryRow td.Fields div.Item div.Value input, 
table.DataView tr.CategoryRow td.Fields div.Item div.Value select, 
table.DataView tr.CategoryRow td.Fields div.Item div.Value textarea
{
    font-weight:bold;
}

The highlighted segment of the path in the Grapello.css file is a relative path to the jQuery UI stylesheets packaged with the code generation library. The rule will apply a font weight of “Bold” to all inputs in a category. Right-click on the tab of the file, and press Save File.

Save the new style sheet file in Visual Studio.

Change the save location to [My Documents]/Code OnTime/Client/Themes folder, and change the name of the file to the name of the theme. In this case, Grapello theme is being used, and the name of the file will be “Grapello.css”.

Save the file in Themes folder under Client folder with the name of the theme that will be used.

Press OK to save.

Restart Code On Time web application generator. While holding Shift, click on a project name. This will skip to the Summary page. Press Generate.

Navigate to any data view, and edit a record. The custom CSS will make all text in inputs bold.

Custom CSS has bolded all text in input boxes on the form.

Wednesday, August 1, 2012PrintSubscribe
Feature: Validators and Converters

Data integrity is enforced with validation and conversion business rules. The Project Designer can quickly create and configure generic business rules with a single click. JavaScript, SQL, and Code (C#/Visual Basic) validators and converters are created from the context menu of the fields in Project Explorer.

Validator and Converter menu options available for fields in the Project Explorer.

Converter

The generic converter will convert the field value to uppercase.

For example, the Category Name field in the Categories controller has been configured with the default SQL converter. The sample script is shown below.

if @CategoryName is not null and 
    (@Arguments_CommandName <> 'Calculate' or
     @Arguments_Trigger = 'CategoryName')
begin
    set @CategoryName = upper(@CategoryName)   
end

The user may enter any value into the field.

Lowercase text entered into the Category Name field.

When focus is shifted away from the field, the conversion will take place.

Text in the Category Name field has been converted to uppercase.

SQL and code validators are executed on the server.

Validator

The generic validator will ensure that the field value is not blank.

The Description field of Categories controller has been configured with the default JavaScript validator:

var fieldValue = [Description];
if (fieldValue == null) {
    // prevent the default action processing
    this.preventDefault();
    // set the focus on the field and display an error
    this.result.focus('Description', 'Required field.');
}

After typing a category name, pressing OK will display a message next to the Description field, despite the fact that the field is not marked as required.

Error message displayed if the Description field is blank due to the validation rule.

These sample validators and converters can be expanded to perform more complex operations to fulfill specific business requirements. Any single validator or converter can handle multiple fields when necessary.

Wednesday, July 25, 2012PrintSubscribe
Data Action Notifications

Notifications can be displayed as confirmations after any data manipulation operations.

Let’s implement a code business rule to display a notification after every Update, Insert, and Delete action.

Enable shared business rules. Generate the web app.

Start the Project Designer. On the toolbar, press Develop to open the project in Visual Studio.

In the Solution Explorer, double-click on ~\App_Code\Rules\SharedBusinessRules.cs(vb).

Replace the existing code with the following:

C#:

using System;
using System.Data;
using System.Collections.Generic;
using System.Linq;
using MyCompany.Data;

namespace MyCompany.Rules
{
    public partial class SharedBusinessRules : MyCompany.Data.BusinessRules
    {
        protected override void AfterSqlAction(ActionArgs args, ActionResult result)
        {
            base.AfterSqlAction(args, result);
            if (result.Errors.Count == 0 && args.CommandName == "Update" ||
                args.CommandName == "Insert" || args.CommandName == "Delete")
            {
                Result.ShowAlert("The action {0} has been completed.", args.CommandName);
                Result.Continue();
            }
        }
    }
}

Visual Basic:

Imports MyCompany.Data
Imports System
Imports System.Collections.Generic
Imports System.Data
Imports System.Linq

Namespace MyCompany.Rules

    Partial Public Class SharedBusinessRules
        Inherits MyCompany.Data.BusinessRules

        Protected Overrides Sub AfterSqlAction(args As ActionArgs, result As ActionResult)
            If (result.Errors.Count = 0 And Arguments.CommandName = "Update" Or
                Arguments.CommandName = "Insert" Or Arguments.CommandName = "Delete") Then
                result.ShowAlert("The action {0} has been completed.", Arguments.CommandName)
            End If
        End Sub

    End Class
End Namespace

Save the file. Press Ctrl+F5 to run the web application from Visual Studio.

Navigate to any page, edit a record, and save. A popup window will open, displaying a notification.

Data Action Notification displayed in a popup window.

Continue to Tooltips