Code On Time: Tips and Tricks

Blog

Tips and Tricks

Friday, February 8, 2019Print Subscribe

The framework in the foundation of apps created with Code On Time provides a unified error reporting mechanism that can be utilized to perform a global exception logging.

Error Logging

Create the following table in your database to keep track of runtime errors.

create table Errors(
    ErrorID uniqueidentifier not null primary key,
    ErrorDate datetime default getdate(),
    UserName nvarchar(128),
    Details ntext
)

Select your project on the start page of the app builder and choose Visual Studio. Create a code file in the ~/App_Code/cust0m folder and enter the following code:

namespace MyCompany.Services
{
    public partial class ApplicationServices
    {
        protected override void HandleError(HttpContext context, Exception er)
        {
            // log all uncaught exceptions reported by application
            LogError(new JObject(), er);
        }

        public static Guid LogError(JObject errorDetails, Exception ex)
        {
            // add exception to the details
            var error = new JObject();
            error["message"] = ex.Message;
            error["type"] = ex.GetType().FullName;
            error["source"] = ex.Source;
            error["stack"] = ex.StackTrace;
            errorDetails["exception"] = error;
            
            // configure error details
            var errorID = Guid.NewGuid();
            var details = errorDetails.ToString();
            var userName = BusinessRulesBase.UserName;
            
            // log error in the database 
            using (var q = new SqlText(
                "insert into Errors(ErrorID, Details, UserName) " +
                "values(@ErrorID, @Details, @UserName) "))
                q.ExecuteNonQuery(new { errorID, details, userName });
            
            return errorID;
        }
    }
}

Error details inherited from the exception will be transcribed in JSON format.
Note that the partial class ApplicationServices is not available in the Trial Edition. You will need a commercial version of the app generator to override the methods of the partial framework classes.
Method ApplicationServices.HandleError is invoked by application framework when the incoming requests have resulted in the application exception that was not handled. The code above will automatically capture all uncaught exceptions. Create a data model for the Errors table and design your own GUI to allow administrative review of error messages.

Custom Error Reporting

Some exceptions are handled by the framework and reported to the end user to avoid rendering the application inoperable. For example, the error is reported to the user as-is if there was an exception when saving data. The user may cancel the data input form and continue working with the app.
Database engine error may be cryptic and impossible to decipher. Developer can choose to “translate” such errors to the user and/or log them in the database for review by administrator.
Create another “code” file in the ~/App_Code/custom folder of your app.
Enter the following code to replace the default error reporting by data controllers. We are using ApplicationServices.LogError method created above to log errors.

using MyCompany.Data;
using Newtonsoft.Json.Linq;
using System;
using System.Web;
using MyCompany.Services;

namespace MyCompany.Data
{
    public partial class Controller
    {
        protected override void HandleException(Exception ex, ActionArgs args, ActionResult result)
        {
            // by default the exception is reported to the user in result.Errors property
            base.HandleException(ex, args, result);
            // log error in the database
            var errorDetails = new JObject();
            errorDetails["args"] = JObject.FromObject(args);
            var errorID = ApplicationServices.LogError(errorDetails, ex);
            // replace the error message reported to the user with a custom error
            if (result.Errors.Count > 0)
            {
                result.Errors.Clear();
                result.Errors.Add(string.Format("Error {0}. Please contact the Help Desk.", errorID));
            }
        }
    }
}

Error details will include the JSON definition of arguments including field values that caused the exception.

From now on any errors reported to the user will appear like this:

An example of custom error reported to the user when saving data in the app created with Code On Time.

Labels: Business Rules/Logic, Tips and Tricks

Saturday, November 24, 2018Print Subscribe

Blank Pages in VB + ASPX Projects

It appears that something has changed in ASP.NET configuration in the latest versions of Microsoft.NET.

Visual Basic compiler used to perform automatic binding of *.aspx.vb methods to events of the lifecycle of the *.aspx page.

It does not happen anymore. The custom code of the pages is not generated and only HTML markup is served to the clients.

The code generator uses a setting in configuration file [Documents]\Code On Time\Library\_Config\CodeOnTime.CodeDom.xml to set up AutoEventWireup attribute in aspx pages.

If you do experience a blank page issue in VB+ASPX projects, then open the file and change attribute autoEventWireup for VB provider as follows:

Save the file and re-generate your project. This will restore its normal operation.

We are still investigating this issue.

Labels: Tips and Tricks

Saturday, May 19, 2018Print Subscribe

Home Page and Toolbar

Let’s explore a few customization ideas for the home page and toolbar of your app.

The default home page displays a table of contents. The toolbar has “hamburger” button (“bars” icon) of the left side and content menu button (“more” icon) on the right sidebar. The illustration is presented in Light theme with Modern accent.

A customized home of an app based on Touch UI may display marketing and informative content to the end users instead of a default table of contents. Let’s remove the table of contents from the home page and replace it with a marketing message for the end users of the app.

Have you noticed that the new design does not have the Menu and More buttons on the toolbar?

By default the data pages of the app do display both buttons just like the default home page with the table contents.

Let’s hide the Menu and More buttons on the toolbar on the data pages as well.

This is how the data pages will look when the left sidebar is expanded.

Select the project name on the start page of the app generator and locate “Home” page in the Project Explorer on the right hand side of the Project Designer.

Right-click and delete both containers on the page. This will remove the table of contents displayed to the authenticated users and the welcome message displayed to anonymous users.

Double-click the home page, select Jumbotron as the Template, save changes, and generate the app. Inspect the home page. It will look similar to the one in the picture. Try other templates to find the best fit for your app.

Lock the page from being overwritten during the code generation before making any changes to the content of the template. Double-click the home page in the Project Explorer and specify First Time Only in the Generate property. Save the changes. The home page icon will display with the “lock” indicating that any changes to the app will be preserved if the page exists already.

Click Develop on the toolbar of the Project Designer and add a new stylesheet with the name of choosing under ~/app/css/ folder.

Enter the following CSS rules in the file app/css/StyleSheet.css.

/* 1. Hide "hamburger" button when the toolbar does not have the "Back' button  */

.app-bar-toolbar:not(.app-has-back) #app-btn-menu {
    visibility: hidden;
}

/* 2. Hide the context button with "more" icon*/

.app-bar-toolbar #app-btn-context {
    visibility: hidden;
}

/* 3. Align the logo area of the page with the content when there is no sidebar on the left side */

body:not(.app-has-sidebar-left) .app-bar-toolbar .app-logo {
    left: 16px;
}

/* 4. Shift the logo text more to the left in the expanded sidebar */

body.app-has-sidebar-left:not(.app-has-minisidebar-left) .app-bar-toolbar .app-logo {
    left: 20px;
}

/* 5. Move the "icon" buttons of the toolbar to the right */

.app-bar-toolbar .app-btn-cluster-right .app-btn {
    margin-right: -28px;
}

The comments provided next to the CSS rules explain their effect on the User Interface of the app.

Rules (1) and (2) are hiding Menu and More buttons on the toolbar. Rule (3) shifts the text in the Logo area to the left when the sidebar is not visible.

The same rules also apply to data pages. A data page of an app based on Touch UI with customized toolbar on a narrow screen is shown next.

If the screen of the device is narrow then modal pages will be automatically replaced with fullscreen pages. In that case rule (1) does not apply and the Back is visible next to the name of the previous view.

In this screenshot the user continues to drill into data and views the Category information of a product. Button Back remains visible and button More is not displayed. Rule (4) shifts context actions to the right of the toolbar.

Here is how the same changes will look in Dark theme with Construction accent.

This is the home page without Menu and More buttons on the toolbar.

This is the data page with the expanded sidebar.

This is the data page with the collapsed sidebar in inline editing mode.

This is the same app on a small device without More button in the toolbar. A fullscreen page of an app created with Code On Time application generator presented on a narrow screen.

Touch UI is entirely CSS-driven and allows customization of various aspects of user interface.

Labels: Application Builder, Mobile, Tips and Tricks, Touch UI, User Interface, Web 2.0