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
Saturday, August 9, 2014PrintSubscribe
Passing Parameter to Stored Procedure using a Custom Search Dialog

Code On Time apps offer the ability to display the results of a stored procedure. Some stored procedures require passing an SQL parameter in order to perform manipulations 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. By default, the stored procedure will display all records between the years 1970 and 2000. In addition, we will add a custom action that will allow the user to specify the Beginning and Ending dates via a custom confirmation controller.

The picture below shows the confirmation controller form allowing the user to specify parameters for the stored procedure.

The confirmation controller form allows the user to select a beginning and ending date to pass to the stored procedure.

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 to Display the Stored Procedure

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 SQL.

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 parameters.

-- debug
DECLARE @Session_BeginningDate datetime, @Session_EndingDate datetime
-- end debug

if (@Session_BeginningDate is null)
    set @Session_BeginningDate = '1970'

if (@Session_EndingDate is null)
    set @Session_EndingDate = '2000'


EXEC [dbo].[Employee Sales by Country]
    @Session_BeginningDate,
    @Session_EndingDate

Press OK to generate the controller.

Setting the Session Variable

Note that the parameters returned from the search dialog will not be cached. These parameters must be saved into a session variable. In the Project Explorer, double-click on the EmployeeSalesByCountry / Business Rules / Select (Sql / Before) – enableResultSet node.

Selecting the 'enableResultSet' business rule from the EmployeeSalesByCountry controller.

Replace the script with the following:

set @BusinessRules_EnableResultSet = 1
-- Enable caching of the result set. Duration is specified in seconds.
-- set @BusinessRules_ResultSetCacheDuration = 30 

if (@Parameters_BeginningDate is not null)
    set @Session_BeginningDate = @Parameters_BeginningDate

if (@Parameters_EndingDate is not null)
    set @Session_EndingDate = @Parameters_EndingDate

Press OK to save the new script.

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.

Adding a page to the app.

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 of the Home page node.     Employee sales by country page is now second in the site menu.

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

Pasting onto the 'Employee Sales By Country' page.     The EmployeeSalesByCountry controller has been instantiated as a view on the page.

Adding the Custom Action

Switch back to the Controllers tab in the Project Explorer. Right-click on EmployeeSalesByCountry / Actions / ag3 (ActionBar) – New node, and press New Action.

Creating a new action in the 'EmployeeSalesByCountry' controller.

Specify the following values:

Property Value
Command Name Search
Header Text Filter View
Confirmation

_controller=FilterEmployeeSales
_title=Select the Beginning and Ending Dates

Press OK to save the action.

Creating the Confirmation Controller

Let’s add a controller that will allow the user to specify BeginningDate and EndingDate parameters for the stored procedure.

On the Project Explorer toolbar, press the New Controller icon.

Adding a new controller to the project.

Enter a name for the controller.

Property Value
Name

FilterEmployeeSales

Click OK to save the controller. Right-click on FilterEmployeeSales / Fields node, and press New Field.

Adding a new field to the 'FilterEmployeeSales' controller.

Define the field as follows:

Property Value
Name BeginningDate
Type DateTime

Save the field, and create a second field with these values:

Property Value
Name EndingDate
Type DateTime

Save the EndingDate field. The confirmation controller is now complete.

Viewing the Results

On the Project Designer toolbar, press Browse. In the browser window that will open, navigate to the Employee Sales By Country page. Note that all 809 records are displayed.

All 809 records are displayed on the 'Employee Sales By Country' page.

In the sidebar or context menu, press Filter View action. The page will navigate to a form with the Beginning Date and Ending Date fields. Enter values, and press OK.

The confirmation controller form allows the user to select a beginning and ending date to pass to the stored procedure.

Note that the parameters have been passed to the stored procedure and there are only 17 records displayed now.

The BeginningDate and EndingDate parameters have been set by the confirmation controller.

Monday, July 14, 2014PrintSubscribe
Map View, Master-Detail Pages, Custom Result Sets, Client-Side APIs

Code On Time release 8.0.6.0 introduces countless enhancements to Touch UI - the unified user interface of mobile and desktop applications created with our app generator. Developers can now select a default user interface model for the apps in all product editions. The two options are Touch UI and Desktop. Applications created with Unlimited edition support both user interface models simultaneously.

Notable enhancements include:

  • Support for exact and negative search in Quick Find. For example, “USA” –“ak” will yield a list of customers from the United Stated with the exception of those located in Alaska.
  • Map view is now available in Touch UI.
  • Complex Master-detail pages are now supported in Touch UI.
  • Custom result sets based on arbitrary SQL queries, stored procedures, and web services with automatic support for filtering and sorting can now be utilized in applications. The tutorials are coming up.
  • Client-side  API has been extended with the method $app.execute. This method allows easy selection of data on the client and execution of arbitrary commands.  The tutorials will become available shortly. This method is the core of the custom GUI development in http://cloudontime.com. It performs a function similar to REST API, but works in all product editions. REST API does not require client libraries of apps created with Code On Time. The new method $app.execute works only within application and cannot be used independently.
  • Client-side API has been extended with the method Web.DataView.search. This method allows activating search in a data view on the page with filter and sort expressions defined by a developer.

Touch UI apps created with Code On Time work on all devices with an optional ability to degrade user interface in Inernet Explorer 6-9.

Touch UI automatically creates complex layouts with tabs and any number of levels of master-detail relationships.

Touch UI supports complex tabbed layout in apps created with Code On Time

Map view works on all types of devices:

Map view is a core automatic feature of Touch UI applications created with Code On Time.

The following features and enhancements are included in this release:

  • Developers can choose user interface for Azure Factory, Web App Factory, and Web Site Factory projects in the Settings /Namespace, Framework and UI section.
  • All settings of Touch UI applications can be configured in the Settings / Features / Touch UI section of application configuration.
  • Map view style is now available in Touch UI applications.
  • End users can choose Form Label Alignment in an app.
  • End users can choose Position of List Labels  in an app as.
  • Touch UI applications offer 38 built-in themes.
  • Developers can now specify default themes for pages.
  • End users can control Display Density of application pages.
  • End users can choose page transitions in apps with Touch UI.
  • Fixed the bug causing SQL business rules not being executed on each row when multi-select is enabled.
  • Data controller "Execute" method has been refactored for improved processing of multiple selected rows submitted from the client.
  • Fixed the incorrect multi-value adaptive filtering of lookup fields in Desktop UI.
  • Touch UI now uses minified CSS stylesheets.
  • JQuery Mobile 1.4.3 framework is the core of the Touch UI applications.
  • Methods $app.execute and Web.DataView.search are now supported.
    The first allows server-side requests to SELECT/UPDATE/INSERT/DELETE data on the server. The second method allows passing "sortExpresson" and "filter" to a data view to sync data. Method $app.execute also supports "Report" action.
  • Quick Find filter now uses a system name "_quickfind_" parameter to enable filtering operations on the first field in the view.
  • User controls generated "First Time Only" now include a standard template for Touch UI.
  • EASE configuration will not assign "mailto" if the field already has a HyperlinkFormatString.
  • Added fix in Controller.Filter for fields that are shorter than the search query.
  • Added Quick Find support for "exact matches" and -negative results.
  • Fixed charts not rendering in reports due to view access not being validated.
  • Data views can be tagged as display-style-grid, display-style-list, display-style-listonecolumn, and display-style-map to force a specific presentation style on all devices.
  • Renamed “Device” property of pages to "User Interface". The valid values are "Touch UI" and “Desktop”.
Sunday, July 13, 2014PrintSubscribe
Assigning a Theme to a Page

Code On Time apps with Touch UI allow the user to pick from over 35 themes. However, the developer may wish to define a specific theme on a particular page to enforce branding or associate a color with functionality. Taking a Northwind sample app as an example, you may wish to have the Membership page display “Dark” theme, have Products page use “Plastic” theme, and have Customers page use “Summer” theme.

The Membership, Customrs, and Products pages using the themes Dark, Summer, and Plastic, respectively.

To assign default themes to each page, first start the Project Designer. In the Project Explorer, double-click on Customers page.

Selecting the Customers page from the Project Explorer.

Change the following. Note that the name of the theme must be capitalized correctly.

Property Value
Custom Style page-theme-Summer

Press OK to save changes.

Next, double-click on the Products page in the Project Explorer.

Selecting the Products page from the Project Explorer.

Change the following and press OK to save.

Property Value
Custom Style page-theme-Plastic

Finally, double-click on the Membership page.

Selecting the Membership page from the Project Explorer.

Change the custom style of the page.

Property Value
Custom Style page-theme-Dark

On the toolbar, press Browse, and navigate to the Products page. Note that the theme is changed to “Plastic”.

The products page is now using Plastic theme.

The Theme option will not be present in the Settings panel, preventing the user from changing the theme.

"Theme" option in the Settings panel is not present.