[SOLVED] Set selected value for listbox in HTML Form

Nick,

DEFINE FILE PAYPER
PPLIST/A27 = PAYPER ;
END
TABLE FILE PAYPER
PRINT
COMPUTE PPLIST1/A2000 = '';PPLIST
BY PAYPER NOPRINT
IF PAYPER_STATUS EQ 'LOCAL'
ON TABLE SET HOLDLIST PRINTONLY
ON TABLE PCHOLD FORMAT WP
END

Define the listbox in the HTML page and use IBI.FIL which will fill the value dynamically into the listbox.

Prod: WebFOCUS v7.1.4 OS: Windows Outputs: Excel, HTML, Pdf

Posts: 15 | Registered: September 18, 2008

Ignored post by Narayana posted

Gold member

posted

Hi Narayana,
Listbox is populated properly but need to select a particular value based on a fieldvalue in the PAYPER DB.
Nick

WebFOCUS 7.7.03 & 8.0.7
Windows
HTML, Excel, PDF, etc.
Also, using Maintain, etc.

Posts: 83 | Registered: February 26, 2009

Ignored post by Dr. Nick posted

GinnyJakes

Expert

posted

Construct the contents of the list box using a procedure where you can test for PAYPER_STATUS EQ 'LOCAL'. The output format of this procedure is XML. In the HTML Layout Painter, you reference this procedure instead of a master in the control for the dropdown box. Now in the dropdown box you will only have entries that comply with your needs and you won't have to check it again.

Ginny
---------------------------------
Prod: WF 7.7.01 Dev: WF 7.6.9-11
Admin, MRE,self-service; adapters: Teradata, DB2, Oracle, SQL Server, Essbase, ESRI, FlexEnable, Google

Posts: 2723 | Location: Ann Arbor, MI | Registered: April 05, 2006

Ignored post by GinnyJakes posted

Gold member

posted

Hi GinnyJakes,
Thank you for the response.
When the list appears in the listbox on the HTML form, it displays a list of pay periods, e.g. 200801, 200802, 200803, etc. I want the current pay period, e.g. 200802, to be selected, highlighted and presented as the first value in that list box. The results would be exactly the same as if I entered 200802 in the "Selected Value" box but as you know the "Selected Value" is a static value.

Thank you,
Nick

WebFOCUS 7.7.03 & 8.0.7
Windows
HTML, Excel, PDF, etc.
Also, using Maintain, etc.

Posts: 83 | Registered: February 26, 2009

Ignored post by Dr. Nick posted

GinnyJakes

Expert

posted

Then I suggest you use Narayana's technique. Do a -HTMLFORM to create your page and construct the !IBI.FIL.xxxxxx with the input tags for your dropdown box. You can variably specify what you want your selected item to be.

Ginny
---------------------------------
Prod: WF 7.7.01 Dev: WF 7.6.9-11
Admin, MRE,self-service; adapters: Teradata, DB2, Oracle, SQL Server, Essbase, ESRI, FlexEnable, Google

Posts: 2723 | Location: Ann Arbor, MI | Registered: April 05, 2006

Ignored post by GinnyJakes posted

Gold member

posted

Hi GinnyJakes,
I am not familar with this technique. Where can I go to find description and examples?
Thank you,
Nick

WebFOCUS 7.7.03 & 8.0.7
Windows
HTML, Excel, PDF, etc.
Also, using Maintain, etc.

Posts: 83 | Registered: February 26, 2009

Ignored post by Dr. Nick posted

Narayana

Member

posted

This technique is very simple just like the normal HTML file development. You can find the description in the WebFOCUS Developer Studio help with clear syntax and examples.
Check for -HTMLFORM and you will get it in the help.

Prod: WebFOCUS v7.1.4 OS: Windows Outputs: Excel, HTML, Pdf

Posts: 15 | Registered: September 18, 2008

Ignored post by Narayana posted

GamP

Virtuoso

posted

Nick,
If you let the product create the content of your dropdwon boxes automatically, then you won't be able to influence the selected value, it will always be the first in the list - which is of course also a way of controlling it - you could have the value you want to be selected first in the list.
But if you want to control which value is selected and leave the sort order within the box intact, you will have to come up with other methods.
The following code example which is from a live application shows just one method of doing this.
The fex is called 'boxes'.

-DEFAULT &COMPANY = 'X'
-DEFAULT &YEAR    = 'X'

DEFINE FILE mytable
FRMNAME/A160 = IF COMPANY EQ '&COMPANY' THEN
                  '<OPTION VALUE="' || COMPANY || '" SELECTED>' || COMPANY
             ELSE '<OPTION VALUE="' || COMPANY || '">' || COMPANY ;
FRMYEAR/A60  = '<OPTION VALUE="' || EDIT(YEAR) || '">' || EDIT(YEAR);
END

TABLE FILE mytable
SUM   FRMNAME
BY    SORT NOPRINT
BY    COMPANY NOPRINT
ON    TABLE SET HOLDLIST PRINTONLY
ON    TABLE HOLD AS COMPANIES FORMAT ALPHA
END

TABLE FILE mytable
SUM   FRMYEAR
BY    HIGHEST YEAR      NOPRINT
-IF &COMPANY EQ 'X' THEN GOTO THEEND;
WHERE COMPANY EQ '&COMPANY';
-THEEND
ON    TABLE SET HOLDLIST PRINTONLY
ON    TABLE HOLD AS YEAR FORMAT ALPHA
END

-HTMLFORM BEGIN
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="expires" content="-1">
  <link rel="stylesheet" type="text/css" href="/approot/style/style.css">
  <script Language="JavaScript">
   function startSelect(field) {
    if (field.name == 'COMPANY') {
     document.forms.form.YEAR.options[document.forms.form.YEAR.selectedIndex].value = 'X'; }
    document.forms.form.IBIF_ex.value = 'boxes';
    document.forms.form.target='top';
    document.forms.form.submit();
   }

   function startReport(fexnaam) {
    parent.content.location.href = '/approot/html/wait.html' ; 
    document.forms.form.target='content'; }
    window.setTimeout(startReport2, 100);
   }

   function startReport2() {
    document.forms.form.submit();
    window.clearTimeout();
   }
  </script>
 </head>

 <body bgcolor="#C8C864">
  <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
   <form method="GET" name="form" action="/ibi_apps/WFServlet">
    <input type="hidden" name="IBIAPP_app" value="myapp">
    <input type="hidden" name="IBIF_ex" value="">
    <th colspan=8 align=left style="padding-left: 20px; color:red;">My App - Run Report<br><br></th>
    <tr>
     <td class="text" width="180px" valign=top style="padding-left: 20px;"><b>Options:</b></td>
     <td class="text" width="170px">Company</td>
     <td class="text" width="70px">Year</td>
     <td class="text" width="60px">Format</td>
    </tr>
    <tr>
     <td class="text" width="180px" style="padding-left: 20px;">
       
     </td>
     <td>
      <select NAME="COMPANY" class="frmobjectB" style="width:160;" onChange="startSelect(this)" >
      <option value="X">All</option>
       !IBI.FIL.COMPANIES;
      </select>
     </td>
     <td>
      <select NAME="YEAR" class="frmobjectB" style="width:60;" >
       !IBI.FIL.YEAR;
      </select>
     </td>
     <td>
      <select NAME="WFFMT" class="frmobjectB" style="width:150;">
       <option value="HTML">HTML</option>
       <option value="PDF">PDF</option>
       <option value="EXL2K">Excel</option>
      </select>
     </td>
     <td valign=bottom style="padding-left: 20px;">
      <input type="button" name="BUTTON" value="Run" class="button" onClick="startReport('report')">
     </td>
    </tr>
   </form>
  </table>
 </body>
</html>
-HTMLFORM END

When this fex is called it will take care of filling the dropdown boxes, doing the chaining between the two dropdown boxes, showing the selection page and executing the report when required, while showing a 'please wait' page.

Hope this helps...

GamP

- Using AS 8.2.01 on Windows 10 - IE11.
	in Focus since 1988

Posts: 1961 | Location: Netherlands | Registered: September 25, 2007

Ignored post by GamP posted

Tony A

Expert

posted

Another method of changing the selected value is to use a piece of AJAX to obtain the value you want selected within the listbox and then use javascript to locate it within the listbox and set the selectedIndex to the location.

Of course, if you do not know or understand AJAX or javascript then I wouldn't suggest that you adopt this method until you have greater experience.

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

Gold member

posted

Hi All,
Thank you for the feedback. GamP code looks closer to envisioned solution. Will try these suggestions today and advise.
Thank you,
Nick

WebFOCUS 7.7.03 & 8.0.7
Windows
HTML, Excel, PDF, etc.
Also, using Maintain, etc.

Posts: 83 | Registered: February 26, 2009

Ignored post by Dr. Nick posted

Gold member

posted

Hi,
Tried some suggestions but no success. At this time, the HTML form has many controls one is the PAYPER control. It is a listbox that is filled by a FOCEXEC, as stated above. In the parameters section of the HTML form, the Control Values is set to Dynamic; the Data source is set to Procedure and the Procedure is the FOCEXEC. If the Selected Value paramter was dynamic or took the value from another source, that would satisfy the need. I'm sure the suggestions could be applied but I am a Javascript novice and am finding it difficult linking the pieces.

If anyone can provide detail instructions, I would be most appreciative.

Thank you,
Nick

WebFOCUS 7.7.03 & 8.0.7
Windows
HTML, Excel, PDF, etc.
Also, using Maintain, etc.

Posts: 83 | Registered: February 26, 2009

Ignored post by Dr. Nick posted

StuBouyer

Guru

posted

Javascript is probably one of the easiest options.

A quick search of the forum (or google) will give you examples such as:

//Set default value in control

//Begin function window_onload
function window_onload() {
UpdateData();
setDefault('ENGLAND');
// TODO: Add your event handler code here
}
//End function window_onload
function setDefault(myVal) {
var obj = document.getElementById('combobox1');
if (obj.innerHTML!=''){
 for(i=0;i<obj.length;i++) {
  if (obj.options[i].value == myVal) {
   obj.options[i].selected = true;
  }
 }
} else {
 setTimeout("setDefault('" + myVal + "')",100);
}
}

You will need to edit to suit your needs - and to make it more dynamic.

Cheers

Stu

WebFOCUS 8.2.03 (8.2.06 in testing)

Posts: 253 | Location: Melbourne, Australia | Registered: February 07, 2007

Ignored post by StuBouyer posted

Gold member

posted

Hi Stu,
This is great and works if setDefault is set to a constant. Tried to set it to a variable as follows:

var cpp = document.getElementById('CurrentPP');
setDefault(cpp);

but it did not work. CurrentPP is a control on the same HTML form. What am I doing wrong?
Thank you,
Nick

WebFOCUS 7.7.03 & 8.0.7
Windows
HTML, Excel, PDF, etc.
Also, using Maintain, etc.

Posts: 83 | Registered: February 26, 2009

Ignored post by Dr. Nick posted

Gold member

posted

Hi Stu,
Got it! Code is now:
function setDefault() {
var myVal = document.getElementById('CurrentPP');
var obj = document.getElementById('PAYPER');
if (obj.innerHTML!=''){
for(i=0;i if (obj.options[i].value == myVal.value) {
obj.options[i].selected = true;
}
}
} else {
setTimeout("setDefault('" + myVal.value + "')",100);
}
}

Thank you for all your help,
Nick

WebFOCUS 7.7.03 & 8.0.7
Windows
HTML, Excel, PDF, etc.
Also, using Maintain, etc.

Posts: 83 | Registered: February 26, 2009

Ignored post by Dr. Nick posted

mpbMDE

Platinum Member

posted

The code looks simple enough:
With that said,
1) Where does it get inserted?
2) What are 'CurrentPP' and 'PAYPER' AND if one is an &variable name, can you use a &temp_variable to set the default value?
3) Any plans to allow an &variable in the 'Selected Value' parameter box? [I sure hope so!]

WebFOCUS 8.1.05 Windows 7, all output

Posts: 107 | Registered: February 18, 2011

Ignored post by mpbMDE posted

Wep5622

Virtuoso

posted

quote:
Originally posted by Dr. Nick:
In the parameters section of the HTML form, the Control Values is set to Dynamic; the Data source is set to Procedure and the Procedure is the FOCEXEC.

I've worked with 7.6.8 for a bit before we migrated over to 7.6.11, but I don't recall those options being available in the older version. Are you sure you're not using something more modern than the 7.6.7 that your signature specifies?

If so, instead of using setTimeout() to call setDefault() - which will probably fail if you get some latency - you're much better off moving that call into onInitialUpdate(). That's a function that WebFOCUS calls at the appropriate moment if it's been declared.

function setDefault(selectId, value) {
    var obj = document.getElementById(selectId);

    for(i=0;i<obj.length;i++) {
        if (obj.options[i].value == myVal) {
            obj.options[i].selected = true;
        }
    }
}

function onInitialUpdate() {
    var currentPP = document.getElementById('CurrentPP');

    setDefault('PAYPER', currentPP.value);
}

P.S. Something I don't quite get about this community is why everyone seems dead-set against proper code indentation - don't make it harder on the rookies (in whatever topic) than it needs to be folks!

WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :

Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010

Ignored post by Wep5622 posted

mpbMDE

Platinum Member

posted

quote:
DEFINE FILE PAYPER
PPLIST/A27 = PAYPER ;
END

I am not familiar with this technique...It is not an alpha value, but a filename that defines pplist.

Thanks for he anwer WEP5622.
What 'text' do I have to change to populate combobox1 with the default? I know PAYPER and currentPP need to be substited with ???? and what else needs changting to work. (I am not familiar with
JavaScript.
Thanks.

WebFOCUS 8.1.05 Windows 7, all output

Posts: 107 | Registered: February 18, 2011

Ignored post by mpbMDE posted

Wep5622

Virtuoso

posted

Where there's 'PAYPER' and 'currentPP' in the script (the instances where they're in quotes), you need to replace them with their respective values as you see for the 'Unique Identifier' properties of each in the HTML Composer's Properties panel.

WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :

Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010

Ignored post by Wep5622 posted