Author Topic: Radio Button Group: horizontal display  (Read 36976 times)

Offline MFGF

  • Never knowingly correct
  • Super Moderator
  • Statesman
  • ******
  • Join Date: Jul 2005
  • Posts: 10,474
  • Forum Citizenship: +632/-10
  • Cognos Software Muppet
Re: Radio Button Group: horizontal display
« Reply #15 on: 29 Jan 2015 03:12:19 am »
The new API actually makes this a bit easier. First you need the id of the prompt. Once you have that, doing a getElementById with PRMT_SV_+id will get you the div containing the options. Then it's just a matter of setting the style the way you want.

Code: [Select]
var paulScripts = {}
  , oCR = cognos.Report.getReport("THIS");

 
paulScripts.getControl = function(promptName) {
  return oCR.prompt.getControlByName(promptName);
};


paulScripts.inlinePrompt=function(promptName){
var prm = paulScripts.getControl(promptName)
  , elm = document.getElementById('PRMT_SV_'+prm._id_);

if(prm.selectUI!='radioGroup'&&prm.selectUI!='checkboxGroup') return false;

elm.style.whiteSpace='nowrap';
elm.style.height='';

for(var i=0;i<elm.childNodes.length;++i){
  elm.childNodes[i].style.display='inline';
}

}

paulScripts.inlinePrompt('MyPrompt')

Wonderful! Is that a reference to a Mini-Mendelson I see in there too? :) Made me laugh to see it in the childnodes syntax! :D
Meep!

Offline xyz

  • Statesman
  • ******
  • Join Date: Oct 2013
  • Posts: 260
  • Forum Citizenship: +1/-2
Re: Radio Button Group: horizontal display
« Reply #16 on: 03 Apr 2015 11:04:33 am »
Hi Paul,

Thank you very much for the solution.
We used your new code, which uses new API, we applied the same java script in Cognos 10.2.2 for radio prompt.
java script is working as expected, when we run the report in Cognos Viewer, but when we drag and drop the same report which used java script for radio prompt in Workspace, it is not working as expected, when we select the second radio option.

Radio Options below with .$ option selected by default. We are using IE11, results are not consistent, some time it works as expected, some times it doesn't
. $ . %

Is there some java script to be modified for Cognos 10.2.2 verison.

Your help is much appreciated :)


Thanks & Regards,
XYZ


Offline ens

  • Full Member
  • ***
  • Join Date: Dec 2014
  • Posts: 7
  • Forum Citizenship: +1/-0
Re: Radio Button Group: horizontal display
« Reply #17 on: 14 Aug 2015 12:37:10 pm »
Paul,

Sorry bit of a novice here....  Can you layout the directions a little more specifically?

Thanks.

Offline dasd01

  • Associate
  • **
  • Join Date: Oct 2015
  • Posts: 3
  • Forum Citizenship: +0/-0
Re: Radio Button Group: horizontal display
« Reply #18 on: 08 Oct 2015 09:46:30 pm »
wonderful it worked for me ;D

Offline dasd01

  • Associate
  • **
  • Join Date: Oct 2015
  • Posts: 3
  • Forum Citizenship: +0/-0
Re: Radio Button Group: horizontal display
« Reply #19 on: 09 Oct 2015 04:16:07 am »
Hello Paul,

I tested on 10.2 it worked but the same script is not working on 10.2.2. Can you please send me the script

Thanks in advance

das

Offline MFGF

  • Never knowingly correct
  • Super Moderator
  • Statesman
  • ******
  • Join Date: Jul 2005
  • Posts: 10,474
  • Forum Citizenship: +632/-10
  • Cognos Software Muppet
Re: Radio Button Group: horizontal display
« Reply #20 on: 09 Oct 2015 05:03:17 am »
Hello Paul,

I tested on 10.2 it worked but the same script is not working on 10.2.2. Can you please send me the script

Thanks in advance

das

Well, I don't do javascript, so I'm not much use in debugging what is happening. However...

"the same script is not working" doesn't tell us anything other than you have a problem. If I said to you "I have some code and it doesn't work", would you have any way of telling me what to fix? It's no different here. You can't rely on other people somehow being able to know (via clairvoyance or magic or guesswork) what the issue is, let alone give you a solution that fixes it. You need to look at the code and figure out what it does, and pinpoint the part that "doesn't work", then describe this in detail if you want anyone to be able to help you. You need to be clear about how it doesn't work - including results, errors, and anything else you think relevant.

MF.
Meep!

Offline dasd01

  • Associate
  • **
  • Join Date: Oct 2015
  • Posts: 3
  • Forum Citizenship: +0/-0
Re: Radio Button Group: horizontal display
« Reply #21 on: 11 Oct 2015 03:10:04 am »
Hello MF,

Thanks for your reply MF and sorry for not mentioning clearly. I am novice in javascript and I was using one of the script mentioned by CognosPaul on Reply#6 to display my prompts in two rows in 2 rows. It was well working on Cognos 10.2 but when I am using the same in 10.2.2 it display in a single row.

Since I am not aware of javascript, so would request if anyone can assist me

- das

Offline sllikskills

  • Associate
  • **
  • Join Date: Apr 2016
  • Posts: 1
  • Forum Citizenship: +0/-0
Re: Radio Button Group: horizontal display
« Reply #22 on: 13 Apr 2016 02:16:16 pm »
dasd01,

Heres the best general tip you could get in Cognos. Take the XML that CognosPaul laid out, copy it all. Then open your Report Studio in Cognos and go to Tools>Open Report from Clipboard. His sample report will show, and you will basically have a step-by-step tutorial of exactly how the horizontal radio button prompt was achieved. I hope this helps.

Mike

Offline DCGCA

  • Associate
  • **
  • Join Date: Nov 2017
  • Posts: 1
  • Forum Citizenship: +0/-0
Re: Radio Button Group: horizontal display
« Reply #23 on: 01 Nov 2017 11:02:06 pm »
Hi Paul,

could you please provide me java script code to implement the Radio Button to display Horizontally in Cognos 11.0.7.

I have reports which uses the inline java script but in order for them to work the report interactive mode needs to set to "No". because of this the reports drill-thrus are not working properly. so it would make a great difference if you could provide a java script file for Cognos 11.0.7.

Thanks,
Dee

The structure of checkbox groups (and radio buttons) were changed slightly in Cognos 10. It looks like they got rid of an extra div level inside the group. To compensate
Code: [Select]
child.parentNode.parentNode.style needs to be changed to
Code: [Select]
child.parentNode.style
Script:
Code: [Select]
<script type="text/javascript">
function inlineRadios(child){
if((child.type == "radio")||(child.type == "checkbox"))
{
child.parentNode.style.display="inline";
child.parentNode.style.whiteSpace="noWrap";
}
}
function promptDescendants (node)
{
for (var i = 0; i < node.childNodes.length; i++)
{
var child = node.childNodes[i];
inlineRadios(child);
promptDescendants(child);
}
}
</script>

Report XML:
Code: [Select]
<report xmlns="http://developer.cognos.com/schemas/report/6.0/" expressionLocale="en-us">
<modelPath>/content/package[@name='example']/model[@name='model']</modelPath>
<drillBehavior modelBasedDrillThru="true"/>
<layouts>
<layout>
<reportPages>
<page name="Page1">
<style>
<defaultStyles>
<defaultStyle refStyle="pg"/>
</defaultStyles>
</style>
<pageBody>
<style>
<defaultStyles>
<defaultStyle refStyle="pb"/>
</defaultStyles>
</style>
<contents><HTMLItem description="Scripts">
<dataSource>
<staticValue>&lt;script type="text/javascript"&gt;

function inlineRadios(child)
{
if((child.type == "radio")||(child.type == "checkbox"))
{
child.parentNode.style.display="inline";
child.parentNode.style.whiteSpace="noWrap";
}
}

function allDescendants (node)
{
for (var i = 0; i &lt; node.childNodes.length; i++)
{
var child = node.childNodes[i];
inlineRadios(child);
allDescendants(child);
}
}

&lt;/script&gt;</staticValue>
</dataSource>
</HTMLItem><HTMLItem description="Open Div">
<dataSource>
<staticValue>&lt;div id="lookinhere"&gt;</staticValue>
</dataSource>
</HTMLItem><selectValue parameter="Parameter1" selectValueUI="radioGroup"><selectOptions><selectOption useValue="1"><displayValue>Option 1</displayValue></selectOption><selectOption useValue="2"><displayValue>Option 2</displayValue></selectOption><selectOption useValue="3"><displayValue>Option 3</displayValue></selectOption></selectOptions></selectValue><HTMLItem description="Close Div + inline Radios">
<dataSource>
<staticValue>&lt;/div&gt; &lt;script&gt;allDescendants(document.getElementById('lookinhere'));&lt;/script&gt;</staticValue>
</dataSource>
</HTMLItem></contents>
</pageBody>
</page>
</reportPages>
</layout>
</layouts>
<XMLAttributes><XMLAttribute name="RS_CreateExtendedDataItems" value="true" output="no"/><XMLAttribute name="listSeparator" value="," output="no"/></XMLAttributes></report>

Offline CognosPaul

  • Global Moderator
  • Statesman
  • *****
  • Join Date: Jan 2009
  • Posts: 1,738
  • Forum Citizenship: +256/-1
    • Paul's Cognos Blog
Re: Radio Button Group: horizontal display
« Reply #24 on: 20 Nov 2017 11:59:26 am »
You're in luck. I actually wrote about this exact thing on the PMsquare blog:

http://www.pmsquare.com/main/blog/custom-javascript-in-cognos-modifying-prompts/


Offline dougp

  • Statesman
  • ******
  • Join Date: Jul 2014
  • Posts: 306
  • Forum Citizenship: +16/-1
Re: Radio Button Group: horizontal display
« Reply #25 on: 20 Nov 2017 12:29:41 pm »
Hi, Paul.

Knowing the quality of your work, this post got me all excited, until...

On a cursory review, the JavaScript shown appears to not be in AMD using RequireJS.  I don't see anywhere in the article that Run with full interactivity should be disabled.  Oversight?  Do you have an example that works with Run with full interactivity = Yes?

Offline CognosPaul

  • Global Moderator
  • Statesman
  • *****
  • Join Date: Jan 2009
  • Posts: 1,738
  • Forum Citizenship: +256/-1
    • Paul's Cognos Blog
Re: Radio Button Group: horizontal display
« Reply #26 on: 20 Nov 2017 01:15:04 pm »
The article is missing the download! That's the problem with not having it on my own blog. Whoops.

It's being fixed in the article now, but the code for the control follows:
Code: [Select]
define( [], function(  ) {
"use strict";


function horizontalprmpt()
{
};

horizontalprmpt.prototype.initialize = function( oControlHost, fnDoneInitializing )
{

if(!document.getElementById('horizPrompt')){
  var styleNode = document.createElement('style');
  styleNode.type = 'text/css';
  styleNode.id='horizPrompt';
   if(!!(window.attachEvent && !window.opera)) {
        styleNode.styleSheet.cssText = '.horizPrmpt tr{display:inline-block} .horizPrmpt div.clsListItem_normal{display:inline-block}';
   } else {
        var styleText = document.createTextNode('.horizPrmpt tr{display:inline-block} .horizPrmpt div{display:inline-block}');
        styleNode.appendChild(styleText);
   }
  document.getElementsByTagName('head')[0].appendChild(styleNode)
}

  var o = oControlHost.configuration
    , prmptCtrl = oControlHost.page.getControlByName(o["promptName"])
    , prmptElm = prmptCtrl.element
    , prmptLst = prmptElm.getElementsByClassName('clsListView')[0]
    , prmptType
    ;
   
    prmptLst.className += ' horizPrmpt';
   
   
  prmptElm.style.minHeight='';
  prmptElm.style.height='30px' ;
  prmptElm.style.display='block';
  prmptElm.firstChild.style.display='block';
 
  prmptLst.style.overflow='visible';
  prmptLst.style.position='';
  prmptLst.style.height='30px';
  prmptLst.style.paddingTop='2px';

  prmptElm.style.width=prmptLst.style.width;
 
   


fnDoneInitializing();

};

return horizontalprmpt;
});

You drag in the control, set the URL to the JS file, and in the config use:
promptName='Prompt Name'

Offline CognosPaul

  • Global Moderator
  • Statesman
  • *****
  • Join Date: Jan 2009
  • Posts: 1,738
  • Forum Citizenship: +256/-1
    • Paul's Cognos Blog
Re: Radio Button Group: horizontal display
« Reply #27 on: 20 Nov 2017 01:18:16 pm »
Just gonna plug this RFE here: https://www.ibm.com/developerworks/rfe/execute?use_case=viewRfe&CR_ID=102650

If this actually get's into Cognos, I could publish an archive of the controls the same way we do with visualizations.

Offline Lynn

  • Statesman
  • ******
  • Join Date: Apr 2008
  • Posts: 2,683
  • Forum Citizenship: +340/-1
Re: Radio Button Group: horizontal display
« Reply #28 on: 21 Nov 2017 02:13:27 am »
I voted for it  :)

Offline teodoraOPREA

  • Associate
  • **
  • Join Date: Aug 2018
  • Posts: 1
  • Forum Citizenship: +0/-0
Re: Radio Button Group: horizontal display
« Reply #29 on: 03 Aug 2018 07:54:53 am »
Could you please post the XML code?
the JS script does not work for me and I couldn't figure why
thank you in advance

 


       
Twittear