Code On Time: User Interface

Blog

User Interface

Wednesday, January 2, 2013Print Subscribe

Duplicating a Record with SQL Business Rule

The default Duplicate action available in Code On Time web apps performs a client-side duplication. When the action is activated, the create form will be opened and the fields will be populated using values from the duplicated record. The new record will only be saved to the database when the user presses OK.

Sometimes it is necessary for more complex operations to be performed when a record is duplicated. For example, when a master record is duplicated, the child records should be duplicated as well. This will require a server-side duplication. A custom action will be implemented – when the user activates this action, the master and detail records will be copied and saved to the server. The order will then be displayed in the edit form.

Let’s implement a master-detail duplication with Orders and Order Details controllers in the Northwind database.

Start the Project Designer. In the Project Explorer, switch to the Controllers tab. Right-click on Orders / Actions / ag1 (Grid) node, and press New Action.

Assign the following values:

Property	Value
Command Name	Custom
Command Argument	DuplicateOrder
Header Text	Duplicate Order
Confirmation	Are you sure you want to duplicate this order?

Press OK to save the action. Right-click on Orders / Business Rules node, and press New Business Rule.

Use the following:

Property	Value
Type	SQL
Command Name	Custom
Command Argument	DuplicateOrder
Phase	Execute

In the Script property, enter the following:

-- duplicate the order
insert into Orders (CustomerID, EmployeeID, OrderDate, RequiredDate, 
                    ShippedDate, ShipVia, Freight, ShipName, ShipAddress, 
                    ShipCity, ShipRegion, ShipPostalCode, ShipCountry)
select CustomerID, EmployeeID, getdate(), RequiredDate, null, ShipVia, 
        Freight, ShipName, ShipAddress, ShipCity, ShipRegion, 
        ShipPostalCode, ShipCountry
from Orders
where OrderID = @OrderID

-- find ID of duplicated order
declare @NewOrderID int;
select @NewOrderID = @@IDENTITY;

-- duplicate order details
insert into "Order Details" (OrderID, ProductID, UnitPrice, 
                            Quantity, Discount)
select @NewOrderID, ProductID, UnitPrice, Quantity, Discount
from "Order Details"
where OrderID = @OrderID

-- open edit form for duplicate order
set @Result_NavigateUrl = 'Orders.aspx?OrderID=' + cast(@NewOrderID as nvarchar)
                          + '&_controller=Orders&_commandName=Edit'
                          + '&_commandArgument=editForm1'

The business rule will first duplicate the order. The OrderDate will be assigned the current date, and RequiredDate will be set to null. Then, the ID of the new order will be acquired using the @@IDENTITY function. The order details will be duplicated using the new ID. Finally, the client library will be prompted to navigate to open the new order using URL parameters. Press OK to save the business rule. On the toolbar, press Browse.

Navigate to the Orders page. Using the context menu on a row, activate the Duplicate Order option.

The order and associated order details will be duplicated, and it will be displayed in the edit form.

Labels: Business Rules/Logic, Master/Detail, User Interface, Web Application Generator

Wednesday, January 2, 2013Print Subscribe

Handling Row Selection in a Data View

The key of the selected row of a data view can be accessed using JavaScript.

Start the Project Designer. On the Project Explorer toolbar, click on the New Page icon.

Use these values for the new page:

Property	Value
Name	ProductsTest
Roles	n/a

Press OK to save. In the Project Explorer, drop Products Test page node on the right side of Home page node to place it second in the hierarchy.

Right-click on Products Test node, and press New Container.

Use the default values and press OK to save.

Right-click on Products Test / c101 container node, and press New Control.

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

Assign a name to the user control:

Property	Value
Name	SelectedKeyBox

Press OK to save and insert it into the User Control property. Press OK again to add the control to the page.

Next, switch to the Controllers tab. Right-click on Products controller and press Copy.

Switch back to the Pages tab. Right-click on Products Test / c101 container node, and press Paste. A Products data view will be instantiated.

On the toolbar, press Browse to generate the user control file. When done, right-click on Products Test / c101 / control1 – SelectedKeyBox node and press Edit in Visual Studio.

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

<script type="text/javascript">
    $(window).ready(
    setTimeout(function () {
        var dataView = Web.DataView.find('Products', 'Controller');
        if (dataView)
            dataView.add_selected(function () {
                $('.MyTextBox').val(dataView.get_selectedKey())
            });
    }, 50)
    );
</script>
<asp:TextBox type="text" ID="TextBox1" runat="server" class="MyTextBox"></asp:TextBox>

The user control will consist of an empty textbox. When the user selects a row, the selected key will be assigned as the value of the textbox.

Save the file. Switch to the open browser tab with the web app. Refresh the page, and navigate to Products Test page.

A textbox will be present above the list of products. Click on a row, and the ProductID will be displayed in the textbox.

Clicking on another row will update the value in the textbox.

Labels: Application Builder, User Interface, Web Application Generator

Sunday, December 30, 2012Print Subscribe

Exclude from Menu & Include In Menu

It is not necessary for all application pages to be visible in the navigation menu. These “system” pages may be accessed by a link from another page or a redirection via the Navigate action.

Exclude From Menu

Let’s exclude the Customer Demographics page from the navigation menu.

Start the Project Designer. In the Project Explorer, right-click on Customer Demographics page node, and press Exclude From Menu.

On the toolbar, press Browse. Notice that the Customer Demographics page is no longer present in the navigation menu.

The page may still be accessed by the URL ~/Pages/CustomerDemographics.aspx.

Include in Menu

Let’s restore the page to the navigation menu. Switch back to the Project Designer. Right-click on Customer Demographics node, and press Include in Menu.

The page will be included at the end of the menu. Let’s move it back to the original position. Drop Customer Demographics node on the right side of Categories node.

On the toolbar, press Browse. The Customer Demographics navigation menu item will have been restored.

Labels: Application Builder, Tips and Tricks, User Interface, Web Application Generator