📺 "One project. One language. Three apps." Learn more in our upcoming code sharing webinar!

NativeScript Core

Dataentry

Dataentry Signup

Sign up form example with text-fields, custom buttons and switch

HTML

<StackLayout>
    <Button class="btn btn-outline icon btn-active" (tap)="onFacebookLoginTap()">
        <FormattedString>
            <Span text="&#xea90;" horizontalAlign="left" foregroundColor="#3B5998"></Span>
            <Span text=" Sign up with " foregroundColor="#3B5998"></Span>
            <Span text="Facebook" fontAttributes="Bold" foregroundColor="#3B5998"></Span>
        </FormattedString>
    </Button>
    <Button class="btn btn-outline icon btn-active" (tap)="onGoogleLoginTap()">
        <FormattedString>
            <Span text="&#xea8b;" foregroundColor="#d34836" ></Span>
            <Span text=" Sign up with " foregroundColor="#d34836" ></Span>
            <Span text="Google +"  foregroundColor="#d34836" fontAttributes="Bold"></Span>
        </FormattedString>
    </Button>

    <StackLayout class="form">
        <StackLayout class="input-field">
            <Label text="Name" class="label" textWrap="true"></Label>
            <TextField #name hint="Name" text="" class="input input-border" autocorrect="false"></TextField>
        </StackLayout>
        <StackLayout class="input-field">
            <Label text="Email" class="label" textWrap="true"></Label>
            <TextField #email hint="Email" text="" class="input input-border" autocorrect="false"></TextField>
        </StackLayout>
        <StackLayout class="input-field">
            <Label text="Password" class="label" textWrap="true"></Label>
            <TextField #password hint="Password" text="" [secure]="secureproperty" class="input input-border" autocorrect="false"></TextField>
        </StackLayout>

        <StackLayout orientation="horizontal">
            <Label text="Show password" textWrap="true" class="m-15" verticalAligment="center"></Label>
            <Switch #sw checked="true" (checkedChange)="switchChanged(sw.checked)" class="switch"></Switch>
        </StackLayout>
    </StackLayout>

    <Button text="Sign up" (tap)="signup(name.text, email.text, password.text)" class="btn btn-primary btn-active"></Button>
    <Button text="Forgot password?" (tap)="forgottenpassword()" class="btn btn-primary btn-active"></Button>
</StackLayout>

TypeScript

    public secureproperty = true;

    public onFacebookLoginTap() {
        console.log("login with facebook");
    }

    public onGoogleLoginTap() {
        console.log("login with google");
    }

    public inSignUpTap() {
        console.log("sign up tap");
    }

    public switchChanged(args) {
        console.log(args);
        this.secureproperty = args;
    }

    public signup(name, email, password) {
        console.log("name: " + name + " email: " + email + " password: " + password);
    }

    public forgottenpassword() {
        console.log("forgotten password");
    }
}

Improve this document

Demo Source


Dataentry Sociallogin

Welcome with Social Login

<ScrollView>
    <StackLayout>
        <Image width="210" height="150" class="m-30" src="res://icon"></Image>
        <Button class="btn btn-outline icon btn-active" borderColor="#3B5998" (tap)="onFacebookLoginTap()">
            <FormattedString>
                    <Span text="&#xea90;" horizontalAlign="left" foregroundColor="#3B5998"></Span>
                    <Span text=" Login with " foregroundColor="#3B5998"></Span>
                    <Span text="Facebook" fontAttributes="Bold" foregroundColor="#3B5998"></Span>
            </FormattedString>
        </Button>
        <Button color="#3B5998" class="btn btn-outline icon btn-active" borderColor="#d34836" (tap)="onGoogleLoginTap()">
            <FormattedString>
                    <Span text="&#xea8b;" foregroundColor="#d34836"></Span>
                    <Span text=" Login with " foregroundColor="#d34836"  class="h3"></Span>
                    <Span text="Google +"  foregroundColor="#d34836" fontAttributes="Bold" class="h2"></Span>
            </FormattedString>
        </Button>
        <Button class="btn btn-primary btn-active" text="Sign up with email" (tap)="inSignUpTap()"></Button>
    </StackLayout>
</ScrollView>

Social Login

HTML

<ScrollView>
    <StackLayout class="p-5 form">
        <Button class="btn btn-outline icon btn-active" borderColor="#3B5998" (tap)="onFacebookLoginTap()">
            <FormattedString>
                    <Span text="&#xea90;" horizontalAlign="left" foregroundColor="#3B5998"></Span>
                    <Span text=" Login with " foregroundColor="#3B5998"></Span>
                    <Span text="Facebook" fontAttributes="Bold" foregroundColor="#3B5998"></Span>
            </FormattedString>
            </Button>
        <Button color="#3B5998" class="btn btn-outline icon btn-active" borderColor="#d34836" (tap)="onGoogleLoginTap()">
            <FormattedString>
                    <Span text="&#xea8b;" foregroundColor="#d34836"></Span>
                    <Span text=" Login with " foregroundColor="#d34836"></Span>
                    <Span text="Google +"  foregroundColor="#d34836" fontAttributes="Bold"></Span>
            </FormattedString>
        </Button>

        <StackLayout class="form">
            <StackLayout class="input-field">
                <Label text="Email" class="label" textWrap="true"></Label>
                <TextField #email hint="Email" text="" class="input input-border" autocorrect="false"></TextField>
            </StackLayout>
            <StackLayout class="input-field">
                <Label text="Email" class="label" textWrap="true"></Label>
                <TextField #password hint="Password" text="" [secure]="secureproperty" class="input input-border" autocorrect="false"></TextField>
            </StackLayout>
            <StackLayout orientation="horizontal">
                <Switch #sw checked="false" (checkedChange)="switchChanged(sw.checked)" class="switch"></Switch>
                <Label text="Show password" class="m-15" verticalAligment="center" textWrap="true"></Label>
            </StackLayout>
        </StackLayout>

        <Button text="Sign in" (tap)="signin(email.text, password.text)" class="btn btn-primary btn-active"></Button>
        <Button text="Forgot password?" (tap)="forgottenpassword()" class="btn btn-primary btn-active"></Button>
    </StackLayout>
</ScrollView>

TypeScript

    public secureproperty = false;

    public onFacebookLoginTap() {
        console.log("login with facebook");
    }

    public onGoogleLoginTap() {
        console.log("login with google");
    }

    public inSignUpTap() {
        console.log("sign up tap");
    }

    public switchChanged(args) {
        console.log(args);
        this.secureproperty = args;
    }

    public signin(email, password) {
        console.log("email: " + email + " password: " + password);
    }

    public forgottenpassword() {
        console.log("forgotten password");
    }
}

Improve this document

Demo Source


Dataentry Welcome

DataEntry: Cards

<GridLayout class="p-25" rows="* auto auto " columns="*">
    <StackLayout width="210" height="150" row="0" col="0" class="">
        <Image class="p-15" src="res://icon"></Image>
    </StackLayout>
    <Button row="1" col="0" class="btn btn-outline btn-active" marginLeft="0" marginRight="0" autocapitalizationType="allCharacters"
        text="login" (tap)="onLoginTap()"></Button>
    <Button row="2" col="0" class="btn btn-primary btn-active" marginLeft="0" marginRight="0" autocapitalizationType="allCharacters"
        text="sign up" (tap)="inSignUpTap()"></Button>
</GridLayout>

DataEntry: Cards with thumbnails

HTML

<StackLayout class="form">
    <StackLayout class="input-field">
        <Label text="Email" class="label" textWrap="true"></Label>
        <TextField #email hint="Email" text="" class="input input-border" autocorrect="false"></TextField>
    </StackLayout>

    <StackLayout class="input-field">
        <Label text="Password" class="label" textWrap="true"></Label>
        <TextField #password hint="Password" text="" [secure]="secureproperty" class="input input-border" autocorrect="false"></TextField>
    </StackLayout>
    <Label text="&#xe9ce;" (tap)="show()" class="text-center icon"></Label>

    <Button text="Sign in" (tap)="signin(email.text, password.text)" class="btn btn-primary btn-active"></Button>
    <Button text="Forgot password?" (tap)="forgottenpassword()" class="btn btn-outline btn-active"></Button>
    <Button text="Sign up" (tap)="signup()" class="btn btn-primary btn-active"></Button>
</StackLayout>

TypeScript

@Component({
    moduleId: module.id,
    templateUrl: "./dataentry-welcome.component.html",
    styleUrls: ["./style.css"],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class WelcomeDataEntryExampleComponent  {
    public secureproperty = false;

    public show() {
        this.secureproperty = !this.secureproperty;
    }

    public onLoginTap() {
        console.log("login tap");
    }

    public inSignUpTap() {
        console.log("sign up tap");
    }

    public signin(email, password) {
        console.log("email: " + email + " password: " + password);
    }

    public forgottenpassword() {
        console.log("forgotten password");
    }

    public signup() {
        console.log("sign up");
    }
}

Improve this document

Demo Source