Web Application Generator

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
Web Application Generator
Tuesday, April 10, 2012PrintSubscribe
Calculating Values via “SQL” Action

The following screen shows  a customer record from the Northwind sample presented in edit mode. Suppose that you want to add a button to the form to automatically calculate certain field values.

A data record presented in 'edit' mode in a web application created with Code On Time

Start the web application generator and select your project. Click Design to activate the Project Designer.

Activate Controllers tab in the Project Explorer and right-click Customers / Actions / ag2 (Form) node. Choose New Action option to create a new action.

Action group with 'Form' scope presented in Project Explorer

Enter the following properties.

Property Value
Command Name SQL
Header Text Calculate Values
Data
select
  @CompanyName = @CompanyName +  '+',
  @ContactName = @ContactName + '-'
When Last Command Name Edit

Save the action and click Browse on the Designer toolbar.

Your web application will be displayed in the default web browser. Navigate to the Customers page and start editing any record.

You will notice the Calculate Values button displayed above and below the form fields. Click the button and you will see “+” added to the Company Name field and “-” added to the Contact Name field.

The effect of 'SQL' action calculating the field values

If you press Calculate Values button a few more times then you will see more “+” and “-” characters added to the same fields.

If you cancel the changes then the record will not be updated.

The changes made by SQL action will be persisted if you click OK button.

Action SQL causes the client library to send the current field values to the server. The core application framework knows how to handle this action.

First, the framework will find the text entered in the “Data” property of the action.

Next, it will parse the text to detect any parameters.

If you database server uses another symbol to indicate a parameter, then make sure to enter this symbol instead of “@”.

If the parameters are found then the framework will try to match them to the names of the available data fields. The application will also recognize parameters that have “_Value”, “_NewValue”, and “_OldValue” suffix. If there is a matching data field then the field’s current, new, or old value will be assigned to the parameter.

All parameters are marked as Input/Output parameters.

The application will execute the SQL text. If any parameter values have changed, then they will be packaged and sent back to the client. The client library will reflect the changed values in the user interface as if the application user has entered them in the input text boxes.

It is expected that the SQL text in action’s Data property contains instructions assigning values to parameters that are not matched to the fields. You can use any SQL language constructs supported by your database server as if you were executing them in a tool such as SQL Management Studio.

Consider the following sample data for SQL action:

declare @Temp nvarchar(50)

-- swap City and Country
set @Temp = @City
set @City= @Country
set @Country= @Temp

-- update Company Name
select @CompanyName = @CompanyName + ': ' + City + '/' + Country
from Customers 
where CustomerID = @CustomerID

Enter this text in the Data property of the action and click OK button.

Action property 'Data' in Project Designer

This is the result of action execution if you browse to a customer record, start editing, and push the Calculate Values button.

  • The @Temp parameter is used to capture the client-side value of the field City.
  • Client-side values of fields City and Region are swapped and sent back to the client
  • The client-side value of the field Company Name is appended with the database values of  fields City and Country.

    Values of fields 'City' and 'Country' are swapped. These values are also appended to the field 'Company Name'.

  • If you need more than just an interaction with the database to perform a calculation, then consider using custom business rules or shared business rules for implementation. Learn more about implementing calculations with “Custom” action.

    Monday, April 9, 2012PrintSubscribe
    "Floating" Categories

    The picture below shows the  Employees editForm1 view. By default, the fields are arranged in a vertical list. The category description is at the top of the form, the field labels are in the first column, and the data fields are in the second column. When you resize the page width, the column width will change.

    Employees category with Floating disabled in Code On Time web application

    Let’s use the Float property on the category to change the presentation of the data fields.

    Start Code On Time generator, click on the project name, and press Design. In the bottom right corner of the Project Explorer, switch to the Controllers tab. Double-click on Employees / Views / editForm1 / c1 – Employees node.

    Path to Employees category in Code On Time Designer

    Change the Floating property to “Yes”.

    Floating property set to 'Yes' for Employees category

    Press OK to save the category. On the tool bar, press Generate. Navigate to the Employees page, and select a record. The category is now much more compact. Each field has the label above it, floating around the category. When you resize the page, the fields will be rearranged to fit.

    Employees category with Floating enabled in Code On Time web application

    You can use a combination of floating and non-floating categories to optimize the user interface, such as the Order Details page shown below.

    Order Details page with one floating category

    Floating data field categories can serve as a quick way to make a compact user interface without much effort. If you want more control over the placement of data fields, then use custom form templates or category-level templates.

    Sunday, April 8, 2012PrintSubscribe
    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.

    Generic custom grid template for inline edit mode of Products grid view in Code On Time web 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.

    'Edit' command moved to first in Code On Time Designer

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

    Changing Read Only property of Photo field 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.

    Custom 'edit' mode grid template in Code On Time web application