Adding & expression to a <While...> Tag

How-to Discussions
1

Hello there,

I want to check more than one value in an WhileString tag if it is empty or not. Best idea I came with is doing so:

WhileString Value="{FirstName}&&{LastName}" Test=“IsEmpty”
Change BtnColor.Color="#333"/
/WhileString

I want to check if the FirstName, LastName, PhoneNumber are not empty. I have already defined them as observable, no error has occur but it doesn’t work properly I think !!1

2

Since we have UX expressions, you don’t necessarily need to use WhileString in the first place.

Here’s one way to do this:

<App>
	<JavaScript>
		var firstname = "";
		var lastname = "";
		module.exports = {
			firstname: firstname,
			lastname: lastname
		};
	</JavaScript>
	<WhileTrue Value="{firstname} == '' && {lastname} == ''">
		<Change theText.Color="#f00" />
	</WhileTrue>
	<Text ux:Name="theText" Value="|{firstname}| |{lastname}|" Alignment="Center" />
</App>

In your particular case though, it would make sense to have a different validation implementation. I’d suggest you to use combineLatest reactive operator and have a single valid variable to represent the combined state:

<App>
	<JavaScript>
		var Observable = require("FuseJS/Observable");

		var firstname = Observable("a");
		var lastname = Observable("b");
		var phonenumber = Observable("c");

		var valid = firstname.combineLatest(lastname, phonenumber, function(fname, lname, pnumber) {
			return fname.length > 0 && lname.length > 0 && pnumber.length > 0;
		});

		module.exports = {
			firstname: firstname,
			lastname: lastname,
			phonenumber: phonenumber,
			valid: valid
		};
	</JavaScript>
	<WhileTrue Value="{valid}">
		<Change theText.Color="#f00" />
	</WhileTrue>
	<Text ux:Name="theText" Value="|{firstname}| |{lastname}| |{phonenumber}|" Alignment="Center" />
</App>
3

This was super helpful !!

However, the combineLatest function with text tag is not working with me. I don’t know what seems the problem my component is as follow:

 <JavaScript>
      var Valid=FirstName.combineLatest(LastName,PhoneNumber,function(fname,lname,phone){
	 return fname.length > 0 && lname.length > 0 && phone.length > 0;
});
     module.exports = {
       Valid,
        FirstName:FirstName,
        LastName:LastName,
        PhoneNumber:PhoneNumber
   }
 </JavaScript>
 <Rectangle ux:Class="TextBoxEn" CornerRadius="3" Margin="5">
     <string ux:Property="Label" />
     <string ux:Property="Text" />
     <float4 ux:Property="BorderColor" />
     <Stroke Brush="#F7931E" Width="1" Color="{Property BorderColor}" />
     <TextInput PlaceholderText="{Property Label}" Value="{Property Text}" PlaceholderColor="TextOrg" Height="50" Padding="5" />		
   </Rectangle>

            <TextBoxEn Label="First Name" ux:Name="FName" Text="{FirstName}" BorderColor="#F7931E">
			</TextBoxEn>
			<TextBoxEn Label="Last Name" ux:Name="LName" Text="{LastName}" BorderColor="#F7931E">
			</TextBoxEn>
			<TextBoxEn Label="Phone Number" ux:Name="Phone" Text="{PhoneNumber}" BorderColor="#F7931E" >
			</TextBoxEn>

       <WhileTrue Value="{Valid}">
				<Change BtnColor.Opacity="0.5"/>
			</WhileTrue>		
	<Panel Width="150" ux:Name="SignUp" Height="30" Dock="Bottom" Margin="0,20" Alignment="Top" Clicked="{goToHome}">
				<Text Alignment="Center" Font="Arabic" Value="Sign Up" FontSize="18" Color="#fff" />			
				<Rectangle CornerRadius="3" ux:Name="BtnColor" Color="GreenBtn" Width="300" Height="40">
							<Shadow Angle="102" Size="2" />
				</Rectangle>
				<Circle Opacity="0" Alignment="Center" Layer="Background" Width="240" Height="240" Color="#FF3366">
					<Scaling Factor="0.25" />
				</Circle>
			</Panel>
4

Please post complete reproductions. That is, a single-UX-file-app that one could copy-paste and run.

In your JavaScript code, you are exporting variables that are not even defined. You still want to use Observables, like in my example, because combineLatest is a reactive operator on Observables.