Show Hide Items In Replicants via JS

Hey All,

I have the following datacapture file:

[html]

Content

Type

This identifies whether the content is a block or inline element. A block element is an encapsulated section of content such as a paragraph or table. An inline element is a snippet of content that resides within another element for example a meta attribute. If inline is selected, all paragraph and line break tags will be stripped from the content.

Key

This identifies an element of content in the set. The key value must be a unique alphanumeric word (no spaces).

Description

This is an optional description of the content. This field has no impact on the generated output.

Body

This is the content field.

 external-editor-config="jaguar" external-editor-inline="f" wrap="off"/> </item> <item name="code" pathid="code"> <label>Code</label> <description> This is code view field. </description> <text required="t" maxlength="5000" /> </item> </container> </root-container> </ruleset> </data-capture-requirements> [/html] I am trying to write a event handler that will show/hide the "code" and "body" elements of the "content" replicant based on whether the user selects the "code" radio button (show "code" text field item, hide "body" item), or the "block"/"inline" radio button (hide "code" text field item, show "body" item). To do this, I have written the following JS code: <pre> function init() { IWEventRegistry.addFormHandler("onSaveValid", validateForm); IWEventRegistry.addFormHandler("/content-set/content/type", onItemChange, changeHTMLView); changeHTMLView( IWDatacapture.getItem("/content-set/content/type") ); } function validateForm() { var content = IWDatacapture.getItem("/content-set/content").getChildren(); if (content.length == 1) return true; var keys = new Array(); for (iterate through length of content) { var item = content.getChildByName("key"); if (keys[item.getValue()] == null) { keys[item.getValue()] = i; } else { alert("Error: Duplicate key values. The keys must be unique."); item.setFocus(); return false; } } return true; } function changeHTMLView(item){ var flag = isTypeCode(item); if( flag ) { setItemStatus (IWDatacapture.getItem("/content-set/content/code"), flag); setItemStatus (IWDatacapture.getItem("/content-set/content/body"), !flag); } else { setItemStatus (IWDatacapture.getItem("/content-set/content/code"), !flag); setItemStatus (IWDatacapture.getItem("/content-set/content/body"), flag); } } function isTypeCode(typeItem) { return (typeItem.getOptions()[typeItem.getValue()].value == "C"); } function setItemStatus(item, status) { item.setVisible(status); item.setRequired(status); } IWEventRegistry.addFormHandler("onFormInit", init); </pre> The resulting DCT displays all the correct radio buttons/fields, but the dynamic show/hide functionality doesn't work. I think my problem lies in trying to get a handle on the specific replicant that called the event handler. Any suggestions? Thanks. The resulting DCT displays all the correct radio buttons/fields, but the dynamic show/hide functionality doesn't work. I think my problem lies in trying to get a handle on the specific replicant that called the event handler. Any suggestions? Thanks.

Find more posts tagged with

Comments

ISCBorisB

Any suggestions? Thanks.

I once posted a working sample for something similar. Take a look [post=117557]here[/post], perhaps you can leverage it for your case

bgeorge

Hey thanks a bunch, that's working for me. Quick question, I'm trying to figure out how to integrate that 3rd radio option into your code. Your code seems to be hiding the "code" radio button and only showing the "block" and "inline" radio buttons. Thanks!

bgeorge

NM, there was a spelling error in one of the option labels. But one question still remains and that's how do I incorporate the third radio button. I see that you're checking the value of "toggle" but how do I check that with three radio buttons? From my code, the possible values are "B", "I" and "C". When returning the value of getValue to a variable and checking it for each of these values causes the whole show hide functionality to stop.

ISCBorisB

NM, there was a spelling error in one of the option labels. But one question still remains and that's how do I incorporate the third radio button. I see that you're checking the value of "toggle" but how do I check that with three radio buttons? From my code, the possible values are "B", "I" and "C". When returning the value of getValue to a variable and checking it for each of these values causes the whole show hide functionality to stop.

Not sure what you are asking... I've just illustrated a concept, you would have to grow the flesh of your own requirements on this sample bare bones.
Do you have a problem with Radio Button getValue? It's possible that you are getting the ordinal number 0, 1, 2... of the checked element, not your own B/I/C

Multi-valueParameter_Test.zip

bgeorge

Sorry about that there was a typo in my last post but that issue has been resolved. Thanks for posting the link to your previous post, but I seem to be having the same problem that other guy was with replicants and the object that's being hidden not showing up ever again. I'm running TeamSite 6.7.1 SP 1 and can't seem to resolve this issue. Did you guys ever figure out what the problem was?

bgeorge

Also, I did run your example, and it does the same thing where Field B doesn't appear. Here is what my new datacapture.cfg file looks like:

[html]

Content

Type

This identifies whether the content is a block or inline element. A block element is an encapsulated section of content such as a paragraph or table. An inline element is a snippet of content that resides within another element for example a meta attribute. If inline is selected, all paragraph and line break tags will be stripped from the content. Code is used as create/edit html source code.

Key

This identifies an element of content in the set. The key value must be a unique alphanumeric word (no spaces).

Description

This is an optional description of the content. This field has no impact on the generated output.

Body

This is the content field.

 external-editor-config="jaguar" external-editor-inline="f" wrap="off"/> </item> <item name="code" pathid="code"> <label>Code</label> <description> This is html code view field. </description> <textarea required="f" rows="15" cols="90" wrap="off"/> </item> </container> </root-container> <script><![CDATA[ IWEventRegistry.addFormHandler('onFormInit', init); function init() { loop_through_existing_containers(); IWEventRegistry.addItemHandler('/content-set/content/type', 'onItemChange', handle_toggle); IWEventRegistry.addItemHandler('/content-set/content', 'OnReplicantAdded', set_block_inline_code); } function loop_through_existing_containers() { var entries = IWDatacapture.getItem('/content-set').getChildren(); for (var j=0; j<entries.length; j++) set_block_inline_code(entries<j>); } function handle_toggle(item) { set_block_inline_code(IWDatacapture.getItem(item.getName() + '/..')); } function set_block_inline_code(cntr_instance) { var cntr = cntr_instance.getName(); var selectedOption = IWDatacapture.getItem(cntr + '/type').getValue(); if ( selectedOption != 2 ) { IWDatacapture.getItem(cntr + '/body').setVisible(true); IWDatacapture.getItem(cntr + '/body').setRequired(true); IWDatacapture.getItem(cntr + '/code').setVisible(false); IWDatacapture.getItem(cntr + '/code').setRequired(false); } else { IWDatacapture.getItem(cntr + '/body').setVisible(false); IWDatacapture.getItem(cntr + '/body').setRequired(false); IWDatacapture.getItem(cntr + '/code').setVisible(true); IWDatacapture.getItem(cntr + '/code').setRequired(true); } } ]]></script> </ruleset> </data-capture-requirements> [/html] [/html]

ISCBorisB

Have you run my code "as is", without any changes whatever? Did it work in your Environment?

bgeorge

Yes, I ran your code "as-is". Both your code and my code have that hiding problem.

estimate1.rptdesign

ISCBorisB

Yes, I ran your code "as-is". Both your code and my code have that hiding problem.

Code posted [post=117557]here[/post] has been successfully tested in the following Environments:

Win 2k3 EE, TS 6.5.0 SP3, Build Number: 63795
Win 2K3 R2 SP1, TS 6.7.1 SP1 Patch 73875, Build Number: 68040
Client Browser IE 6.0 in both cases

Note that code does not contain any hacks, everything used there has been documented in TS Manuals

What exactly is your problem manifestation? Can you illustrate with screen-shots what happens when you try to populate "New Form"?