How to Customize a Web Application

In this example you will customize an existing generated Web application by changing the type of input needed to supply the correct data.

Problem:

In the original generated Web application there is a procedure that uses an account number as an input and displays the details of the appropriate account. Currently, a customer must type in the account number for the procedure input. You will modify the Web application to provide a drop-down list of possible account numbers from which the customer can select the correct number. Available account numbers, by last name, are provided by another procedure in the generated Web application. (For this example we are only concerned with account numbers associated with last names that begin with the letter W.)

 

Solution:

When the GetAccountDetail procedure is selected, the SearchByName procedure automatically runs, gathers data, and populates the drop-down list.


Let's begin:

  1. Deploy the CICSAcctsDemo model from the Design Tool to the local server.

  2. Using the default values, generate a .NET Web application named CustomizationExample.

  3. To customize the GetAccountDetail procedure Web page you will edit the three files that are generated in .NET for the procedure:
  4. Copy these three files from the generated Web application, <SystemDrive>\Inetpub\wwwroot\<ProjectName> to a directory of your choice, for example C:\MyPages, being careful to maintain the necessary file hierarchy. In this case, you will need a subdirectory named App_LocalResources.

  5. Rename the files:

  6. To link the newly named files, modify them in a text editor:

  7. Before you can customize the Web page, configure the Web application to use the new files:
    1. In Web Builder, right-click the CustomizationExample application, and click Properties.
    2. In the left pane, select .NET 2.0 Web Application, and click the Customization tab.
    3. Under Custom Content, click Browse and select the directory where you copied the generated files in Step 4.
    4. In the left pane, select the Procedures and Model Features.
    5. Select the Accounts/GetAccountDetail procedure and choose Custom for Display.
    6. Enter MyGetAccountDetail.aspx as the URL.
    7. Click OK to rebuild the Web application. This ensures that GetAccountDetail procedure link in the application will open the MyGetAccountDetail Web page.


  8. Replace the text box control in MyGetAccountDetail.aspx with a drop-down control.

    Replace:
    <asp:TextBox runat="server" CssClass="filter_required" ID="AcctNum_Filter" ToolTip="<%$ Resources:filter.AcctNum.description %>"/>
    with
    <asp:DropDownList CssClass="filter_required" ID="AcctNum_Filter" DataSource="<%# AccountNumbers%>" runat="server" ToolTip="<%$ Resources:filter.AcctNum.description %>" />

  9. To gather the account numbers and populate the drop-down control, modify the MyGetAccountDetail.aspx.cs class to run the NameSearchResults procedure:
protected void Page_Load(object sender, System.EventArgs e)
{            
  main = (CustomizationExampleSession)Session["main"];
  if(main == null)
  {
    main = new CustomizationExampleSession ();
    Session["main"] = main;
  }
  try
  { 
    // If the page was posted, build the inputs and/or filters and call the procedure
    if(this.IsPostBack)
    {  
      if(AcctNum_Filter.Text.Length > 0)
      {
        filters.AcctNum = int.Parse(AcctNum_Filter.Text);
      }
      DataSet1 = main.GetAccountDetail(filters);
      if(DataSet1.Tables[0].Rows.Count > 0)
      {
         dataset1.DataBind();
      }
      else 
      {
         resultsHeader = Resources.GlobalWebAppResources.procedure_no_results;                                                                                                                                                                         l     }
   }
   else 
   {
        //Run the NameSearchResults procedure to get the account numbers
        SearchByNameFilters nameFilter = new SearchByNameFilters();
        nameFilter.LastName = "W";
        DataSet1 = main.SearchByName(nameFilter);
        //load the data source for the drop down list control
        AccountNumbers = new ArrayList();
        for(int i = 0; i < DataSet1.Tables[0].Rows.Count; i++)
        {
          AccountNumbers.Add(DataSet1.Tables[0].Rows[i].ItemArray[0]);
        }
        AccountNumbers.Sort();
        //bind the data source to the control
        AcctNum_Filter.DataBind();
    }   
  }
  catch(FormatException fe)
  {
     // One of the inputs/filters was not the correct type (text vs numeric)
     // Display the inputs again with the error message
     isError = true;
     errorText = fe.Message;
  }
  catch(HostIntegratorModelDataException mde)
  {
     // One of the inputs/filters was rejected by the model (missing, out of range, invalid, etc)
     // Display the inputs again with the error message
     isError = true;
     if(mde.MessageList == null)
     {
        errorText = mde.Message;
     }
     else
     {
        errorText = (string)mde.MessageList[0];
     }
   }
   catch(HostIntegratorUserException ue)
   {
       // The procedure resulted in a User-defined error condition in the model
       // Display the inputs again with the error message
       isError = true;
       if(ue.MessageList == null)
     {
        errorText = ue.Message;
     }
     else
     {
        errorText = (string)ue.MessageList[0];
     }
   }
   catch(HostIntegratorException hie)
   {
       // The procedure resulted in a model runtime error
       // Redirect to an error page with the full error information
       Session["HostIntegratorException"] = hie;
       Response.Redirect("Errors.aspx");
   }
}
  1. Regenerate the Web application:
    1. In Web Builder, right-click the CustomizationExample application, and select Rebuild.
    2. Select Precompile ASP.NET Application as the starting point for the build.
    3. Click Build.


  2. Test the Web application:
    1. Click the GetAccountDetail procedure link in the Web application.
    2. The text box control previously used for entering account numbers is now a drop-down list, populated with account numbers.




Related Topics
Bullet How to Customize a Theme