About Me

My photo
Dhaka, Dhaka, Bangladesh
✔4x Salesforce Certified ✔Web Application Developer ✔Database Developer with DWH/ETL/BI • Successful solution engineer and developer with 16+ years of experience multiple technology and in different countries. Proficient in implementing business requirements into the technical solution. Experience handling all phases of the project lifecycle from discovery through to deployment. Worked as technical lead for a team of junior developers to make sure code stayed in line with requirements and standard best practices. Skilled at integrating disparate systems with Salesforce.Experience implementing Salesforce Community Cloud at two previous companies.

Wednesday, May 11, 2011

Using a Tree View/Asp.net/C#/IronSpeed


Using a Tree View

A Tree View can be used in an Iron Speed Designer application to display hierarchical data from the database, and when the user selects one of the nodes, the relevant information can be displayed to the user on the right.

In the example below, a tree view is used to display a list of products organized hierarchically within each category.  The user can expand any Category and then select a Product.  The details of the selected Product will be displayed on the right.



Iron Speed Designer allows a tree view control to be easily integrated into applications, and populate it with data from the database.  The Selected Node Changed event handler is implemented to display the selected product to the right of the tree view.
In this example, an ASP:TreeView control is added to the spreadsheet grid within the Design Mode for a page. The tree control is populated dynamically when a user expands or collapses a particular section of the tree.  A Populate function is called to fill the sub-tree whenever the user expands a section of the tree.  The Populate function will populate the tree with either Categories or with the list of Products within a Category.  An event handler is implemented to handle the selection of a specific node to display information about the product on the right.
This example extends a Show Product record page built using Iron Speed Designer.  The Southwind database included with Iron Speed Designer is used for this application.  Normally, the Show Product record page displays the Product based on the URL parameter. This page will be extended to display the Product selected in the Tree View.  The initial display of the product specified by the URL will continue to work as-is.
The first few steps insert the tree view into the page layout, and the following steps implement the callback functions to populate the tree, and handle the selection of a node.

Layout Changes

Step 1Create space for a tree view:  Go to the Design mode on the Show Product page. Zoom out to the ShowProduct.aspx.



 


Step 2: Move the ProductsRecordControl two columns to the right to allocate space on the page for the Tree View control in the Quick Layout. The second column will be used to add a HTML space character  (   )  to separate the tree view from the product record control.



 
Step 3. (Optional) Delete all the controls in the Cell with the ProductsTabContainer and replace it with a HTML space  (   ) in the cell editor.
 

Step 4: Insert Tree View: Select the top-left cell A1. Copy and paste the following asp:TreeView Control into the Cell Editor.


Code:


TreeView Properties: The inserted tree view specifies a number properties as described below:


Property
Description
ID
Id of the tree view control (tvCategories).
runat
Indicates the ability to access this control in the code-behind.
Font-Names
Font used to display entries in the tree view.
ForeColor
The foreground text color.
ExpandDepth
The initial expansion shown to the user.
ExpandImageUrl
The image shown to indicate a node can be expanded.
CollapseImageUrl
The image shown to indicate a node can be collapsed.
OnTreeNodePopulate
The code-behind function to be called when a user clicks the node for expansion.  This function will populate the products within a category.
OnSelectedNodeChanged
The code-behind function to be called when a user selects a leaf node.  This function updates the product record on the right.
SelectedNodeStyle-BackColor
The background color to use to display a selected node.
SelectedNodeStyle-ForeColor
The foreground color to use to display a selected node.
Nodes
A substructure that specifies the initial list of nodes in the tree view.  Only the top-level node is included at this point, and the sub-nodes will be added by NodePopulate function when it is called when the user expands a node.
LevelStyles
The styles for each of the levels. There will be three levels, so the styles for each of the three levels are defined.  Currently they are the same styles, but could be different.

Step 5: Align Tree View to the top of the cell:  By default, all content in the cell is shown center-aligned vertically.  To display the tree view at the top, right-click and select Align, Top.




Code Changes

The following steps populate the tree view nodes, and handle the selection of a product and display the updated record control on the right.
Step 6: Implement Node_Populate:  The Node_Populate method is called to populate any of the nodes in the tree control.  Node_Populate will be called either for the second-level (Category) or the third-level (Products within a Category).  Based on the level, either the FillCategories or the FillProductsForCategories is called to populate the tree view appropriately.
The name of the populate method (Node_Populate) is specified on the OnTreeNodePopulate property set on the Tree View control on the layout changes.
This code is inserted into the Section 1 of the code-behind file for the page (not the Controls code-behind file).  Click the ShowProducts.aspx.vb tab, and expand the region “Section 1”.


Copy and paste the code below:
[C#]
Code:
public void Node_Populate(object sender, System.Web.UI.WebControls.TreeNodeEventArgs e) 
{ 
if (e.Node.ChildNodes.Count == 0) { 
switch (e.Node.Depth) { 
case 0: 
// If the parent is the top-level node, then fill with Categories 
FillCategories(e.Node); 
break; // TODO: might not be correct. Was : Exit Select 

case 1: 
// If the parent is a category (depth=1), then fill with Products for the selected Catetory 
FillProductsForCategories(e.Node); 
break; // TODO: might not be correct. Was : Exit Select 

} 
} 
} 

private void FillCategories(TreeNode parent) 
{ 
// Get all records - whereClause is Nothing 
foreach (CategoriesRecord rec in CategoriesTable.GetRecords(null)) { 
// Make sure to populate the Text as the Name, and the Value as the ID so we can 
// use it later when reading the Products for the selected Category ID. 
TreeNode node = new TreeNode(rec.CategoryName, rec.CategoryID.ToString()); 
// Populate when needed - this will ensure that only the first level is populated 
// when tree is first displayed. 
node.PopulateOnDemand = true; 
// Expand when selected. 
node.SelectAction = TreeNodeSelectAction.Expand; 

parent.ChildNodes.Add(node); 
} 
} 

private void FillProductsForCategories(TreeNode parent) 
{ 
// parent.Value will be CategoryId 
// So create a WhereClause that looks like: 
// CategoryId = 34 
// If CategoryId is 34. 
string whereStr = ProductsTable.CategoryID.UniqueName + " = " + parent.Value;
foreach (ProductsRecord rec in ProductsTable.GetRecords(whereStr))
{ 
// Populate the tree node with the name of the product and Product ID. 
// ProductID will be used in the CreateWhereClause to display the correct product. 
TreeNode node = new TreeNode(rec.ProductName, rec.ProductID.ToString()); 
// No sub nodes to populate, so the PopulateOnDemand is False 
node.PopulateOnDemand = false; 
// Display as Selected 
node.SelectAction = TreeNodeSelectAction.Select; 
parent.ChildNodes.Add(node); 
} 
} 

public void Node_Changed(object sender, EventArgs e) 
{ 
// We need to refresh the Products Record panel on the right - so 
// first null out the current record by setting the RecordUniqueId = Nothing 
// Then load data on the page again. 
this.ProductsRecordControl.RecordUniqueId = null; 
LoadData(); 
}

[VB]
Code:
Public Sub Node_Populate(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.TreeNodeEventArgs)
If e.Node.ChildNodes.Count = 0 Then
Select Case e.Node.Depth
Case 0
' If the parent is the top-level node, then fill with Categories
FillCategories(e.Node)
Exit Select
Case 1
' If the parent is a category (depth=1), then fill with Products for the selected Catetory
FillProductsForCategories(e.Node)
Exit Select
End Select
End If
End Sub

Private Sub FillCategories(ByVal parent As TreeNode)
Dim rec As CategoriesRecord
' Get all records - whereClause is Nothing
For Each rec In CategoriesTable.GetRecords(Nothing)
' Make sure to populate the Text as the Name, and the Value as the ID so we can
' use it later when reading the Products for the selected Category ID.
Dim node As TreeNode = New TreeNode(rec.CategoryName, rec.CategoryID.ToString)
' Populate when needed - this will ensure that only the first level is populated
' when tree is first displayed.
node.PopulateOnDemand = True
' Expand when selected.
node.SelectAction = TreeNodeSelectAction.Expand

parent.ChildNodes.Add(node)
Next
End Sub

Private Sub FillProductsForCategories(ByVal parent As TreeNode)
Dim rec As ProductsRecord
' parent.Value will be CategoryId
' So create a WhereClause that looks like:
' CategoryId = 34
' If CategoryId is 34.
Dim whereStr As String = ProductsTable.CategoryID.UniqueName & " = " & parent.Value
For Each rec In ProductsTable.GetRecords(whereStr)
' Populate the tree node with the name of the product and Product ID.
' ProductID will be used in the CreateWhereClause to display the correct product.
Dim node As TreeNode = New TreeNode(rec.ProductName, rec.ProductID.ToString)
' No sub nodes to populate, so the PopulateOnDemand is False
node.PopulateOnDemand = False
' Display as Selected
node.SelectAction = TreeNodeSelectAction.Select
parent.ChildNodes.Add(node)
Next
End Sub

Public Sub Node_Changed(ByVal sender As Object, ByVal e As EventArgs)
' We need to refresh the Products Record panel on the right - so
' first null out the current record by setting the RecordUniqueId = Nothing
' Then load data on the page again.
Me.ProductsRecordControl.RecordUniqueId = Nothing
LoadData()
End Sub

Step 7: Implement Node_Changed:  The Node_Changed method is called to whenever a user selects a leaf-node.  The intermediate nodes such as the selection of a category will not raise the  Node_Changed event.
The name of the selected index changed method (Node_Changed) is specified on the OnSelectedNodeChanged property set on the Tree View control on the layout changes.
This code is inserted into the Section 1 of the code-behind file for the page (not the Controls code-behind file).  This code can be inserted right below the Node_Populate method described above.
The Node_Changed event simply sets the UniqueId of the Product Record Control to Nothing or NULL, and calls LoadData.  The page-level LoadData function will call the LoadData for the Product Record Control and load the data for it once again.
A function defined in the next step will ensure that the currently selected product’s data will be displayed in the product record control.
[C#]
Code:
public void Node_Changed(object sender, EventArgs e) 
{ 
// We need to refresh the Products Record panel on the right - so 
// first null out the current record by setting the RecordUniqueId = Nothing 
// Then load data on the page again. 
this.ProductsRecordControl.RecordUniqueId = null; 
LoadData(); 
}

[VB]
Code:
Public Sub Node_Changed(ByVal sender As Object, ByVal e As EventArgs)
' We need to refresh the Products Record panel on the right - so
' first null out the current record by setting the RecordUniqueId = Nothing
' Then load data on the page again.
Me.ProductsRecordControl.RecordUniqueId = Nothing
LoadData()
End Sub
Step 8: Modify CreateWhereClause:  When LoadData for the ProductsRecordControl is called, it in turns calls CreateWhereClause function to create a where clause to load the data from the products table.  Normally the generated CreateWhereClause simply uses the Product Id specified by the “Products” URL parameter.
We will insert a few lines of code at the top of the CreateWhereClause to check if a product node is selected in the tree control.  If a product node is selected, we will instead use the product ID of this selected node to form the where clause.  Otherwise we will let the remainder of the generated code of CreateWhereClause handle the creation of the clause by calling the base CreateWherClause.
To override the CreateWhereClause, go to the ShowProducts.aspx page in the Application Explorer and zoom to the ShowProducts.aspx in the bread crumbs. Next, select the ProductsRecordControl in the Quick Layout.  A series of code tabs are displayed at the bottom next to the Cell Editor.  Select the CreateWhereClause() tab.  The default generated CreateWhereClause is displayed as shown below:



Copy and paste the entire CreateWhereClause function below to replace the existing CreateWhereClause.
[C#]
Code:
public override WhereClause CreateWhereClause() 
{ 
WhereClause wc = new WhereClause(); 
ProductsTable.Instance.InnerFilter = null; 
wc = new WhereClause(); 

// Find the tree view and see if a node is selected.
// If a node is selected, formulate a where clause and return it.
TreeView tv = (TreeView) this.Page.FindControlRecursively("tvCategories"); 
if (!((tv == null)) && !((tv.SelectedNode == null)) && !((tv.SelectedNode.Value == null))) { 
wc.iAND(ProductsTable.ProductID, 
BaseFilter.ComparisonOperator.EqualsTo, 
tv.SelectedNode.Value); 
return wc; 
} 

// Otherwise return the where clause specified by the generated function.
return base.CreateWhereClause(); 
}


[VB]
Code:
Public Overrides Function CreateWhereClause() As WhereClause

Dim wc As WhereClause
ProductsTable.Instance.InnerFilter = Nothing
wc = New WhereClause()

' Find the tree view and see if a node is selected.
' If a node is selected, formulate a where clause and return it.
Dim tv As TreeView = CType(Me.Page.FindControlRecursively("tvCategories"), TreeView)
If Not(IsNothing(tv)) AndAlso Not(IsNothing(tv.SelectedNode)) AndAlso _
Not(IsNothing(tv.SelectedNode.Value)) Then
wc.iAND(ProductsTable.ProductID, _
BaseFilter.ComparisonOperator.EqualsTo, _
tv.SelectedNode.Value)
Return wc
End If

' Otherwise return the where clause specified by the generated function.
Return MyBase.CreateWhereClause()
End Function 

Build and run the application to see tree view and the selected product on the right.


Step 9: (Optional) To reformat the Product Panel to align with the bottom of the TreeView simply cut and paste the two columns containg the SupplierIDLabel and field value to ReorderLevelLabel and field value as shown below.



And paste the controls under the Discontinued Label as shown below.



The final result will be a nicely formatted page with the TreeView and Products Record Panel.

Attached Images:
Click image for larger version - Name: TreeView.JPG, Views: 925, Size: 21.56 KB   Click image for larger version - Name: TreeView1.JPG, Views: 920, Size: 55.79 KB   Click image for larger version - Name: TreeView10.JPG, Views: 879, Size: 31.74 KB   Click image for larger version - Name: TreeView2.JPG, Views: 915, Size: 54.08 KB   Click image for larger version - Name: TreeView3.JPG, Views: 911, Size: 43.27 KB   Click image for larger version - Name: TreeView4.JPG, Views: 901, Size: 30.48 KB   Click image for larger version - Name: TreeView5.JPG, Views: 891, Size: 96.37 KB   Click image for larger version - Name: TreeView6.JPG, Views: 893, Size: 100.09 KB   Click image for larger version - Name: TreeView7.JPG, Views: 889, Size: 34.90 KB   Click image for larger version - Name: TreeView8.JPG, Views: 884, Size: 47.73 KB   Click image for larger version - Name: TreeView9.JPG, Views: 884, Size: 59.99 KB  


Attached Files:
doc Using_Tree_View.doc (379.00 KB, 109 views)

Thursday, April 21, 2011

How do you open a Popup from Oracle Forms

Using   web.javascript_eval_expr Statement

Example
                  web.javascript_eval_expr('window.showModelessDialog("help/SomeFile.html", "''", "dialogLeft:120px; dialogTop:260px; dialogWidth:800px; dialogHeight:455px; scroll-y:on; resizable:yes; status:no; help:no;");');
                  web.javascript_eval_expr('window.showModalDialog("help/SomeFile.html", "''", "dialogLeft:120px; dialogTop:260px; dialogWidth:800px; dialogHeight:455px; scroll-y:on; resizable:yes; status:no; help:no;");');             
                  web.javascript_eval_expr('window.open("help/SomeFile.html", "WinHelp", "location=no,menubar=no,left=220,top=260,width=800,height=455,toolbar=no,resizable=yes,scrollbars=yes");');

Integrating Oracle Forms 11g with JavaScript

Integrating Oracle Forms 11g with JavaScript


<Do not delete this text because it is a placeholder for the generated list of "main" topics when run in a browser>

Purpose

In this tutorial you set up and run an application that demonstrates Oracle Forms and JavaScript integration. The application uses Cascading Style Sheets (CSS) and a popular third party JavaScript library called jQuery.

Time to Complete

Approximately 30 minutes

Overview

The demonstration application integrates simple forms with a dHTML menu system that controls both the form and other dHTML objects appearing in the same browser window, such as a date picker and an image viewer. With this application you can demonstrate how Oracle Forms can call out to these browser widgets and call into the Oracle Forms Runtime via the Forms client applet.
The resulting application, with the menu and the date picker visible, looks like this:

Prerequisites

Before starting this tutorial, you should:
1. Have access to or have installed Oracle Forms version 11.1.1. You may use either Release 1 (R1) or Patch Set 1 (PS1), although the directory structures of these releases are somewhat different.

2. Have access to an Oracle database with the scott schema ( EMP and DEPT ) installed.
Warning: For security reasons, it may not be advisable to install the sample schemas into a production database. If you do install them, you should use passwords other than default passwords, although default passwords are used in the examples shown in tutorials provided by Oracle. When you are finished using the sample schemas for tutorial and demo purposes, you may drop them by issuing the following SQL*Plus command for each installed sample schema:
DROP USER CASCADE;
If you are using the sample schemas for the first time, you may find that you must unlock the schema user, and then grant CONNECT and RESOURCE roles to it. You can do this by using Oracle Enterprise Manager, which is part of Oracle.
Alternatively, you can issue the following SQL*Plus commands:
ALTER USER scott IDENTIFIED BY tiger ACCOUNT UNLOCK;
GRANT CONNECT, RESOURCE to scott;



3. Use Internet Explorer 7 or later. Version 6 of IE and any version of Firefox does not allow the application's JavaScript menu (a Milonic menu) to show in front of the Forms applet. However, the Milonic menu can be used with frames; see Resources.

Definitions

This demonstration uses a few Web standards that may be unfamiliar to Forms developers, such as:
  • dHTML: This acronym stands for dynamic HTML, an umbrella term for using client side languages like JavaScript, or server side languages like PHP and Java Server Pages, to create dynamic (as opposed to static) Web pages.

  • JavaScript: JavaScript has emerged as the dominant client side scripting language. Like PL/SQL, it is pointerless, but while PL/SQL is compiled to byte code, JavaScript is interpreted. It is imperative, weakly typed, and object oriented (but prototype based rather than class based), and its functions are first-class entities.

  • CSS: CSS stands for Cascading Style Sheets, which you can use to define the style of a Web site. You use it in the demonstration application to make the applet appear to be a part of the larger browser page.

  • DOM: An understanding of the DOM, or Document Object Model, is crucial in order to be effective when programming in JavaScript. The DOM is the model by which HTML objects are represented and manipulated.
See Resources for more information on these topics.

Setting Up the Application

Use following steps to setup the application:
1. From the expanded zip file, copy the .fmb files ( found in the JSInteg\Solutions\jsdemo folder) to a directory of your choice.


2 . Open the modules in Forms Builder, connect as scott, and compile the forms to the same directory as the .fmb files.


3. Copy the js.html file to the Forms configuration directory. The path for this directory is defferent depending on the release of JDeveloper that you are using:
  • For Release 1 (R1):
    \user_projects\domains\\servers\ WLS_FORMS\stage\formsapp\11.1.1\formsapp\config
  • For Patch Set 1 (PS1):
    \config\FormsComponent\forms\server\
  •  

 
4. Copy these directories: img, JSCal2, lightbox05, menu , and transEffects

and these files: jquery.js, jsdemo.css, jsdemo.html, and jsdemo.js

to the following directory:
  • For Release 1 (R1):
    \user_projects\domains\\servers\
    WLS_FORMS\stage\formsapp\11.1.1\formsapp\formsweb.war\


  • For Patch Set 1 (PS1):
    \user_projects\domains\\servers\
    WLS_FORMS\tmp\_WL_user\formsapp_11.1.1\e18uoi\war\

     

5. Edit jsdemo.html and modify the hostname and port values according to your installation. These values are located toward the end of the file.

6. Create a new configuration section called [javascript] in the formsweb.cfg file. In 11g, you could do this by using Enterprise Manager, but you can also edit the file manually. For the sake of simplicity, this tutorial shows manually editing the file.
Add some parameters to the configuration section. The defaults for height and width are a little too big for the application. The new color scheme called swan looks good for this application, so set colorscheme and lookAndFeel to accomplish that. Make sure that JavaScript support is turned on, and also name the applet.
Use the following settings:
[javascript]
width=440
height=300
splashScreen=no
background=no
colorScheme=swan
lookAndFeel=oracle
logo=no
applet_name=forms_applet
enableJavascriptEvent=true
baseHTMLjpi=js.html


7 . Edit the default.env file: Add the directory where you saved the forms to the environment variable FORMS_PATH.
For example, append to FORMS_PATH:
    ;D:\Data\MyForms\JSIntegDemo


Running the Application

To demonstrate the features of the application, perform the following steps:
1. Run the application by issuing the following URL in your browser, substituting the value for :
http://:9001/forms/jsdemo.html You do not need to invoke the servlet URL (frmservlet) because the iframe in the application calls the Forms servlet.

 
2. Use the self-explanatory JavaScript menu to navigate to submenus and perform different operations.
For example, invoke the Query menu, enter an employee name, such as WARD, in the search box, and click Go.

The form displays the record for the specified employee.


3. To redisplay all the records, select Query > Execute from the menu.

Navigate to the hiredate field in Employees form. Use the up- and down- arrow keys to scroll between records, noticing the corresponding change in the date picker calendar.

4. Select a date from the calendar, which updates the hiredate of the employee record.

5 . Select View > Departments to navigate to the Department form.

6 . Scroll up and down to navigate between different departments, noticing the changes in various images.

Summary

In this tutorial, you learned to set up and run the sample application that demonstrates JavaScript integration in Oracle Forms 11g.
The application hides the Forms standard menu and replaces its functionality with a JavaScript-based menu system. This menu is connected to the Forms applet. The application implements Javascript-based UI widgets as extensions to the Forms widget set, seamlessly making use of these widgets.

Resources

Forms 11g new features: Javascript-API / WHEN-CUSTOM-JAVASCRIPT-EVENT

Forms 11g allows the direct communication between the generic java-applet in the browser and the world around. The new JavaScript-API implements this functionality.

In Forms 11g we have a new trigger, system-variables and built-ins for the communication with the JavaScript-API.

The trigger WHEN-CUSTOM-JAVASCRIPT-EVENT fires each time, when JavaScript raises an event to forms. In the trigger we can use the payload which is stored in two system-variables. system.javascript_event_name and :system.javascript_event_value.


Informations, which were transfered from HTML to Forms, can be easily used:


In this little example we transfer in the payload the event-name "NewForm" and in the event-value the name of a form. The data is transfered from the internet-page in this way::
< INPUT id="outside_field_id">
< SCRIPT>
  function set_field (field_id, myValue) {
    document.getElementById(field_id).value=myValue;
  };
  function clickEvent1()
  {
    document.forms_applet.raiseEvent("NewForm", "payload");
  }
< /SCRIPT>
< INPUT id="button1" type="button" onClick="void clickEvent1();" value="NewForm">

Internally the method raiseEvent of the class forms_applet is used. The applet's name has to be assigned in the formsweb.cfg to the parameter applet_name.
applet_name=forms_applet

Forms can communicate bi-directional with the HTML. Therefore we can use the new built-ins web.javascript_eval_expr and web.javascript_eval_function.
web.javascript_eval_expr
    ('document.getElementById("outside_field_id").value="' ||
     :control.ti_inside || '";');
  web.javascript_eval_expr 
    ('set_field("outside_field_id", "' || :control.ti_inside
     || '")');
  :control.ti_get_value := web.javascript_eval_function
    ('document.etElementById("outside_field_id").value');

This example-code fills in the HTML-page a field named "outside_field_id" through the built-in web.javascript_eval_expr. Two techniques can be used. Direct Assignment or the call of a javascript-function, e.g. „set_field“.
You can read field through web.javascript_eval_function. The returnvalue is the value of the corresponding field in the HTML, in this case "outside_field_id".

This is another example of how important the new features in Forms 11g are. Now it's possible for forms to communicate with the world outside the browser's applet!

Monday, September 6, 2010

How To Write a Winning Proposal

How To Write a Winning Proposal