Radio Button Group: horizontal display

[dougp]

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?

[CognosPaul]

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 Expand

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'

[CognosPaul]

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.

[Lynn]

I voted for it  :)

[teodoraOPREA]

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

[CognosPaul]

What error are you getting? Which script are you using? Which version of Cognos? Are you on interactive mode?

[rockytopmark]

Update on this topic.  Just worked with CognosPaul on a different method that works and is easier to implement.

Instead of a custom control, it involves

• Inserting the prompt control into a block
• inserting an HTML Item in the report that will style the control/block

name the block (you can name whatever you want but make sure you use same name in HTML item doing the styling):
inlineRadio

HTML item code:
<style>
[lid*="inlineRadio"] div{
    height: inherit !important;
    min-height: inherit !important;
    display: flex ;
    width: 100% !important;
    position: inherit !important;
    border: none;
    margin: 0px !important;
}
</style>