Forms, Reports, Apps

Build and deploy rapidly. Use offline, online, on-premises.

  Blog

Archive
Blog
Sunday, November 4, 2012PrintSubscribe
Minimal Membership Provider for SQL Server

Requirements

A minimal membership provider requires a dedicated table to keep track of user names and passwords.

This is a sample “Users” table with “identity” primary key.

A user table with "identity" primary key allows keeping tracking of user names and passwords

SQL:

create table Users
(
     UserID int not null identity primary key,
     UserName nvarchar(128) not null,
     "Password" nvarchar(128) not null
)

Here is how the table may look with a “unique identifier” primary key.

A user table with "unique identifier" primary key allows keeping tracking of user names and passwords

SQL:

create table Users
(
    UserID uniqueidentifier not null default newid() primary key,
    UserName nvarchar(128) not null,
    "Password" nvarchar(128) not null
)

User roles are hardcoded in the minimal Role Provider implementation.

Configuration

Create a table in your database using one of  the scripts specified above.

Select the project name on the start page of the application generator and choose Settings.

Proceed to Authentication and Membership.

Select “Enable custom membership and role providers” option and enter the following configuration settings.

table Users=Users
column [int|uiid] UserID = UserId
column [text] UserName = UserName
column [text] Password = Password

role Administrators = admin
role Users = admin, user
role Everybody = *

The configuration maps logical table Users required for membership provider implementation to the physical database table Users. It also defines three user roles – Administrators, Users, and Everybody.

Generate the project.

Saturday, November 3, 2012PrintSubscribe
Order Form Sample–Part 1

In this tutorial, we will show you how to turn a standard automatically generated Orders page into a customized order management screen. The picture below shows the final product of customization.

Customized version of the Order Form

Below is the baseline Orders page created by the web application generator in the baseline app.

Baseline version of the Orders page

Saturday, November 3, 2012PrintSubscribe
Order Form Sample–Part 28

Let’s create a custom HTML table layout that will use the field placeholders to position the data fields.

Below is the new, longer version of the template. The style element defines CSS rules .FieldLabel and .RightAlignedInputs. Several div and table elements organize the field references surrounded by curly brackets into a complex layout.

Template for ~/Controls/OrderFormTemplate.ascx:

<%@ Control AutoEventWireup="true" %>
<style type="text/css">
    .FieldLabel
    {
        font-weight: bold;
        padding: 4px;
        width: 90px;
    }
    .RightAlignedInputs input
    {
        text-align: right;
    }
</style>
<div style="display:none">
    <div id="Orders_editForm1">
        <table style="width: 100%">
            <tr>
                <td valign="top">
                    <table>
                        <tr>
                            <td class="FieldLabel">
                                Customer:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly">
                                    {CustomerID}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Employee:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly">
                                    {EmployeeID}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Order Date:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly">
                                    {OrderDate}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Required Date:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly">
                                    {RequiredDate}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Shipped Date:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly">
                                    {ShippedDate}</div>
                            </td>
                        </tr>
                    </table>
                </td>
                <td valign="top">
                    <table style="float: right" 
                        class="RightAlignedInputs">
                        <tr>
                            <td class="FieldLabel">
                                Address:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly" 
                                    style="float: right">
                                    {ShipAddress}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                City:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly" 
                                    style="float: right">
                                    {ShipCity}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Region:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly" 
                                    style="float: right">
                                    {ShipRegion}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Postal Code:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly" 
                                    style="float: right">
                                    {ShipPostalCode}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Ship Country:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly" 
                                    style="float: right">
                                    {ShipCountry}</div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    {view2Extender}
                </td>
            </tr>
            <tr>
                <td valign="bottom">
                    <table>
                        <tr>
                            <td class="FieldLabel">
                                Ship Name:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly">
                                    {ShipName}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Ship Via:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly">
                                    {ShipVia}</div>
                            </td>
                        </tr>
                    </table>
                </td>
                <td align="right">
                    <table style="margin-right: 4px;" 
                        class="RightAlignedInputs">
                        <tr>
                            <td class="FieldLabel">
                                Subtotal:
                            </td>
                            <td align="right">
                                <div class="FieldPlaceholder DataOnly" 
                                    style="float: right">
                                    {Subtotal}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Freight:
                            </td>
                            <td align="right">
                                <div class="FieldPlaceholder DataOnly " 
                                    style="float: right">
                                    {Freight}</div>
                            </td>
                        </tr>
                        <tr>
                            <td class="FieldLabel">
                                Total:
                            </td>
                            <td>
                                <div class="FieldPlaceholder DataOnly" 
                                    style="float: right">
                                    {Total}</div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</div>

If you remove the display:none attribute from the main div and click on the Design button in the lower left corner of Visual Studio, you will see a visual representation of the template. You can see that there is a text label next to each field placeholder. Visual tools can be used to rearrange the fields in the order of your preference.

Design view of the Custom HTML Table layout

One key element is {view2Extender}, located in the center of the layout. This placeholder refers to the data view with ID of “view2”, which shows Order Details.

Save the template file, and refresh the web application. Select an order, and you will see the new layout.

The new layout of Order Form using a Custom HTML Table Layout

The Customer, Employee, and Date fields are presented on the left side. Shipping Information is displayed on the right side.

The grid of order details is automatically inserted in the next row of the template.

Ship Name and Ship Via are displayed in the bottom left.

Subtotal, Freight, and Total are in the bottom right, underneath the Extended Price row of Order Details.

If you edit the record, you can see that the fields are using the lengths specified previously. If you use the up and down arrows to move through Orders, you can see the order record and order details change.

New Custom HTML Table layout of Order Form in edit mode

If you have a lot of Order Detail records, you can sort and filter using the columns. You can also search for specific products with Quick Find. For more complex searches, you can use the advanced search bar. The Sum aggregate in the bottom Extended Price column shows a sum of the filtered rows, while Subtotal will be calculated for all rows that belong to the Order regardless of the filter.

New Custom HTML Table layout of Order Form with a filter applied to the Order Details

Users can activate the Data Sheet view mode to quickly enter line items using the keyboard.

Order Form with Order Details in Data Sheet View