Use pop-up to populate dynamic table

This tip shows you how to use a pop-up window to populate a dynamic table in an underlying form.

This tip shows you how to use a pop-up window to populate a dynamic table in an underlying form.

This process involves three primary Domino elements:

  1. A Web-enabled form that uses JavaScript to open another form (pop-up window) and pass a search string to display a subset of employee names from an HTML formatted view. This Web-enabled form contains a dynamic table to display multiple selections -- in this case it is some employee information.

  2. A view formatted with HTML and added to the row values to create a checkbox for each row entry. In HTML selecting a checkbox allows a single value to be returned, therefore multiple view columns are concatenated for each checkbox value with delimiters so it can be parsed into separate fields (dynamic table) in the underlying form. So this view does four things -- sorts the information, creates a checkbox for each row, concatenates several field values to be returned when the checkbox is selected and formats the information to be displayed in the pop-up window for each row and column.

  3. A form used as a pop-up window to display the HTML formatted view and allows the user to select entries from the view displayed as a table with borders for each row and column using a checkbox -- then uses JavaScript to parse the selected and concatenated values into the underlying form fields.

Code:

  1. Web-enabled input form elements:

    1. Image default hotspot properties:

      TYPE: URL
      VALUE: javascript:BusinessAreaLookup('Information Technology);
      FRAME:

    2. JavaScript function in the JS Header that is called from the default hotspot:
      //====================
      ====================
      //Employee Name lookup 
      for a business area or department 
      //======================
      ==================
      //Search by name view with
       checkboxes for multiple selection,
       this function 
      opens a form in the employee 
      //database and displays a list of 
      employees for a the selected business area -
       "Information Technology" in this case.
      
      function BusinessAreaLookup(busAreaCkd){ 
      view = "VMLPRBA"; 
      formname = "FMLPRBA"; 
      fieldname = "BusinessUnitName"; 
      var servname = document.forms[0].
      Server_Name.value;
      
      winURL = "http://" + servname + 
      "/Employee/empdata.nsf/" + view + "/" + 
      formname + "?SearchView&SearchOrder=4
      &Query=FIELD " + fieldname + " contains " 
      + busAreaCkd; 
       
      window.location = winURL; }
       

  2. Hidden formatted view named => (Search By NAME) with view alias VMLPRBA:

    1. In the View properties, "Treat view contents as HTML" is selected.

    2. The first three columns are hidden for sorting the employees by last name, first name and then middle initial.

    3. The next column begins the HTML table row formatting with this code and creates the checkbox for each row in the view:
      "[<TR><TD><input type=
      "checkbox" name="choice" value="" 
      

    4. The next several columns contain the concatenated values that are returned when the checkbox is selected. These columns are just individual field values in separate columns with a semicolon as delimiters so the data can be parsed out using JavaScript. These columns are automatically hidden as the values are all treated as part of the checkbox value to be returned:
      FIELDNAME + ";"
      

    5. The next column closes the checkbox value and contains the following HTML:
      ""></TD>]"
      

    6. The next several columns combine HTML with field values to display the employee information in table columns in the pop-up window. This is an example of the formula code in one of the columns:
      @If(Middle_Init = "";
            "<TD>" + @ProperCase(Fname + 
      " " + Lname) + "</TD>";
            "<TD>" + @ProperCase(Fname +
       " " +  Middle_Init + ". " + Lname) 
      + "</TD>")
      

    7. The last view column is the end table row tag in HTML:
      "</TR>"
      
  3. Form for pop-up window named => $$SearchTemplate for VMLPRBA | FMLPRBA:

    This form contains the JavaScript code that processes the choices selected, updates the fields in the underlying form and refreshes the underlying form in the browser to display the selected contents.

    1. Pass-Thru HTML can be used around the $$ViewBody field on the pop-up form to format the table. This method reduces the need to embed HTML into the view column headers which has limited space for HTML content. Just be sure to hide the column headers in the HTML formatted view because the column headers can be formatted by defining them as Pass-Thru HTML as shown below. The $$ViewBody field is placed just before the closing table tag. The first column labeled as # is where the checkbox appears. The second labeled as ID displays the employee's unique company employee ID. The third column labeled NAME is where the employee's name is displayed.
      <TABLE BORDER=1 
      ALIGN=CENTER CELLSPACING=0 
      CELLPADDING=3> 
      <TD width=20><DIV 
      ALIGN=center><B><FONT SIZE=2 
      FACE="Arial">#</FONT>
      </B></DIV></TD>
      <TD width=60><DIV ALIGN=center>
      <B><FONT SIZE=2 
      FACE="Arial">ID</FONT></B>
      </DIV></TD>
      <TD width=200><DIV ALIGN=
      center><B><FONT SIZE=2 
      FACE="Arial">NAME</FONT></B>
      </DIV></TD>$$ViewBody-
      field-goes-here</TABLE>
      

    2. JavaScript in the onClick of the ok hotspot button that determines if any checkboxes were selected and refreshes the underlying form:
      //Determine the item(s) that 
      is checked ********************************
      ChoiceList = document.forms[0].choice;
      ChoiceListLen = ChoiceList.length;         
       //Total number of items in the 
      array - zero based
      ChoiceCkd = ""; 
      
      //Split choices selected into an 
      array to access each element individually to 
      be parsed
      ChoiceArray = new Array( );
      NumSelected = 0;                                  
        //Indicates total number 
      of choices 
      selected
      listnum = 0;
      numels = opener.
      document.forms[0].listElements.value;
      listnum = (parseInt(numels) + 1);
      
      if (ChoiceListLen == null) {
       ChoiceCkd = ChoiceList.value;
        ProcessChoice(ChoiceCkd,listnum);
        NumSelected++
      } else {
        for (i =0; i < ChoiceListLen; i++) {       
         //Find which items are checked in the list
         if (ChoiceList[i].checked ) {   
                  NumSelected++;     
           ChoiceCkd = ChoiceList[i].value;         
         //Get the value of 
      the choice selected
           ProcessChoice(ChoiceCkd,listnum); 
            //JS Header function 
      to parse out the checkbox values
           listnum++;
         }  //end if
        }  //end for
       } //end if
      
      //determine if nothing was checked
      if (NumSelected == 0) {  //if1
            alert("Nothing was selected, 
      please try again or press No to canel!");
            return;
      }
      
      //refresh the underlying form
      if (document.forms[0].
      RefreshPageFlag.value == "Y") {
        document.forms[0].
      RefreshPageFlag.value = "N"
        window.opener.refreshPage('S');
      }
      

    3. JavaScript function in the JS Header that parses the checkbox values into the separate fields on the underlying form.
       function ProcessChoice
      (ChoiceCkd,listnum) {  
       mdoc = opener.document.forms[0];   
          //get 
      a handle on the undelying form
       ChoiceArray = ChoiceCkd.split(";");   
       //split the value into separate items
       ChoiceEmpid = ChoiceArray[0];     //get 
      the employee ID from the first position
      
       mdocEmpid = mdoc.empID.value;
       if (mdocEmpid == "") {   
       //Update form with first selection
       mdoc.empnum.value = "1";
       mdoc.empID.value = ChoiceArray[0];
       mdoc.empName.value = ChoiceArray[1];
       mdoc.empEmail.value = ChoiceArray[3];
       mdoc.busArea.value = ChoiceArray[6];
       mdoc.costCenter.value = ChoiceArray[5];
       mdoc.nonIT.value = "_";
       mdoc.IT.value =  "_"; 
       mdoc.Both.value =  "_"; 
       document.forms[0].
      RefreshPageFlag.value = "Y"
       } else {
        mdocIDArray = new Array( );
        mdocIDArray = mdocEmpid.split(";")
        num = 0;
        num++;
        dupFlag = "N";
        for(n in mdocIDArray) {  
             inputString = mdocIDArray[n]
             tempval = trim(inputString);
         if (tempval == ChoiceEmpid) {
          alert("DUPLICATE: << " + 
      ChoiceArray[1] 
      + " >> is already in the list!");
          dupFlag = "Y";
         } // end if 
        }  // end for
        if (dupFlag == "N") {
          tempval = mdoc.empnum.value;
         mdoc.empnum.value = tempval + 
      "r" + listnum;
          tempval = mdoc.empID.value;
         mdoc.empID.value = tempval +
       "r" + ChoiceArray[0];
          tempval = mdoc.empName.value;
         mdoc.empName.value =  tempval + 
      "r" + ChoiceArray[1];
          tempval = mdoc.empEmail.value;
         mdoc.empEmail.value =  tempval +
       "r" + ChoiceArray[3];
          tempval = mdoc.busArea.value;
         mdoc.busArea.value =  tempval +
       "r" + ChoiceArray[6];
          tempval = mdoc.costCenter.value;
         mdoc.costCenter.value =  tempval +
       "r" + ChoiceArray
      [5];
          tempval = mdoc.nonIT.value;
         mdoc.nonIT.value =  tempval
       + "r" + "_";
          tempval = mdoc.IT.value;
         mdoc.IT.value =  tempval 
      + "r" + "_";
          tempval = mdoc.Both.value;
         mdoc.Both.value =  tempval 
      + "r" + "_";
         document.forms[0].
      RefreshPageFlag.value = "Y"
        }  //end if
       }  // end if 
       return;
      }  // end function ProcessChoice
      
      
      function trim(inputString) {  
       // Removes leading and trailing
       spaces from the passed string. 
      Also removes
       // consecutive spaces and 
      replaces it with one space. If something 
      besides
       // a string is passed in (null, custom object, etc.) 
      then return the 
      input.
       if (typeof inputString != "string") { 
      return inputString; 
      }  //end if
       var retValue = inputString;
       var ch = retValue.substring(0, 1);
       while (ch == " ") { 
      // Check for spaces at the beginning of the string
        retValue = retValue.substring(1, retValue.length);
        ch = retValue.substring(0, 1);
       }
       ch = retValue.substring(retValue.length-1, 
      retValue.length);
       while (ch == " ") { 
      // Check for spaces at the end of the string
        retValue = retValue.substring
      (0, retValue.length-1);
        ch = retValue.substring
      (retValue.length-1, retValue.length);
       }
       while (retValue.indexOf(" ") != -1) { 
      // Note that there are two spaces 
      in the string - look for multiple spaces 
      within the string
        retValue = retValue.substring(0, 
      retValue.indexOf(" ")) + 
      retValue.substring(retValue.
      indexOf(" ")+1, retValue.length); 
      // Again, there are two spaces in 
      each of the strings
       }
       return retValue; // Return the 
      trimmed string back to the user
      } // End trim function
      

Do you have comments on this tip? Let us know.

This tip was submitted to the SearchDomino.com tip exchange by member Mike Grantham. Please let others know how useful it is via the rating scale below. Do you have a useful Notes/Domino tip or code to share? Submit it to our monthly tip contest and you could win a prize and a spot in our Hall of Fame.

This was first published in February 2005

Dig deeper on HTML for Lotus Notes Domino

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

SearchWinIT

Search400

  • iSeries tutorials

    Search400.com's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...

SearchEnterpriseLinux

SearchVirtualDataCentre.co.uk

Close