Dev Space

cam_w · ‎06-03-2019

Hi all,

I'm not sure I'm doing this right ... but I read the other post on this here:

https://community.alteryx.com/t5/Dev-Space/Using-DataItemContainer-in-HTML-SDK/m-p/305766

I'm trying to set up a GUI interface that enables the user to pick one of 3 options and enter more information if required. The hiding of the sub-fields is not working as expected, but this is my first time using Radio buttons in the AYX HTML SDK.

<!DOCTYPE html>
<html style="padding:20px">
<head>
  <meta charset="utf-8">
  <title>SFTP Input</title>
	<script type="text/javascript">
		document.write('<link rel="import" href="' + window.Alteryx.LibDir + '2/lib/includes.html">');
	</script>
    <style type="text/css">
      body {
        margin: 15px;
      }
      #widgetList {
        padding-bottom: 20px;
      }
	  #indent1 {
	    margin-left: 28px;
	  }
      .header-ruler {
        background-color: #cccccc;
        height: 1px;
        border: 0 none;
        flex-grow: 1;
        margin-top: 0.625em;
        margin-left: 10px;
      }
      .header-message {
        color: #52617f;
        font-size: 1.78em;
        font-weight: normal;
        padding-bottom: 0px;
        margin: 0px;
        margin-bottom: 20px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      h2 {
        padding: 10px 0 5px 0;
        margin: 15px 5px 5px 0;
        font-size: 1.556em;
        font-weight: normal;
        color: #52617f;
      }
      h3 {
        color: #8698ba;
        font-size: 1.167em;
        margin: 6px 0px 3px 0;
        padding: 0;
        font-weight: normal;
        line-height: 1.42857143;
      }
      h3.container:first-child {
          border-top: 0;
      }
      .flex-row {
        margin: 0;
        padding: 0;
      }
      .flex-row li {
        list-style: none;
      }
    </style>
</head>
<body>
    <div class="header-message">
      <div>XMSG("SFTP Input")</div>
      <hr class="header-ruler"></hr>
    </div>
      <section>
        <h2>XMSG("Enter Mainframe credentials")</h2>
        
		<ayx data-ui-props='{type:"RadioButton", groupName: "MainframeCreds", option:{value:"personalracf", label:"Use Personal RACF"}}' 
			data-item-props = '{dataName: "rbPersonalRacf"}'></ayx>
		<div id="indent1">
			<label>XMSG("Mainframe RACF ID:")</label>
			<ayx data-ui-props = "{type: 'TextBox', placeholder: ''}" data-item-props = "{dataName: 'personalRACF>tbUsername'}"></ayx>
			<label>XMSG("Mainframe RACF Password:")</label>
			<ayx data-ui-props = "{type: 'TextBox', placeholder: ''}" data-item-props = "{dataName: 'personalRACF>tbPassword', password: true, encryptionMode: 'machine'}"></ayx>
		</div>
		
        <ayx data-ui-props='{type:"RadioButton", groupName: "MainframeCreds", option:{value:"personalkey", label:"Use Personal Private Key"}}' 
			data-item-props = '{dataName: "rbPersonalKey"}'></ayx>
		<div id="indent1">
			<label>XMSG("Mainframe RACF ID associated with the Key:")</label>
			<ayx data-ui-props = "{type: 'TextBox', placeholder: ''}" data-item-props = "{dataName: 'personalKey>tbUsername2'}"></ayx>
			<label>XMSG("Path to the Personal Private Key:")</label>
			<ayx data-ui-props = "{type: 'TextBox', placeholder: ''}" data-item-props = "{dataName: 'personalKey>tbPersonalKeyPath'}"></ayx>
		</div>
		
        <ayx data-ui-props='{type:"RadioButton", groupName: "MainframeCreds", option:{value:"functionalkey", label:"Use Functional Private Key"}}' 
			data-item-props = '{dataName: "rbFunctionalKey"}'></ayx>
				
      </section>

    <script>
      window.Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {
	  
        manager.getDataItem('rbPersonalRacf').registerPropertyListener('value', function(dataItemEvent1) {
          var hide = dataItemEvent1.value;
          var personalKey = manager.getDataItem('personalKey');
          personalKey.setHidden(hide);
        });
		
        manager.getDataItem('rbPersonalKey').registerPropertyListener('value', function(dataItemEvent2) {
          var hide = dataItemEvent2.value;
          var personalRACF = manager.getDataItem('personalRacf');
          personalRACF.setHidden(hide);
        });
		
        manager.getDataItem('rbFunctionalKey').registerPropertyListener('value', function(dataItemEvent3) {
          var hide = dataItemEvent3.value;
          var personalRACF = manager.getDataItem('personalRacf');
          personalRACF.setHidden(hide);
          var personalKey = manager.getDataItem('personalKey');
          personalKey.setHidden(hide);
        });
		
      };
    </script>
</body>
<style>
  .blueTitle {
    background-color: #e5e5e5;
  }
</style>
</html>

@RyanSw - adding because your comments in the above linked conversation got me this far ... :)

cam_w · ‎06-04-2019

Update -

I discovered how to turn on the Debug menu (LINK), and was able to start conjuring up my JS DOM experience from 3 years ago. I was able to improve the hiding of the tools by assigning a class to the div tags and using the document properties to hide the ayx widgets and the labels all together. This seems better, but the Radio Buttons are still behaving like a pack of kindergarteners ... :)

Anyone know how the 'registerPropertyListener' is supposed to be configured so that clicking the radio buttons results in following my intensions ...

Clicking the first radio button (RB) should hide div under the second RB.
Clicking the second RB should hide div under the first RB.
Clicking the third RB should hide div under first and second RBs.

Below is the truncated updates made to the original HTML file:

...
		<div id="indent1" class="credPersonalRACF">
...
		<div id="indent1" class="credPersonalKey">
...
    <script>
      window.Alteryx.Gui.BeforeLoad = function (manager, AlteryxDataItems, json) {
        manager.getDataItem('rbPersonalRacf').registerPropertyListener('value', function(dataItemEvent1) {
          document.getElementsByClassName('credPersonalRACF')[0].style.display = "block";
		  document.getElementsByClassName('credPersonalKey')[0].style.display = "none";
        });
        manager.getDataItem('rbPersonalKey').registerPropertyListener('value', function(dataItemEvent2) {
          document.getElementsByClassName('credPersonalRACF')[0].style.display = "none";
		  document.getElementsByClassName('credPersonalKey')[0].style.display = "block";
        });
        manager.getDataItem('rbFunctionalKey').registerPropertyListener('value', function(dataItemEvent3) {
          document.getElementsByClassName('credPersonalRACF')[0].style.display = "none";
		  document.getElementsByClassName('credPersonalKey')[0].style.display = "none";
        });		
      };
    </script>
...

cam_w · ‎06-05-2019

Update -

I can't even get a simple 2 radio button example to work ... ugh! I took the <script> out and put this interface in the tool:

		<ayx data-ui-props='{type: "RadioButton", widgetId: "rbPersonalRacf", groupName: "MainframeCreds", option:{value:"rbPersonalRacf", label:"Use Personal RACF"}}'>
		  <label>Contents of collection 1</label>
		</ayx>
		
		<ayx data-ui-props='{type: "RadioButton", widgetId: "rbPersonalKey", groupName: "MainframeCreds", option:{value:"rbPersonalKey", label:"Use Personal Private Key"}}'>
		  <label>Contents of collection 2</label>
		</ayx>

I've read the documentation a dozen times, but I'm chasing myself in circles. The 'groupName' item in data-ui-props seems to link the radio buttons, but they don't click and unclick correctly.

Does anyone have an example that uses multiple RadioButton widgets, not the RadioGroup widget?

RyanSw · ‎06-05-2019

You need to share a data item between the radio buttons for them to behave with exclusivity as you describe, this will then hide their children as you desire.

Here's an example:

      <ayx 
        data-item-props='{dataName: "MainframeCreds"}'
        data-ui-props='{type: "RadioButton", widgetId: "rbPersonalRacf", groupName: "MainframeCreds", option:{value:"rbPersonalRacf", label:"Use Personal RACF"}}'>
          <label>Contents of collection 1</label>
      </ayx>
      
      <ayx
        data-item-props='{dataName: "MainframeCreds"}'
        data-ui-props='{type: "RadioButton", widgetId: "rbPersonalKey", groupName: "MainframeCreds", option:{value:"rbPersonalKey", label:"Use Personal Private Key"}}'>
        <label>Contents of collection 2</label>
      </ayx>

Hope it helps!

cam_w · ‎06-06-2019

@RyanSw - Thank you!!

I swear I tired this ... because I read this line from the RadioButton documention:

(Required) All radio buttons that share the same groupName behave as a group. (Grouped radio buttons must also share the same data item.)

I did put the data-item-props after the data-ui-props, but from what I've seen of other widgets I don't think would cause this issue. From this example I was able to get that portion working, and then the rest of my UI. I still need to test it with my input connectors, and plug in the Python engine, but I've done that part before.

Maybe I justed needed to reboot, my brain and my computer ... :)

niravparikh · ‎07-31-2020

@c2willis Would you be able to post you entire HTML file ? my use case is to have dropdowns under each Radio buttons and want to hide the dropdowns based on which Radio button is selected. Would appreciate if you can share you entire html file.

Thanks in advance.

Dev Space

HTML SDK - Multiple Radio Buttons with listners not hiding sub fields as expected