Tips and Tricks

Labels
AJAX(112) App Studio(8) 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(184) 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
Tips and Tricks
Wednesday, March 23, 2011PrintSubscribe
Using $external() Function in Filter Expressions

Code On Time applications support custom functions in view filter expressions. The new function $external() has been introduced in the latest web application generator update. You can use this function to access values in the URLs of the pages and values of fields listed in Context Fields property of lookup fields.

Consider the EmployeeTerritories table from the Northwind sample database.

Any territory can be associated with an employee only once due to the primary key constraint.

image

Here is the screen shot of the form that allows creating new EmployeeTerritories records.

image

The employee last name is already selected. If a user clicks on (select) link in Territory Description field then an entire set of 53 territories will be presented.

image

Let’s make sure the the territories that are already assigned to a selected employee are not available in the list. For example, if we assign a new territory to employee Davolio then the last territory on the first page  in the list of territories in the screen shot above, Wilton from Eastern region, is not listed along with a couple of other territories.

Start the code generator, click on the project name, click Design button, and select EmployeeTerritories data controller, click Edit, and enter EmployeeID in the input labeled Context Fields under Dynamic Properties section. Save changes.

From now on, the application will pass the value of the selected EmployeeID to the lookup view Territories.grid1 attached to field TerritoryID. If the lookup view has the field EmployeeID then the rows of Territories will be automatically filtered to match the value of EmployeeID selected in the new record.

Well, there is no field named EmployeeID in the table Territories.

Let’s create a filter expression for grid1 view in data controller Territories. Click on Home link in the bread crumbs of the Designer at the top of the page. Select Territories data controller. Activate Views tab and choose grid1. Click Edit button.

Enter the following in Filter Expression property:

$external('EmployeeID') is null or not TerritoryID in (
   select "TerritoryID" from "EmployeeTerritories"
   where "EmployeeID" = $external('EmployeeID')
)

image

Save changes, exit Designer and generate the application, navigate to Employee Territories page, select Davolio in the Employee Last Name field, and click (select) in Territory Description input. You will see a lookup window with 50 records in it. The three records that are already assigned to Ms. Davolio are not presented in the list.

image

Navigate to dedicated Territories page and observe that 53 records are still available there. If you enter a URL parameter EmployeeID with value of “1” in the address bar of your browser and hit Enter key then 50 records will be displayed as well. Your URL may look as the one below.

http://localhost:36745/Pages/Territories.aspx?EmployeeID=1

The filter expression assigned to grid1 view does not work if there is no external filter passed in the page URL or in the Context Fields of the lookup view. This is guaranteed by the first comparison in the expression.

$external('EmployeeID') is null or . . .

The second part of the filter expression will test the TerritoryID to ensure that it is not matched to any territories that are already present in EmployeeTerritories and uses $external(‘EmployeeID’) to further limit the scope of test.

Notice the use of double quotations around field and table names. Please use the appropriate symbol that works with your database server to ensure that application will not be trying to resolve the name against the dictionary of fields of the data controller.

Here is physical SQL statement executed by your application. Note that parameters @p0 and @p1 will be replaced with the value of the EmployeeID passed in a URL or as a context field.

with page_cte__ as (
select
row_number() over (order by "Territories"."TerritoryID") as row_number__
,"Territories"."TerritoryID" "TerritoryID"
,"Territories"."TerritoryDescription" "TerritoryDescription"
,"Territories"."RegionID" "RegionID"
,"Region"."RegionDescription" "RegionRegionDescription"
from
"dbo"."Territories" "Territories"
    left join "dbo"."Region" "Region" on "Territories"."RegionID" = "Region"."RegionID"

where
(
(((@p0) is null or not "Territories"."TerritoryID" in (
   select "TerritoryID" from "EmployeeTerritories"
   where "EmployeeID" = (@p1)
))))
)
select * from page_cte__ where row_number__ > @PageRangeFirstRowNumber and row_number__ <= @PageRangeLastRowNumber
Thursday, January 13, 2011PrintSubscribe
Data Controller URL Parameters

Code On Time applications recognize several URL parameters that allow constructing simple URL actions to open a multiple-purpose page in “new”, “edit” , or “view” mode.

The following URL will start a record in "new" mode.
 
http://dev.codeontime.com/demo/websitefactory1/Pages/Customers.aspx?_controller=Customers&_commandName=New&_commandArgument=createForm1

image
 
The following URL will start the Products page with product #7 displayed in "edit" mode.
 
http://dev.codeontime.com/demo/WebSiteFactory1/Pages/Products.aspx?ProductID=7&_controller=Products&_commandName=Edit&_commandArgument=editForm1

image
 
The following URL will select a Product record with ID = 35 in "view" mode:

http://dev.codeontime.com/demo/WebSiteFactory1/Pages/Products.aspx?ProductID=35&_controller=Products&_commandName=Select&_commandArgument=editForm1

image

The “_controller” parameter is optional if your page presents a single data controller. You have to use this parameter to ensure that master-detail pages will respond correctly. The following URL will navigate to the protected Suppliers page and will select supplier #22 in “edit” mode. You will have to sign in to access the page.

http://dev.codeontime.com/demo/WebSiteFactory6/Pages/Suppliers.aspx?SupplierID=22&_controller=Suppliers&_commandName=Edit&_commandArgument=editForm1

image

Notice that cancellation or successful Insert, Update, or Delete action will automatically navigate back to the previous page that was loaded in the browser prior to navigation with data controller URL parameters. This convenient behavior will save time that is typically needed to write redirection logic in similar situations.

Wednesday, January 12, 2011PrintSubscribe
Modifying User Interface With CSS

Code On Time applications rely exclusively on Cascading Style Sheets (CSS) to provide all presentation elements of generated web applications with colors, fonts, backgrounds, borders, paddings, margins, and other embellishments.

Here is a typical screen that you will find in an application generated with the default theme.

image

If you load your application in Internet Explorer browser, press F12 to bring up the Developer Toolbar and select Disable | CSS option on the toolbar then the page will looks similar to the following screen shot.

image

As you can see the page is “black on white” with a few blue links and lacks any style. This allows for total customization of the user interface. You may choose to follow the route of complete user interface customization from scratch or add incremental enhancements to the existing themes provided by Code On Time.

Here is how you can proceed with minor enhancements.

Activate Developer Toolbar window and select Disable|CSS one more time to enable the stylesheets in the browser window.

Click on the “arrow” icon of the Developer Toolbar and inspect any column in a data row of the grid view. If the selection rectangle does not show up when you move the mouse pointer over the page then click the “arrow” again to turn the selection mode off and hit “refresh” icon. Try selecting the UI element on the page again. This is needed if you have activated the toolbar and then interacted with the page in the browser. The toolbar will not be aware of the changes produced by AJAX scripts.

The screen shot shows a thin blue box around the cell in the first row of the Products grid in Category Name column. The Developer Toolbar on top of the browser shows the HTML corresponding to the selection. Three CSS classes Cell, CategoryID, and StringType and assigned to the table cell.

image

We will change the presentation of CategoryID field column to occupy 200 pixels horizontally.

Open you project in Visual Studio or Visual Web Developer. Select the folder ~/App_Themes/MyCompany and add the new CSS stylesheet item to your project. “MyCompany” is the default namespace of Code On Time projects. If you have changed the namespace of your project then choose the corresponding folder in the Solution Explorer.

image

Enter the following CSS rule into the stylesheet.

.Cell.CategoryID
{
    width: 200px;
}

Run the project and refresh the contents of the browser window.  The third column Category Name of the grid view is now substantially wider.

image

Use similar techniques to alter other elements of the user interface in your Code On Time applications.

Notice that sometimes your own CSS rules will come into conflict with the rules of core theme. Use the word “!important” right after the value of the CSS property as shown in the following example.

.Cell.CategoryID
{
    width: 200px !important;
}
Continue to Installation Issues