Blog: Posts from June, 2013

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
Posts from June, 2013
Thursday, June 13, 2013PrintSubscribe
Customizing the Page Title

Every page in a generated web app has a title, displayed directly under the path. To change the page path in the navigation menu, use drag & drop techniques to move the page to the desired location.

Default Title text displayed under the navigation menu.

Let’s change the title of the Customers page.

Specifying a Page Title

Start the Project Designer. In the Project Explorer, double-click on Customers page node.

Customers page node selected in the Project Explorer.

Change the title:

Property New Value
Title Customer List

Press OK to save. On the toolbar, press Browse. Notice that the Customers page title now says “Customer List”.

The new Title text is now applied.

It may be necessary to update the text of the header dynamically. Create a custom user control for complex page title customization.

Placing a Custom User Control in the Title

In the Project Explorer, right-click on Customers / page container node and press New Control.

Creating a new control in the 'page' container of Customers page.

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

Creating a new user control.

Assign a user control name:

Property Value
Name CustomerTitle

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

Right-click on the new control Customers / page / control1 – CustomerTitle, and press Rename.

Renaming the 'control1' user control on Customers page.

Change the name to “title” and press Enter key to save changes.

The user control has been renamed to 'title'.

On the toolbar, press Browse. Notice that the title text has been replaced with the custom user control.

The title text has been replaced with a custom user control.

Right-click Customers / page / title – CustomerTitle and press Edit in Visual Studio option in the context menu to start customization.

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.

Continue to Custom Login Form