Tutorials

Labels
AJAX(112) App Studio(7) 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(183) 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
Tutorials
Monday, March 2, 2015PrintSubscribe
Automatic Construction of Charts in Touch UI

Data views in an app created with Code On Time may present users with the view style called “Charts”. This view style is either enabled automatically by application at runtime or by developers at design time. The purpose of the view style is to provide instant insight into data.

If the definitions of charts are not a part of application design, then the application framework will compose up to nine charts based on the properties of fields in the data view if possible.  The app will attempt to define charts after examining the presence of lookup, date, or numeric fields in the view. First, it will try creating charts with dates as the rows, and lookups as the values. Then, it will pair a few numeric fields with a lookup.

The picture shown below displays the charts automatically created for the Orders controller of the Northwind sample application.

All nine charts that were automatically composed for Orders page of Northwind sample database.

The automatically created definitions for all of the nine charts are shown below. Each chart is described with one or two tags that start with “pivot-“ keyword followed by properties.  The elegant simplicity of the tag language makes possible sophisticated collections of charts defined both by developers and end users.

The chart definitions generated by the client library.

Application framework performs efficient server-side data pivots following the tag specification. Data pivots for all charts are performed on the server simultaneously. Data pivots take into account application-level and user-defined filters.

Let’s see how each chart works.

Chart 1 – Stacked Column + Dates

The first chart pivots customers by the order date in a stacked column chart.

Pivoted data of the 'stacked column + dates' chart.

This chart uses the first date field, OrderDate, as the rows. The “pivot1” property assigns the field to the pivot with ID of “1”. The “row” property sets the field as a row in the pivot, and assigns it index “1”.

The property “date” instructs the application to try several date bucket groups and choose the best one available based on the number of rows in the output. Application framework tries not to have too many or too few “date” rows in a pivot. For the dataset in the picture, the framework has produced the pivoted data as if tags “pivot1-row1-year pivot1-row2-month” were specified.

The “all” property ensures that any empty gaps in the data will be included in the pivot dimension.

The first lookup field, CustomerID, is used for the columns. The columns are sorted in descending order by the value of each column. Then, only the top five customers are kept, and the rest of them are dropped from the output. The “columnstacked” property defines the type of chart.

When a value field is not defined for the chart, a count of the first available field is used.

Field Name Tag
OrderDate pivot1-row1-date-all
CustomerID pivot1-col1-sortdescbyvalue-columnstacked-top5

Chart 2 – Area + Dates

The second chart pivots employees by required date in an area chart.

Pivoted data of the 'area + dates' chart.

This chart uses the second date field, RequiredDate, as the rows.

The second lookup field, EmployeeID, is used for the columns, and the top seven employees sorted in descending order are used. The “area” property specifies the chart type.

Field Name Tag
RequiredDate pivot2-row1-date-all
EmployeeID pivot2-col1-sortdescbyvalue-area-top7

Chart 3 – Column + Dates

This chart pivots shipper companies by the shipped date in a column chart.

Pivoted data of 'column + dates' chart.

This chart uses the third date field, ShippedDate, as the rows of the output.

The ShipVia lookup field is used, and only the top five values are kept. The type of the chart is defined as “column”.

Field Name Tag
ShipVia pivot3-col1-sortdescbyvalue-column-top5
ShippedDate pivot3-row1-date-all

Chart 4 – 3d Pie

This chart shows the top ten orders by customer in a 3d pie chart.

Pivoted data of 3d pie chart.

The fourth chart uses CustomerID as the row values. The top ten values are displayed. The “other” property commands the server to sum up the rest of the values in an “Other” row. The type of chart is “pie3d”.

When no column field is defined, there will be only one column to display the value.

Field Name Tag
CustomerID pivot4-row1-top10-other-sortdescbyvalue-pie3d

Chart 5 – Columns

This chart shows the top 10 employees that made orders in a column chart.

Pivoted data of 'column' chart.

The fifth chart uses EmployeeID lookup field for the rows. The top ten values are displayed, and the rest are summed up into an “Other” row. The type of chart is “column”.

Field Name Tag
EmployeeID pivot5-row1-top10-other-sortdescbyvalue-column

Chart 6 – Line

This chart shows the count of orders made by order date in a line chart.

Pivoted data of 'line' chart.

The next chart uses the OrderDate field as the rows. The “date” property will generate multiple sets of data, differentiated by bucket size, and use the best result for the chart. The property “all” will ensure that there are no missing values in the date range. The type of chart is “line”.

Field Name Tag
OrderDate pivot6-row1-line-date-all

Chart 7 – Columns

This chart shows a count of orders made by required date in a column chart.

Pivoted data of 'column' chart.

This chart uses the RequiredDate field for the row values. The type of chart is “column”. The server will compose multiple results and pick the best one that fits in the graph when “date” is used. The chart will not miss any gaps in dates with the “all” keyword.

Field Name Tag
RequiredDate pivot7-row1-column-date-all

Chart 8 - Area

This chart shows the count of orders made by shipped date.

Pivoted data of 'area' chart.

This chart shows values grouped into rows by the ShippedDate field.

Field Name Tag
ShippedDate pivot8-row1-area-date-all

Chart 9- Donut

This chart shows the count of orders made, grouped by shipper company, in a donut chart.

Pivoted data of 'donut' chart.

This chart uses the ShipVia lookup field for the rows of the result. The “top10” tag is disregarded as there are less than ten values in the result.

Field Name Tag
ShipVia pivot9-row1-top10-other-sortdescbyvalue-donut
Tuesday, August 26, 2014PrintSubscribe
Intro To Pages in Code On Time Apps

Every app created with Code On Time generator has various pages organized into a hierarchy. Each page may contain multiple containers that are used to organize content.

Placed into these containers are data views and user controls. Data views are used to bind controllers to pages and allow the user to view and interact with the data. Data views may interact with each other in order to display master-detail relationships. Controls represent bindings of user controls, which contain custom HTML and code that can expand the functionality of the application. Pages can also be configured to link to other websites.

The heirarchy of elements in pages of Code On Time apps.

The picture below shows the default organization when a sample Northwind app is created.

The default page configuration of a sample Northwind app.

When an application is first created, pages are automatically composed for each table included in the project, and a page hierarchy will be determined by any foreign key relationships between these tables. Master and child views will be placed and configured on the pages.

A Home page is created for every application and contains two controls – the table of contents, and a default Welcome message. Any views will be placed under the “Reports” menu option. If ASP.NET Membership is enabled, a Membership page will be added at the end to allow any users with role “Administrators” to manage the users and roles of the app.

Pages can be rearranged easily using drag & drop techniques in the Project Explorer.

The behavior of page elements differs between Desktop and Touch UI.

Inter Page Navigation

Pages rendered with Desktop user interface will display all controls and data views at the same time. Data views can be grouped inside tabs, triggered by Tasks items on the side bar, and can be conditionally hidden. The Complex Page Layout demo shows multiple data views organized into different tabs and containers. Users can navigate through pages of records using the pager on each data view.

Desktop UI displays all controls and data views at the same time.

Controls will also be rendered in their own areas on the page.

image

The same page in Touch UI will show the same layout of data views.

Touch UI renders all data views as echos on the page.

Note that each data view shows a small subset of records.  The user must click on See All in order to see the entire set of data in full screen. The views on the main page “echo” the contents of the full screen data view.

The full screen presentation offers infinite scrolling and easy access to actions on the menu bar and side bar. If there is only one master data view on the page, this presentation will be activated by default.

Clicking the 'See All' button will activate the full screen data view.

Navigating to a page with a single control will display the contents of the control in full screen. When a page with several controls is rendered, a list of available controls will be displayed.

Controls in Touch UI are initially rendered as buttons.

Combining controls and data views on the same page will render the control as a button and display the “echo” data views.

Controls and data views will be rendered as buttons and echos, respectively.

Clicking on a list item will open the user control or data view in full screen.

Activating the button for a control will display the contents of the control in full screen mode.

The user may return to the main screen by tapping on the Back arrow in the top left corner of the screen.

Saturday, August 9, 2014PrintSubscribe
Passing Business Rule Properties to Stored Procedures

Code On Time generator allows creating data controllers from the result set of a stored procedure. Some stored procedures use parameters in order to perform operations on the data. In the Northwind sample database, the [Employee Sales By Country] stored procedure shows total sales amounts grouped by employee, and then by country. It accepts two parameters, @Starting_Date and @Ending_Date to determine the filter.

Let’s create a controller from this stored procedure and pass parameters to the script via properties in the BusinessRules class of the app.

This picture shows the results of the stored procedure with @Beginning_Date and @Ending_Date parameters returned by a business rule property.

Employee Sales by Country stored procedure results filtered by a business rule property.

The CREATE script for the stored procedure can be seen below.

CREATE procedure [dbo].[Employee Sales by Country] 
@Beginning_Date DateTime, @Ending_Date DateTime AS
SELECT    Employees.Country, 
        Employees.LastName, 
        Employees.FirstName, 
        Orders.ShippedDate, 
        Orders.OrderID, 
        "Order Subtotals".Subtotal AS SaleAmount
FROM Employees INNER JOIN 
    (Orders INNER JOIN "Order Subtotals" ON Orders.OrderID = "Order Subtotals".OrderID) 
    ON Employees.EmployeeID = Orders.EmployeeID
WHERE Orders.ShippedDate Between @Beginning_Date And @Ending_Date

Creating the Controller

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Click on the New Controller icon on the toolbar.

Creating a new controller.

Enter a name for the controller.

Property Value
Name EmployeeSalesByCountry

Press OK to save. Right-click the new controller and press “Generate From SQL…”.

Generating the controller from an SQL script.

In the SQL script textbox, paste in the following script. The debug section is removed from the business rule when the application framework executes the script at runtime and declares the business rule properties as SQL parameters.

-- debug
DECLARE @BusinessRules_BeginningDate datetime,
        @BusinessRules_EndingDate datetime
-- end debug

EXEC [dbo].[Employee Sales by Country]
    @BusinessRules_BeginningDate,
    @BusinessRules_EndingDate

Press OK to generate the controller.

Adding Controller To Page

Next, let’s add the controller to a page. Right-click on the controller and press Copy.

Copying the EmployeeSalesByCountry controller.

Switch to the Pages tab in the Project Explorer. On the toolbar, press the New Page icon.

Creating a new page in the project.

Give a name to the page and press OK to save.

Property Value
Name Employee Sales By Country

Drop the new page to the right side of Home page node to place it second in the site menu.

Dropping a page to the right side of Home page node.     Employee Sales By Country page placed after the Home page node in the site menu.

Right-click on the page and press Paste to instantiate the controller as a data view on the page.

Pasting on the Employee Sales By Country page.     The EmployeeSalesByCountry controller has been added to the page as a data view.

Adding Business Rule Property

Let’s create two properties in the BusinessRules class. These properties will return a DateTime value that will be picked up and used by the query to filter the results. If the user is in role “Administrators”, it will display all records between 1970 and 2000. Otherwise, no records will be displayed.

On the Project Designer toolbar, press Browse to first generate the web app. Then, press Develop to open the solution in Visual Studio.

In the Solution Explorer on the right side, right-click on App_Code folder and press Add | Class.

Adding a new class to the project.

Assign a name of “EmployeeSalesByCountryProperties” and press OK to create the file. Replace the contents of the file with the following:

C#:

using System;

namespace MyCompany.Data
{
    public partial class BusinessRules
    {
        public static DateTime BeginningDate
        {
            get
            {
                if (Controller.UserIsInRole("Administrators"))
                    return new DateTime(1970, 1, 1);
                else 
                    return DateTime.Now;
            }
        }

        public static DateTime EndingDate
        {
            get
            {
                if (Controller.UserIsInRole("Administrators"))
                    return new DateTime(2000, 1, 1);
                else
                    return DateTime.Now;
            }
        }
    }
}

Visual Basic:

Imports Microsoft.VisualBasic

Namespace MyCompany.Data
    Partial Public Class BusinessRules

        Public ReadOnly Property BeginningDate As DateTime
            Get
                If Controller.UserIsInRole("Administrators") Then
                    Return New DateTime(1970, 1, 1)
                Else
                    Return DateTime.Now
                End If
            End Get
        End Property

        Public ReadOnly Property EndingDate As DateTime
            Get
                If Controller.UserIsInRole("Administrators") Then
                    Return New DateTime(2000, 1, 1)
                Else
                    Return DateTime.Now
                End If
            End Get
        End Property

    End Class
End Namespace

Make sure to save the file.

Viewing the Results

Press Ctrl+F5 to start the app without debugging. Log in as an administrator and navigate to the Employee Sales By Country page. Notice that all 809 records are displayed.

All employee sales are displayed.

Log out, and log in again as a user. Notice that no records are displayed.

No employee sales are displayed.