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; } } }

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

sjoseph1848

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="female"> Female<br>

<input type="radio" name="gender" value="other"> Other<br><br>

</form>

<!DOCTYPE html>

<head>

// Include version 1 of the base GUI library.

document.write('<link rel="import" href="' + window.Alteryx.LibDir + '1/lib/alteryx/gui/includes.html">');

</script>

</head>

<body>

<legend>XMSG("Signing into system")</legend>

</fieldset>

<legend>XMSG("Welcome Page")</legend>

<label>Welcome to the ABC application</label><br><br>

<form>

<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="Debug();">XMSG("Debug")</button><br/><br/>

</fieldset>

Macros

Accepted answers

tlarsen7572

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):

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.

All comments

tlarsen7572

Two things:

Did you post the entire file? The HTML you posted is missing closing body and html tags.
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:

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.

sjoseph1848

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>

<head>

// 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>

<!--

-->

</head>

<body>

<legend>XMSG("Signing into system")</legend>

<input type="radio" name="gender" value="female"> Female<br>

<input type="radio" name="gender" value="other"> Other

</form>

<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 ()

}

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 () {

}

tlarsen7572

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):

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>

Quick Links

Popular Tags

This months top contributors

atcodedog05 19598

Qiu 15905

binu_acs 15783

MarqueeCrew 13709

apathetichell 13703