[CLOSED] Text box to populate a List box

I have a unique situation I would like to hear ideas on.

I am looking to create a text box a user can type an item number into, click an ADD button which will add that input into a list box, then click a submit button to run a report with all the values entered into a WHERE clause of a fex.

I'm curious to see if i'm alone on this because this is fundamental for us since our users know item numbers more than item descriptions.

The above needs to include a clear all and/or a clear single entry button.
And for the cake topping, possibly validate against the item file to see if the value entered is accurate.

I got some help at the user conference but i haven't been able to excecute. As a warning, I am Java Script deficient.

This message has been edited. Last edited by: Kerry,

version 8202M
Reporting Server on
Windows Server using DB2 Connect to access data from iseries.

Posts: 78 | Registered: December 29, 2009

Waz

Expert

posted

Hide Post

I would suggest to have your text box and the selection list, and enter your values in the text box separated by commas or pipes, etc.

This way you can check the & variable from the text box and decide whether to use those values or the ones from the selection list, or both.

Splitting up a variable into multiple variables has been asked many times.

This way you don't need to know js, just FOCUS and DM code

You can go the rest of the way and have an ADd button, but this is time consuming, and perhaps just entering them, and hitting submit would be easiest.

Waz...

Prod:	WebFOCUS 7.6.10/8.1.04	Upgrade:	WebFOCUS 8.2.07	OS:	Linux	Outputs:	HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

Posts: 6347 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006

Ignored post by Waz posted

Show Post

Dave

Master

posted

Hide Post

edit1 = your inputbox
listbox1 = your listbox
button1 = your "add" button.

Select the button
Add an "onclick" event.
And add this code:

listbox1.add(new Option(edit1.value, edit1.value))

Should end up looking like this:

//Begin function button1_onclick
function button1_onclick(ctrl) {
listbox1.add(new Option(edit1.value, edit1.value)) 
}

tested on IE only.

_____________________
WF: 8.0.0.9 > going 8.2.0.5

Posts: 668 | Location: Veghel, The Netherlands | Registered: February 16, 2010

Ignored post by Dave posted

Show Post

Tony A

Expert

posted

Hide Post

To expand on what Waz suggests, try this, from my library of samples. Just copy and paste the entire code into a single focexec and run.

Note, that it does require that you have the sample files installed - e.g. IBISAMP folder in ibi/apps.

-HTMLFORM BEGIN
<html>
<head>
<title>Multi Variable Input Sample</title>
<script type="text/javascript">
function runReport() {
  var Countries = document.getElementById("Countries").innerHTML;
  var FxToRun = "APP PREPENDPATH IBISAMP%0D%0ATABLE FILE CAR BY COUNTRY WHERE COUNTRY IN ('"+Countries.replace(/;/g,"','")+"')%0D%0AEND";
  document.getElementById("frmReport").src="http://localhost:8080/ibi_apps/WFServlet?IBIF_adhocfex="+FxToRun;
}
</script>
</head>
<body style="background-color:#c0e5ff;">
 <table border="0" width="100%" height="100%">
  <tr width="100%" height="10%">
   <td width="5%"></td>
   <td colspan="2" align="center" style="font size:24; color:blue; font-weight:bold;">Sample HTML page to accept Multiple User Inputs in a single textarea tag.</td>
   <td width="5%"></td>
  </tr>
  <tr width="100%" height="90%">
   <td width="5%"></td>
   <td width="20%">
    <table border="0" width="100%" height="60%">
     <tr valign="top">
      <td valign="top">
       Enter Countries to be used, seperated by a semicolon<br />
       <textarea id="Countries" name="Countries" width="95%" rows="15">
ENGLAND;
FRANCE;
W GERMANY
       </textarea>
      </td>
      <td width="5%"></td>
     </tr>
     <tr valign="bottom">
      <td>
       <input type="button" value="Run Report" onclick=runReport(); />
      </td>
      <td width="5%"></td>
     </tr>
    </table>
   </td>
   <td width="70%" height="100%">
    <iframe id="frmReport" width="100%" height="100%" border="0" frameborder="0">
      <p>Your browser does not support iFrames</p>
    </iframe
   </td>
   <td width="5%"></td>
  </tr>
 </table>
</body>
</html>
-HTMLFORM END

In FOCUS since 1986	WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2
	WebFOCUS App Studio 8.2.06 standalone on Windows 10

Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004

Ignored post by Tony A posted

Show Post

Anmol

Gold member

posted

Hide Post

Hi Joe,
Here is complete example of the provided scenario, you need to make a use of Javascript..

HTML Code

 
<!-- Generated by Report Layout Painter -->
<HTML>
<HEAD>
<SCRIPT id=IBI_OptionsScript type=text/javascript>
var rltVersion = "714";
var cgipath = "cgipath";
var ibirls = "ibirls2";
var multidrill = "multidrill";
var mntFormValidate = "mntFormValidate";
var dyncalendar = "dyncalendar";
var olap="olap";
var olappanebase="olappanebase";
var ibixmltree="ibixmltree";
var ibilangtrans="ibilangtrans";
var olapdrill="olapdrill";
var ibiOptions = new Array(cgipath,ibirls,mntFormValidate,ibilangtrans,dyncalendar,olap,olappanebase,olapdrill,multidrill);
</SCRIPT>

<SCRIPT id=IBI_nls src="/ibi_html/javaassist/nls.js" type=text/javascript></SCRIPT>

<SCRIPT id=IBI_ibigbl src="/ibi_html/javaassist/ibi/html/js/ibigbl.js" type=text/javascript></SCRIPT>

<SCRIPT id=IBI_ibigblloadCss type=text/javascript>
ibigblloadCss(null);</SCRIPT>

<SCRIPT id=IBI_RelCallBack type=text/javascript>function AdjustChildrenPosition(){
}
</SCRIPT>
<TITLE>HtmlPage
</TITLE>
<SCRIPT id=clientEventHandlersJS type=text/javascript>
function window_onload() {
UpdateData();
}

function add_button_onclick(ctrl) {
 var text_box_value =document.f1.text_box.value;
 var list_box = document.f1.list_box;
 var myOption = document.createElement("Option");
 myOption.text = document.f1.text_box.value ;//Textboxs value
 myOption.value = document.f1.text_box.value
 list_box.add(myOption);
}

function Submit_button_OnClick(ctrl) {
OnExecute(ctrl)
}

function reset1_onclick(ctrl) {
document.f1.list_box.value ='';
document.f1.reset();
}
</SCRIPT>

<SCRIPT for=window eventname="onload">window.onload = function() { window_onload(); }</SCRIPT>
</HEAD>
<BODY style="OVERFLOW: auto">
<FORM name=f1>
<INPUT id=text_box style="Z-INDEX: 1; LEFT: 240px; WIDTH: 210px; POSITION: absolute; TOP: 80px" tabIndex=1 name=edit1>
<INPUT language=javascript id=add_button style="Z-INDEX: 2; LEFT: 480px; WIDTH: 110px; POSITION: absolute; TOP: 80px; HEIGHT: 30px" onclick=add_button_onclick(this) tabIndex=2 type=button value=Add name=button1>
<SELECT id=list_box style="Z-INDEX: 3; LEFT: 240px; WIDTH: 310px; POSITION: absolute; TOP: 160px; HEIGHT: 70px" tabIndex=3 size=3 name=COUNTRY_NAME datafieldtype="CHAR" addalloption="0" accept="0" operation="NONE" datatype="0" datafield displayfield datasource>
</SELECT>
<INPUT language=javascript id=Submit_button style="Z-INDEX: 4; LEFT: 200px; WIDTH: 220px; POSITION: absolute; TOP: 310px; HEIGHT: 60px" onclick=Submit_button_OnClick(this) tabIndex=4 type=button value=Submit name=button2 requests_list="0"> 
<SPAN id=text1 style="FONT-WEIGHT: bold; Z-INDEX: 5; LEFT: 20px; WIDTH: 190px; FONT-FAMILY: Palatino Linotype; POSITION: absolute; TOP: 80px; HEIGHT: 22px; TEXT-ALIGN: right" tabIndex=5>Enter a Value :-
</SPAN>
<SPAN id=text2 style="FONT-WEIGHT: bold; Z-INDEX: 5; LEFT: 20px; WIDTH: 190px; FONT-FAMILY: Palatino Linotype; POSITION: absolute; TOP: 170px; HEIGHT: 30px; TEXT-ALIGN: right" tabIndex=6>Your Added Items are :-
</SPAN>
<INPUT language=javascript id=reset1 style="Z-INDEX: 6; LEFT: 450px; WIDTH: 190px; POSITION: absolute; TOP: 310px; HEIGHT: 60px" onclick=reset1_onclick(this) tabIndex=7 type=reset value=Reset name=reset1>
</FORM>
<INPUT id=ibiapp_app style="LEFT: -100px; POSITION: absolute; TOP: -100px" type=hidden value=a471380_itaac name=ibiapp_app>
<xml id=ibi_requests>
<requests>

<request requestid="0" sourcetype="typeFex" targettype="1" targetname="_blank" ibif_ex="test_car.fex" ibic_server="EDASERVE" ibiapp_app="&application_name">

<variables>

<variable field="COUNTRY_NAME" file="car.mas" desc="COUNTRY_NAME" datatype="0" operation="" default="ENGLAND" name="COUNTRY_NAME" accept="0" type="default" select="0" controltype="7">

</variable>

</variables>

</request>
</requests>
</xml>
</BODY>
</HTML>

Fex file Code

  
-* File test_car.fex
-SET &ECHO ='ALL';
-DEFAULT &COUNTRY_NAME='ENGLAND';

-TYPE &COUNTRY_NAME

TABLE FILE CAR
PRINT
     SEATS
     DEALER_COST
     RETAIL_COST
     HEIGHT
  COUNTRY
WHERE COUNTRY EQ '&COUNTRY_NAME'
END

please let us know.... if this helps out in any way.....

WebFocus7.6.2, WebFocus 7.1.1,Windows
HTML, PDF and Excel

Posts: 71 | Registered: June 30, 2009

Ignored post by Anmol posted

Show Post

Joe Beydoun

Gold member

posted

Hide Post

Thanks everyone for your responses. I did a delimiter fix for the time being and still playing with Java Script to see other options.

I used a '+' for a delimiter and made the text area small enough to where that takes it to a different line. The only disadvantages are that i can't limit the number of characters in a text area only a text box,
and what would be great is if gettok recognizes a carriage return as a delimiter.

version 8202M
Reporting Server on
Windows Server using DB2 Connect to access data from iseries.

Posts: 78 | Registered: December 29, 2009

Ignored post by Joe Beydoun posted

Show Post

Tony A

Expert

posted

Hide Post

quote:
what would be great is if gettok recognizes a carriage return as a delimiter

Oh, but it does .....

-SET &Parts = 'Part1' || HEXBYT(13,'A1') || 'Part2' || HEXBYT(13,'A1') || 'Part3' || HEXBYT(13,'A1') || 'Part4';

-SET &Part1 = GETTOK(&Parts, &Parts.LENGTH, 1, HEXBYT(13,'A1'), 10, 'A10');
-SET &Part2 = GETTOK(&Parts, &Parts.LENGTH, 2, HEXBYT(13,'A1'), 10, 'A10');
-SET &Part3 = GETTOK(&Parts, &Parts.LENGTH, 3, HEXBYT(13,'A1'), 10, 'A10');
-SET &Part4 = GETTOK(&Parts, &Parts.LENGTH, 4, HEXBYT(13,'A1'), 10, 'A10');

-? &Part

In FOCUS since 1986	WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2
	WebFOCUS App Studio 8.2.06 standalone on Windows 10

Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004

Ignored post by Tony A posted

Show Post

Joe Beydoun

Gold member

posted

Hide Post

Tony, this functionality would be heavenly for me, but it didn't work, what am i doing wrong?
I have the launch page setup with a text area, I typed a bunch of numbers separated by a carriage return but the GetTOK command did not recognize it. Here is my code:

-*---------------------------------------------------------------
-*ADD ABILITY TO ENTER UP TO 8 VENDOR NUMBERS
-DEFAULT &VNDN = '';
-SET &DL = HEXBYT(13,'A1');
-SET &VNDN = &VNDN | &DL ;
-SET &VNDN1 = GETTOK(&VNDN,&VNDN.LENGTH,1,&DL,10,'A10');
-SET &VNDN2 = GETTOK(&VNDN,&VNDN.LENGTH,2,&DL,10,'A10');
-SET &VNDN3 = GETTOK(&VNDN,&VNDN.LENGTH,3,&DL,10,'A10');
-SET &VNDN4 = GETTOK(&VNDN,&VNDN.LENGTH,4,&DL,10,'A10');
-SET &VNDN5 = GETTOK(&VNDN,&VNDN.LENGTH,5,&DL,10,'A10');
-SET &VNDN6 = GETTOK(&VNDN,&VNDN.LENGTH,6,&DL,10,'A10');
-SET &VNDN7 = GETTOK(&VNDN,&VNDN.LENGTH,7,&DL,10,'A10');
-SET &VNDN8 = GETTOK(&VNDN,&VNDN.LENGTH,8,&DL,10,'A10');
-SET &VNDN1 = IF &VNDN1 EQ '' THEN 'FOC_NONE' ELSE RJUST(10,&VNDN1 | ' ','A10');
-SET &VNDN2 = RJUST(10,&VNDN2 | ' ','A10');
-SET &VNDN3 = RJUST(10,&VNDN3 | ' ','A10');
-SET &VNDN4 = RJUST(10,&VNDN4 | ' ','A10');
-SET &VNDN5 = RJUST(10,&VNDN5 | ' ','A10');
-SET &VNDN6 = RJUST(10,&VNDN6 | ' ','A10');
-SET &VNDN7 = RJUST(10,&VNDN7 | ' ','A10');
-SET &VNDN8 = RJUST(10,&VNDN8 | ' ','A10');
-*---------------------------------------------------------------

version 8202M
Reporting Server on
Windows Server using DB2 Connect to access data from iseries.

Posts: 78 | Registered: December 29, 2009

Ignored post by Joe Beydoun posted

Show Post

Tony A

Expert

posted

Hide Post

Trap the URL and post that. It might show both the carriage return andline feed chars seperating the entries.

T

In FOCUS since 1986	WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2
	WebFOCUS App Studio 8.2.06 standalone on Windows 10

Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004

Ignored post by Tony A posted

Show Post

Joe Beydoun

Gold member

posted

Hide Post

Sorry for the rookie status, but how do i trap a URL?

version 8202M
Reporting Server on
Windows Server using DB2 Connect to access data from iseries.

Posts: 78 | Registered: December 29, 2009

Ignored post by Joe Beydoun posted

Show Post

WFLurker

Gold member

posted

Hide Post

I want to add upon Joe idea of text box then ADD button to input into List Box.

I'm looking at a text box similar to how you use Google Search where you type something and a drop down appear with a list of search ideas.

Can this be possible with Javascript in a textbox scenario.

Where you type something in the textbox and it hit against the table/db with say WHERE CONTAINS '%XXXX%' which gives you all the possibile items and then you highlight the item you want then ADD to the listbox?

WF 8105M
- Portal, Dashboard
- Rcaster, Data Migrator
- Windows 2012 Client Server
- Dev/App Studio 8105
- Data: SQL, Oracle, Neteeza,MVS

Posts: 78 | Registered: October 24, 2006

Ignored post by WFLurker posted

Show Post

Waz

Expert

posted

Hide Post

quote:
text box similar to how you use Google Search

There are many examples available, I think all are javascript based, try using that google search.

This message has been edited. Last edited by: Waz,

Waz...

Prod:	WebFOCUS 7.6.10/8.1.04	Upgrade:	WebFOCUS 8.2.07	OS:	Linux	Outputs:	HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!