Mohammed Atef’s Technical blog

Reset ICM Case Information Widget default selected tab


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


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



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.


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

IBM Case Manager Custom search Widget


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


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


    • Drag it above case list widget as shown below


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


    • Configure in basket wires as shown below


    • Configure customer list widget as shown below


    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


    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


    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=""
       3: xmlns:iw=""
       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://</definition>
       8: <preview>
       9: endpoint://
      10: </preview>
      11: <icon>endpoint://</icon>
      12: <previewThumbnail>endpoint://</previewThumbnail>            <help>endpoint://{}bspaceWidgetHelpRootId/topic/</help>
      13: <shortDescription> <nls-string lang="en">HelloWorld</nls-string></shortDescription>        <metadata name=""></metadata>            <metadata name="">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 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="" xmlns:xsi="" xsi:schemaLocation=" BusinessSpaceRegistry.xsd ">    <tns:Endpoint>    <tns:id></tns:id>    <tns:type></tns:type>
       3:     <tns:version></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]’)
    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]’)
    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\}

    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.


    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


    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.


    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
       5: GO
       6: EXEC
       7: sp_configure 'xp_cmdshell', 1
       8: GO
      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


    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

    ICM Repeated DB Execute for any task steps


    In our real world we always found new needs that cannot done easily throw out-of-the-box tools. Currently I am using IBM Case Manager for delivering Automation solution, but I realized that our solution needs a custom database, during discussing with my technical colleagues, we came up with the following solution and now I am sharing this with you.

    Use case

    You are working in a new IBM Case Manager solution, and you have to log some case properties details in custom SQL Database for each and every step, you can do this regularly by calling stub step after each and every step, but this solution with complex your tasks design.
    I am going to share with you another solution to do same requirements with better and simple solution.


    Our solution is simply built on creating an automatic task (dbexec) that run with precondition based on case property value, this task actually used to run the DB Execute system step. Other task steps will set specific case property to trigger the dbexec task.


    Let go throw this solution in more details.

    Procedure 1: Create the solution, case and tasks

    1- Open Case Manager Builder from the browser, and login with valid user name and password.

    2- Create solution name loans, then create the following properties (Loan Name, tmpstepid) and create role named loan manager

    3- Create case named Loan DB Exec and modify the tmpstepid property to be hidden from properties, then add both properties to the case properties.

    4- Create new automatic tasks named Main Task , and another automatic tasks named dbexec but with condition and repeated as shown in the following pictures


    Procedure 2: Design tasks

    1- Open the main task designer and drag Role Lane then add three steps names (step1, step2, complete) to it.

    2- Assign the two case properties for each step, then draw the connectors between launch Step and other three steps as shown below


    3- Open dbexec designer and drag Role Lane then add step to it, after that add another stub step to the system Lane and draw connectors as follows


    Procedure 3: Prepare SQL table and procedure

    1- Here we are going to create the SQL table and stored procedure that needs to execute for each and every step in the Main Task2.

    2- Below SQL scripts shows how to create both of them:

       1: CREATE TABLE [dbo].[loans](
       2:     [stepid] [nchar](10) NULL,
       3:     [loanname] [nvarchar](50) NULL
       4: ) ON [PRIMARY]
       6: create PROCEDURE [dbo].[sp_addloan]
       7:         @loanname varchar(100) output
       8:     ,@stepid varchar(100) output    
       9: AS
      10: BEGIN
      11: insert into loans values(@loanname,@stepid)    
      12:     END
      13: GO

    Procedure 4: Modify the main task from Process Designer

    1- In Workplace XT, click Tools > Advanced tools > Process Designer.

    2- Click File > Solution > Edit > case_manager_design_object_store_name > IBM Case Manager > Solutions > Loans > Solution Definition

    3- Open the Main Task and Assign the tmpstepid property after or before execution for each step as follows


    3- task care you have to assign different value for each step to launch the DBexec task

    Procedure 5: Modify the DBexec from Process Designer

    1- Open the dbexec task in designer as shown in procedure 4, steps 1 & 2

    2- Configure the DBexecute step

    3- Select the Route between the Stub and Dummy step and modify it to be a conditional  Route the in the expression space enter the following line 1=2, as shown below:


    4- Yes you are right this condition will never happen and the task will ends after the Db execution.

    Procedure 6: Deploy and test the solution

    1- From Process Designer Check in the solution

    2- Open Case Manager Builder and deploy the solution

    3- Open Case Manager Client and create new case from Loan Db Exec

    4- Go throw step1, step2 and complete steps.

    5- Open the database and you will find three records in you custom table.


    In this post we have seen how to run repeated DB execute task for each step in other tasks. This solution may be used in other ways for different requirements for example you can use it to send email instead of executing DB. i hope that help.


    before ending this post i would like to thank Mr. ahmed Elwakeel my dear colleague who worked with me to implement this solution.

    March 1, 2013 Posted by | Uncategorized | , , , , , , , | 9 Comments

    Tips and tricks for IBM Case Manager V5.1.1


    After passing the initiation phase of developing and designing my first IBM case Manager project, i decided to share with you my experiences about this tools and give you some tips and trick about developing solutions using ICM.

    Tips & Tricks

    • Of course first tips comes to my mind here is to take care of using the Case Manager Builder “Reset Test Environment” button , because once you click it, it will remove deployed solutions and other data from the development target environment.
    • Using Case Manager Builder, Make sure you have determined all step responses before starting design the tasks because you can not delete these responses if you have used for connecting to other steps, you will face some errors saying this response is used.
    • If you need to edit or delete any response exists in tasks, after you have finished designing the task, you have to do this from Process designer.
    • Make sure you have clicked ok button after each and every action for creating step or connectors.
    • Also, make sure you Clicked the validate and save buttons every action in designing tasks steps.
    • If you used DB execute in any system step for Stub Step using SQL Stored Procedure, make sure that all parameters are output.
    • If you needs to set conditions in responses for your steps, you have to do that from Process Designer.
    • Make sure you did not register two Widgets with same ID on the Business Space, because this will raise an error in the Case Manager Client and clear all custom and built in Widgets from edit pages.
    • If you have widget wired to another one and you needs delete this widget , you have to delete the wires then the Widget.
    • If you need to assign properties created by Case Manager Builder you have to assign the variables with the following expression F_CaseFolder.[Propertyname], for example if you have property called loanname you have to set it as follows F_CaseFolder.LoanName=”loan1”
    • If you have Custom Validation of Task Step Data visit, you visit this link
    • If you need to Add IBM forms or FileNet EForm, please visit the following link
    • When you have custom page and you need to assign it for specific task step, you have to register this page to the solution from IBM Case Client then you can assign this page latter from Builder.
    • Use this JS line of code, DEFAULT_XHR_PREVENT_CACHE: true , to Disable Widget cashing.
    • To Customizing the IBM Case Manager Client to hide or show existing banner content visit this link .
    • To Change Manage role to search by username instead of Display name follow these step(open FileNet Enterprise Manager Administration Tool, right click then select properties, select directory configuration tab, then modify the AD, go to Users tab and finally update user display name attribute to samAccountName) .


    Actually this post not ended as i am still working in this project and i will update it as soon as i found something interesting to you, but can you share with me this activity and enrich this post with your comments about any new tips you noticed in working with ICM.

    February 16, 2013 Posted by | ECM, FileNet, IBM Case Manager | , , , , , | Leave a comment

    My first LightSwitch Application


    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


    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

    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 .

    – 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:


    – 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.


    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.



    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


    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 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="">

       2: <head>

       3:     <title></title>

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

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

       1: </script>

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


       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 && || (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 ( == "none" || =="") {

      29:               = "block";

      30:                        bindsub();

      31:                    } else { = "none"; }

      32:                } else {

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

      34:           = "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: = divLeft + "px";

      70: = divTop + "px";

      71: }

      72: function closepopup(txt){

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

      74: = "none";

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

      76: }



       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 web site from here

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

    Link Dynamic Data Entity item to customized web pages


    When we build ASP.NET applications that sit on top of a data store of some kind, there are always a set of common tasks that we need to provide a UI for. Just a few of these patterns are listed here:
    Entity Lists — Display a list of rows in a table.
    Detail Form — Displays the details of a single entity.
    Edit Form — Enables the user to edit the details of a single entity.
    Create — Adds a new entity to a list.
    Delete — Deletes an entity from a list.
    Navigation — Provides Search, Filter, Sort, and Paginate lists of entities.

    Problem definition

    sometimes we need to link one of entity list to another customized screens we have implemented before, so how we can do this task?


    Here we are going to link one of listed entities in web application entities list to another existing or customized page throw the binding event of Grid View of listed entities.

    so if we have assumed that the entity name called Site and the customized page called siteslist.aspx, we can write the following lines of codes to redirect to this customized page when user select Site entity from entities list

     1: protected void Menu1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
     2:         {
     3:             if(e.Row.RowIndex!=-1)
     4:             {
     5:                if (((System.Web.DynamicData.DynamicHyperLink)e.Row.Cells[0].Controls[1]).Text == "Site")
     6:                 {
     7:                     ((System.Web.DynamicData.DynamicHyperLink)e.Row.Cells[0].Controls[1]).NavigateUrl = Request.Url.ToString().Trim().ToLower().Replace("default.aspx","SitesList.aspx");
     8:                 }
     9:              }
     10:         }

    I think these few lines of code is very clear as shown above i have get the grid view row that has Site entity and replaced it’s NavigateUrl with the new siteslist.aspx page.

    Note, there is very important note that you should use customized screen like siteslist.aspx which note linked to master page if this page in the same web application else you can use any kind of web pages.

    I Hope that helped

    May 10, 2011 Posted by | .Net 2010 | , , , | 1 Comment

    Workflow Foundation 4.0 Web Service


    The new Workflow has introduced new project type called WCF Workflow Service Application that can be hosted in a web service, which provides an ideal way to expose workflow solutions to non-workflow clients such as web applications. A web service receives a request, performs some appropriate processing, and returns a response.

    Sample senario

    The new project we will create is a BookInventory module used for looks up the specified book and returns the status of each copy that the library owns.


    To start using the new WCF Workflow service open Visual Studio 2010 and select files ->New project and select WCF Workflow service Application from list of project templates available for Workflow as shown in the below picture


    You could name enter project name “WCFSampleWF”, once we have created the new project you will find new file added to your project called BookInventory.xamlx this file will contains the following (Sequence, Receive and Send) activities as shown in the below picture


    Now we are going to build the service contract Interface and it’s implementation class also we are going to build class that will hold the Book Info, to do that we are going to add new *.cs file named “BookInfo” that will contain the following implementation list of codes.

     1: using System;
     2: using System.Collections.Generic;
     3: using System.Runtime.Serialization;
     4: using System.ServiceModel;
     6: namespace BookInventory
     7: {
     8:     /*****************************************************/
     9:     // Define the service contract, IBookInventory
     10:     // which consists of a single method, LookupBook() 
     11:     /*****************************************************/
     12:     [ServiceContract]
     13:     public interface IBookInventory
     14:     {
     15:         [OperationContract]
     16:         BookInfoList LookupBook(BookSearch request);
     17:     }
     18:     /*****************************************************/
     19:     // Define the request message, BookSearch
     20:     /*****************************************************/
     21:     [MessageContract(IsWrapped = false)]
     22:     public class BookSearch
     23:     {
     24:         private String _ISBN;
     25:         private String _Title;
     26:         private String _Author;
     28:         public BookSearch()
     29:         {
     30:         }
     31:         public BookSearch(String title, String author, String isbn)
     32:         {
     33:             _Title = title;
     34:             _Author = author;
     35:             _ISBN = isbn;
     36:         }
     37:         #region Public Properties
     38:         [MessageBodyMember]
     39:         public String Title
     40:         {
     41:             get { return _Title; }
     42:             set { _Title = value; }
     43:         }
     44:         [MessageBodyMember]
     45:         public String Author
     46:         {
     47:             get { return _Author; }
     48:             set { _Author = value; }
     49:         }
     50:         [MessageBodyMember]
     51:         public String ISBN
     52:         {
     53:             get { return _ISBN; }
     54:             set { _ISBN = value; }
     55:         }
     56:         #endregion Public Properties
     57:     }
     58:     /*****************************************************/
     59:     // Define the BookInfo class
     60:     /*****************************************************/
     61:     [MessageContract(IsWrapped = false)]
     62:     public class BookInfo
     63:     {
     64:         private Guid _InventoryID;
     65:         private String _ISBN;
     66:         private String _Title;
     67:         private String _Author;
     68:         private String _Status;
     70:         public BookInfo()
     71:         {
     72:         }
     74:         public BookInfo(String title, String author, String isbn,
     75:             String status)
     76:         {
     77:             _Title = title;
     78:             _Author = author;
     79:             _ISBN = isbn;
     80:             _Status = status;
     81:             _InventoryID = Guid.NewGuid();
     82:         }
     83:         #region Public Properties
     84:         [MessageBodyMember]
     85:         public Guid InventoryID
     86:         {
     87:             get { return _InventoryID; }
     88:             set { _InventoryID = value; }
     89:         }
     91:         [MessageBodyMember]
     92:         public String Title
     93:         {
     94:             get { return _Title; }
     95:             set { _Title = value; }
     96:         }
     97:         [MessageBodyMember]
     98:         public String Author
     99:         {
     100:             get { return _Author; }
     101:             set { _Author = value; }
     102:         }
     103:         [MessageBodyMember]
     104:         public String ISBN
     105:         {
     106:             get { return _ISBN; }
     107:             set { _ISBN = value; }
     108:         }
     109:         [MessageBodyMember]
     110:         public String status
     111:         {
     112:             get { return _Status; }
     113:             set { _Status = value; }
     114:         }
     115:         #endregion Public Properties
     116:     }
     117:     /*****************************************************/
     118:     // Define the response message, BookInfoList, which
     119:     // is a list of BookInfo classes
     120:     /*****************************************************/
     121:     [MessageContract(IsWrapped = false)]
     122:     public class BookInfoList
     123:     {
     124:         private List<BookInfo> _BookList;
     126:         public BookInfoList()
     127:         {
     128:             _BookList = new List<BookInfo>();
     129:         }
     130:         [MessageBodyMember]
     131:         public List<BookInfo> BookList
     132:         {
     133:             get { return _BookList; }
     134:         }
     135:     }
     136: }

    The above code has the following classes and interface

    1- IBookInventory is The service contract Interface that contains a single method called LookupBook(). It is has one paramter BookSearch class that has various properties that can be used to find the desired book, such as Author and Title. It returns a BookInfoList class, which contains a collection of BookInfo classes.

    2- BookSearch is a class used for building the request that hold the Book Search criteria If you do not have experince about WCF service you should know that The MessageContract attribute is used on a class that defines the data types or contracts that will be added to a message header or body of your WCF service, and the class contains this attribute should have another attribute called MessageBodyMember for properties that will be used in the WCF request or response.

    3- BookInfo is a class that hold book info and you can notice that it has MessageContract and MessageBodyMember attributes which means it will be used be service request or response

    4- BookInfoList is a class Define the response message, BookInfoList, which is a list of BookInfo classes.

    Now we are going to Configure the Send and receive activities, so please follow these steps

    a- select the “ReceiveRequest” activity. In the Properties window, Enter the OperationName as LookupBook

    b- From the workflow designer, click the Variables control at the bottom left. You’ll notice that the template created a couple of variables for you. The handle variable is used to correlate the response with the same instance that sent the request. The data variable was set up as the data being passed in.

    Select the data variable and press the Delete key to remove it, Create two new variables.

    For the first one, enter the Name as search; for the Variable type, select Browse for Types, In the dialog that appears, expand the WFFAndWCF->BookInventory assembly and choose the BookSearch class.

    For the second variable, enter the Name as result. For the Variable type property, choose Browse for Types and then select the BookInfoList class

    c- On the workflow designer, the “ReceiveRequest” activity has a View message link for the Content property. Click it to display the dialog that is used to define the incoming message. The input can be defined in two ways: a message or a collection of parameters. For now, make sure that the Message radio button is selected.For the Message data property, enter search. It specifies that the incoming message should be stored in the search variable. For the Message type, select BookInventory.BookSearch.

    d- Select the “SendResponse” activity and click its View message link. Again, make sure that the Message radio button is selected. For the Message data property, enter result; for the Message type property, select the BookInfoList class.

    For the Message data property, enter search.

    Creating Custom activity for Looks up Book Status

    We will create a custom activity to perform the “lookup.” Actually, it will simply return

    some hard-coded data and to do that please follow these few steps

    a- From the Solution Explorer, right-click the WCFSampleWF project and choose Add -> New Item. In the Add New Item dialog, select the Code Activity template from the Workflow category. Enter the Name as “PerformLookup.cs”

    b- Enter the implementation of the PerformLookup activity, as shown in Listing below

     1: using System;
     2: using System.Collections.Generic;
     3: using System.Linq;
     4: using System.Text;
     5: using System.Activities;
     6: namespace BookInventory
     7: {
     9:     public sealed class PerformLookup : CodeActivity
     10:     {
     11:         public InArgument<BookSearch> Search { get; set; }
     12:         public OutArgument<BookInfoList> BookList { get; set; }
     13:         protected override void Execute(CodeActivityContext context)
     14:         {
     15:             string author = Search.Get(context).Author;
     16:             string title = Search.Get(context).Title;
     17:             string isbn = Search.Get(context).ISBN;
     18:             BookInfoList l = new BookInfoList();
     19:             l.BookList.Add(new BookInfo(title, author, isbn, "Available"));
     20:             l.BookList.Add(new BookInfo(title, author, isbn, "CheckedOut"));
     21:             l.BookList.Add(new BookInfo(title, author, isbn, "Missing"));
     22:             l.BookList.Add(new BookInfo(title, author, isbn, "Available"));
     23:             BookList.Set(context, l);
     24:         }
     25:     }
     26: }

    The above list is very clear it is creating two input/ouput arguments called search and booklist for using in send request and receive response from in the Workflow activities, then in the execute it is retrieving search criteria from the search argument and build collection of bookinfo and set booklist argument with the generated list of bookinfo if you did not understand how two build Custom Code activity please visit the following link WFF custom code activity.

    c- build the project and opened BookInventory.xamlx file you will notice that the custom PerformLookup activity is added in your Toolbox

    d- Drag a PerformLookup activity between the “Receive Request” and “Send Response” activities.

    e- Select the PerformLookup activity. In the Properties window, for the BookList property enter result;for the Search property, enter search.

    Testing the Service the new Visual Studio automatically starts the WCF Test Client. This is a very handy utility. It loads the web service and discovers the methods that are provided.all you need to press f5 and you find the below figure that shown the test client utility:


    As shown in the above figure the left pane contains the methods that are provided by the WCF service once you Double-click the LookupBook() method, the upper portion of the right pane will provide a place for you to enter the contents of the incoming message. Enter an author, ISBN number, and title; then click the Invoke button. You should see results similar to the ones shown bottom grid found in the same figure.

    Creating a Client Workflow

    Now we are going to build and client Workflow application that will use the created WCF application we have finished before, simply we can do that in few steps as shown below

    a- Right click into WCFSampleWF solution name and choose Add -> New Project. Select the Workflow Console Application template from installed templates related to workflow in the left pane of create new project window and for the project name, enter BookLookup

    b-From the Solution Explorer, right-click the BookLookup project and choose Add Service Reference and add the following url into address attribute http://localhost:49570/BookInventory.xamlx

    , press GO button and finally enter the name of namespace property as “BookEnventoryWCF”.

    c- Once you have built the solution you will find new activity added to your toolbar called LookupBook as shown in the below figure


    d- Drag that LookupBook activity to you Workflow

    e- create arguments that used by the LookupBook activities as show in the below figure


    Note that the BookList argument should be of type “BookLookupClientWF.BookEnventoryWCF.BookInfo[]”

    f- Set the LookupBook properties to the with the matches argument names

    g- Open the Program.cs file in the BookLookupClientWF project. add The implementation for this file as shown in Listing below

     1: using System;
     2: using System.Linq;
     3: using System.Activities;
     4: using System.Activities.Statements;
     5: using System.Collections.Generic;
     6: using BookLookupClientWF.BookEnventoryWCF;
     8: namespace BookLookupClientWF
     9: {
     11:     class Program
     12:     {
     13:         static void Main(string[] args)
     14:         {
     15:             // create dictionary with input arguments for the workflow
     16:             IDictionary<string, object> input = new Dictionary<string, object>
     17:             {
     18:             { "Author" , "Margaret Mitchell" },
     19:             { "Title" , "Gone with the Wind" },
     20:             { "ISBN" , "1234567890123" }
     21:             };
     22:             // execute the workflow
     23:             IDictionary<string, object> output =
     24:             WorkflowInvoker.Invoke(new Workflow1(), input);
     25:             BookInfo[] l = output["BookList"] as BookInfo[];
     26:             if (l != null)
     27:             {
     28:                 foreach (BookInfo i in l)
     29:                 {
     30:                     Console.WriteLine("{0}: {1}, {2}",
     31:                     i.Title, i.status, i.InventoryID);
     32:                 }
     33:             }
     34:             else
     35:                 Console.WriteLine("No items were found");
     36:             Console.WriteLine("Press ENTER to exit");
     37:             Console.ReadLine();
     38:         }
     39:     }
     40: }

    i-  run the application you will find the following message printed in the console screen

    Gone with the Wind: Available, 58ab51cd-2796-4b32-a7be-21170f1e922b

    Gone with the Wind: CheckedOut, 64406a94-a6ef-45a7-8373-066f5f991134

    Gone with the Wind: Missing, a37186ec-faa7-4e6b-8226-484f17075998

    Gone with the Wind: Available, e34d39e5-aafa-4fd3-8000-664809b7e98d

    Press ENTER to exit

    You can download the complete source code from here

    Back to other Workflow Foundation 4.0  posts

    I hope that helped

    May 10, 2011 Posted by | .Net 2010 | , , , | 2 Comments