🤖 Create an engaging chatbot from scratch and add it to your NativeScript app! Learn more at our webinar on March 28th.

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