Login page with Validation

How to create login page with validation

Step - 1 -  First create interactive login Page follow the below image steps

Step - 2 - In Properties -> Style Tab -> Shadow , Border : None , Radius : 5

Step - 3 - Now Place the Text Field and Submit button in the login Page , Name all text field and button properly.

In Properties Tab select Text field Type if User name - text, or Password choose Password. and finally select the button as submit Button.

Link with button is important because, on click of button it will show the error message. 

Step - 4 - place the Label and write the Error message and convert it as Dynamic Panel

Step - 5 - Make the Error Message as hidden

Step - 6 - Now hide border form the Text Field to make interactive design

Step - 7 - Now Place the Horizontal Line with the same width of hidden Text Field.

Use of Guides to make it as same width Horizontal Line. 

Step - 8 - Place the Label and name it as same , it will be treated as floating label, while click on the user name text field it will appear.

Step - 9 - Now create new Page as welcome, if the login is success then it will open welcome user as popup window.

Step - 10 - Select the hidden Text Field and In Properties tab -> click "OnFocus" to add case

Step - 11 - In Case Editor -> Click to add actions -> Widgets -> Show/Hide ->

Configure actions -> Checked Floating name

Animate -> Slide left (or any animation)

Then OK

Do the same for Password Text field same 

Step - 12 - Button actions - Select the Button in Properties -> click "OnCliock" to add case

Step - 13 - In Case Editor click on Add Condition - Select Text on Widget - from dropdown select txt_username - and write value as userName as below image it is RAM then click on Add icon and do same for Password then click OK

Step - 14 - In the same case -> Click to add actions -> Open Links 

Configure actions -> Open in Popup window -> Select the welcome page then click OK

Step - 15 - Add Error Message ->  In Properties click "Add Case"

Case Editor -> Click to add actions -> Widgets -> Show/ Hide 

Configure actions -> Select Error Message and Click OK

Step - 16 - Preview it see if Do not fill any details and click OK it will show error message / if not fill up the right credential then also showing error message.

After fill up the right credential  and click on Submit Button the PopUp window is open as Welcome Page

Thanks.

OnLoad Image Slider

How to create OnLoad Image Slider in Axure

Step - 1 - Place the image from Libraries and set height and width

Step - 2 - Convert to Dynamic Panel

Step - 3 -  Name the dynamic panel and create the duplicate state for image slider

Step - 4 - Click on State 1, 2, 3 and change the image

Step - 5 - Select the image_slider dynamic panel , In Properties tab -> click "OnLoad"

Step - 6 - in Case Editor -> Click to add actions -> Miscellaneous -> Wait

In Configure actions -> wait - 2000 ms and click OK

Step - 7 - In Same Case 1 add other actions -> Click to add actions -> Widgets -> Set Panel State

Configure actions -> Checked "image_slider"

Select State -> Next , checked "Wrap from Last to First" , Repeat - 2000 ms and click OK

Step - 8 - Now Preview slider is working well as OnLoad / Auto sliding image

Step - 9 - Now Add bullets which indicate which image is sliding currently.

Take Box from Libraries and place it on the Image_slider Dynamic Panel and make it rounded and opacity (less ).

Step -10 - Place circle in the round  and make it 3 and align it Properly.

Step - 11 - Now Convert all circles /  Bullets to Dynamic Panel

Step - 12 - Name the Dynamic Panel as "Controls" and create total 3 States (make duplicate state)

Step - 13 - Change the color of circle in three different state like state 1 color of first circle is blue and remaining color are white. do same for three states - state 1 - 1st circle , state 2 - 2nd circle as so on.

Step - 14 - Now select image_slider Dynamic Panel and click on case 1 to add more case for controls

Step - 15 - In Case Editor -> Click to add actions -> Widgets -> Set Panel State

Configure actions -> Checked - "set controls"

Select state -> Next and checked other 2 more check box and Click OK

Step - 16 - Now Preview Image slider is working well as well as bullet is show the current image (indicating the current image)

Thanks.

Interactive material design Registration form

How to create Interactive material design Registration form using Axure

Step - 1 - File new -> Click on Home, In Properties Panel -> Select Style Tab -> Back color and change the background color of Home Page.

Step - 2 - Place the Box 1 and set height and width, In Properties Panel -> Select Style Tab -> Style - Border : None , Radius : 5 , set shadow (while clicking on check box it will enable) 

Step - 3 - Give some heading and Place Text Field , select and right click and select Hide Border

Step - 4 - Name the text field, in Properties Panel scroll down and write on Hint text box (it is like Placeholder) then Hint Style Select "Focus"

Step - 5 - Place the Label and Name it as "Name" as well as Place the Horizontal line, line should be same as hidden Text field.

Step - 6 - Again Place the Label with Name and in Properties Panel name it as "Floating_name" and finally make it hidden

Step - 7 - Now Select the Hidden Text Field and in Properties Panel Click on OnFocus and open Case Editor to write the case for Text Field

Step - 8 - In Case Editor -> Click to add actions -> Widgets ->Show 

Configure actions -> Checked the Floating_name

Animate -> Slide left and t: 100ms

OK

Step - 9 - Preview and check

Step - 10 - Add more field and Preview it

Step - 11 - Preview -> Before click and After Click

Thanks.

Radio Button Actions (Set Dynamic Panel through radio button)

How to Create Radio Button Action as Dynamic

Step -1 - Here will create Login form for different users like Admin, User, Guest User.

So first need to create a login Panel where, Place three Radio Button from Libraries and Name 

it as Admin , User , Guest User and Submit Button.

Scenario :- any user will interact with this Login As Panel and they will select any one of authentication to Login as Admin, User, Guest User and after selecting the radio button they will click on Submit Button. then this will call the related Page like suppose they select the Admin then Login as Admin Page will show as POPUP window.

Step - 2 - Now create a Page called Login-Form

Step - 3 - Create the Login Form where heading is Login As Admin.

then Select all elements/fields and Convert to Dynamic Panel and Create the Duplicate States 

for reaming two more users as User and Guest User. The State Name should be Same as the radio button Label Name. 

* Note - Radio button Label name and State Name should be Same.

Step - 4 - Place the Home Icon and Link to Home Page

Step - 5 - To link Home Icon to Home Page Follow Below Image Steps

Step - 6 - Now in Home Page Select all Radio Button and Assign Radio Group Name as LoginForm

Step - 7 - Now Select Single Radio Button and click on Right Panel -> Properties -> OnSelected and write the Case in Case Editor.

Step - 8 - Click to add actions -> Variables -> Set Variable Value 

Right Side click on Add Variable Add "LoginVar" and Click on "OK"

Step - 9 - In Configure actions -> Checked the "LoginVar" In bottom Set Variable to -> Text On Widgets -> This and click OK

Step - 10 - Follow the Same Steps For all 3 Radio Button.

Step - 11 - Now Select the Submit Button and Click On "Properties -> OnClick" and add case .

Click to add actions -> Open Link . Right Side "Link to page in Design" Select LoginForm and Click on "OK"

Step - 12 - Go to Login Page Select the Dynamic Panel and Click on "OnLoad" 

Step - 13 - Click to add actions -> Widgets -> Set Panel State

Configure actions -> Checked -> Set the widget

Bottom -> Select State -> Value

Name of State -> Click on fx

Step - 14 - Now in Edit Value Panel, Follow below image

Step - 15 - Preview Once

Step - 16 - Again Open Home Page and select Submit Button Case and Open

Step - 17 - In Configure actions -> Open in Select the POPUP Window. and Click OK

Step - 18 - Preview  It is as while select the radio button Admin and click on submit button it open as POPUP window -> Login As Admin. Same action is given to User and Guest User also

Thanks.