Blog: Posts from August, 2012

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
Posts from August, 2012
Monday, August 6, 2012PrintSubscribe
Working with Views

A view defines the presentation style of data on a page in the application. Views are composed of data fields and optional categories. Form views use categories to organize fields, while other types of views are incompatible. The view type determines the style of presentation. For example, form views display fields of a single record while chart view offers a graphical representation of multiple data rows.

Views are found under the Views node of a controller in the Project Explorer.

Views under the Views node of Orders controller in Code On Time web application designer.

Multiple views may be defined for each data controller. The standard configuration of a data controller includes grid1 to present a list of records, editForm1 to edit existing records, and createForm1 to allow entering new records.

Views are also displayed under data view nodes on the Pages tab. Data views are instances of data controllers on pages.

Views displayed under a data view in the Pages tab of the Project Explorer.

Creating a View

Views can be created using the context menu option New View on the Views node.

New View context menu option for Views node in the Project Explorer.

Moving Views

Views can be rearranged by using drag and drop operations. Dropping a view onto another view will place it after the target view.

Dropping grid1 view onto editForm1 view.     Grid1 view is placed after editForm1 in the Orders controller.

Dropping a view on the right side of another view will also place it after the target.

Dropping a view on the right side of another view.     The view was placed after the target view.

Dropping a view on the left side of another view will place it before the target.

Dropping a view on the left side of another view.     The view was placed before the target view.

Dropping a view onto the Views node or Controller node will place it at the bottom of the list.

Dropping a view onto the Views node.     The view was placed at the bottom of the list.

Dropping a view into another controller will copy the view to the target controller and remove all incompatible data fields.

Dropping grid1 from Employees controller onto Customers controller.     View 'grid1' from Employees controller has been copied in Customers controller and incompatible data fields have been removed.

Converting View Type

Form views require all data fields to be placed in a category. All other types of views do not use categories. Therefore, grid views cannot be directly converted to form views and vice versa by changing the Type property. The context menu option Convert To Form and Convert To Grid must be used.

Convert To Form context menu option for a grid view that has no categories.     The grid has been converted into a form. All data fields have been placed in a category.

Renaming a View

The view Id can be changed using the Rename context menu option.

Rename context menu option for a view in Project Explorer.     View in renaming mode in the Project Explorer.

Deleting a View

Views can be deleted using the context menu option Delete.

Delete context menu option in the Project Explorer.

Monday, August 6, 2012PrintSubscribe
Overview of Views

A view is a configuration of the data controller composed of data fields and optional categories. Form views require all data fields to arranged in categories. Other types of views are incompatible with categories.

View Properties:

Property Description
Base View Id Specifies another view from which properties and data fields will be inherited from.
Command Specifies the command that the view will use to select data.
Controller Specifies the controller that the view belongs to. Can be changed by dropping the view onto another controller in the Project Explorer.
Create Custom Report Template When enabled, a custom report template file will be created with the name of [Controller]_[ViewId].rdlc. This file can be customized using Visual Studio.
Filter Expression Specifies an expression in the language supported by the database engine of the application. Field names used in the filter are automatically converted into appropriate SQL expressions at runtime. Parameters prefixed with “@” or “:” syntax can be used.
Font Specifies the font size to be used in the report.
Group Specifies a view group that will share the same filters with other views in the group.
Header Text Specifies the text displayed above the view on a page.
Id Specifies the unique identifier of the view. Can be changed in the Project Explorer.
Type Specifies the type of the view. Changing a form to a grid view or vice versa is not possible directly – use the Convert To Form/Grid option in Project Explorer.
Label Specifies the text displayed in the view selector.
Override When Specifies the conditions to be fulfilled in order for virtualization to occur.
Page Orientation Specifies whether the report will be printed in portrait or landscape orientation.
Report Label Specifies the header text that will be displayed at the top of reports.
Show In View Selector Specifies whether the view is displayed in the view selector.
Sort Expression Specifies an expression composed of a comma separated list of data field names, followed by an optional asc or desc suffix, that will be used to sort the view.

Example: OrderDate desc, ShipVia asc, Freight
Virtual View Id Specifies a view that will replace the current view when virtualization is enabled.

Learn to work with views in the Project Designer.

Learn to drag and drop views in the Project Explorer.

Common tasks:

Task Description
Configure a Base View Learn how to configure a base view in order to inherit data fields.
Configure Parameters in the Filter Expression Learn how to configure the Filter Expression with custom parameters.
Monday, August 6, 2012PrintSubscribe
Custom CSS in SharePoint Factory Web Apps

Cascading style sheets use rules to change the look and formatting of the contents of web pages. Code On Time applications rely on CSS exclusively for theming. SharePoint Factory is a special web application designed to work inside of Microsoft SharePoint Portal– all cascading style sheets and elements are compiled as binary resources. The application webpart will link the resources to the pages dynamically at runtime.

Let’s create a custom CSS rule that will work in a SharePoint Factory web application packaged as a SharePoint webpart using Municipal theme.

In the [My Documents]/Code OnTime/Client/Themes folder, create a text file. Rename the file to a cascading style sheet that matches the name of the theme. In the example below, Municipal theme will be used, so the file was named “Municipal.css”.

New CSS file added in Client/Themes folder of the code generator.

Open the file, and 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 Municipal.css file is a relative path to the jQuery UI stylesheets packaged with the code generation library.

Save the file. Restart the web application generator. Holding Shift, click on a project name to skip to the Summary page. Regenerate the project.

Navigate to any page with a data view, and edit a record. The rule will be applied to all input fields, rendering text bold.

CSS rule applied to all input fields of the web application, rendering text bold.