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
Thursday, June 13, 2013PrintSubscribe
Customizing the Header

The page header is displayed at the top of every page in a web application. By default, the application namespace is displayed in the header, along with the standard theme logo.

Default page header and logo in a Code On Time web app.

Let’s customize the header.

Changing Header Text and Icon

Start the web app generator. Click on the project name, select settings, and press Features. In the Page Header text box, paste the following:

Property Value
Page Header
<span style="color:darkred;">Code On Time</span>

Press Finish and continue to regenerate the web app. When complete, click on the project name and press Develop to open the project in Visual Studio.

In the Solution Explorer, drop your logo image into ~\App_Themes\MyCompany folder.

Dropping the logo file into MyCompany theme folder.

Next, right-click on ~\App_Themes\MyCompany and press Add | Style Sheet. Leave the default name and press OK to create the file “StyleSheet.css”.

Adding a style sheet to the MyCompany theme folder.

Replace the contents with the following:

div#PageHeaderBar {
    background-image: url(colorlogo.png);
    height:42px;
    padding-top:30px;
}
    div#PageHeaderBar span {
        margin-left: 110px;
        font-size:32px;
    }
Save the file, and refresh the browser window. The new logo and header will be visible.

Code On Time web app with customized header text and logo.

Placing a Custom User Control in the Header

Sometimes it may be necessary to place dynamic content in the header area. Let’s create custom user control that will be displayed in the header on the Customers page.

Start the Project Designer. In the Project Explorer, right-click on Customers page node and press New Container.

Adding a new container to the Customers page.

Press OK to save the container with default settings. In the Project Explorer, right-click on Customers / c101 container and press Rename.

Renaming the new container.

Change the container name to “page”, and press Enter key to save.

User controls in the container “page” will be placed in special placeholders on the page when the app is generated. The name of the control instance determines the placeholder.

Right-click on Customers / page, and press New Control.

Adding a new control to the 'page' container.

Next to the User Control lookup on the form, click the New User Control icon.

Creating a new user control.

Assign a name to the new user control.

Property Value
Name CustomerHeader

Press OK to create the new user control. Press OK to save the properties of the control instance and have it added to the Customers / page container.

Right-click on Customers / page / control1 – CustomerHeader and press Rename.

Renaming the new control in the 'page' container.

Change the name to “header” and press Enter key to apply the change.

On the toolbar, press Browse. When generation is complete, navigate to the Customers page. The page will look like the picture below if there are no style sheet rules affecting the header area.

Unchanged custom user control replacing the default header text.

Dynamically Updating the Page Header

Let’s change the custom user control to make it display the primary key value from the selected data row of the Customers master data view.

Right-click on Customers / page / header – CustomerHeader and press Edit in Visual Studio.

Editing the control in Visual Studio.

Replace the existing code base after the <%@ Control %> element with the following:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="Button1" runat="server" style="margin-left:120px;"
            Text="Get Customer Info" OnClick="Button1_Click" />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </ContentTemplate>
</asp:UpdatePanel>

Right-click anywhere in the file, and press View Code. Add the following method:

C#:

protected void Button1_Click(object sender, EventArgs e)
{
    Control dataViewExtender = Parent.NamingContainer
        .FindControl("PageContentPlaceHolder").FindControl("view1Extender");
    Label1.Text = ((MyCompany.Web.DataViewExtender)dataViewExtender).SelectedValue;
}

Visual Basic:

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
    Dim dataViewExtender As Control = Parent.NamingContainer.
        FindControl("PageContentPlaceholder").FindControl("view1Extender")
    Label1.Text = CType(dataViewExtender, MyCompany.Web.DataViewExtender).SelectedValue
End Sub

Save the file. The event handler will respond to a click on the button “Button1”. First, it will find the instance of “view1Extender”. Next, the selected value will be copied to the label “Label1”.

Switch back to the browser. Navigate to the Customers page, and notice that the header text has been replaced with a button and a label.

Customized user control replacing the header element.

Select a customer, and press Get Customer Info button. The label will be updated with the selected Customer ID.

The header label is dynamically updated with the selected CustomerID.

Tuesday, June 11, 2013PrintSubscribe
Password Recovery

Code On Time web apps using ASP.NET Membership automatically come configured with a password recovery form. This form can be opened by clicking on the Forgot your password? link on the dropdown login form.

The Forgot your password? link access the Password Recovery form.

When the user enters their User Name and Password Answer correctly, a new password will be sent to the email on file.

The Password Recovery form.

There are situations in which it may be necessary to allow users to access this form from a different location within the web app. In addition, if Custom Membership is used, the Forgot your password? link is not present. Let’s place the password recovery form in a custom user control and add this control to the home page.

Start the Project Designer. In the Project Explorer, right-click on Home / container2 node, and press New Control.

Adding a new control to the Home page.

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

Creating a new user control.

Assign a name to the user control:

Property Value
Name PasswordRecoveryForm

Press OK to save the user control. Press OK again to instantiate the user control on the Home page.

On the toolbar, press Browse to generate the user control. When complete, right-click on Home / container2 / control3 – PasswordRecoveryForm node and press Edit in Visual Studio.

Editing the user control in Visual Studio.

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

<asp:PasswordRecovery runat="server" />

Press OK to save the file. Switch back to the browser. Notice that the Password Recovery form is placed after the Instructions text box on the Home page.

The standard password recovery form on the home page.

Note that you must configure SMTP settings in order for the password recovery email to be sent by the application.

Tuesday, June 4, 2013PrintSubscribe
Custom Login Form

Code On Time web apps automatically include a dropdown login box pictured below when membership is enabled. As an alternative, a dedicated login page may be created. Learn more about the dropdown login box and dedicated login page.

Automatic dropdown login control in Code On Time web apps.

Sometimes it may be necessary to place the login control on another page. This can be easily done by adding the <asp:Login /> control to any .aspx page.

Let’s place a login control on the home page. Start the web app generator, click on the project name, and press Develop to open the project in Visual Studio. In the Solution Explorer, double-click on ~\Pages\Home.aspx.

Page 'Home.aspx' selected in the Solution Explorer.

Notice that there are two <asp:Content> elements in the page. Append the highlighted line to the end of the second element.

<%@ Page Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" 
    CodeFile="Home.aspx.cs" Inherits="Pages_Home" Title="^HomeTitle^Start^HomeTitle^" %>

<%@ Register Src="../Controls/TableOfContents.ascx" TagName="TableOfContents" TagPrefix="uc" %>
<%@ Register Src="../Controls/Welcome.ascx" TagName="Welcome" TagPrefix="uc" %>
<asp:Content ID="Content1" ContentPlaceHolderID="PageHeaderContentPlaceHolder" runat="Server">
    ^HomeTitle^Start^HomeTitle^
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageContentPlaceHolder" runat="Server">
    <div factory:flow="NewRow" xmlns:factory="urn:codeontime:app-factory">
        <uc:TableOfContents ID="control1" runat="server"></uc:TableOfContents>
    </div>
    <div factory:flow="NewColumn" xmlns:factory="urn:codeontime:app-factory">
        <uc:Welcome ID="control2" runat="server"></uc:Welcome>
    </div>
    <asp:Login runat="server" />
</asp:Content>

Save the file, and press F5 to open the web site in a browser window. The standard login control will be present at the bottom of the page.

Standard ASP.NET login control is present at the bottom of the page.