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

Job initiation screen | Validation based on radio button

rohitspathak123

Hi,

One the workflow job initiation screen I have 2 radio button ( Deploy without approval and Deploy with Approval).

If user selects 'Deploy with Approval' than 'Approver List' dropdown should appear on Job initiation screen otherwise not.

Is it possible on job initiation screen ?

I tried something like this , but its not working:

[HTML]
TAG_info(

JobTitle => [html => "", is_required => 'true', label => "Job Title", error_msg => 'Please complete the Job Title field',],

FlowType => [html => "Deployment (Without Approval)\n".
"Deployment (With Approval)\n".
label => "Submit content for ",
is_required => true,],

);

my $flow_type = __VALUE__('FlowType');

print

if ($flow_type eq 'Flow1')
{
Approver1 => [html => "$approver_list_box", is_required => 'true', label => "Choose Reviewer", error_msg => 'Please choose a approver',],

}

[/HTML]

Any suggestion ?

Find more posts tagged with

Comments

ISCBorisB

In WFT you can do it with the plain vanilla Java Script. For example, you can generate "Approval List" upfront and
toggle it's visibility with the radio-button onClick or onChange Event.

You can inject your Java Script Code into WF Instantiation Form using CGI_info directive "pre_tagtable_html" and "post_tagtable_html"
properties. Alternatively, you may want to "move" these Controls from WFT to the start CGI Task, may be somewhat easier to do.

rohitspathak123

Thanks Boris,

One more question. Right now all my 2 radio button are appearing on same row on Initiation Form. How can I make them appear on separate rows ?

Rohit

rohitspathak123

Hi,

I am new to javascript. How do i refer to the drop down field in javascript and make it hidden. I was trying something like this:

[HTML]

FlowType => [html =>
"Deployment (Without Approval)**************** \n".
************************ "Deployment (With Approval) ",
label => "Submit content for ",
is_required => true,],

ApproverList => [html => "$approver_list_box", is_required => 'false', label => "Select Approver", error_msg => '',],

[/HTML]

[HTML]
function displayApproverList()
{
alert ("Approver List");
alert (document.forms.ApproverList );
this.document.forms.ApproverList.hidden = true;
}

[/HTML]

But this is not working. JS function is being called successfully.

Adam Stoller

Thanks Boris,

One more question. Right now all my 2 radio button are appearing on same row on Initiation Form. How can I make them appear on separate rows ?

Rohit

Are you talking about this:

...
  FlowType => [html => "Deployment (Without Approval)\n".
       "Deployment (With Approval)\n".
    label => "Submit content for ",
    is_required => true,], 
...

There are several problems with the above, included in those problems is that you have provided a simple string (with newlines) for the HTML - that is not a radio button - perhaps you should go to w3schools and learn the HTML syntax for elements like radio buttons. Additionally, the second period ([...]With Approval)\n".) should be a comma.

ISCBorisB

Save the following sample and open it up with the Browser to see how that works. See if you can leverage it[html]

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
POC
<script type="text/javascript">

</script>

onClick="javascript&colon;toggleDisplay('mySelectID', true)">Show

onClick="javascript&colon;toggleDisplay('mySelectID', false)">Hide

One
Two
Three

[/html]

rohitspathak123

Hi Boris,

This was informative. By the way I was able to refer to my drop down using javascript and hide it on selection of radio button.

 
function hideDropDown()
{
this.document.forms[0].ApproverDropDown.style.display ="none";

}

This code is working. It hides the drop down field. But there is one more problem. It hides the drop down field on WFT screen, but the label present ("Select an approver") remains as it is. The label does not gets disappeared.

Is there any way to hide the label present against the drop down too

 

ApproverDropDown => [html => "$approver_list_box", is_required => 'false', label => "Select Web Strategy User", error_msg => 'Select an approver',],

Please help

Adam Stoller

You could always embed the label into the 'html' portion of the TAG_Info() piece - it will show up in the same column as the input fields (instead of in the left-column) - but you'll have more control over it and could certainly wrap it in a style that can be set to display:none too.

rohitspathak123

Thanks Ghoti,

I moved it to the html part of TAG_info() but still the label is not disappearing ( dropdown does)

 

ApproverList => [html => "Select a Approver : $approver_list_box", is_required => 'false', label => "", error_msg => 'Please select ',],

Adam Stoller

Thanks Ghoti,

I moved it to the html part of TAG_info() but still the label is not disappearing ( dropdown does)
 

ApproverList => [html => "Select a Approver : $approver_list_box", is_required => 'false', label => "", error_msg => 'Please select ',],

You need to wrap the "label" in a style and as part of your hide/expose javascript code adjust that style to either be hidden or visible.

rohitspathak123

Thanks,

This was helpful. I am able hide everything now. For everyone's benefit below is the code to achieve this:




Approver List=>[html => "Select Approver:< font>>
[font=Courier New]$approver_list_box 
", 

is_required => 'false', 
label => "", 
is_required => true,],

Validation Code


function hideDropDown()
{
this.document.getElementById('Div1').style.display ="none";
this.document.getElementById('Div2').style.display ="none";
}

Rohit
[/font]