[Free] Code Input view extension

An extension that creates a view where we can enter password or PIN.

CodeInputView

The extension uses this library:
https://github.com/raycoarana/material-code-input

Sample screenshot:

All blocks and properties:

Block description:

ActionKeypressed - an event that will be called when we press the Action key on the keyboard. The event returns the type of key pressed.

ActionKeyPressed

CharEnter - an event that will be called after each entering the character to Codeinput. The event returns the entered character.

CharEntered

OnDelete - an event that will be called after any removal of the character from Codeinput.

OnDelete

OnInputComplete - an event that will be called after completing the code entry when all fields are filled. The event returns the entered code.

OnInputComplete

Create - a method that creates a CodeInput component with a specific number of fields (length) in a specific arrangement.

Create

ShowError - a method that causes an error effect.

ShowError

HideKeyboard - a method that programmatically hides the keyboard.

HideKeyboard

ShowKeyboard - a method that programmatically opens the keyboard.

ShowKeyboard

ActionKey - a property that sets and returns the type of action key. "0"- done, "1"- previous, "2"- next, "3"- go, "4"- send.

ActionKey

AnimateOnComplete - a property that sets and returns wether after entering the code and when calling an error, the animation is to be shown.

AnimateOnComplete

CodeText - a property that programmatically sets text in CodeInput and returns it.

CodeText

CodeTextColor - a property that sets and returns the color of the code text in CodeInput.

CodeTextColor

CodeTextMarginBottom - a property that sets and returns the margin between the lower edge of the underlines and the bottom edge of the code text.

MarginBottom

CodeTextMarginBottom

CodeTextSize - a property that sets and returns, the height of the code text fonts

TextSize

CodeTextSize

CodeTextType - a property that sets and returns, the type of text entered into CodeInput. "0" - numbers, "1" - text, "2" - uppercase text.

CodeTextType

CodeTextLength - the property that returns the length of the code, the number of text boxes formed

CodeTextLength

Editable - a property that sets and returns whether CodeInput is editable or not.

Editable

ErrorText - a property that sets and returns, error text that will be displayed after calling the error.

ErrorText

ErrorTextAlignment - a property that sets and returns, the type of error text alignment. "0" - to the left, "1" - to the center, "2" - to the right.

ErrorTextAlignment

ErrorTextColor - a property that sets and returns, the color of the error text. Accepts integer colors.

ErrorTextColor

ErrorTextMarginSide - a property which sets and returns, the width of the left and right margin of the error text

SideMargins

ErrorTextMarginSide

ErrorTextMarginTop - a property which sets and returns, the margin height between the lower edge of the underlines and the upper limit of the error text.

TopMargin

ErrorTextMarginTop

ErrorTextSize - a property that sets and returns, the height of the error text fonts

errorsize

ErrorTextSize

PasswordCharacter - a property that sets and returns a character that will replace the text in password mode.

PasswordCharacter

PasswordMode - a property that sets and returns whether the code text is to be replaced with a substitute sign.

PasswordMode

PasswordShow - a property that sets and returns whether the recently entered code sign is to be visible for a moment.

PasswordShow

PasswordShowTime - a property that sets and returns the time for which the last entered code sign is to be visible.

PasswordShowTime

UnderlineReductionWidth - the property that sets and returns the width, which will be reduced by emphasis on both sides to create spacing between underlines.

reduction

UnderlineReductionWidth

UnderlinesColor - a property that sets and returns the color of the underlines. Accepts integer colors.

UnderlinesColor

UnderlinesSelectedColor - a property that sets and returns the color of the underline for the currently entered character. Accepts integer colors.

UnderlineSelectedColor

UnderlineSelectedThickness - a property that sets and returns the thickness of underline for the currently entered character.

UnderlineSelectedThickness

UnderlineThickness - a property that sets and returns the thickness of underline.

thickness

UnderlineThickness

UnderlineWidth - a property that sets and returns the width of a single underline before reduction.

width

UnderlineWidth

Sample blocks

Download the extension v1:

pl.patryk_f.codeinput.aix (47.0 KB)

Download sample project:

Code_Input_Sample.aia (47.0 KB)

14 Likes

its cool @Patryk_F :heart_eyes:

1 Like

A very useful extension indeed :smile:

Nice One

1 Like

Its a great extension @Patryk_F
:+1:
It is very useful for my app.

1 Like

It's really useful extension where one time password is needed. @Patryk_F

1 Like