• Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Arrow
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Spine Animation
      • Lottie Animation
      • Avatar
      • Canvas
      • Particle
      • Render Kit
      • Speech Player
      • Video
    • Maps
      • Google Maps
      • Offline Map
      • Offline Map Route Editor
      • Map creation guide
      • Beacon installation for indoor mapping
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Overview of Cloud Services
    • Google Analytics
    • Umajin Analytics
  • Publishing
    • Introduction
    • Umajin Editor Lite
    • iOS – Apple App Store
    • Android – Google Play Store
    • Mac
    • Windows
Menu
  • Overview
    • Introduction
    • User Interface Description
    • Installing Umajin
    • Shortcuts
    • Asset Management
    • Responsive Content
    • Project Icon
    • Text Styles
    • Guidewires
    • Presets
    • Glossary
    • Multi-user
  • Components
    • Intro
    • Page
    • Basic
      • Arrow
      • Button
      • Circle
      • HTML Article
      • Image
      • Image Zoomer
      • Nine Slice
      • Rectangle
      • Text
      • Tiler
      • Toggle Button
      • Web View
    • Navigation
      • Carousel
      • Dropdown Menu
      • Glass Shelf
      • Hamburger Menu
      • Tool Bar
    • Data Driven
      • Animated Feed
      • Dynamic Article
      • Feed Item View
      • Feed List
    • Forms
      • Form
      • Text Entry
    • Layout
      • Gallery
      • Group
      • Layout Group
      • Scroll Panel
    • Media
      • 3D Model
      • Spine Animation
      • Lottie Animation
      • Avatar
      • Canvas
      • Particle
      • Render Kit
      • Speech Player
      • Video
    • Maps
      • Google Maps
      • Offline Map
      • Offline Map Route Editor
      • Map creation guide
      • Beacon installation for indoor mapping
    • Internet of Things (IoT)
      • Bluetooth BLE
    • Masters
    • Custom Components
  • Actions
    • Add and Configure Actions
    • Basic Actions
    • Navigation Actions
    • Layout Actions
    • Appearance Actions
    • Animation Actions
    • Media Actions
    • Avatar Actions
    • Gallery Actions
    • Form Actions
    • Data Driven Actions
    • Maps Actions
    • IOT (Internet of Things) Actions
    • Advanced Actions
    • Custom Actions
  • Tutorials
  • Cloud Services
    • Overview of Cloud Services
    • Google Analytics
    • Umajin Analytics
  • Publishing
    • Introduction
    • Umajin Editor Lite
    • iOS – Apple App Store
    • Android – Google Play Store
    • Mac
    • Windows
Actions > Actions Basics
Actions
  • Add and Configure Actions
  • Basic Actions
  • Navigation Actions
  • Layout Actions
  • Appearance Actions
  • Animation Actions
  • Gallery Actions
  • Form Actions
  • Data Driven Actions
  • Media Actions
  • Avatar Actions
  • Maps Actions
  • IoT Actions
  • Advanced Actions
  • Custom Actions

How to add Actions to a Component

Select the component in the scene tree that you want to add an action to. We are using a ‘Button’ component in this example. When the user presses the button component we want them to be taken to the ‘About’ page.

Having selected the ‘Button’ component, in the ‘Properties Inspector’, we open the ‘Actions’ tab.

Select the event you want to add the Action to. In this example we are using the ‘On Press’ event.

Click the “plus” symbol to the right of the ‘On Press’ event.

Clicking the ‘plus’ symbol takes you to the ‘Action Selector’, ‘Basic’ tab (or the last category of actions you had open). There are currently over 80 actions and they are sorted into categories with similar functionality.

In this example, we are going to select the ‘Navigation‘ tab because when the user presses the button component we want them to be shown the specific ‘About’ page.

Note: There is also a handy search panel on the top right of the ‘Action Selector’. You can type in key words for the type of action you want and get a list of Actions related to the keyword. Results may cross categories.

After selecting the ‘Navigation’ tab, select the ‘Show Page’ action and click ‘Insert’ down the bottom right of the Action Selector. This adds this ‘Show Page’ action to our ‘On Press’ event on our ‘About’ button

When you add an Action to a Component a lightning strike icon is displayed on the name panel in the scene tree. (See screenshot above) Selecting that icon will open the Action panel of the Property Inspector and display all the actions you have added to that component or Page etc.

If you have added multiple Actions to an Event in the Scene tree they can be dragged and dropped to alter placement and order.

Now when the user presses the ‘About’ button on our Landing Page they will automatically be taken to the ‘About’ page.

The ‘On Press’ event is the commonest event available on components and pages. In this example we added a simple navigation action but events can have many different and more complex actions added to them. For example, we can add actions to send emails, dial phone numbers, link to websites, play animations, time page views before an action takes place, play sound and use maps. We can set many actions that are driven by data stored in the Umajin Cloud Service.

Video of Configuring Actions

Please Note: This video was created using Umajin Editor version 1.4.0.0 so there have been some changes to the UI and naming conventions since then. The main changes you will notice are the new action icons and the new categories the actions are sorted into. The process of adding actions, however, remains fundamentally the same.

Events that can have Actions attached

Pages
On PressOn Page LoadOn Before Page ShowsOn After Page ShowsOn Swipe UpOn Swipe LeftOn Swipe DownOn Swipe RightOn Back ButtonOn Before Page Hides
Basic Component Events
ButtonHTML ArticleImageWeb ViewNine SliceRectangleTextTilerToggle Button
On PressOn URL clickedOn PressOn ProgressOn PressOn PressOn PressOn PressOn Select
On UpOn Complete On Complete    On Deselect
On Down  On Error     
Navigation Component Events
CarouselDropdown MenuGlass ShelfHamburger MenuTool Bar
On StopOn Menu OpenedOn StopOn Menu Opened 
On ChangeOn Menu ClosedOn ChangeOn Menu Closed 


Carousel Item Glass Shelf Item
 Tool Bar Item
On Press On Press  On Press
On Focus On Focus  
On Defocus On Defocus  
Data Driven Component Events
Animated FeedDynamic Article
Field Item ViewFeed List
On PressOn URL ClickedOn PressOn Press
On EmptyOn CompleteOn EmptyOn Empty
On Items On ItemsOn Items
  On ChangeOn Pull To Refresh
Forms Component Events
FormText Entry
On PressOn Focus
On Before SubmitOn Typing
On Validation FailOn Tab
On Send SuccessOn Enter
On Send FailOn Before Validation
On Page ShowOn Fail Validation
 On Pass Validation
Layout Component Events
GalleryGroupScroll Panel
On PressOn PressOn Scroll 
On Change On Pull To Refresh 
Gallery Item
    
On Press    
On Down, On Up    
Media Components Events
3D Model
Animation Particle RenderKitVideo Player
On PressOn Press On Press  On PressOn Press
On CompletionOn Completion    On Move
      On Tick On Completion
      On Resize 
      On Pinch
      On Down
      On Up
IoT Component Events
BLE    
On Device Connected    
On Device Disconnected    
On Device Discovered    
On Enable    
On Disabled    
On Scan Start    
On Scan End    


BLE Items
Camera VisualizeNFC Items
Touch Code  Items
Voice Command Items
On Recognize  On RecognizeOn Recognize[touch_code] On Recognize
On Recognized Close    
On Recognize Very Close    
On Recognize Far    
On Recognize Closest    
On Recognize Closest Lost    
On Device Lost    
Map Component Events
Google Maps   
On Marker TappedOn Marker Info Window TappedOn Location ChangedOn Map Press 

 


Offline Map            
On PressOn Long PressOn Map MoveOn Location ChangedOn Location UnknownOn Beacon CloseOn No Beacon CloseOn Route FoundOn No Route FoundOn Route Waypoint ReachedOn Off RouteOn Destination ReachedOn Point of Interest Click
  • Umajin
  • Developers
  • Support Home
Menu
  • Umajin
  • Developers
  • Support Home