Set Column Width of Value Prompt in Table Used in Dashboard

[Cognos_Jan2017]

I know placing a HTML Item to the left of a Value Prompt and another HTML Item
to its right can utilize JavaScript to adjust the Column Width within the table.

The purpose is to use the available space to compact each Column's Width.

But I don't know what JavaScript to use to accomplish that?

Any one know?

TIA, Bob

[AnalyticsWithJay]

Hi Bob,

I'm not exactly sure I understand. Are you trying to dynamically set the width of the value prompt? What's the issue you're facing?

[Cognos_Jan2017]

CognoidJay - I built a table w/ Date and Value Prompts.  For each prompt I found code to ...
Add a HTML Item to the left of each Prompt, and another HTML Item to the right of each Prompt.
I am a novice in JavaScript.

Code added to the left HTML Item is ...
<div id="selectSearch">

Code added to the right HTML Item is ...
</div>
<script>
var e=document.getElementById('selectSearch');
var myselect = e.getElementsByTagName('select')[0];
if(myselect.childNodes.length>0){myselect.style.width=''}
</script>

That may be working for each prompt, but above each prompt I added a Block
and placed a Text item in the block.  When adding each block, it chews up
maximum width of the table cell.

I tried adding HTML items to the left and right of the block, but
the HTML items don't stay to the left and right of the block.

I want to minimize width of the toolbox items in each table cell.
IF I could set the width of the block, that would do it.  The text
item length entry is not a problem.

So, as I continue to play with this ...
How can the width of the block be decreased to match the width
of each date and value prompt?

TIA, Bob

[AnalyticsWithJay]

Place the block immediately to the right of your first HTML item.

Here's the new code:

Code Select Expand


<script>
var e = document.getElementById('selectSearch');
var myselect = e.getElementsByTagName('select')[0];
var myblock = e.getElementsByTagName('div')[0];

if (myselect.childNodes.length > 0)
{
myselect.style.width='';
myblock.style.width = myselect.style.width;
}
</script>


[Cognos_Jan2017]

Thank you.  Something isn't working after placing a block immediately to the right of the first HTML item.  NOTE:  The original block stayed above.

An example how I began this ...  After you read the end of this post,
what do you recommend to "begin over" in an empty table cell?  TIA.
=== My process ...
I drag in a Value Prompt to an empty table cell.

Then I drag a block to the far left edge of the Value Prompt.

That places a "long" block above the Value Prompt.

Then I drag a text item into the block.
========================
I then found the original JS code I had posted.

It runs quickly, but still a wide block.

Your code ... I deleted the original block but your recommended
added block is still there w/ a new text item.

It says a popup window is blocking the code from running.

TIA, Bob

[AnalyticsWithJay]

Perhaps it's easier if I share the report specifications (attached). I built this against the Cognos Samples in 10.2.2: "Go Data Warehouse (query)".

The only difference in the code I posted earlier is I added a function which delays the resizing of the objects for 2 seconds. I also added a border around the block so you could see when everything resizes.

Code Select Expand


<script>
setTimeout(resizeEverything, 2000);

function resizeEverything()
{
var e = document.getElementById('selectSearch');
var myselect = e.getElementsByTagName('select')[0];
var myblock = e.getElementsByTagName('div')[0];

if (myselect.childNodes.length > 0)
{
myselect.style.width='';
myblock.style.width = myselect.style.width;
}
}
</script>


I'm not sure what could be causing the code to be blocked. Perhaps you could check your browser security settings if you're still receiving the blocked notification.

I tested the attached report specifications and it resizes the objects accordingly.

[Cognos_Jan2017]

Thank you.

I haven't written any JS Functions.  Plenty of that in Microsoft Office VBA
where Functions are in a module.

Where do I find a "module" to place to function resizeEverything() ?

[Cognos_Jan2017]

CognoidJay - I definitely want to learn more about the JS code.

I used another Prompt Page without the HTML, and when I ran that
Prompt Page on a Dashboard in Cognos Workspace, everything sized
to minimum.  A welcome surprise.  Don't know why.

Hope to hear from you again, as I learn JS.

THANK you, Bob

[AnalyticsWithJay]

Hi Bob,

Glad to hear it's working out now :)

W3Schools is a great place to start learning javascript and HTML.

Functions defined by you are placed in HTML items in Cognos 10 and earlier versions.

setTimeout(resizeEverything, 2000) is a function which calls the function resizeEverything after 2000 milliseconds. You can read more about this on the W3Schools website.

[Cognos_Jan2017]

CognoidJay - W3Schools is on my to-do list.

THANK you again, and have a good weekend, Bob