Optionally disabling and greying out list boxes

March 26, 2006, 07:38 PM

I have a requirement. When the report type is changed, the list box(es) not applicable for the report type are disabled and grey. What is the coding technique that will make this happen?
Thanks in advance.

March 27, 2006, 02:30 AM

Tony A

You'll have to resort to javascript. Add an onChange event to your combo box and direct it to a javascript function

<SELECT id=ITEM1 .... onChange=checkcntls(); .... </SELECT>

Within the javascript determine the value selected in your combo box and hide / greyout the relevant controls as required.

T

March 27, 2006, 04:46 AM

Tony A

To provide you with an example, try the following. It was initially created using Resource layout Painter (yes, I know I don't use it normally, but I thought that I should give an example where you folks can compare it to the HTML code produced from the GUI

). I have aligned the code so that it (should) fit in this window without looking too awful!

Basically, there are four selects. The first one is a report selector that calls a javascript function when the selected value is changed.

The other three have names Country, Car and Model (the names will be used as the WF variable names).

When the report selector is changed, the javascript will disable those SELECTS where the datatype eq 1 and the name attribute eq the selected value.

To hide or show the SELECTS instead, just uncomment the line for el.style.visibility = #value; .

<HTML>
<HEAD>
<TITLE>HtmlPage
</TITLE>
<META content="WebFocus Report Layout Painter" name ="Generator">
<SCRIPT id=IbiOptionsScript type=text/javascript>
var cgipath = "cgipath";
var ibirls = "ibirls";
var multidrill = "multidrill";
var mntFormValidate = "mntFormValidate";
var dyncalendar = "dyncalendar";
var ibiOptions = new Array(cgipath,ibirls,mntFormValidate,multidrill);
</SCRIPT>
<SCRIPT id=nls src="/ibi_html/javaassist/nls.js" type=text/javascript>
</SCRIPT>
<SCRIPT id=ibigbl src="/ibi_html/javaassist/ibi/html/js/ibigbl.js" type=text/javascript>
</SCRIPT>
<SCRIPT id=ibigblloadCss type=text/javascript>
ibigblloadCss(null);
</SCRIPT>
</HEAD>
<BODY onload=OnLoad()>
<!--startibiitems-->
<FORM method=post name ="form">
<INPUT type=hidden value=somefex name ="IBIF_ex">
<INPUT id=IBIAPP_app type=hidden value=anthony name ="IBIAPP_app">
<SELECT id=ITEM1 onChange=checkctrl(); style="Z-INDEX: 1; LEFT: 50px; WIDTH: 150px; 
   POSITION: absolute; TOP: 25px; HEIGHT: 22px" name ="Report" elementname="combobox1"
   elementtype="combobox" labelid caption="combobox" operation="NONE" ibiformat
   datatype="0" addalloption="1" dynalldisplayvalue="ALL" inchainindex="-1" chainnumber="-1"
   cacheruntimedata="0" displayfield numofrecords="-1" datafield sourcetype="typeMast"
   datasource="car.mas" IBIC_server IBIAPP_app="anthony" datafieldtype="CHAR">
  <OPTION value=none>Select a Report</OPTION>
  <OPTION value=Country>Country</OPTION>
  <OPTION value=Car>Car</OPTION>
  <OPTION value=Model>Model</OPTION>
</SELECT>
<SELECT id=ITEM2 style="visibility:visible; Z-INDEX: 2; LEFT: 50px; WIDTH: 150px;
   POSITION: absolute; TOP: 65px; HEIGHT: 22px" name ="Country" elementname="combobox2"
   elementtype="combobox" labelid caption="combobox" operation="NONE" ibiformat datatype="1"
   addalloption="1" dynalldisplayvalue="ALL" inchainindex="-1" chainnumber="-1" cacheruntimedata="0"
   displayfield numofrecords="-1" datafield sourcetype="typeFex" datasource="selctry1.fex"
   IBIC_server IBIAPP_app="anthony" datafieldtype="CHAR">
</SELECT>
<SELECT id=ITEM3 style="visibility:visible; Z-INDEX: 3; LEFT: 50px; WIDTH: 150px;
   POSITION: absolute; TOP: 105px;   HEIGHT: 22px" name ="Car" elementname="combobox3"
   elementtype="combobox" labelid   caption="combobox" operation="NONE" ibiformat datatype="1"
   addalloption="1"   dynalldisplayvalue="ALL" inchainindex="-1" chainnumber="-1" cacheruntimedata="0"
   displayfield numofrecords="-1" datafield sourcetype="typeFex" datasource="selctry2.fex"
   IBIC_server IBIAPP_app="anthony" datafieldtype="CHAR">
</SELECT>
<SELECT id=ITEM4 style="visibility:visible; Z-INDEX: 4; LEFT: 50px; WIDTH: 150px;
   POSITION: absolute; TOP: 145px;   HEIGHT: 22px" name ="Model" elementname="combobox4"
   elementtype="combobox" labelid   caption="combobox" operation="NONE" ibiformat datatype="1"
   addalloption="1"   dynalldisplayvalue="ALL" inchainindex="-1" chainnumber="-1" cacheruntimedata="0"
   displayfield numofrecords="-1" datafield sourcetype="typeFex" datasource="selctry3.fex"
   IBIC_server IBIAPP_app="anthony" datafieldtype="CHAR">
</SELECT>
<INPUT id=ITEM5 style="Z-INDEX: 5; LEFT: 50px; WIDTH: 80px; POSITION: absolute; TOP: 185px;
   HEIGHT: 30px" type=submit value=Submit name ="button5" elementname="button5" elementtype="button"
   sourcetype="typeUrl" targetname targettype="0" onclickset="0">
<INPUT id=ITEM6 style="Z-INDEX: 6; LEFT: 140px; WIDTH: 80px; POSITION: absolute; TOP: 185px;
   HEIGHT: 30px" type=reset value=Reset name ="button6" elementname="button6" elementtype="button"
   sourcetype="typeUrl" targetname targettype="0" onclickset="0">
</FORM>
<SCRIPT type=text/javascript>
<!--
function checkctrl() {
this.selected = document.getElementById("ITEM1");
//alert(this.selected.value);
selectCol = document.getElementsByTagName("SELECT");
for(i=0; i<selectCol.length; i++)
  {
  var el = selectCol[i];
  var datatype = el.getAttribute("datatype");    
  if (datatype=="1")
    {
    if (el.name==this.selected.value)
      {
//  alert("Showing " + el.name);
//        el.style.visibility = "visible";
        el.disabled = 0;
      } else {
//  alert("Hiding " + el.name);
//        el.style.visibility = "hidden";
        el.disabled = 1;
      }
    }
  }
}
//-->
</SCRIPT>
<!--endibiitems-->
<SCRIPT id=OnloadHandler>
function OnLoad() {
<!--startibilines-->
UpdateData();
<!--endibilines-->
}
</SCRIPT>
</BODY>
</HTML>

March 27, 2006, 01:17 PM

focuscon

Thanks Tony for the code. In testing the code, when I select Country in the top combobox, it makes the second box active and greys out the remaining boxes as intended, but I was hoping to display a list of countries in that second box. The other selections from the first box make the appropriate box active and the other grey. How would I work the display of appropriate values into the code. I triend uncommenting one of the el.style.visibility = "visible"; statements, but it had no effect

March 27, 2006, 01:43 PM

Tony A

If you have a look at the HTML you will see that the combo boxes are populated by fexes, selctry1, 2 and 3. These are fexes that I've used before and should be able to be found in the Forum somewhere. But basically they are

TABLE FILE CAR
SUM FST.COUNTRY
BY COUNTRY
ON TABLE PCHOLD FORMAT XML
END

with the appropriate fields for selctry2 and 3 for CAR and MODEL respectively.

You will need to ensure that the value for IBIAPP_app is set to something other than "anthony" to match where you place your fexes.

If you intend to chain the combo boxes then, as I have said (and rather than repeat the code

), there is a post out there somewhere with my name on it that provides an example. Actually, there are loads of posts regarding chaining of combo boxes, come to think of it

.

The main intention with this post was to give you a basic example to be built upon because every application is different, of course.

The el.style.visibility code can be inter-changed with the el.disabled to actually hide the combo boxes from view instead of disabling them.

T

Edited to correct the HOLD to PCHOLD

This message has been edited. Last edited by: Tony A,

March 27, 2006, 05:30 PM

focuscon

Tony,

So what you're saying is that if I supply a selctry1, selctry2 and selctry3 fexes, which I've done with your example code, I should be able to populate the combo boxes. I realize I must change the IBIAPP_app from "anthony" to another folder identitied under apps, which I done. I've tried reexecuting it with the changes you suggest without changing the results.

March 28, 2006, 02:40 AM

Tony A

Hi,

The fexes should run OK and populate the combo boxes with what you have done. Try running the selctry1 etc. to see the output. You should get an XML document that looks like this (hopefully this will look OK - unless someone edits it

)

  <?xml version="1.0" encoding="ISO-8859-1" ?> 
- <fxf version="1.0" data="hold">
- <report records="5" lines="5" columns="2" rows="5">
  <target format="" version="" type="" destination="HOLD" /> 
- <column_desc>
  <col colnum="c0" fieldname="COUNTRY" alias="COUNTRY" datatype="char" width="10" focus_format="A10"
 description="Country of Origin" accept="" help_message="" title="Country of Origin" within="" property=""
 reference="" valign="left" /> 
  <col colnum="c1" fieldname="COUNTRY" alias="COUNTRY" datatype="char" width="10" focus_format="A10"
 description="Country of Origin" accept="" help_message="" title="Country of Origin" within="" property=""
 reference="" valign="left" /> 
  </column_desc>
- <table>
- <tr linetype="data" linenum="1">
  <td colnum="c0">ENGLAND</td> 
  <td colnum="c1">ENGLAND</td> 
  </tr>
- <tr linetype="data" linenum="2">
  <td colnum="c0">FRANCE</td> 
  <td colnum="c1">FRANCE</td> 
  </tr>
- <tr linetype="data" linenum="3">
  <td colnum="c0">ITALY</td> 
  <td colnum="c1">ITALY</td> 
  </tr>
- <tr linetype="data" linenum="4">
  <td colnum="c0">JAPAN</td> 
  <td colnum="c1">JAPAN</td> 
  </tr>
- <tr linetype="data" linenum="5">
  <td colnum="c0">W GERMANY</td> 
  <td colnum="c1">W GERMANY</td> 
  </tr>
  </table>
  </report>
  </fxf>

The other fexes should produce similar output relative to their fields and values.

If you do not get output like this then there is something wrong with your fex. If you do get the same results then there is something wrong in your setup and you might need to supply a value for IBIC_server.

Otherwise it should work fine.

Good luck

T

March 28, 2006, 07:19 AM

focuscon

Here are my three fexes:
-*new SELCTRY1
TABLE FILE CAR
SUM FST.COUNTRY
BY COUNTRY
ON TABLE HOLD FORMAT XML
END
-*new SELCTRY2
TABLE FILE CAR
SUM FST.CAR
BY CAR
ON TABLE HOLD FORMAT XML
END
-*new SELCTRY3
TABLE FILE CAR
SUM FST.MODEL
BY MODEL
ON TABLE HOLD FORMAT XML
END
I get 5 records from selctry1, 10 from selctry2 and 18 from selctry3. I don't know how this simple code, you offered as an example in your previous post, could produce what you suggest in your last post. You said "These are fexes that I've used before and should be able to be found in the Forum somewhere." Can you give me a hint as to where I might find them cause I've had no luck?

March 28, 2006, 07:46 AM

focuscon

Here is the code you provided:
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

HtmlPage<BR>

<script id=IbiOptionsScript type=text/javascript>
var cgipath = "cgipath";
var ibirls = "ibirls";
var multidrill = "multidrill";
var mntFormValidate = "mntFormValidate";
var dyncalendar = "dyncalendar";
var ibiOptions = new Array(cgipath,ibirls,mntFormValidate,multidrill);

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

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

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

< !--startibiitems-->

sourcetype="typeUrl" targetname targettype="0" onclickset="0">
sourcetype="typeUrl" targetname targettype="0" onclickset="0">

March 28, 2006, 08:02 AM

focuscon

Sorry about that. When I pasted the code in the last post, something went wrong. Here it is again. I'm executing it as an .htm component. I've also executed it as a .fex with -HTMLPAGE BEGIN and END
----------------------------------------------

HtmlPage<BR>

<script id=IbiOptionsScript type=text/javascript>
var cgipath = "cgipath";
var ibirls = "ibirls";
var multidrill = "multidrill";
var mntFormValidate = "mntFormValidate";
var dyncalendar = "dyncalendar";
var ibiOptions = new Array(cgipath,ibirls,mntFormValidate,multidrill);

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

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

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

< !--startibiitems-->

sourcetype="typeUrl" targetname targettype="0" onclickset="0">
sourcetype="typeUrl" targetname targettype="0" onclickset="0">

March 28, 2006, 08:06 AM

focuscon

Obviously, I'm having difficulty pasting the code into this Forum. The source does not mirror directly to what is shown on the Forum post

March 28, 2006, 09:23 AM

Kerry

Hi focuscon,

To display the code properly, please wrap your code with (code) and (/code) (replace the () with []) at the beginning and at the end, respectively.

Thanks,

Kerry

March 28, 2006, 10:04 AM

Tony A

Jerry,

The fex code that you posted is almost correct and will produce the XML output as I have inserted above once you change the ON TABLE HOLD to ON TABLE PCHOLD. They have to be targetted at the client machine so that the JavaScript can pick up the XML output. If you don't use PCHOLD the output will only be available to the server and therefore the JavaScript will never receive it and will not show any items in your selects.

I take it you are running from Windows using Dev Studio?

T

Edited to add -

My apologies, but I did have HOLD and not PCHOLD in the sample above ... oops!

This message has been edited. Last edited by: Tony A,

March 28, 2006, 01:12 PM

focuscon

Tony,

That last change worked. Thanks very much for your patience.

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