Blog: Posts from April, 2012

Blog

Posts from April, 2012

Monday, April 9, 2012Print Subscribe

“SQL” Action, Virtualization Node Sets, Workflows

Code On Time release 6.0.0.23 includes the following features, bug fixes, and enhancements:

Virtualization node sets allow easy programmatic customization of data controller definitions at runtime based on an arbitrary criteria such as user role. The feature is available in Premium and Unlimited editions only. Virtualization Node Set is the building block of the upcoming Workflow Register.

New “SQL” action is now supported (tutorial is coming soon – subscribe to our blog http://codeontime.com/blog to be notified). Anonymous SQL blocks can be entered in the Data property of action with command name SQL. The action can calculate values in edit and new mode. Another use case is SQL-only business rules, such as calls to stored procedures or custom updating of data in multiple database tables. Parameters are automatically bound to the field values.

Business rule method with the ControllerAction attribute can now capture before and after "Select" phase on the server. Developers can emit JavaScript and assign initial filters by calling AssignFilter method. Learn more about “soft filtering”.

Stored Procedures and Web Services can be used to select data (tutorial is coming soon – subscribe to our blog http://codeontime.com/blog to be notified).

Adaptive filter fragments are removed when user moves pointer mouse over the filter fragment and clicks on it.

Tagging of data views is now supported in business rules.

Data view methods IsTagged, AddTag, and RemoveTag can be used to create sophisticated workflows.

Search by first letter is now available in data views. Search by First Letter only uses Visible and Allow QBE fields.

Search by first letter is now available in lookups.

New field property Length is now supported. If the value of the property is not blank then users will not be able to enter more than the specified number of characters in text fields. If you have an existing application and would like to have the new property populated then refresh the data controllers. If refreshing of a data controller is undesirable then enter the property values manually.

Data field property Read-Only When is now available. A JavaScript expression determines if the field is displayed in 'Static' mode (the tutorial will be available soon).

Data views support Auto Highlight First Row.

Data views support Auto Select First Row.

Data views support Refresh Interval. This property is useful when creating workflow dashboards.

Item lookup with style "Lookup" now supports Page Size property.

Class BusinessRules offers three new static properties UserId, UserName, and PortalID (the latter is available in DotNetNuke Factory projects only).

Schema Application.xsd is copied to the data controller folder of generated application to allow easy editing of the application baseline.

Data field property Visibility has been renamed to Visible When.

Clicking on the annotation icon in grid views will execute the first action in the row similar to how the Auto Select First Row works. The Notes and Attachments tab is activated automatically.

Various improvements of the support for right-to-left languages in the themes.

Data field category description area is no displayed if the description is blank for a more compact presentation.

Fixed the bug with an empty annotations tab displayed when switching between tabs.

Modal form views will grow in height when “taller” tabs or previously invisible content are activated and will maintain the new height. The "shorter" tabs will grow to the height of the "taller" tabs.

Grid templates are now available with optimized processing.

Category-level templates are now supported. Category property Template is not available anymore.

The code generator now support convertExpression to emit Convert.ToTYPENAME() calls.

Class BusinessRules now offers ActionData property that can be used in conjunction with Custom and SQL command names. The contents of the property is defined in Designer. The property does not travel to the client and can be provided extended data for custom actions. The upcoming Email command name will also use this property in workflow notifications.

Method BusinessRules.Sql allows executing arbitrary SQL statements in business rules. The same method is used when processing actions with command name SQL.

Duplicates in the denormalization map will not cause errors during code generation.

Thank you Daniel Guimarães from Softserv Sistemas for contributing the Portuguese localization of the client library.

Methods ShowMessage, ShowViewMessage, and ExecuteOnClient of the class ActionResult now support formatting parameters. The methods can be accessed via the Result property of a business rules class.

Code generator replaces "Global.Microsoft.VisualBasic.ChrW(13) & Global.Microsoft.VisualBasic.ChrW(10)" expressions with the more compact "ControlChars.CrLf" in Visual Basic projects.

Code generator now supports documentation comments in type definitions and type members. We are planning to add complete source documentation over the next few months.

Blob and Import handlers are generated with correct line endings in the HTML and JavaScript fragments. This removes the suggestion to normalize the line endings when the files are opened in Visual Studio.

MySQL projects automatically enable ASP.NET Membership for the project database.

Validation of presence of SQL Express is only performed when the application database is on Microsoft SQL Server and ASP.NET Membership has not been installed in it.

Globalization settings configuration offer Default button to reset the select culture set to the default values.

Membership manager now supports "Search by First Letter".

Standalone database check box is not checked in project wizard if both connection strings point to the same database.

Business rules developers can now display arbitrary messages in the header area of a data view by calling Result.ShowViewMessage method. Users have an option to dismiss the message.

If a an object is changed in the Designer grid view then the grid view will remain active. Previously the Designer have navigated to the view of properties in many situations.

It is now possible to execute an arbitrary JavaScript when the data is selected for presentation in all view types.

Auto-complete input fields on the search bar will initiate search in a data view when user hits Enter key if the completion list is not visible. Modal views with active search bar will not be closed if users hits Enter - the search is initiated instead.

Static regular expression instances are now used in various parts of the core application framework.

If option "Run application upon completion of code generation" in Web Server Configuration is off then button "Browse" is not displayed on the Designer toolbar. Pressing generate will only re-generate the source code - the project will not be displayed in the Preview window when code generation has been completed.

Method BusinessRules.UserIsInRole is now virtual.

Client library will correctly render UI when a SharePoint webpart is switched to Design mode in SharePoint 2010.

Custom Authentication option will not hide My Account link on the membership bar if the option is requested in project settings.

Layout manager will assign CSS class RowContainer to page containers if the containers are taking the entire width of the page.

Method Controller.AssignParameterValue correctly handles TimeSpan data type.

Labels: Release Notes

Sunday, April 8, 2012Print Subscribe

Grid Template for Edit Mode

If you create a generic custom grid template, then this template will be applied to inline edit mode as well as new and select mode of data row. Let’s create a custom grid template for edit mode specifically.

In the picture below, you can see the generic grid template being used for inline edit mode in our sample application.

Start Code On Time web application generator, click on the project name, and press Design to open the project in Visual Studio. Double-click on the ~/Controls/Employees_GridTemplate.ascx file. Create a div with id “Employees_grid1_edit”. If you already have a generic or new templates defined, they can be arranged in any sequence.

<div style="display: none;">
    <div id="Employees_grid1">. . . . .</div>
    <div id="Employees_grid1_new">. . . . .</div>
    <div id="Employees_grid1_edit"></div>
</div>

The surrounding div hides the static templates from the user. Paste in the following HTML body into the new Employees_grid1_edit div element:

<table>
    <tr>
        <td style="width: 320px; padding: 6px 0px 0px 6px;">
            <div class="FieldPlaceholder DataOnly" style="width: 90px; height: 120px;">
                {Photo}</div>
        </td>
        <td style="vertical-align: top; border: solid 1px #9d5a00; border-radius: 5px; 
            padding: 3px; background-color: rgba(255,252,235,0.5)">
            <table>
                <tr>
                    <td>
                        <div class="FieldPlaceholder DataOnly">
                            {Address}</div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div class="FieldPlaceholder DataOnly">
                            {City}</div>
                        <span style="float: left; margin-right: 4px;">,</span>
                        <div class="FieldPlaceholder DataOnly">
                            {Region}</div>
                    </td>
                </tr>
                <tr>
                    <td style="vertical-align: top;">
                        <div class="FieldPlaceholder DataOnly">
                            {PostalCode}</div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td style="vertical-align: top; border: solid 1px #9d5a00; border-radius: 5px; 
            padding: 3px; background-color: rgba(255,252,235,0.5)">
            <div class="FieldPlaceholder DataOnly" style="margin-top: 4px;">
                {TitleOfCourtesy}</div>
            <div class="FieldPlaceholder DataOnly" style="margin: 4px;">
                {FirstName}</div>
            <div class="FieldPlaceholder DataOnly" style="float: none; margin: 4px;">
                {LastName}</div>
            <div class="FieldPlaceholder DataOnly" style="float: none; margin: 4px;">
                {BirthDate}</div>
            <div class="FieldPlaceholder DataOnly" style="float: none; margin: 4px;">
                {Title}</div>
            <div class="FieldPlaceholder DataOnly" style="float: none; margin: 4px;">
                {HireDate}</div>
        </td>
        <td style="vertical-align: top; border: solid 1px #9d5a00; border-radius: 5px; 
            padding: 3px; margin: 5px; background-color: rgba(255,252,235,0.5)">
            <div class="FieldPlaceholder DataOnly">
                {Notes}</div>
        </td>
    </tr>
</table>

Save the file.

Switch back to the web application generator, click on the project, and press Design. Right-click on Employees / container1 / view1 / ag1 (Grid), and press Show All Actions. Select the ag2 row. On the action bar, press Up.

This will make the action first in the list. The first action in the action group with Grid scope will be executed when a user clicks on the link in the first column of any data row.

You may need to make the Photo field editable. Double-click on Employees / container1 / view1 / grid1 / Photo. Change the Read Only property to “No”.

Press OK to save the data field. On the tool bar, press Exit.

Generate the project.

When your default web browser opens, navigate to Employees. Click on the link in the first column of any employee, and inline edit mode will be activated. The data row will be formatted according to the edit mode custom template.

Labels: User Interface, Web Application Generator

Sunday, April 8, 2012Print Subscribe

Grid Template for New Mode

The same custom grid template will be applied to select, edit, and new modes of a grid view.

It may be beneficial to have a different template for new mode. For example, the generic grid view template works well in select and edit modes. The same template in the inline new mode looks confusing because the data fields do not have labels.

Let’s add a custom grid template to be used in the new mode while reusing the generic template in edit and select modes.

Start Code On Time web application generator, click on the project name, and press Develop. This will open the project in Visual Studio. Double-click on ~/Controls/Employees_GridTemplate.ascx. You will see the custom template that was made earlier. Under the div with id “Employees_grid1”, create another div with id “Employees_grid1_new”, as shown in the sample below:

<div style="display: none;">
    <div id="Employees_grid1">. . . . .</div>
    <div id="Employees_grid1_new"></div>
</div>

The wrapper div prevents the user from seeing the static template. Inside, the first div contains the generic custom grid view template. The second div will contain the new template for use with new mode. Within the second div element Employees_grid1_new, paste the following HTML body:

<table>
    <tr>
        <td valign="top" style="border:solid 1px #9d5a00;border-radius:5px;
            padding:3px;background-color:rgba(255,252,235,0.5)">
            <h3>Personal Info</h3>
            <div style="margin-bottom:4px">{FirstName}</div>
            <div style="margin-bottom:4px">{LastName}</div>
            <div style="margin-bottom:4px">{TitleOfCourtesy}</div>
            <div style="margin-bottom:4px">{BirthDate}</div>
        </td>
        <td valign="top" style="border:solid 1px #9d5a00;border-radius:5px;
            padding:3px;background-color:rgba(255,252,235,0.5)">
            <h3>Residence</h3>
            <div style="margin-bottom:4px">{Address}</div>
            <div style="margin-bottom:4px">{City}</div>
            <div style="margin-bottom:4px">{Region}</div>
            <div style="margin-bottom:4px">{PostalCode}</div>
        </td>
        <td valign="top" style="border:solid 1px #9d5a00;border-radius:5px;
            padding:3px;background-color:rgba(255,252,235,0.5)">
            <h3>Employee Info</h3>
            <div style="margin-bottom:4px">{Title}</div>
            <div style="margin-bottom:4px">{HireDate}</div>
        </td>
    </tr>
</table>
</div>

Save the user control file.

Let’s change the New Employees action on the action bar to send the user to the inline new mode, instead of createForm1.

Switch back to the web application generator, click on the project name, and press Design. Double-click on Employees / container1 / view1 / Actions / ag3 (ActionBar) – New / a1 – New, createForm1.

This default action has a command argument of “createForm1”, which sends the user to the createForm1 form.

Delete “createForm1” from Command Argument property, and press OK to save the action.

On the tool bar, press Browse to regenerate the application and open it in your default web browser. Navigate to the Employees page, and click on the New Employees button on the action bar. Instead of taking you to createForm1, the action will open an inline new mode at the bottom of the grid.

Labels: User Interface, Web Application Generator