community Alteryx IO MyAlteryx
alteryx Community
Search
This Board
  • Global Community
  • This Board
  • Knowledge
  • Users
 cancel
Turn on suggestions
Showing results for 
Search instead for 
Did you mean: 
Close
Free Trial

Dev Space

Customize and extend the power of Alteryx with SDKs, APIs, custom tools, and more.
SOLVED

Using HTML/JS - How come radio button does not display?

sjoseph1848
5 - Atom
‎07-30-2018 03:46 PM
When using the Alteryx HTML, JS to make a .yxi application, does anyone know why you cannot make a radio button using simple HTML or an alternative? I am able to make a checkbox, but when I use the html elements to form a radio button the system will not create the UI elements for it on the screen. 
 
 I used this basic example from W3 schools: 
 
    <form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><br>
    </form>
 
 
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>XMSG("ABC_Tool")</title>
<script type="text/javascript">
// Include version 1 of the base GUI library.
           
        document.write('<link rel="import" href="' + window.Alteryx.LibDir + '1/lib/alteryx/gui/includes.html">');
</script>
<!-- Update Name of Script File -->
    <script type="text/javascript" src='ABC.js'></script>    
    

 

</head>

 

<body>
<!-- Step 1 -->
<fieldset id="Step1View" style="display:none">
<legend>XMSG("Signing into system")</legend>
</fieldset>

 

<!-- Step 2 -->
<fieldset id="Step2View" style="display:none">
        <legend>XMSG("Welcome Page")</legend>

 

<!-- Add your Own logic -->



<label>Welcome to the ABC application</label><br><br>
    <form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><br>
    </form>

 

        <button style="width:116px;" type="submit" id="onlineMode" onclick="Step3();">XMSG("Next")</button><br/><br/>
        <br/><br/>
        <button style="width:116px;" type="submit" id="onlineMode" onclick="Debug();">XMSG("Debug")</button><br/><br/>
</fieldset>
Labels:
Reply
0 Likes

Accepted SolutionSolved! Go to Solution.

3 REPLIES 3
tlarsen7572
11 - Bolide
11 - Bolide
‎08-01-2018 04:50 PM

Two things:

  1. Did you post the entire file?  The HTML you posted is missing closing body and html tags.
  2. Both of your fieldsets are initialized with display: none:

 

<!-- Step 1 -->
<fieldset id="Step1View" style="display:none">
<legend>XMSG("Signing into system")</legend>
</fieldset>
 
<!-- Step 2 -->
<fieldset id="Step2View" style="display:none">
        <legend>XMSG("Welcome Page")</legend>

Do you have javascript code which changes the display setting?  Is it being loaded properly?  I noticed you are referencing an import of ABC.js.  Does ABC.js unhide these fieldsets?  Are you sure it is getting loaded without errors?

 

 

When you are debugging the HTML GUI, you can select Debug -> Show CEF Developer Tools:

SNAG-0013.png

 

When you click into your tool you will be presented with a debug screen that looks something like this:

CEF Screenshot.png

 

Make sure there are no errors and that your javascript is being loaded properly.

Reply
0 Likes
sjoseph1848
5 - Atom
‎08-06-2018 08:07 AM

 

 

 

I have included JS in the file, but it serves no purpose. I made this a very limited app to show that the radio button does not display, although the check button does display. 

 

In the attached file, you will see three radio buttons and three checkboxes. The checkboxes work fine, but the radio buttons do not display. 

 

Any guidance is much appreciated! 

 

 

Thanks for your reply, I attached my full HTML and Javascript below: 

 

 

 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>XMSG("PwC_Tool")</title>
<script type="text/javascript">
// Include version 1 of the base GUI library.
        document.write('<link rel="import" href="' + window.Alteryx.LibDir + '1/lib/alteryx/gui/includes.html">');      
//document.write('<link rel="import" href="' + window.Alteryx.LibDir + '2/lib/includes.html">');
</script>
<!-- Update Name of Script File -->
    <script type="text/javascript" src='ABC_Tool.js'></script>  
    
<!--
    -->

</head>

<body>
<!-- Step 1 -->
<fieldset id="Step1View" style="display:block">
        <legend>XMSG("Signing into system")</legend>
        <form action="">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>


<form action="">
<input type="checkbox" name="gender" value="male"> Male<br>
<input type="checkbox" name="gender" value="female"> Female<br>
<input type="checkbox" name="gender" value="other"> Other
</form>
</fieldset>
</body>
</html>

 

 

 

 

 

 

 

Javascript&colon; 


function resetFields () {
Alteryx.Gui.manager.GetDataItem('view').setValue('1')
viewSwitch ()
}

function DebugClearValues () {
    Alteryx.Gui.manager.GetDataItem('view').setValue('10')
    viewSwitch()
}
function Step1() {
Alteryx.Gui.manager.GetDataItem('view').setValue('1')
viewSwitch ()
login()
}
function Step2 () {
    Alteryx.Gui.manager.GetDataItem('view').setValue('2')
    viewSwitch()
}
function Step3 () {
    Alteryx.Gui.manager.GetDataItem('view').setValue('3')
    viewSwitch()
}

function viewSwitch () {
switch (Alteryx.Gui.manager.GetDataItem('view').value) {
    case '1':
        $('#Step1View').show()
        $('#Step2View').hide()
        $('#Step3View').hide()
        
        $('#Step10View').hide()
        //
        break
    case '2':
        $('#Step1View').hide()
        $('#Step2View').show()
        $('#Step3View').hide()
        
        $('#Step10View').hide()
        //
        break
    case '3':
        $('#Step1View').hide()
        $('#Step2View').hide()
        $('#Step3View').show()
        
        $('#Step10View').hide()
        //
        break
    case '10':
        $('#Step1View').hide()
        $('#Step2View').hide()
        $('#Step3View').hide()
        
        $('#Step10View').show()
        //
        break       
    default:
        resetFields()
};
}

function Debug () {
    Alteryx.Gui.manager.GetDataItem('view').setValue('10')
    viewSwitch()
}

function logout () {

}

 

 

 

 

Reply
0 Likes
tlarsen7572
11 - Bolide
11 - Bolide
‎08-06-2018 11:52 AM

Well, this is a bit strange.  There is a style coming from the Alteryx library include that is forcing radio buttons to be transparent (opacity of 0):SNAG-0015.png

 

You can force the opacity back to 1 by adding a <style> tag to your header with the appropriate settings.  Something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>XMSG("PwC_Tool")</title>
<script type="text/javascript">
// Include version 1 of the base GUI library.
        document.write('<link rel="import" href="' + window.Alteryx.LibDir + '1/lib/alteryx/gui/includes.html">');      
//document.write('<link rel="import" href="' + window.Alteryx.LibDir + '2/lib/includes.html">');
</script>
<!-- Update Name of Script File -->
    <script type="text/javascript" src='ABC_Tool.js'></script>  
    
<!--
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    -->
	<style>
	input[type=radio] {opacity: 1;}
	</style>
</head>

<body>
<!-- Step 1 -->
<fieldset id="Step1View" style="display:block">
        <legend>XMSG("Signing into system")</legend>
        <form action="">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>


<form action="">
<input type="checkbox" name="gender" value="male"> Male<br>
<input type="checkbox" name="gender" value="female"> Female<br>
<input type="checkbox" name="gender" value="other"> Other
</form>
</fieldset>
</body>
</html>

I am not sure why Alteryx would do this, but you will want to check your GUI to make sure there are no unintended visual artifacts as a result.  If so, you could always assign your radio buttons to a class and then style based on the class rather than on a radio button inputs.

 

Reply