nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Replicant form field API control

MJizzle

Hello, I am fairly new to template building, and I'm trying to create a drop down list (3 item in it) which acts as a trigger to either show/hide a text field.

I've writte some JavaScript which I'm including in my datapcapture.cfg, but the code is written in a way to only show the text field for the 1st replicant item. I've tried a FOR LOOP, but I'm getting errors.

Here's a code snippet:

*container name="MenuGroup" location="MenuGroup" combination="AND" hide-name="t" min="1" max="2">
*item name="MenuTitle">
*label>Menu Title*/label>
*text required="t" size="50">*/text>
*/item>

*container name="MenuItem" location="MenuItem" min="1" max="10" combination="AND" hide-name="t">
*label>Body Section*/label>

*item name="LinkType" pathid="LinkType">
*label>Link Type
*select required="f" multiple="f">
*option value="alert" label="alert"/>
*option value="new" label="new"/>
*option value="update" label="update"/>
*/select>
*/item>

*item name="LinkTest" pathid="LinkTest">
*label>Test*/label>
*text required="f" size="50">*/text>
*/item>
*/container>

Here's the JavaScript I wrote:
*script language="JavaScript">
function init(){

//Add the ItemHandler for the item /BodyContent/Section
IWEventRegistry.addItemHandler("/MenuGroup/MenuItem/LinkType", "onItemChange", toggleContainer);
toggleContainer(IWDatacapture.getItem("/MenuGroup/MenuItem/LinkType"));
}

function toggleContainer(item) {
//Hide fields
//var containerTest = item.getOptions()[item.getName()].value;
//alert(containerTest);

var containerTrigger = item.getOptions()[item.getValue()].value == "alert";
var containerToTrigger = IWDatacapture.getItem("/MenuGroup[1]/MenuItem[1]/LinkTest");
if (containerToTrigger) {
containerToTrigger.setVisible(containerTrigger);
}
else { alert("Cannot find container."); }
}
IWEventRegistry.addFormHandler("onFormInit", init);
*/script>

I know it's only toggling the first item due to the [1] brackets, but how can I creatively/dynamically code this to work on replicant X?

THANK YOU!

Also, this is my first post, so if I'm doing something wrong, please let me know!

How can I paste code into a thread without replacing all "<" with "*"? Smiley Happy

Find more posts tagged with

Comments

nipper

You can post XML inside HTML tags [ html ] [ /html ]

The way you wrote the code, this looks like it should work correctly for the onItemChange event. Is this true ? item will provide the item that changed so you do not need to worry about the replicants.

Now on init, you will need to know the # of children (getChildren().length) and loop though to run toggleContainer

MJizzle

Thanks for showing me the code trick, nipper!

Yes, my onItemChange event is working. In my example, I'm going as basic as I can, and have 2 replicants for container MenuItem. I only have 1 MenuGroup. If in either of those 2 drop downs (LinkType) I set the value to "alert", the onItemChange triggers and only the text field in the first replicant will toggle. If I'm changing the drop down in the second replicant, I'd expect the second LinkTest field will toggle.

How will passing the # of children help? I'd need to know the specific child that the drop down changed from, right?

Hope that makes sense!

nipper

For the items that are triggered by the OnItemChange event, you do not need the replicant number. The variable item will have the appropriate value.

function toggleContainer(item) {
itemName = item.getName;
alert("name - "+itemName);

If you change LinkType and want to use LinkText then you will need to parse the name to get the appropriate item name.

When you open an existing template, you *may* need to run toggleName. In that case you need to loop through the # of children for each replicant and run that function.

HTH

Andy

Adam Stoller

I'm not sure if it matters for what you're doing - but the code you posted shows an item MenuTitle without a

pathid

attribute ...

MJizzle

Thanks, I'm still working on the same issue this AM. I've added the pathid like ghoti suggested.

Can you reference paths locally, like var containerToTrigger = IWDatacapture.getItem("LinkTest");

or can I use the "item" value in that getItem somehow?

I'm sure I'm overlooking something very minor!

ISCBorisB

Thanks, I'm still working on the same issue this AM. I've added the pathid like ghoti suggested.

Can you reference paths locally, like var containerToTrigger = IWDatacapture.getItem("LinkTest");

or can I use the "item" value in that getItem somehow?

I'm sure I'm overlooking something very minor!

Can you elaborate a bit? What exactly is the problem you are trying to solve?

I've read your code and it *looks* like you want to hide all nested 'LinkTest' items if corresponding 'LinkType'
is an 'alert'. Is that correct?

MJizzle

Essentially yes! I'm looking to show/hide the LinkTest field which appears directly below the LinkType the user just changed. I'm not able to toggle the Xth LinkTest field.

If I have it mapped out like:

MenuGroup(1)
-MenuItem(1)
--LinkType
--LinkTest
-MenuItem(2)
--LinkType
--LinkTest <----- I'm never able to get this one to toggle unless I hard code it in my onItemChange
MenuGroup(2)
-MenuItem(1)
--LinkType
--LinkTest

Right now I'm trying to do regex to grab the digit value inside both MenuGroup and MenuItem

MJizzle

I got it to work, but I'm sure there's a more efficient way (sounds like everyone who replied seemed to think so)!

Thanks for everyone's help!

Here's the final working code, but feel free to keep suggesting cleaner alternatives.

[html]
function toggleContainer(item) {
var menuGroupNum = item.getName().match(/\d+/)[0];

var menuItemSplit = item.getName().split("MenuItem");
menuItemNum = menuItemSplit[1].match(/\d+/)[0];

var containerTrigger = item.getOptions()[item.getValue()].value == "alert";
var containerToTrigger = IWDatacapture.getItem("/MenuGroup[" + menuGroupNum + "]/MenuItem[" + menuItemNum + "]/LinkTest");
if (containerToTrigger) {
containerToTrigger.setVisible(containerTrigger);
}
else { alert("Cannot find container."); }
}

[/html]

Adam Stoller

I got it to work, but I'm sure there's a more efficient way (sounds like everyone who replied seemed to think so)!

Thanks for everyone's help!

Here's the final working code, but feel free to keep suggesting cleaner alternatives.

[html]
function toggleContainer(item) {
var menuGroupNum = item.getName().match(/\d+/)[0];

var menuItemSplit = item.getName().split("MenuItem");
menuItemNum = menuItemSplit[1].match(/\d+/)[0];

var containerTrigger = item.getOptions()[item.getValue()].value == "alert";
var containerToTrigger = IWDatacapture.getItem("/MenuGroup[" + menuGroupNum + "]/MenuItem[" + menuItemNum + "]/LinkTest");
if (containerToTrigger) {
containerToTrigger.setVisible(containerTrigger);
}
else { alert("Cannot find container."); }
}

[/html]

I'm not positive I understand the structure of your DCT - but I think it could be done like this:

function toggleContainer(item) {
 alert("item: " + item.getName());    // 'item' is LinkType - yes?

    var LinkTestItem = IWDatacapture.getItem(item.getName().replace(/Type$/, "Test"));
    alert("LinkTestItem: " + LinkTestItem.getName()); // right?

    if (item.getOptions()[item.getValue()].value == "alert"){
        LinkTestItem.setVisible(false);
    }
    else {
        LinkTestItem.setVisible(true);
    }
}

Or was your intent to hide the container that contains both the LinkType and LinkTest items based on the value of the contained LinkType? (if so, you'd never be able to change it once set)

ISCBorisB

I got it to work, but I'm sure there's a more efficient way (sounds like everyone who replied seemed to think so)!

Do not get carried away by the vague hints that somebody can do better. Any code at all can be improved, that applies to
the code of zero length as well. Your code works and does what you want? It's the best one ever written, move on to something
that does not work yet Smiley Very Happy

That said, the following illustrates my favorite approach in cases like yours.
1. Make 2 Functions, one to cover an Event and another to loop through replicants onInit to set existing
entries the way you want it. Note the the second one re-uses the first, you can almost always do that in such case.

2. Use 'getChildren()/Loop Through' wherever possible instead of obscure and Error-prone XPath notation.
( I feel sick when I have to code somethinng like ...abc + "foo[" + i + "]"... )

//--------------------------------------------------------------------------------
function init() {
   IWEventRegistry.addItemHandler("/MenuGroup/MenuItem/LinkType", "onItemChange", toggleLinkTest);
   toggleContainer(IWDatacapture.getItem("/MenuGroup/MenuItem/LinkType")); 
}

//--------------------------------------------------------------------------------
function toggleLinkTest(item) {
   // The line below means: Take Item(LinkType), Find Sibling(LinkTest), Set Sibling Visibility
   IWDatacapture.getItem(item.getName() + "/../LinkTest").setVisible(item.getValue() != 0);
}

//------------------------------------------------------------------------------
function toggleContainer() {
   // Loop through Menu Groups
   var groups = IWDatacapture.getItem('/MenuGroup').getChildren();
   for (i=0; i<groups.length; i++) {

      // Loop through Group Entries
      var entries = groups.getChildren();
      for (j=0; j<entries.length; j++) 
         if (entries.getName().match('MenuItem')) 
            toggleLinkTest(IWDatacapture.getItem(entries.getName() + "/LinkType"));
   }
}

MJizzle

This is in reply to what ghoti last wrote me...

Your function worked as well.

The first alert produced: "item: /MenuGroup[1]/MenuItem[2]/LinkType"
The second alert produced: "LinkTestItem: /MenuGroup[1]/MenuItem[2]/LinkTest"

...bottom line, the associated text field "LinkTest" toggled as I hoped as the "LinkType" field changed to "alert" or other.

Thanks!

MJizzle

This in response to aquamarine...

Your code worked very well too, and I obviously liked the onInit call to show/hide any fields which met the trigger value (alert or item 0 as you referenced it).

Many thanks!

nipper

This in response to aquamarine...

That is a pretty good name for ICSBorisB, better than Bo, which is what I call him. :-)

ISCBorisB

That is a pretty good name for ICSBorisB, better than Bo, which is what I call him. :-)

If you ask me 'Bo' is much better than that strange IWOV moniker :-)

nipper

If you ask me 'Bo' is much better than that strange IWOV moniker :-)

And that is Mister 2nd Life Ruby to you. :-)

MJizzle

Ha, sorry. This thread is the first time I've used the forums, so I'm getting used to it! Who knows....

Have a nice weekend all!