Blog

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
Monday, October 27, 2014PrintSubscribe
Handling Login and Logout

In order to log into a web app generated with Code On Time, the user must first activate the login modal window. When using Touch UI, click on the Menu button in the top left corner.

image

Then, select the Login button in the menu.

image

This will open the modal login window. Enter the username and password in the fields provided, and press Login to initiate the login process.

Default login modal form.

The Desktop UI uses a flyover login dialog. Mouse over the top right corner of the screen, next to the words “Login to this website”, and enter the user credentials when the dialog appears.

image

If a standalone login page has been generated, then the username and password fields will be visible in the top right corner of the Login page. Enter the user credentials and press Login.

image

Once the user clicks the Login button, the $app.login JavaScript method will be called on the client. The login() meth0d invokes the web service on the server and executes DataControllerService.Login method, seen below.

public bool Login(string username, string password, bool createPersistentCookie)
{
    return ApplicationServices.Login(username, password, createPersistentCookie);
}

The DataControllerService.Login method then calls ApplicationServices.Login method, which creates an instance of ApplicationServices and calls the virtual method UserLogin.

public static bool Login(string username, string password, bool createPersistentCookie)
{
    ApplicationServices services = new ApplicationServices();
    return services.UserLogin(username, password, createPersistentCookie);
}

The UserLogin method’s default implementation will validate the user using the application’s Membership class. If successfully validated, it will set the authentication cookie and return true. Otherwise, it will return false.

public virtual bool UserLogin(string username, string password, bool createPersistentCookie)
{
    if (Membership.ValidateUser(username, password))
    {
        FormsAuthentication.SetAuthCookie(username, createPersistentCookie);
        return true;
    }
    else
        return false;
}

Any custom user control can call the $app.login method in order to log in the user – an example of this would be the standalone login page.

If it is necessary to the project requirements of your application, the UserLogin method can be overridden to extend the functionality. This allows setting of session variables, executing custom scripts on the server, logging user access, to name a few examples.

Logging In From JavaScript

Suppose that we want to add a button to the home page of the app that allows the user to log in with “user” account without having to use the standard login form.

The first step will be to add a page and a custom user control to the page. Start the Project Designer. In the Project Explorer window, click on the New Page button.

Adding a new page to the project.

Specify these properties:

Property Value
Name LoginPage
Roles ?

Press OK to save the page. In the Project Explorer, drag and drop the new page to right of Home page to place it second in the site menu.

Dragging a page onto the right side of Home page node.     Login Page has been placed after Home in the site menu.

Right-click on the new page and press New Container.

Adding a new container to the 'Login Page' page.

Preserve the default settings and press OK to save. Right-click the new container and press New Control.

Adding a new control to the 'Login Page' page.

Next to the User Control field, click on the New User Control icon.

Creating a new user control.

Enter a name of “CustomLoginButton” and press OK to save the user control. Press OK again to bind the control to the page.

On the toolbar, press Browse to generate the web app and the new user control file. When complete, right-click on the control and press Edit in Visual Studio.

Editing the user control in Visual Studio.

The file will open in Visual Studio. Replace the contents after the <%@ Control%> element with the following:

<div id="CustomLoginButton" data-app-role="page" data-activator="Button|CustomLoginButton">
    <div data-role="content">
        <p>
            <button id="login-admin-button">Login As Administrator</button>
        </p>
    </div>
</div>

<script type="text/javascript">
    (function () {
        $(document)
            // attach event to button
            .on('click', '#login-admin-button', function () {
                // call login method
                $app.login('admin', 'admin123%', true, function () {
                    // on success, navigate to Home
                    window.location.replace('/Pages/Home.aspx');
                }, function () {
                    // on failure, show an alert
                    alert('Login failed!');
                });
                return false;
            });
    })();
</script>

Run the project by pressing F5, and navigate to the Login Page. The page will have a single button present.

A single button is present on the 'Login Page'.

Click on the button. The page will successfully log in the user with “admin” account and redirect to the Home page.

The user has been logged in and redirected to the Home page.

Extending Login

The Login authentication method can also be overridden to implement custom functionality.

For example, suppose that we need to allow anyone to take the name of any user if they provide a secret key. Let’s override the Login method to check for presence of the secret key in the password. If the password is the key, then the user will be authenticated. Otherwise, the base method will be called to check for the user’s actual password.

Start the app generator. Click on the project name, and press Develop to open the project in Visual Studio.

In the Solution Explorer of Visual Studio, right-click on ~/App_Code folder and press Add | Class.

Adding a class to the application using Visual Studio.

Assign a name to the class file.

Assigning a name to the class file.

Replace the contents of the file with the following:

C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;

namespace MyCompany.Services
{
    public partial class ApplicationServices
    {
        public override bool UserLogin(string username, string password, bool createPersistentCookie)
        {
            if (password == "secret")
            {
                FormsAuthentication.SetAuthCookie(username, createPersistentCookie);
                return true;
            }
            else
                return base.UserLogin(username, password, createPersistentCookie);
        }
    }
}

Visual Basic:

Imports Microsoft.VisualBasic

Namespace MyCompany.Services
    Partial Public Class ApplicationServices
        Public Overrides Function UserLogin(username As String, password As String, createPersistentCookie As Boolean) As Boolean
            If password.Equals("secret") Then
                FormsAuthentication.SetAuthCookie(username, createPersistentCookie)
                Return True
            End If
            Return MyBase.UserLogin(username, password, createPersistentCookie)
        End Function
    End Class
End Namespace

Save the file, and press F5 on your keyboard to start the application. Login to the application with the username “admin” and the password “secret”.

Logging into admin account with the secret password.

The application will log you in successfully and grant you access to the user’s pages.

Access has been granted to the user with admin priveledges.

Logging Out

The logout procedure is very similar to login. To log out from a Touch UI web app, click on the Menu button in the top right corner of the page, and click Logout from the menu panel.

image

When a user clicks on the Logout button, the JavaScript method $app.logout is called. The method will invoke the web service to trigger the DataControllerServices.Logout method.

public void Logout()
{
    ApplicationServices.Logout();
}

The Logout() web method will invoke ApplicationServices.Logout().

public static void Logout()
{
    ApplicationServices services = new ApplicationServices();
    services.UserLogout();
}
The ApplicationServices.Logout static method will create an instance of ApplicationServices and invoke UserLogout virtual method.
public virtual void UserLogout()
{
    FormsAuthentication.SignOut();
}
The UserLogout method will trigger the SignOut method of forms authentication, which will remove the authentication cookie.

Logging Out From JavaScript

Let’s add a logout button to the user control that was created previously. Switch back to the user control file open in Visual Studio, and replace the contents after the <% Control %> element with the following:

<div id="CustomLoginButton" data-app-role="page" data-activator="Button|CustomLoginButton">
    <div data-role="content">
        <p>
            <button id="login-admin-button">Login As Administrator</button>
            <button id="logout-button">Logout</button>
        </p>
    </div>
</div>

<script type="text/javascript">
    (function () {
        $(document)
            // attach login event to button
            .on('click', '#login-admin-button', function () {
                // call login method
                $app.login('admin', 'admin123%', true, function () {
                    // on success, navigate to Home
                    window.location.replace('/Pages/Home.aspx');
                }, function () {
                    // on failure, show an alert
                    alert('Login failed!');
                });
                return false;
            }).on('click', '#logout-button', function () {
                $app.logout(function () {
                    // refresh the page
                    window.location.reload();
                })
            });
    })();
</script>

Save the file, and open the page in your browser. Note that there are now two buttons.

Login and Logout custom buttons are present on the page.

Click on the first one and you will be logged into the app as “admin”. Click on the second one and it will log the user out, and refresh the page.

Extending Logout

The UserLogout method can also be overridden to add custom functionality. For example, suppose that we need to record when a user logs out. In the class file created in the previous section, add another overridden class after UserLogin method:

C#:

public override void UserLogout()
{
    Trace.WriteLine(String.Format(
                        "User {0} has logged out.", 
                        HttpContext.Current.User.Identity.Name));
    base.UserLogout();
}

Visual Basic:

Public Overrides Sub UserLogout()
    System.Diagnostics.Trace.WriteLine(String.Format(
                        "User {0} has logged out.",
                        HttpContext.Current.User.Identity.Name))
    MyBase.UserLogout()
End Sub

Press F5 to run the app in debug mode. Log in to the application, and then log out. Switch back to Visual Studio and you will notice that the line has been printed to the Output window.

The trace line has been printed to the Output window.

Note that the line may not print in Web Site Factory apps.

Monday, October 27, 2014PrintSubscribe
Prerequisite Verification and Report Viewer Publishing

Code On Time release 8.0.10.0 includes a new feature and two enhancements. 

  • Publishing of Mobile Factory, Web App Factory, and Web Site Factory will also include all required DLLs from Microsoft Report Viewer if reporting has been enabled in a project. Previously this capability has been available only in Azure Factory projects. There is no need to install Report Viewer on the server machines anymore.
     
  • The new update implements enhancements to the process of prerequisite verification that was introduced in the last update. The app generator detects if IIS Express or Report Viewer are missing on the computer and suggest to download them. The enhancements were made to address issues related to this feature that were reported by several users.
     
  • We have also enhanced the process of inclusion of combined script file. This feature is available only in Unlimited edition and significantly speeds up the initial download of application pages. All required scripts are combined into one file and compressed. The downloaded file is cached by web browsers for a year. The name of the combined script changes with every release of the app generator and with every instance of publishing. There were several reports indicating that the file name includes incorrect “culture” component in some configurations. We believe we were able to address the issues. If the new release does not correct the issue, then please open a support ticket and we will arrange for a troubleshooting session as soon as possible.

ATTENTION: DotNetNuke and SharePoint developers must request a hot fix that will correct the compilation error present in both 8.0.9.0 and 8.0.10.0 releases. The fix incudes two files:

  1. PageBase.codedom.xslt – copy the file to [Documents]\Code OnTime\Library\Data Aquarium\_App_Code\Web folder.
  2. DataControllerService.codedom.xml – copy the file to [Documents]\CodeOnTime\Library\Data Aquarium\_App_Code\Services folder.

See complete release notes for version 8.0.9.0 to learn about the features that have become available over the weekend.

Saturday, October 25, 2014PrintSubscribe
Bootstrap Integration; Touch UI Gets Adaptive Filtering, and “Type to Search”

Code On Time release 8.0.9.0 includes countless enhancements to the presentation features of Touch UI. The new UI offers navigation menu, context menus and action bars.

Context menu activated on a list item in an app with Touch UI.

Adaptive filtering is now integrated in context menu and grid headers. The filtering options are available in the context menu and in drop down menus of fields in responsive grids. New feature “Type to Search” activated quick find of the top visible view in Touch UI apps. Simply start typing and hit Enter to quickly find matching records. Press Escape key to clear Quick Find filter.

Adaptive filter menu in an app with Touch UI.

In a preparation for http://cloudontime.com we have integrated Bootstrap content framework. Bootstrap content pages are now available in both Desktop and Touch UI apps. The release also includes a new template for a dedicated login page based on Bootstrap. We intend to use Bootstrap in the upcoming built-in Content Management System and Workflow Register.

Bootstrap content framework is integrated in Touch UI.

Developers can create content pages directly from Project Explorer.

Adding content based on Bootstrap to a Touch UI app.

Select Add Content option to choose a content template. Select the content user control and edit the contents in Visual Studio.

A collection of standard templates based on Bootstrap is now available directly in Project Designer of Code On Time app generator.

The login process will not be relying on authentication JSON service of ASP.NET anymore. Instead we now integrate UserLogin and UserLogout methods directly in the partial ApplicationServices class to enable custom authentication implementation and ability to execute code exactly when the user clicks Login or Logout. It is now also possible to implement GetNavigateUrl method in ApplicationServices class. The purpose of the method is to allow forcing application users to visit a specific URL of your app. It makes it very easy implementing End User Agreement signing or attracting user’s attention to specific situations. The tutorials covering these and many other subjects will be available shortly featuring the new Touch UI.

Developers have more flexibility when creating projects. It is possible to create a project with data controllers only or have an empty project instead.

Developers have flexibility when choosing automatically generated objects for a new project.

List of features, enhancements, and bug fixes:

  • Integrated jQuery Mobile 1.4.4.
     
  • New dedicated login page based on Bootstrap
     
  • Desktop UI: Child Data Views hide placeholder frame when "Visible When" expression is specified and "Auto Hide" is set to "Container".
     
  • FireFox will not crash Desktop UI when user tries creating a new lookup item form modal lookup window.
     
  • Desktop UI now uses a 200ms delay when user hovers over the main menu items.
     
  • Implemented asynchronous email business rule processing. Physical email delivery is handled through a work item queue.
     
  • Application framework performs server-side resolution of field values for each data row in multiple selection operations. This allows sending multiple email notifications or performing other mass operations without the need to read the data values from the database using the primary key value. Virtual method BusinessRules.ResolveFieldValuesForMultipleSelection returns true by default to enable this behavior. Developers can return "false" if value resolution is not desired.
     
  • Duplicate command ignores “Default” values supplied by the server code.
     
  • Standard ~/touch/icons.html page is now integrated in the generated apps. See available icons at http://demo.codeontime.com/northwind/touch/icons.html.
     
  • Class ImportProcessor now uses lookup field name when inserting a looked up field value.
     
  • The template for dedicated Login page has been changed to support both Touch UI and Desktop UI. We recommend creating a brand new login page in your projects. Delete the old version, re-generate the app and integrate your login instructions into the new login user control based on Bootstrap.
     
  • It is now possible to create projects with small databases (less than 10 tables) with free edition without being required to select a subset of tables.
     
  • Touch UI apps created with Unlimited Edition will use a single compressed CSS file instead of multiple file references to speed up the load time.
     
  • App generator adds "legacyCasModel" to web.config to ensure faster report rendering.
     
  • Added clearing of SiteMap providers to ensure MySQL provider does not try to connect.
     
  • Touch UI performs smooth transitions between content pages. If a link points to a URL in  the app then Touch UI will make an AJAX request to the page and inspect it to verify that the page is compatible with “content” model. If that is the case then the app will inject the page content in the same physical page. External pages are loaded in an iframe. Use data-transition attribute on link to define specific transitions.
     
  • Script "_references.js" is now available in Azure Factory, Mobile Factory, Web App Factory, and Web Site Factory to enable JavaScript auto-completion.
     
  • Enhanced AuthenticationServices with custom login methods UserLogin and UserLogout.
     
  • Applications now integrate a placeholder image render to support Bootstrap templates. For example, try http://demo.codeontime.com/northwind/placeholder/red-500x300.png.
     
  • Fixed the bug with Custom login in Touch UI. Authentication service is configured to use __baseUrl if no default URL is provided.
     
  • Touch UI supports view-style-(list|grid|map|listonecolumn) tags on data views to allow selecting the default presentation style of collections of records.
     
  • Touch UI performs formatting of fields marked with Text Mode = Note.
     
  • Touch UI uses "app" namespace for various system events (start.app, awake.app, etc.). The tutorial will be available shortly explaining how to use these events in custom user controls.
     
  • Sidebar is “hidden” on the root "content" page unless data-sidebar=”true” in Touch UI apps.
     
  • SharePoint Factory deployment works with Visual Studio 2013.
     
  • Updated DNN Project to allow creating VS2013 solution files.
     
  • DNN Factory projects use SiteSqlServer connection string when figuring ObjectQualifier, UserId, UserEmail, and PortalID property values.
     
  • Touch UI custom controls are using closure for "start.app" event handlers.
     
  • Blob handlers are registered for binary fields only if the fields are not defined as "read-only". If a blob field of a table must be read-only then mark the data field in a view as "read-only" instead.
     
  • App generator now supports “Custom Data Provider”. Developers are expected to create their own controllers.
     
  • App generator allows specifying if automatically generated pages and controllers are required for the project.