We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

Make Text Field conditionally Visible

sfletcher1959
on
Medium Priority
886 Views
Last Modified: 2013-11-11
I have a text field that I want to make conditionally visible based on the value of another text field. I have this working with a combobox but I can't seem to find the magic words with another text field. If the ftiTimeframe field is equal to "Custom" I want the tiDateFrom and toDateTo to be visible.

I have tried both:

visible="{ftiTimeframe.text=='Custom'}" and

visible="{ftiTimeframe.text== 'Custom')?true:false}"

Here are the text fields:
 
<mx:FormItem id="fiTime" label="Timeframe">
				<mx:TextInput id="ftiTimeframe" editable="false" width="183"/>
			</mx:FormItem>			
			<mx:FormItem label="Date From" visible="{ftiTimeframe.text=='Custom'}">
				<mx:TextInput id="tiDateFrom" editable="false"/>
			</mx:FormItem>			
			<mx:FormItem label="Date To">
				<mx:TextInput id="tiDateTo" editable="false"/>
			</mx:FormItem>

Open in new window

Comment
Watch Question

Commented:
Your example worked perfectly when I tried?
zzynxSr. Software engineer
CERTIFIED EXPERT

Commented:
>> visible="{ftiTimeframe.text=='Custom'}"
That's ok.
What makes you think it doesn't work?
Can you post your complete code?

Author

Commented:
Ok guys, just remember I am just learning Flex - so don't laugh to much at my application. :-)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:view="com.view.*" 
	xmlns="*" layout="vertical"
	creationComplete="initApp()"
	verticalAlign="middle"
    horizontalAlign="left"  
    paddingTop="0"
>
    
    <mx:Style source="css/main.css" />
    
     <mx:Script>
        <![CDATA[
        	import mx.collections.ArrayCollection;
        	import mx.controls.Alert;
        	import mx.controls.CheckBox;
            import mx.rpc.events.ResultEvent;
            import flash.net.URLRequest;
			import flash.net.navigateToURL;
            import util.ModelLocator;
            
            
            [Bindable]
            private var dataCollection:ArrayCollection= new ArrayCollection();
            
            [Bindable]
            private var dataCollectionFilter:ArrayCollection= new ArrayCollection();
                		
 
  			private function initApp():void
  						{
    					chartManagerService.send()                                  //get the data now
  						}
							
			 private function getResult(event:ResultEvent):void{
                              dataCollection = event.result.charts.chart as ArrayCollection;                            
                              updateGrid();
                              
    }
                                                            
              private function dataGridChange():void{                  
                  			ta.text = dG1.selectedItem.description;
                  			cname.text = dG1.selectedItem.name;
                  			tab.text = dG1.selectedItem.category;
                  			active_CheckBox2.selected=dG1.selectedItem.active;                      
                      		series.text = dG1.selectedItem.series;
                      		ftiTimeframe.text = dG1.selectedItem.transDate; 					  		
 					  		tiDateFrom.text = dG1.selectedItem.dateFrom;
 					  		tiDateTo.text = dG1.selectedItem.dateTo;
 					  		catagory.text = dG1.selectedItem.categoryAxis;
 					  		catagoryField.text = dG1.selectedItem.categoryAxisField;
 					  		
              }
                 
			  private function updateGrid():void{
			  				ta.text = dG1.dataProvider.getItemAt(0).description;
			  				cname.text = dG1.dataProvider.getItemAt(0).name;
			  				tab.text = dG1.dataProvider.getItemAt(0).category;
			  				active_CheckBox2.selected=dG1.dataProvider.getItemAt(0).active;                      
                      		series.text = dG1.dataProvider.getItemAt(0).series;
                      		ftiTimeframe.text = dG1.dataProvider.getItemAt(0).transDate; 					  		
 					  		tiDateFrom.text = dG1.dataProvider.getItemAt(0).dateFrom;
 					  		tiDateTo.text = dG1.dataProvider.getItemAt(0).dateTo;
 					 		catagory.text = dG1.dataProvider.getItemAt(0).categoryAxis;
 					 		catagoryField.text = dG1.dataProvider.getItemAt(0).categoryAxisField;
	                        				  	
				}
				
			[Bindable]
			public var model:ModelLocator = ModelLocator.getInstance();	
				
			
				
			private function chartSelected() : void {
			if (dG1.selectedIndex == -1) return;
							model.currentChartId = dG1.selectedItem.Id;
						}	
				
			private function returnToMagicHome():void
                		{
     					navigateToURL(new URLRequest("http://www.training.prorizon.com/Magic94Scripts/mgrqispi94.dll?APPNAME=Web_Dev_Procurement&PRGNAME=nav_frame&ARGUMENTS=-N2007011101"),"_top");
				}
			
			private function goToPodDashboard():void
                		{
     					navigateToURL(new URLRequest("http://www.training.prorizon.com/Web_Dev_Pro/dashboard/main.html"),"details");
				}	
				
		
				
                ]]>
    </mx:Script>
    
 
    <mx:HTTPService id="chartManagerService"
		url="http://localhost/Magic94Scripts/mgrqispi94.dll"
		method="POST"
		useProxy="false"			
		result="getResult(event)">
					
	<mx:request>
		<appname>Flex_Demo</appname> 
		<prgname>user_charts</prgname>
		<arguments>param1,param2</arguments>
		<param1>{param1.text}</param1>
	</mx:request>
	</mx:HTTPService>	
       
    <mx:ApplicationControlBar tabChildren="true" id="appControlBar" width="100%">
        <mx:Label text="Dashboard:" id="dashboardLabel"/>
        <mx:ComboBox width="250" id="param1" close="chartManagerService.send();myViewStack.selectedChild=ViewOnly;"
        	 change="updateGrid()" tabIndex="0">
            <mx:dataProvider>
                <mx:Array>                                                     
                    <mx:String>All</mx:String>
                    <mx:String>Operational</mx:String>
                    <mx:String>Financial</mx:String>
                    <mx:String>Warehouse</mx:String>                     
                </mx:Array>
            </mx:dataProvider>
        </mx:ComboBox>
     </mx:ApplicationControlBar>
     
     <!-- If there is only one record for any of the above Chart Types there will be an error.
-->	
     
  <mx:Parallel id="fadeAndResize">
		<mx:Dissolve id="dissolve"/>
		<mx:Resize id="fastResize" duration="300"/>
	</mx:Parallel>
	
            
 <mx:ViewStack id="myViewStack" width="100%" height="100%">
 
 <mx:VBox id="ViewOnly">
  <mx:HDividedBox verticalAlign="top" horizontalAlign="left" width="100%" height="100%">
      <mx:Panel id="p1" title="Your Defined Charts" height="100%" width="50%">
      
      <mx:DataGrid id="dG1"
      	dataProvider="{dataCollection}"
      	click="chartSelected()"
      	change="dataGridChange()"  width="100%" height="217"> 
            <mx:columns>
            <mx:DataGridColumn dataField="Id" headerText="Id" width="20"  />            
            <mx:DataGridColumn dataField="name" headerText="Name" width="225"  />
            <mx:DataGridColumn id="dgcActive" dataField="active" headerText="Active" width="40">
            	<mx:itemRenderer>
			        <mx:Component>
        			 <mx:CheckBox selected="{data.active==1}"  enabled="false"/>
      	  		 	</mx:Component>                                    
					</mx:itemRenderer>
			</mx:DataGridColumn>	
            <mx:DataGridColumn dataField="seq" headerText="Seq#" width="40"  />
        </mx:columns>
         </mx:DataGrid>
                  
         <mx:TextArea id="ta" editable="false" width="100%" height="150" />        
         </mx:Panel>
         
 <mx:Panel id="p2" title="Chart Properties" height="100%" width="50%">
          
	
	<mx:VBox id="vbDesignObjects" label="Design">	
		<mx:Form>
			<mx:FormItem label="Chart Name">                    
                    <mx:TextArea id="cname" width="183" editable="false" height="50" />
                </mx:FormItem>
            <mx:FormItem label="Tab">	
				<mx:TextInput id="tab" editable="false"/>
			</mx:FormItem>  
            <mx:FormItem id="factive" label="Active">
            	    <mx:CheckBox id="active_CheckBox2" enabled="false"/>
            </mx:FormItem>                        
			<mx:FormItem id="fiTime" label="Timeframe">
				<mx:TextInput id="ftiTimeframe" editable="false" width="183"/>
			</mx:FormItem>			
			<mx:FormItem label="Date From" visible="{ftiTimeframe.text=='Custom'}">
				<mx:TextInput id="tiDateFrom" editable="false"/>
			</mx:FormItem>			
			<mx:FormItem label="Date To">
				<mx:TextInput id="tiDateTo" editable="false"/>
			</mx:FormItem>
			<mx:FormItem label="Series Axis">	
				<mx:TextInput id="series" editable="false" width="183"/>
			</mx:FormItem>			
			<mx:FormItem label="Catagory Axis">
				<mx:TextInput id="catagory" editable="false"/>
			</mx:FormItem>
			<mx:FormItem label="Category Axis Field">
				<mx:TextInput id="catagoryField" editable="false"/>
			</mx:FormItem>	
	</mx:Form>	 
	</mx:VBox>
	
	</mx:Panel>
    </mx:HDividedBox>	
 	</mx:VBox>
 	
 	
 	<mx:VBox id="EditView">	
 		<view:editChartView id="editChartView"
 			chart="{dG1.selectedItem}"		
			resizeEffect="{fadeAndResize}"
			horizontalScrollPolicy="off"
			verticalScrollPolicy="off" height="100%">
		</view:editChartView>		 
 	</mx:VBox>
 
 	
</mx:ViewStack>
 
         <mx:HBox borderStyle="solid" paddingTop="10" paddingBottom="10" 
               paddingLeft="10" paddingRight="10">
                        <mx:Button label="View" click="goToPodDashboard();"/>                        
                        <mx:Button label="Edit" click="myViewStack.selectedChild=EditView;"/>
                        <mx:Button label="Delete"/>
                        <mx:Button label="Exit" click="returnToMagicHome();"/>
                    </mx:HBox>
                     
</mx:Application>

Open in new window

zzynxSr. Software engineer
CERTIFIED EXPERT

Commented:
We're here to help, not to laugh ;o)


Why do all your fields have

editable="false" ?

I removed those and when I type 'Custom' in the field "Timeframe" the field date from appears! (as expected)
zzynxSr. Software engineer
CERTIFIED EXPERT

Commented:
...and if I delete the 'm' from "Custom" the field disappears again.
Seems ok to me.

Author

Commented:
I wanted to just display the field values. When the user presses "Edit" it takes them to a different view and a different mxml file.
zzynxSr. Software engineer
CERTIFIED EXPERT

Commented:
>> I wanted to just display the field values
I see.
and if the (un-editable) Timeframe field contains "Custom" you want to see the "Date From" field appear.
And what do you experience? You say it doesn't work.
Does that mean that even if the Timeframe field contains "Custom", you don't see the "Date From" field appear?


(Sorry, I have to leave now, so my next post will be later on)

Author

Commented:
Ok, I just read through the document, Jones911.

If I understand correctly, I should use states instead of viewstack?

If so, do I use only one mxml file (main.mxml) for the whole thing?

Commented:
Yep Look at the bottom example.  So one one state some date is displayed.  Then when you click edit the rest becomes available or in your case active.  I personally use modal popups to do edits and show the full data that I need to change.

Author

Commented:
"I personally use modal popups to do edits and show the full data that I need to change."

I take it modal popups are popups instead of changing states? Is there an example I can see?

I want to learn how to do it right and use best practices.

Thanks!
zzynxSr. Software engineer
CERTIFIED EXPERT

Commented:
Could you please answer the questions I asked you?

Author

Commented:
>> I wanted to just display the field values
I see.
and if the (un-editable) Timeframe field contains "Custom" you want to see the "Date From" field appear.
And what do you experience? You say it doesn't work.
Does that mean that even if the Timeframe field contains "Custom", you don't see the "Date From" field appear?


(Sorry, I have to leave now, so my next post will be later on)

Yes, that is correct.

Author

Commented:
Here is a screen print demonstrating the issue.
ee-001.jpg

Author

Commented:
Ah, a clue, I made the field parkable and I found there was a space after the word "Custom" and if I backspaced the space out my field appeared.

I don't understand where the space is coming from, however.
Commented:
Based on your screen shot I would tick with what you have and work out where the space is coming from.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
zzynxSr. Software engineer
CERTIFIED EXPERT
Commented:
>> I found there was a space after the word "Custom"
Ah, that explains everything.
You'll have to find out where that one comes from and eliminate it to make your app work as expected.

Author

Commented:
Thanks again!
zzynxSr. Software engineer
CERTIFIED EXPERT

Commented:
You're welcome.
Thanx 4 axxepting

Commented:
Great glad its working also I guess you know what I meant but tick  was meant to be stick  :)
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.