Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 868
  • Last Modified:

Make Text Field conditionally Visible

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

0
sfletcher1959
Asked:
sfletcher1959
  • 8
  • 7
  • 5
2 Solutions
 
Jones911Commented:
Your example worked perfectly when I tried?
0
 
zzynxSoftware engineerCommented:
>> visible="{ftiTimeframe.text=='Custom'}"
That's ok.
What makes you think it doesn't work?
Can you post your complete code?
0
 
sfletcher1959Author 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

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
zzynxSoftware engineerCommented:
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)
0
 
zzynxSoftware engineerCommented:
...and if I delete the 'm' from "Custom" the field disappears again.
Seems ok to me.
0
 
sfletcher1959Author 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.
0
 
zzynxSoftware engineerCommented:
>> 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)
0
 
Jones911Commented:
0
 
sfletcher1959Author 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?
0
 
Jones911Commented:
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.
0
 
sfletcher1959Author 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!
0
 
zzynxSoftware engineerCommented:
Could you please answer the questions I asked you?
0
 
sfletcher1959Author 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.
0
 
sfletcher1959Author Commented:
Here is a screen print demonstrating the issue.
ee-001.jpg
0
 
sfletcher1959Author 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.
0
 
Jones911Commented:
Based on your screen shot I would tick with what you have and work out where the space is coming from.
0
 
zzynxSoftware engineerCommented:
>> 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.
0
 
sfletcher1959Author Commented:
Thanks again!
0
 
zzynxSoftware engineerCommented:
You're welcome.
Thanx 4 axxepting
0
 
Jones911Commented:
Great glad its working also I guess you know what I meant but tick  was meant to be stick  :)
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 8
  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now