Blog: Posts from August, 2014

Posts from August, 2014
Wednesday, August 27, 2014PrintSubscribe
Page Headers in Touch UI

Page headers are displayed at the top of every page to inform the user of which view or control they are currently working with. The picture below displays the page header of “Orders”, visible below the page title.

The "Orders" page header is displayed below the title bar.

In pages that display data views, the header is hidden on two conditions:

1. When the current view is the entry point to the page.

The "Customers" page header is hidden due to the fact that this view is the entry point to the page.

2. When the text of the page header matches the title of the page displayed on the menu bar at the top of the screen. For example, the child view of Employees on the Employees page in a sample Northwind app will not have a page header.

The child view does not show page header as it has the same text as the page title.

Hiding the Page Header

The header can also be hidden on a per-page basis.

Start the Project Designer. In the Project Explorer window, double-click on the Customers page.

Customers page in the Project Explorer.

Specify the following:

Property Value
Custom Style Tall

Save the page, and press Browse on the toolbar to generate the app and open the page in your default browser. Select a customer, and tap See All next to the list of orders. Note that the “Orders” page header is not displayed.

Customers page does not display any page headers.

Page Headers in Custom User Controls

The page header text for user controls is derived from the data-activator tag. By default, this tag is set to the name of the user control.

User controls show the control name as page header by default.

The header text can be specified using the data-page-header tag. For example, let’s specify the page header text for a freshly created user control. Open the user control file in Visual Studio and make the following highlighted addition:

    This section provides a sample markup for Touch UI user interface. 
<div id="TestUserControl" data-app-role="page" data-activator="Button|TestUserControl" data-page-header="Custom Header">
    <div data-role="content">
            Markup of <i>TestUserControl</i> custom user control for Touch UI.

Save the file and refresh the web page. Note that the page header text has been changed.

Custom header text has been specified for the user control page header.

The page header can be hidden by specifying “false” for the data-page-header tag. Make the following change:

    This section provides a sample markup for Touch UI user interface. 
<div id="TestUserControl" data-app-role="page" data-activator="Button|TestUserControl" data-page-header="false">
    <div data-role="content">
            Markup of <i>TestUserControl</i> custom user control for Touch UI.

Save the file and refresh. The page header will not be present.

The page header has been hidden on this user control page.

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.


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.

Monday, August 18, 2014PrintSubscribe
Reports as Email Attachments, Data Views without Extenders, Azure SDK 2.4

Code On Time release introduces the following features and fixes.

  • Implemented support for attachments in Email Business Rules. Multiple xml tags <attachment/> can be specified in the body of the email template.
  • Added SMTP settings to Features page of Project Wizard
  • Report handler now supports static method Report.Execute to enable generation of report data on the server. The method accepts filter, sort expression, controller, view, template name, and output format as parameters.
  • SQL business rules can generate emails. This allows creating multiple complex emails with optional attachments using the full power of SQL dialect of the database engine.
    1) First, a business rule must set EnableEmailMessages property of the business rules class.
    2) Next, another business rule executing in the same sequence will return a list of data rows with columns titled as "To", "Subject", "Body", etc. to produce a list of outgoing emails.
  • Desktop and Touch UI now support parsing of "data-" attributes to enable initialization of data views from user controls without using server-side tags. This feature will be the core capability in virtual pages. We are also considering replacing DataViewExtender references with the new “data-” attributes in the generated pages. For example, a master detail relationship between Categories and Products can be declared with this snippet of XML:
    <div id="categories" data-controller="Categories" data-show-in-summary="true"></div>
    <div id="products" data-controller="Products" 
        data-filter-fields="CategoryID" data-filter-source="categories"></div>
  • Generate from SQL will include byte fields if "base Table Name" is specified. Base table name will be used to create the controller to ensure the labels make sense.
  • Updated "Generate From SQL..." function to add up to 1000 data fields to grid1.
  • Added ability to "not create controllers automatically" when creating a new project. This will create a database object filter of "__none" and will not create any controllers.
  • If multiple views are available, then page header is not displayed in grid/list below the tabs representing view names in Touch UI apps.
  • Touch UI recognizes data-content-framework attribute on custom pages to enable upcoming support for built-in CMS (content management system). The future supported values are "bootstrap" and "" (empty string).
  • Custom pages do not fire appscroll events to improve performance of long “bootstrap” pages.
  • Wide and Tall pages will disabled sidebar and page header in Touch UI applications.
  • First virtual page of the data app will not display  a page header
  • Custom controls can use data-page-header attribute to set up the text of the page header in Touch UI apps. The page header is inherited from activator label (if any) and will not be displayed if it matches the first page.
  • Azure SDK 2.4 is now supported in Azure Factory project type.
  • Implemented enhanced processing of Azure SDK references to prevent duplicates created after Azure SDK upgrade. Azure Factory project do not include a reference to Azure Storage for Azure SDK 2.4. It must be added manually when needed.
  • Negative search with quick find now requires a space in front of the sample. So the search sample "to-do" will not be treated as "positive 'to' and negative 'do'".
  • Moved resetting of Result.Canceled to beginning of SelectedValue loop to allow PreventDefault on each individual selected row in business rules executed for data view with multiple row selection.
  • Report handler uses a more robust method of figuring the base URL of application to ensure correct image URLs in reports.
  • Application framework adds "order by row_number__" to "SELECT" requests to ensure consistent results on multi-processor machines running SQL Server. Thank you Patrick Saunders and fgary6861!
  • The contents of "virtual" pages marked as data-app-role="page" is wrapped in a div with class app-page-content. This significantly improves the rendering of Bootstrap content pages in CMS.
  • Touch UI: Settings menu displays "Settings" label.
  • Touch UI: Action Group menus of actions display header text of action group as a header for the panel.
  • Touch UI: Method $ navigates to a virtual page. The method must be used when programming custom virtual pages to complete navigation.
  • Touch UI: The framework will not auto-enhance virtual pages marked as data-enhance="false".
  • Touch UI: Custom user controls can implement "delayed" transitions to pages if remote data is required to display the page. The tutorials are coming up this week.
  • Touch UI: Action groups with child items are displayed on the sidebar.
  • Property "field" can be used to reference field names when configuring filters for and $app.execute methods.
  • Method $app.execute will execute "Select" command if a command is not specified. It will also use "grid1" as the default view Id.
  • Data controllers based on Result Sets produced by business rules will work correctly with field names that contain non-alphanumeric characters or starting with numbers.
  • Touch UI: User controls without activators do not have an empty link on the "main" user interface page.
  • Added null field check for negative quick find searches.
  • Generate button in Project Designer will always be shown if "Browse" is hidden.
  • Fixed DotNetNuke project file to create Web.*.config files in /WebApp, not /Sandbox folder.
  • Project Designer's "Generate" button will be hidden if User Interface = Touch UI.
  • Touch UI: View selector options in context menu will synchronize with the view selection tabs of grid/list.
  • Modified "Data Controller" construction selectors on "Database Connection" page.
  • Fix the bug causing Quick Find to fail if "," without a following query sample are entered.
  • Select "includes" / "does not include" filter in advanced search bar if another search criteria is present will not throw an exception in Desktop UI.
  • Fixed the spelling with incorrect processing of map-latitude and map-longitude tags in Touch UI apps.
  • Included new translated resources in hr locale. Thank you uremovic!
  • Updated lookups to use sort expression of view.
  • Moved execution of ControllerAction methods into "InternalExecuteBusinessRules" method to ensure parity between those methods and business rules.
  • Minimized simultaneous appearance of multiple progress indicators in Touch UI apps.
  • Enhanced visual appearance of Dedicated Login in Touch UI.
  • Touch UI:  Summary views are refreshed only if they are visible on the page and are in the direct sight of a user.
  • Negative search uses NULL value check on fields to ensure correct output. Previously presence of NULL values in a data row was causing exclusion of correct “negative” data rows from the output.