Mohammed Atef’s Technical blog

Reset ICM Case Information Widget default selected tab

Introduction

Here, I am going to share with you how to change the default selected tab in Case Information Widget throw the Case Search or Case Details pages.

SelectTab event

First, you have to understand events required to modify selected tab in the Case Information Widget, Which is a Handled events named “Select tab” and requires payload of type SelectTab.

For more information about the payload type you can visit this link

Reset selected tab in Case Search page

I will assume that we are going to set Documents as default selected tab in Case Information Widget, so please follow below steps to do that:

  1. Drag Script Adapter into hidden area
  2. Select Script Adapter, Edit Settings
  3. Add the following line of code before the return command
  4.  payload.selectTabName="Documents";  
  5. Click Ok and Apply to Script Adapter editing settings
  6. Now configure script adapter wires as shown below

image

Reset selected tab in Case details page

Actually there is now big difference between resetting selected tab in case Information between Case Search and Case Details pages, except the configuration of Script Adapter wires.

So, to achieve this, we will follow all steps shown above except step no 6 and we will configure the Script Adapter wire as shown below

image

Conclusion

in the above post i tried to tie all information found in different locations in IBM links or forums to give you a complete solution, hope that helped.

Advertisements

June 9, 2013 Posted by | Developement, ECM, FileNet, IBM Case Manager | , , , , , , , , , , | Leave a comment

IBM Case Manager Custom search Widget

Introduction

In this post I am going to share with you how to build your custom search widget to override and customize you case manager built in search widget.

use case

Here, we will implement custom search for customer management project.
actually, user will have list of checkboxes for customers, then he can select customers and click find customers and he will see the result into CaseList Widget, also he can see customer information and related documents in the Case Information Widget.

Create customer management solution

Actually, I will create new solution named customer management to have a complete tutorial about custom search widget, and since creating project is not our target for this post, so I will quickly write done steps to build this project.

  1. Login to case manager build, then select add solution
  2. Set solution name : customer management and the prefix cust
  3. Add two string properties named as follow (customer name, customer no)
  4. Create new role named admin role
  5. Create new case named relation management
  6. Select case properties from left menu > add properties > Existing > select all > ok all
  7. Go to views and add both customer name and no to all views ( case summery, case search , properties)
  8. Create new take named task1
  9. Design the new task follows

image

Build custom search project

let’s start building our custom search project, actually this project will have the following files

(web.xml, CustomSearch.js, CustomSearch.xml) , for more information about this files visit this link

Review CustomSearch.xml

Now, We’re going to take a look at CustomSearch.xml file

  • here we will see bulk of xml elements about events as shown below
   1: <iw:eventDescription id="receiveWorkItem" payloadType="WorkItem"    description="Event to receive work item" lang="en" />        
   2:     <iw:event id="receiveEvent" eventDescName="receiveWorkItem" handled="true" onEvent="onreceiveWorkItem" />
   3:     <iw:event id="Send Payload" published="true" eventDescName="SendPayload"/>
   4:     <iw:eventDescription id="SendPayload" payloadType="CaseSearch" description="search for projects" lang="en"/>

  • if you’re familiar with xml, you can understand this, here we have two eventdecription and other two events, you may notice that each event has a reference to the event description. i need just to focus in very important attribute here payload type which used to determine the recipient or sender event type.
  • in our post we are interested with sender event type ‘CaseSearch’, this payload is responsible to descript the case search object that will sent to CaseList widget and in same xml will and immediately after above code snippet, you will find casesearch payload definition as shown below
   1: <iw:payloadDef name="CaseSearch">
   2:     <iw:payloadDef name="CaseType" type="string" defaultValue="" description=""/>
   3:     <iw:payloadDef name="ObjectStore" type="string" defaultValue="" description=""/>
   4:     <iw:payloadDef name="SortingProperties" type="any" defaultValue=""  description=""/>
   5:     <iw:payloadDef name="SystemProperties" type="any" defaultValue="" description=""/>
   6:     <iw:payloadDef name="SummaryProperties" type="any" defaultValue="" description=""/>
   7:     <iw:payloadDef name="SearchProperties" type="any" defaultValue=""  description=""/>
   8:     <iw:payloadDef name="QuerySQL" type="string" defaultValue=""   description=""/>
   9: </iw:payloadDef>

  • the above payload definition has different sections to decrepit name and type of each object in our casesearch payload, it shows details about (casetype, objectstore, sortingproerties, systemproperties, summaryproperties, searchproperties and querysql)
  • finally we will see below mentioned code this line
    • <iw:resource src="CustomSearch.js"/> , which is used to reference to our JavaScript file resource that will deal with above events.
Review CustomSearch.js

here i am not going deeply because most of you are familiar with JavaScript, i will focus only in JavaScript functions and the JavaScript code that sends cases

arch payload to the event.

let’s see now the list of functions in this file

  1. RenderCustomersLst : it is used to render customer list found in json data object as checkboxes.
  2. SelectedProjLST : it is used to find out selected customers to send it to caselist for search
  3. Servletcall : actually it is not used but i build it, for future use if you have servlet that retrieve list of customers in the mention json format.
  4. onreceiveWorkItem : this is event implementation when our custom widget receive event of type workitem.

finally, lets see this line of code

   1: this.iContext.iEvents.fireEvent("Send Payload", "CaseSearch", payload);
  • it is using icontext to get our custom widget context and then fire event of type casesearch
  • above this line of code you will see a JavaScript object named data, which used to build the casesearch payload, here i have static json object that descript (casetype, objectstore, sortingproerties, systemproperties, summaryproperties, searchproperties and querysql) objects in the payload, later we will see how to get this static information.
  • but there is another dynamic value that i use it to modify the search query based on selected customers from the widget.

Now our project is ready, so you can go a head and export it as war then deploy and register it to Case Client, for more information about this topic visit this link .

Duplicate Cases Page

since we finished all development effort let’s move now to Case Client and do some customization.

first we have to create new page to use our new custom search widget there,so please follow below steps to do this.

  1. Manage Spaces > Customers Management > Actions (for cases) > Duplicate
  2. Actions (for cop of cases) > setting
  3. Rename it to be > Custom Search

Modify Custom search page

now we are going to modify our new page to use the new custom search widget, and this task has two phases, first to find our the casesearch payload to extract basic information about (casetype, objectstore, sortingproerties, systemproperties, summaryproperties, searchproperties and querysql) as mentioned above and then modify same page to finalize the custom search.

Prepare the search case payload

we can get the casesearch payload by following the below steps:

  1. Click Edit Page link
  2. Add script adapter to the page
  3. Wire script adapter as follows

    a. Add incoming wire to Search Widget > select search cases event name

    b. Add outgoing wire to case list > select search cases event name

  4. Use the built in search widget and apply search shown belowimage 
  5. Once result shown in case list, open the script adapter and take copy of its payload.
  6. Below list of json script should be found in payload object
  7.    1: {"CaseType":"","ObjectStore":"DTargetOS",
       2: "SortingProperties":[{"symbolicName":"cmis:lastModificationDate","type":"datetime","displayName":"Date Modified"},{"symbolicName":"cmis:lastModifiedBy","type":"string","displayName":"Modified By"}]
       3: ,"SystemProperties":[{"symbolicName":"p8ext:ClassDisplayName","type":"string","displayName":"Case Type"},{"symbolicName":"cmis:lastModifiedBy","type":"string","displayName":"Modified By"},{"symbolicName":"CmAcmCaseState","type":"string","displayName":"Case State"},{"symbolicName":"cmis:lastModificationDate","type":"datetime","displayName":"Date Modified"}]
       4: ,"SearchProperties":[{"symbolicName":"CUST_customername","displayName":"customer name","type":"string","orderable":true}],"SummaryProperties":[{"symbolicName":"CmAcmCaseIdentifier","displayName":"Case Identifier","type":"string","orderable":true},{"symbolicName":"CUST_customername","displayName":"customer name","type":"string","orderable":true},{"symbolicName":"CUST_customerno","displayName":"customer no","type":"string","orderable":true}],
       5: "QuerySQL":"SELECT cmis:objectId, cmis:objectTypeId, cmis:lastModifiedBy, CmAcmCaseState, cmis:lastModificationDate, CmAcmCaseIdentifier, CUST_customername, CUST_customerno FROM CmAcmCaseFolder WHERE CmAcmParentSolution = 'ido_40C02E31-7631-4C2E-9EB6-1E0D4676507F:idt_616EA2CB-2F81-4AE7-8E9E-A787A0B224AF:idx_A992C31D-31D8-41EE-8E65-4DC64608357D' AND CmAcmCaseState > 1 
       6: AND (CUST_customername LIKE 'cust%') "}

    Add customer list widget
    • Now we are going to delete the script adapter widget and before that make sure you have cleared all wire linked to it.
    • Then we will add our new custom widget by following below steps

                a. Click edit page link

                b. Select customer list widget as shown below

    image

    • Drag it above case list widget as shown below

    image

    • Drag the in basket widget to the hidden area beside the command widget as shown below

    image

    • Configure in basket wires as shown below

    image

    • Configure customer list widget as shown below

    image 

    Testing the widget

    • eventually we finished all tasks related to development, deployment, customization, wiring and our custom search widget is ready now for testing
    • i will assume that you have entered two customers using Case client with the following details

      1- customer name : customer 1    , customer number : 111

      2- customer name : customer 2    , customer number : 2

    • Click the refresh button into customer list widget
    • Then check customer 1 and customer 2
    • Click find customers , select customer 1
    • Now you should have result as shown below
    • image

    Conclusion

    since we have ended this post let’s recap activities we went throw, we learned in this post customizing built in widget, configurations, and building new solutions and customizing pages and finally wiring widget with each others.

    Download source code

    you can find out the project war file and all other resources related to this post here , hope that helped.

    May 31, 2013 Posted by | Developement, ECM, FileNet, IBM Case Manager, XML,XSL,XSLT,DHTML,HML,CSS | , , , , , , , , , , , , , , | Leave a comment

    Build and register a IBM Case Manager custom Widget

    Introduction

    As a user interface developer for IBM Case Manager, you need to customize Case Manager Client by creating your custom Widgets. Here I am going to share with you basics for developing, deploying and registering Custom Widgets.
    Our use case for this post is creating custom widget to print hello world message.

    Application structure

    we know that each application should have known structure, Below table shows the application files structure.

    File or folder name Description
    HelloWorld Web project name and folder
    HelloWorld.xml Widget definition file
    Web.xml Configuration file

    Create a web project

    First, we have to create new project using Eclipse, so please follow this procedures to create a new web project

    1- Open Eclipse, Click File > New > Dynamic web project

    2- Follow the wizard to create project, but do not forget to set project name HelloWorld and to tick Generate web.xml deployment descriptor check box.

    3- Open Project Explorer pane, expand the HelloWorld node and expand the WebContent > WEB-INF folder, then Open the web.

    4- Add the following entry to include the BasicWidget.xml to the welcome file:
    <welcome-file> HelloWorld.xml</welcome-file>       , then save the file.
    5- Add new file with the following names HelloWorld.xml

    Modify Widget Definition file

    • Open the HellowWrold.xml file and add the following lines of codes, then save the file.
       1: <?xml version="1.0" encoding="UTF-8" ?>
       2: <iw:iwidget id="HelloWorld" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       3: xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget"
       4: supportedModes="view edit" iScope=" HelloWorldScope">
       5: <iw:content mode="view">
       6: <![CDATA[ <h1>Hello World</h1> ]]>
       7: </iw:content>
       8: </iw:iwidget>

    • Above code is very clear but we need to highlight some attributes here
      • supportedModes: this attribute used to determine if users can view or edit the widget.
      • iScope: The iScope is a Dojo wrapper class for the Custom widget
      • iw:content: it is content area for the edit or view mode in your Widget.

    Create Catalog file

    • Create new xml file name it catalog_HelloWorld.xml and add the following list of code to it then save.
       1: <?xml version="1.0" encoding="UTF-8"?>
       2: <catalog id="Demo"> <resource-type>Catalog</resource-type>
       3: <category name="Demo">
       4:     <title> <nls-string lang="en">HelloWorld</nls-string></title>
       5:     <description> <nls-string lang="en">HelloWorld</nls-string>    </description>    
       6:     <entry id="iWidget.widgets.HelloWorld" unique-name="iWidget.widgets.HelloWorld">                <title> <nls-string lang="en">HelloWorld</nls-string> </title>
       7:         <description> <nls-string lang="en">HelloWorld</nls-string> </description>                <definition>endpoint://com.ibm.im.HelloWorldRootId/HelloWorld.xml</definition>
       8: <preview>
       9: endpoint://com.ibm.im.HelloWorldRootId/HelloWorld/image/thumbnails/viewer_preview.gif
      10: </preview>
      11: <icon>endpoint://com.ibm.im.HelloWorldRootId/HelloWorld/image/viewer_18.gif</icon>
      12: <previewThumbnail>endpoint://com.ibm.im.HelloWorldRootId/HelloWorld/image/thumbnails/viewer_thumb.gif</previewThumbnail>            <help>endpoint://{com.ibm.bspace}bspaceWidgetHelpRootId/topic/com.ibm.p8.widgetsref.doc/viewer_widget.htm</help>
      13: <shortDescription> <nls-string lang="en">HelloWorld</nls-string></shortDescription>        <metadata name="com.ibm.bspace.version">1.0.0.0</metadata>            <metadata name="com.ibm.bspace.owner">International Business Machines Corp.</metadata>
      14: </entry></category></catalog>

    • now let’s talk a look at this file
      • entry ID: is the widget id for the business space and it should be unique
      • category name: used to add this widget to an exist category or and new category for the new widget if not exist.
      • Other attributes used for determine widget title, description, icons, images.

    Create End point file

    • It is the last file, we need to build end point file, actually it is very short.so please create new xml file and name it HelloWorldEndPoint.xml and add the following lines of code there.
       1: <?xml version="1.0" encoding="UTF-8"?>
       2: <tns:BusinessSpaceRegistry xmlns:tns="http://com.ibm.bspace/BusinessSpaceRegistry" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://com.ibm.bspace/BusinessSpaceRegistry BusinessSpaceRegistry.xsd ">    <tns:Endpoint>    <tns:id>com.ibm.im.HelloWorldRootId</tns:id>    <tns:type>com.ibm.im.HelloWorldRootId</tns:type>
       3:     <tns:version>1.0.0.0</tns:version>
       4:     <tns:url>/HelloWorld/</tns:url>
       5:     <tns:description>Location of Hello World</tns:description>
       6:   </tns:Endpoint>    </tns:BusinessSpaceRegistry>

    Deploy and register the Widget

    We have finished all development effort and we are going forward to deploy and register the new widget to case manager client.

    However, we have can follow two options to do this, I will share with both of them now

    • First option: export project as war and register the catalog and endpoint xml files
    • Second option: export project as ear and zip it with the catalog and endpoint xml files
    Export project as war and register the catalog and endpoint files

    Here we are going to export the HelloWorld project as war file, let’s see procedures to do this

    1. Click File > export > war file
    2. select war file path for exporting and then finish
    3. Go to websphere and deploy the war file and keep the web application name HelloWorld
    4. Register the catalog file by following the below steps
      1. Open windows command and go to the web sphere bin folder
      2. Run the below commands
        1. wsadmin -user user1 -password pwd1 -lang jython
        2. AdminTask.updateBusinessSpaceWidgets(‘[-nodeName node1 -serverName server1

          -catalogs C:\HellowWolrd\catalog_ HellowWolrd.xml]’)
        3. AdminConfig.save()
    5. Register the End point file by following the below steps
      1. Open windows command and go to the web sphere bin folder
      2. Run the below commands
        1. wsadmin -user user1 -password pwd1 -lang jython
        2. AdminTask.updateBusinessSpaceWidgets(‘[-nodeName node1 -serverName server1 –endpoints C:\HellowWolrd\HellowWolrdEndPoint.xml]’)
        3. AdminConfig.save()
    Export project as ear and zip it with catalog and endpoint files

    Here we are going to export our project as ear file and without deploying it to Websphere, we will create one package and with couple of command lines we will deploy and register our widget.

    Let’s see how it goes here:

    1. 1- Open Eclipse and create new Enterprise application project
    2. 2- Select HelloWorld from Java EE module dependencies, then click finish
    3. 3- Click File > Export EAR , set the ear file name helloworld
    4. 4- Create folder named HelloWorld and copy the following files to it (HelloWorld.ear, catalog_HelloWorld.xml, HelloWorldEndpoints.xml)
    5. Zip the HelloWorld folder
    6. Open windows command and go to the web sphere bin folder
    7. Run the following commands
      1. wsadmin -user user1 -password pwd1 -lang jython
      2. AdminTask installBusinessSpaceWidgets {-serverName server1 -nodeName node1 -widgets C:\HellowWolrd\ HellowWolrd.zip}

    Testing Widget

    Eventually, we have finished developing, deploying and registering the Hello World widget now you can open any page in your case client and click Edit page link then drag the hello world widget there.

    Conclusion

    In this post I tried to share with you how to build and deploy IBM case manager widget and also to register it in two different ways, hope that helped.

    Now you can download all resources related to this post from here .

    May 31, 2013 Posted by | Developement, ECM, FileNet, IBM Case Manager, XML,XSL,XSLT,DHTML,HML,CSS | , , , , , , , , , , , , , | 8 Comments

    Running windows command shell using xp_cmdshell

    Introduction

    In this post i am going to share with you how to use xp_cmdshell stored procedure for running windows command shell.

    xp_cmdshell is system stored procedure that used to run Windows command shell and passes in a string for execution. Any output is returned as rows of text.

    Synatx

    xp_cmdshell { ‘command_string’ } [ , no_output ]

    where command_string Is the string that contains a command to be passed to the operating system. command_string is varchar(8000) or nvarchar(4000) and no_output Is an optional parameter, specifying that no output should be returned to the client.

    Enable XP_cmdshell

    If you tried to run this stored procedure and you have error says, access denied, you have to enable xp_cmdshell using below SQL script.

       1: EXEC
       2: sp_configure 'show advanced options', 1
       3: GO
       4: RECONFIGURE
       5: GO
       6: EXEC
       7: sp_configure 'xp_cmdshell', 1
       8: GO
       9: RECONFIGURE
      10: GO

    Executing vb application without parameter

    If you have a .net windows console application named helloworld.exe and it requires to run it from SQL you can use below list of SQL script

       1: declare @cmd varchar(500)
       2: select @param1=rolename,@param2=solutionname from roles where id in
       3: set @cmd='cmd /C "C:\helloworld.exe'
       4: exec xp_cmdshell  @cmd

    Executing vb application with two parameters

    otherwise, if you have an exe requires two parameters to run it, you can use below SQL Script.

       1: declare @cmd varchar(500)
       2: declare @param1 varchar(50)
       3: declare @param2 varchar(50)
       4: select @param1='param1',@param2='param2'
       5: set @cmd='cmd /C "C:\helloworld.exe '+@param1+' '+@param2+'"'
       6: exec xp_cmdshell  @cmd

    Conclusion

    above post we saw how to use xp_cmdshell with different modes of needs, hope it is helped.

    May 30, 2013 Posted by | .Net 2010, C#,VB.Net, Developement | , , , , | Leave a comment

    My first LightSwitch Application

    Introduction

    Microsoft® Visual Studio® LightSwitch™ 2011 is a new streamlined development environment for designing data-centric business applications and helps you to build data-centric applications quickly, through visual means.
    LightSwitch business applications are multi-tiered, featuring a client application and a combination of LINQ, WCF RIA Services and the Entity Framework to implement the application services tier.

    Benefits of using LightSwitch?

    There are many benefits of using LightSwitch as shown in the below list

    • You can create an application with just few clicks and no code or coding only in the data models or substantial code within all parts of the application.
    • Based on permission, LightSwitch support distinct audiences end-users (View & Edit Data), administrative (maintain certain master data) and Super-users (granted access to most or all of the data and functionality) .
    • Support built-in Business Types include like (Email, PhoneNumber, money,..etc), and partners can create new Business Types.
    • Enable Debug mode, and allows the screen to be edited interactively while the application is running.
    • Enable adding custom business rules to any field in the screen.
    • You can create custom controls and embed sophisticated behaviors there.
    • LightSwitch produces desktop applications or pulls down and executed implicitly by navigating to a URL.
    • Enables you to deploy your LightSwitch on Cloud and Azure as simple as running a wizard.

    Start building the App

    Now let’s start building our application, I am going to list every thing in details starting from opening Visual studio 2012 until running the application. we will go throw the following steps.

    Step 1 : Creating the Application

    Creating new LightSwitch application is very simple , if you’re familiar with any old version of Visual Studio as follows:

    Open VS 2012 –> New project –> Select LightSwitch from project Template list –> Select LightSwitch application (c#)

    , and finally we will write the project name LighSwitchsubscriptionApp –> press Ok

    Step 2 : Creating & Defining Data tables and relationships

    The start point to LightSwitch application is creating Data Table and you can do this task through four ways:

    1- Click the Create new table link in the start up project page “Start with data” which called [you project name] Designer

    2- Go to Visual Studio menu bar Select Project –> Add table

    3- Right click Project Name in solution explorer then select Add table

    4- Connect to an exist data source published on (Database, Sharepoint, OData Services, WCF RIA Service) as mentioned in step 2 and 3, but select Add data source instead of Add Table option.

    – Now I will create Subscriber table as shown in below figure

    image

    Let’s take a look at the above picture, it contains Useremail field with Data type Email, this is one of the new features of LightSwitch , that you can create new field with new Business Types like (Email, Money, Phone, web address).

    – In addition, you can add New filed of static choice list by selecting choicelist link from right side properties of any string field, for example, we will create choicelist for Gender(male, female).

    – Usually any registration module needs dropdown list of country field, but using LightSwitch makes the difference for you, we are not going to create new control and write code to bind this control from database, we are going to create new table of countries and link it to our Subscriber table and link these two tables…Wowooooo.., by following the below steps:

    1- Create new table called Country with one columns(contryDesc).
    2- Then click Relationship… button in the toolbar.
    3- Finally build the relation between the subscriber and country tables as shown below
    image

    Step 3 : Building Screens & Running the Application

    Now, we are getting ready to Build the screens corresponding to Entities, simply you click the Screen button from the toolbar on the subscriber & Countries Table Design forms, this will open Add ‘New screen’ Dialog then select the highlighted option showing in figure below, and finally press Ok button .
    image

    – Repeat same process above for country entity.
    – Finally, we can run the application by pressing f5 key, we will see screen as shown in figure below:

    image

    – Now, let’s go a head and review above screen as listed below:

    • Box 1 ,represent two tabs for all entity screens we have created .
    • Box2 ,represent all actions available for this gridview Add, Delete, Edit, Search .
    • Box 3, represent the Dialog screen that opens when you select Add button.
    • Box 4, Showing Required fields marked as Bold.
    • Box 5, Showing Country list that I have entered in country entity.
    • Box 6, includes main actions for this screen ( Save , Refresh).

    – There is another very important feature here, as you can see on right bottom of the screen link [Design Screen], this link allows you to edit the screen Design on the execution mode, if and only if, you have run the application in Debug mode.

    – Eventually, we did not finish all features of LightSwitch, but we have other features that I will list them soon in other posts,
    I was just trying to show the power of using Lightswitch without writing any line of code.

     

    Conclusion
    In this post, I have wrap up main points about Lightswtich, and I have went throw an example of subscription Form using this amazing Microsoft tool, and finally we have build the application and used it with Zero Lines of code.

    you can download sample, I have created and referred to it in this post from here.

     

    References

    Microsoft Virtual Academy (Building Business Apps with Visual Studio Lightswitch)

     

     

     

     

     

     

     

     

    September 4, 2012 Posted by | VS 2012 | , | Leave a comment

    Complete JS & Jquery popup Div solution

    Introduction

    Actually, I have write this post to collect list of common features for Popup div in one solution.

    Main Features

    • Popup Div
    • Dynamic content using asp .net handler (.ashx)
    • Items click on the Div
    • Close or hide div after clicking outside it.

    Brief about the Sample

    This is very light sample that shows list of countries retrieved from Database.
    once user has select any country from the Div, it shows a message box confirming the selected country.
    wherever user click outside this div, it is going to hidden mode.

    List of files used

    • testmulticolumnmenu.htm : this file has all html codes that draw the Div and JS codes that bind the div, handle selected item, and finally handle clicking outside the div.
    • BindcmbHandler.ashx : this is asp.net handler to retrieve countries list from database .
    • web.config : this file has common configuration for the web application but it has only connection string to our test Database .
    • jquery-ui.min.js, jquery.min.js : this is common Jquery files.

    Sample of source Code

     

     

       1: <html xmlns="http://www.w3.org/1999/xhtml">

       2: <head>

       3:     <title></title>

       4:    <script src="jquery.min.js" type="text/javascript"></script>
       1:

       2:    <script src="jquery-ui.min.js" type="text/javascript">

       1: </script>

       2:    <script type="text/javascript">

       3:

       4:        function bindsub() {

       5:            var objJs;

       6:            $.ajax({

       7:                type: "POST",

       8:                url: "BindcmbHandler.ashx?sub=1",

       9:                async: false,

      10:                cache: false,

      11:                success: function (_result) {

      12:                    objJs = _result.toString();

      13:                },

      14:                error: function (_msg) { }

      15:            });

      16:            var dropdownMenuDiv = document.getElementById("container3");

      17:            dropdownMenuDiv.innerHTML = objJs;

      18:        }

      19:        document.onclick = check;

      20:        function check(e) {

      21:            var target = (e && e.target) || (event && event.srcElement);

      22:            var dropdownMenuDiv = document.getElementById("container3");

      23:            var dropdownMenu = document.getElementById("lnk");

      24:            if (!checkParent(target, "popup1")) {

      25:                // click NOT on the menu

      26:                if (checkParent(target, "lnk")) {

      27:                    // click on the link

      28:                    if (dropdownMenuDiv.style.display == "none" || dropdownMenuDiv.style.display =="") {

      29:                        dropdownMenuDiv.style.display = "block";

      30:                        bindsub();

      31:                    } else { dropdownMenuDiv.style.display = "none"; }

      32:                } else {

      33:                    // click both outside link and outside menu, hide menu

      34:                    dropdownMenuDiv.style.display = "none";

      35:                }

      36:            }

      37:        }

      38:        function checkParent(t, id) {

      39:            while (t.parentNode) {

      40:                if (t == document.getElementById(id)) { return true; }

      41:                t = t.parentNode;

      42:            }

      43:            return false;

      44:        }

      45:          function openpopup(id) {

      46:       //Calculate Page width and height 

      47:       var pageWidth = window.innerWidth;

      48:       var pageHeight = window.innerHeight;

      49:       if (typeof pageWidth != "number"){

      50:       if (document.compatMode == "CSS1Compat"){

      51:             pageWidth = document.documentElement.clientWidth;

      52:             pageHeight = document.documentElement.clientHeight;

      53:       } else {

      54:             pageWidth = document.body.clientWidth;

      55:             pageHeight = document.body.clientHeight;

      56:       }

      57:       }

      58:       //Make the background div tag visible...           

      59:       var divobj = document.getElementById(id);

      60:       if (navigator.appName=="Microsoft Internet Explorer")

      61:       computedStyle = divobj.currentStyle;

      62:       else computedStyle = document.defaultView.getComputedStyle(divobj, null);

      63:       //Get Div width and height from StyleSheet 

      64:       var divWidth = computedStyle.width.replace('px', '');

      65:       var divHeight = computedStyle.height.replace('px', '');

      66:       var divLeft = (pageWidth - divWidth) / 2;

      67:       var divTop = (pageHeight - divHeight) / 2;

      68:       //Set Left and top coordinates for the div tag 

      69:       divobj.style.left = divLeft + "px";

      70:       divobj.style.top = divTop + "px";

      71: }

      72: function closepopup(txt){

      73:     var divobj = document.getElementById('container3');

      74:     divobj.style.display = "none";

      75:     alert('You have select :'+txt+' Country');

      76: }

      77:

    </script>

       5:     <style type="text/css">

       6: .popup {

       7:       background-color: white;

       8:       height: 500px; width: 800px;

       9:       border: 1px solid #d3d3d3;

      10:       position: absolute; display: none;

      11:       font-family: Verdana, Geneva, sans-serif;

      12:       font-size: small; text-align: justify;

      13:       padding: 5px; overflow: auto;

      14:       z-index: 1050;

      15: }

      16: </style>

      17: </head>

      18: <body>

      19: <a href="#" onclick="openpopup('container3')" id="lnk">Open Popup Div #1</a>

      20: <div id="container3" class="popup">

      21: alsd;asdkas

      22: </div>

      23: </body>

      24: </html>

    Finally you can Download all source code and complete asp.net web site from here

    September 4, 2012 Posted by | XML,XSL,XSLT,DHTML,HML,CSS | Leave a comment

    Activate ActiveX control using Javascript

    Introduction

              Today I am going to talk about common issue most of developer faces when they are trying to use an ActiveX control in his web page, and they want user to use the control without click it twice.

    Problem

                    When web developer use an ActiveX control in his web page, users of this web page should click twice on the ActiveX control first click to activate the ActiveX control and second time to use the control.

    Solution

                    Solving the above issue is very simple just follow the below steps:

    1.  Download and Add this Javascript file to your web application
    2.  Add the following line before the end body tag in your web</body>
      <script type=”text/javascript” src=”virtual path of added JS file in step1″/>

    Note, I have read many articles for fixing this problem but most of them not working and need to write Javascript codes but this article only was working, so I have wrote this post to give you the best solution I have found after long time of search.

    I hope That Helped.

    January 20, 2011 Posted by | Asp.net | , , | 2 Comments

    Passing MS Sales Specialist

    Hi ,

    Today I have passed Microsoft Certification sales specialist for levels 50 and 100 .

    Really I have gained huge amount of knowledge, so that I recommend to every software engineers or sales or presales or MS application architectures to study this training.

    The below image has all tracks I have studied and passed its assessment

    Licencecert

    Each training contains the following Knowledge recourses (handouts, explanatory presentations with audio, and assessment).

    So now, I am going to list all training module and introduction for each one

    Module Introduction
    Microsoft Products This module lead you to understand the Microsoft product set and know what type of application a product is, and understand the fundamentals of the product functionality.
    Microsoft Licensing This module lead you to understand the fundamental knowledge of both Microsoft’s licensing programs and the licensing models used to license Microsoft software
    Windows Client, Windows Server, and Microsoft Office Licensing This module lead you to understand the basics of licensing the Windows client, Windows Server, and Microsoft Office
    Infrastructure Servers Licensing This module lead you to  understand the fundamental licensing knowledge of key Microsoft infrastructure servers
    Application Servers Licensing This module lead you to  understand the fundamental principles of licensing key application servers
    Security and Management Servers Licensing This module lead you to  understand the Microsoft management and security solution products
    Selling Volume Licensing to SMBs This module lead you to  understand the fundamental knowledge of the Microsoft Volume Licensing programs aimed at small and medium businesses.
    Selling Software Assurance to SMBs This module lead you to  understand the fundamental knowledge required to successfully position Software Assurance to small and medium businesses
    Selling Volume Licensing to LORGs This module lead you to  understand fundamental knowledge of the Microsoft Volume Licensing programs aimed at large organizations

    Hurry up and study this training.

    December 14, 2010 Posted by | Developement | | Leave a comment

    How to work around the access denied cross-domain frame issue in ASP.NET Ajax 1.0 AutoComplete Extender

    Introduction
    It is common issue for using Asp.net Ajax 1.0 autocompelete in Iframe throw Cross domain. I am not going to explain solution as you can find it here.

    Download

    But to help you i have uploaded MicrosoftAjax.js,MicrosoftAjax.debug.js and AjaxControlToolkit.dll after applying updates required as mentioned at link above.

    So have fun and download these files from here.

    March 22, 2010 Posted by | Asp.net | , , , | Leave a comment

    Check and uncheck all checkboxes in GirdView without any server side code

    Introduction

    I was searching for JavaScript method that check or uncheck all checkboxes in GridView using check box in header. actually i have find more of solution but no one can be generic or must write code in server side in Gridview_databound event. i have wrote this article to introduce new solution generic for any normal GridView.

    Idea

    My idea here is getting all html controls from type input and check if the control type is checkbox or not then update checked value depending on Boolean value send to method.

    Understand Code

    kindly find Javascript code for this issue below

       1: function CheckAllDataGridCheckBoxes(checkVal,id)
       2:  {     
       3:     var gvid=GetGridViewID(id);
       4:     var checkboxx = document.getElementsByTagName("input");
       5:     for (i = 0; i < checkboxx.length; i++) {
       6:         if (checkboxx(i).type == "checkbox" && checkboxx(i).id.indexOf(gvid)!=-1 ) {
       7:             checkboxx(i).checked = checkVal;
       8:         }
       9:     }
      10: }
      11: //used to get grid view id from chkall check box id
      12: function GetGridViewID(chkallid)
      13: {     
      14:     var underscorindex=chkallid.lastIndexOf("_");
      15:     var gvname=chkallid.substring(0,underscorindex-1);
      16:     underscorindex=gvname.lastIndexOf("_");
      17:     gvname=gvname.substring(0,underscorindex-1);
      18:     return   gvname;
      19: }

    Parameters

    checkVal:is Boolean hold true or false comes from checked value of checkbox found in GridView header

    id:is id for check box found in GridView header.

    How it is working?

    I think any Javascript developer can understand the above code but i need to explain why i have used GetGridViewID method, acually i found Javascript method like CheckAllDataGridCheckBoxes but it have one issue, it is checking all check boxes found in your form that why i am using GetGridViewID method.

    GetGridViewID this method is doing the following

    1- Any checkbox under gridview id is following this pattern GridViewClientID_ctrl(0…n)_CheckBoxName

    so in line 14 and 15 i get last index of _ character and substring id to this index it mean i have now  GridViewClientID_ctrl(0…n) in gvname

    2-line 16,17 get the next last index of _ charchter and substring to this index it means i have now GridViewClientID in gvname so now i have the clientID for GridView.

    How to use

    To use this JavaScript method write the following in onClick event for CheckBox found in grid view header.

    onClick="javascript:CheckAllDataGridCheckBoxes(this.checked,this.id)"

    I hope this helped

    October 7, 2009 Posted by | Asp.net | , , | Leave a comment