Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     EXPAND/COLLAPSE HEADER

Read-Only Read-Only Topic
Go
Search
Notify
Tools
EXPAND/COLLAPSE HEADER
 Login/Join
 
Guru
posted
Can someone please help with any ideas to expand/collapse a portion of a report like HEADING or SUBHEAD. I have lot of information that needs to be flexible based on user/input..like a tree or expand/collapse button...

Open for any ideas..please let me know

Thanks


-********************
Sandbox: 8206.10
Dev: 8201M
Prod:8009
-********************
 
Posts: 289 | Location: Houston,TX | Registered: June 11, 2004Report This Post
Expert
posted Hide Post
PK,

It would be an idea to advise what output format you are wanting to use.

If it's HTML then use the search facility top right against the forum to locate previous posts containing EXPAND (such as this one).

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, 2004Report This Post
Guru
posted Hide Post
Tony,
Thanks for the response, I need the report in HTML format and the EXPAND only needs to be on the HEADING or SUBHEAD not for the columns..Im not sure if I can use Accordion reports to accomplish this..
Please help.
-Pawan


-********************
Sandbox: 8206.10
Dev: 8201M
Prod:8009
-********************
 
Posts: 289 | Location: Houston,TX | Registered: June 11, 2004Report This Post
Platinum Member
posted Hide Post
Hi

I am curious to see a response to this. I just added an option to some reports so that the user can decide whether or not to show headers and footers when the form is submitted. I just look at the amper and then skip the heading if that is what is wanted. But expanding/collapsing the heading would be great.


WF 8.0.0.5M
 
Posts: 246 | Location: Montreal, QC, Canada | Registered: October 01, 2003Report This Post
Expert
posted Hide Post
Pawan,

I'm not suggesting that you try and use accordian reports, more to use a JavaScript method similar to those contained in the linked post. It should be a lot easier to do than columns as well.

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, 2004Report This Post
Expert
posted Hide Post
Here's some quickly thrown together code that hides/shows heading lines.

It relies on 1 javaScript function, 2 CSS classes and 2 images.

I use HTML span tags around each Heading line - giving the Heading a CSS class. The image in line one of the heading is a + or a - and is the link you click on to hide/show the report heading.

This is quick and dirty - I'd like to be able to change the CSS class for all the heading lines in one command, at the moment, you must have "h99.className = 'PageHeadingShow';" and "h99.className = 'PageHeadingHide';" for each heading line.

DEFINE FILE CAR
TIMG/A150 = '<img id="imgToggle" src="/approot/baseapp/images/1.gif " ' |
            'width="9" height="9" onClick="fnToggle()" style="display: inline;">';
TSPAN1/A50 = '<span class=PageHeadingHide';
TSPAN2/A20 = '</span>';
END

TABLE FILE CAR
SUM
SALES
BY COUNTRY
ON TABLE HOLD AS H001 FORMAT HTMTABLE

HEADING
"<TIMG"
"<TSPAN1 id=h01>Heading Line 1 <TSPAN2"
"<TSPAN1 id=h02>Heading Line 2 <TSPAN2"

ON TABLE SET PAGE NOLEAD
END
-RUN

-HTMLFORM BEGIN
<script language="JavaScript">

function fnToggle()
{
if (h01.className == 'PageHeadingHide')
  {
  h01.className = 'PageHeadingShow';
  h02.className = 'PageHeadingShow';
  imgToggle.src = "/approot/baseapp/images/0.gif";
  }
else
  {
  h01.className = 'PageHeadingHide';
  h02.className = 'PageHeadingHide';
  imgToggle.src = "/approot/baseapp/images/1.gif";
  }
}
</script>
<style type="text/css">
.PageHeadingHide { display: none; }
.PageHeadingShow { display: inline; }
</style>

!IBI.FIL.H001;
-HTMLFORM END


You also need the following images, named
1.gif and
0.gif
respectively, added to the baseapp/images folder (or put them where you wish and change the TIMG define column accordingly.

Let me know if you have any questions. A 'view-source' will come in handy to see how things get translated.

Cheers,


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Expert
posted Hide Post
Small improvement to the code, change the style of any number of heading lines in the JS function.

DEFINE FILE CAR
TIMG/A150 = '<img id="imgToggle" src="/approot/baseapp/images/1.gif " ' |
            'width="9" height="9" onClick="fnToggle()" style="display: inline;">';
TSPAN1/A50 = '<span class=PageHeadingHide';
TSPAN2/A20 = '</span>';
END

TABLE FILE CAR
SUM
SALES
BY COUNTRY
ON TABLE HOLD AS H001 FORMAT HTMTABLE

HEADING
"<TIMG"
"<TSPAN1 id=h01>Heading Line 1 <TSPAN2"
"<TSPAN1 id=h02>Heading Line 2 <TSPAN2"

ON TABLE SET PAGE NOLEAD
END
-RUN

-HTMLFORM BEGIN
<script language="JavaScript">

function fnToggle()
{

if (h01.className == 'PageHeadingHide')
  {
  imgToggle.src = "/approot/baseapp/images/0.gif";
  var spans = getElementsByClassName('PageHeadingHide');
  for(i=0; i <spans.length; i++)
    {
    spans[i].className = 'PageHeadingShow';
    }
  }
else
  {
  imgToggle.src = "/approot/baseapp/images/0.gif";
  var spans = getElementsByClassName('PageHeadingShow');
  for(i=0; i <spans.length; i++)
    {
    spans[i].className = 'PageHeadingHide';
    }
  }
}

function getElementsByClassName(className)
{
var all = document.all ? document.all : document.getElementsByTagName('*');
var elements = new Array();
for (var e = 0; e < all.length; e++)
  {
  if (all[e].className == className) elements[elements.length] = all[e];
  }
return elements;
}

</script>
<style type="text/css">
.PageHeadingHide { display: none; }
.PageHeadingShow { display: inline; }
</style>

!IBI.FIL.H001;
-HTMLFORM END



This uses a function that determines all the spans that have a particular class - amazingly there is no JS 'method' to determine this, as described here: http://domscripting.com/blog/display/18, so a function has to be written.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Guru
posted Hide Post
Francis,
Thanks for the help....I will give it a try and find out...
-P


-********************
Sandbox: 8206.10
Dev: 8201M
Prod:8009
-********************
 
Posts: 289 | Location: Houston,TX | Registered: June 11, 2004Report This Post
Guru
posted Hide Post
Francis,
It works. That is exactly what I was looking for. Only thing its failing on me is when I put ON TABLE SET HTMLCSS ON to make use of my stylesheet...any ideas?

Thanks


-********************
Sandbox: 8206.10
Dev: 8201M
Prod:8009
-********************
 
Posts: 289 | Location: Houston,TX | Registered: June 11, 2004Report This Post
Expert
posted Hide Post
Turning HTMLCSS on turns this:

<TR>
<TD>
<span class=PageHeadingHide id=h01>Heading Line 1 </span></TD>
</TR>

into this:

<TR>
<TD>
<span class='x1'><span class=PageHeadingHide</span>
<span class='x1'> id=h01>Heading Line 1 </span>
<span class='x1'></span></span>
</TD>
</TR>

It turns each piece of a Heading line into a separate span.

I don't really like using HTMLCSS so I usually avoid it. Try setting classes to the different elements of the report that you wish to style differently than what can be achieved in the WebFOCUS stylesheet.

DEFINE FILE CAR
TIMG/A150 = '<img id="imgToggle" src="/approot/baseapp/images/1.gif " ' |
            'width="9" height="9" onClick="fnToggle()" style="display: inline;">';
TSPAN1/A50 = '<span class=PageHeadingHide';
TSPAN2/A20 = '</span>';
END

TABLE FILE CAR
SUM
SALES
BY COUNTRY
ON TABLE HOLD AS H001 FORMAT HTMTABLE

HEADING
"<TIMG"
"<TSPAN1 id=h01>Heading Line 1 <TSPAN2"
"<TSPAN1 id=h02>Heading Line 2 <TSPAN2"

ON TABLE SET PAGE NOLEAD
ON TABLE SET STYLE *
TYPE=DATA, CLASS=ZeroData, WHEN= SALES LE 0, $
END
-RUN

-HTMLFORM BEGIN
<script language="JavaScript">

function fnToggle()
{

if (h01.className == 'PageHeadingHide')
  {
  imgToggle.src = "/approot/baseapp/images/0.gif";
  var spans = getElementsByClassName('PageHeadingHide');
  for(i=0; i <spans.length; i++)
    {
    spans[i].className = 'PageHeadingShow';
    }
  }
else
  {
  imgToggle.src = "/approot/baseapp/images/0.gif";
  var spans = getElementsByClassName('PageHeadingShow');
  for(i=0; i <spans.length; i++)
    {
    spans[i].className = 'PageHeadingHide';
    }
  }
}

function getElementsByClassName(className)
{
var all = document.all ? document.all : document.getElementsByTagName('*');
var elements = new Array();
for (var e = 0; e < all.length; e++)
  {
  if (all[e].className == className) elements[elements.length] = all[e];
  }
return elements;
}

</script>
<style type="text/css">
body { font-family: font-family: Arial, sans-serif; font-size: 12px; font-weight: normal; }
td { font-size: 12px; }

.ZeroData { color: red; }

.PageHeadingHide { display: none; }
.PageHeadingShow { display: inline; font-size: 14px; font-weight: bold; color: navy; }

</style>

!IBI.FIL.H001;
-HTMLFORM END


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     EXPAND/COLLAPSE HEADER

Copyright © 1996-2020 Information Builders