Welcome, Guest Login

Support Center

Create a Button

Last Updated: Dec 04, 2015 12:03PM EST
There a many ways to create Buttons

You can create a Button with almost any Block, the most used are  A button is essentially an Action triggered by a Tap Event
Because most Blocks have at least a Tap Event, most block can be used to create Buttons.

Each Block has different UI feature, depending on the kind of Button you want to create .

 
Use the 'Buttons' Tutorial App, available in your Dashboard

''Button' Tutorial app


Create a Button using a Text Block

Text Block are really convenient to create Buttons.
Enter the name of the Button, format the text - add background color etc.. - and attach a Tap Event.
 


Select 'Events' in the Block Editor to attach a Tap Event to your Text Block
Here we are showing the Button Tutorial App.
That App has 2 actions associated to the Text Block Tap Event:

Set a Variable (where we store the Type of Block used as a button - for illustration -)
The standard 'Switch to another View' to go to a different view

User Feedback with Text as a Button 
It is easy to provide user feedback through a highlight when the user tap the Text block used as a button.
It's don't by changing the fill color with the 'Highlighted Fill Color' feature.
This is implemented in the Tutorial app 'Buttons'
In the right hand side Component Editor, select the 'General' tab.
Pick a 'Highlighted Fill Color' of your choice

You can pick any Highlighted Fill Color to provide user feedback.


Create a Button using a Button Block

The main Benefit of using a Button Block is to have 2 different Image changing based on the user tapping the Button.
That gives useful user feedback and that creates a better UX experience.

The Button Block delivers 2 Events: Button Up and Button Down which let you programmatically differentiate between a Tap up or Down 

In addition, the Button Blocks has a feature called 'Toggle'
Toggle let you create Button which behave like On / Off switch.


You often see them implemented with the following designs:

Learn more on how to use  Button Block (including some Limitations)



Create a Button using an Image Block

To create a Button using an Image Block you simply attach the Action to the Image Block Tap Event.
When a user tap the Image the Actions attached to the Event will be triggered.



Create a Button using a Container

Containers are powerful UI component letting you replace one Block by another.
They can be used to create Buttons which need to switch say a Text by an image or maybe an Image by a Video.

In our Button Tutorial app we simply switch a Text Block by another but we certainly encourage you to be more adventurous.

In the 'Button' App we have simply swap one Text block by another.
When the user tap the button we set a time to wait for 2 seconds then we re-initialize the Button.
We set a Timer action to last 2 seconds and capture the Event at the View Level to reset the Container Block.

This is the setting of the View Level Event which reset the Container for the Button



 
Learn More
- Format Text Block 

Help us improve! Rate this article:

Yes I found this article helpful

Ask a Question   

support@eachscape.com
http://assets0.desk.com/
false
eachscape
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete