Overview

Empowering – Umajin App Creator empowers your teams to create content, digital processes and native apps.

Time efficient – The extensive selection of prebuilt features and responsive design capabilities significantly reduce the time and cost of building cross platform experiences.

Multi-platform – Umajin allows users to build, test and publish once across iOS, Android, Mac OSX and Microsoft Windows, to share amazing, rich digital experiences on; big digital screens, desktops, kiosks, notebooks, tablets and smartphones – without having to manage the technical details that make it possible.

Code free or Custom – Umajin applications are created using pages on which you place Components which can be connected to Actions and Data Feeds. Teams can do all of this without ever needing to touch code – but at the same time, Umajin enables developers and designers to work together! Developers can create Custom Components, Actions and Feeds which can perform in the same ways as the prebuilt ones can. These scripts can be created or shared and added into your apps to create amazing new functionality which can all be viewed in real time in the Umajin preview application.

Install – If you haven’t seen the download and install instructions look here

Features and UI Walkthrough

Umajin App Creator User Interface Description

Menu Description

File

New – will open the App Templates and you can select from these or create a new Blank App. All Apps are given a numerical ID for identification. The Apps are identified by this numerical ID rather than the name you give them, because at a later stage you may decide to change an App’s name.

Open – will display all the Apps that you have saved and allow you to pick the one to open for this session. Opening an App will download all the assets and information from Cloud Services and then open it for editing.

SaveCtrl+ S – will save the App that you are currently editing. It will save to your local machine first and then to Cloud Services.  Saving to Cloud Services allows you to access it from any system that has Umajin App Creator installed and makes it available for access from Umajin Preview on your mobile device.  See the Umajin Download page for a link to Umajin Preview for your device.

Save As – will save a copy of the App you are currently editing to your repository under a new name.

Reload – will reload the App you are currently editing.  This is useful to refresh some feed information and to run/refresh custom scripts that you may have created.

Play – Ctrl+Space – will enable you to preview your App in the editor as you would see it on the device that is indicated in the Device Selection.  This approximates the aspect ratio and relative size on your monitor while designing and editing the App.  The monitor can only approximate the App resolution (or DPI) of your mobile device as most monitors have a lower DPI than most mobile devices.  To view the App in correct size/resolution, use Umajin Preview on your mobile device.

Publish – Publish will open up a screen that describes the 4 Umajin publishing options. Each option links through to more detailed information, download links, and specific data entry requirements.

    • Umajin Preview
    • Publish to Android or IOS Stores
    • Umajin Portal
    • Publish Raw App Files

Open Cloud Services – will open Umajin Cloud Services site for your App in your default web browser. This enables you to add content to your app that is dynamic and doesn’t require an app update to change.  Feeds, images, articles and forms are all examples of content that can be managed dynamically from here.

Open Cloud Files – will open Umajin Cloud Services site at your files repository.  This repository is where you can store files (such as html and associated images) for use in your apps.  These files are retrieved by the app when needed rather than being packaged in the installer with your app.  Note: these files require an internet connection for retrieval when they are first requested but will cache the images locally after this.  You are responsible for getting approval to use any third-party files you upload to this system.  You must obtain the right to use/store any files you upload to this service.

Open Resources Folder – will open up the Folder in your computer that holds all the resources used by your app.  This includes all images, icons, 3D models, javascript, sound, animation, html pages, video and other assets for use within your project. Within the ‘images’ folder, you can create new folders to organize your content; e.g. Icon folder, 3rd party image folder, etc. In the ‘fonts’ folder you can copy any OTF (Open Type Fonts) or TTF (True Type Fonts) font files for use in the project.
Note: You MUST make sure that you have the rights to use the assets included in ANY of the resource folders (and sub-folders) as everything in these folders is packaged (and distributed) with the app, whether it is actually used or not.  It is a good idea to audit this folder (and its sub-folders)  for unused, unlicensed or test assets before publishing your app.

Open with Visual Studio Code – will open Visual Studio Code editor to allow you to add and debug JavaScript for your project.  See the “Visual Studio Code Setup” tutorial on the Developer site for more details.

App Settings – The App settings you can set here are:

  • App name – this is the name you are calling your App and can be changed at any time.  This is not the official name of the application when published as that requires verification on the App Stores.
  • App Orientation – this allows you to set whether you want the app to lock to portrait, lock to landscape or to switch orientation as needed.  If the app can switch orientation, you will need to design it with this in mind.
  • Page color – this sets the default page color for your whole app.
  • Inactivity – these allow you to set up what happens when the app is inactive.  I.e. when the user is not interacting with the app such as when the app is used as a kiosk. You can set the time at which the app goes into inactive mode, the page which the app should go to when it becomes inactive and the animation used to transition to the inactive page.
  • Guest Members – You can invite guest members here.

Styles –will open the Styles Inspector panel.  These are font styles that can be used in your App and consist of a font type, size, alignment, weight, decoration and color.  You can create as many new styles as you like and use them wherever text is displayed.

Exit – will exit Umajin App Creator.  You are prompted to save if there are unsaved changes in your App.

 

Edit

Undo – Ctrl + Z – will undo previous input.

Redo – Ctrl + Y – will redo previously undone input.

 

Cut – Ctrl + X – will cut/delete selected component.

Copy – Ctrl + C – will copy selected component.

Paste – Ctrl + V – will paste the copied component and name it as a numbered copy.

 

Duplicate Page – will add a page that is a copy of the current page you have selected.

 

View

Zoom In –Ctrl + +  zooms into page 25%, 50%, 75%, 100%, 200%, 300%

Zoom Out -Ctrl + –  zooms out from page 300%, 200%, 100%, 75%, 50%, 25%,

Zoom   lists dropdown of options for zoom 5%, 12%, 25%, 50%, 75%, 100%, 150%, 200%, 300%, Native, Fit

Device >  lists dropdown of options for device display in your work-space and for previewing  iPad ½, iPad ¾, iPad Pro 12.9″, iPad mini, iPhone 3Gs, iPhone 4, iPhone 5/se, iPhone 6/7, iPhone 6+/7+, Galaxy S3, Galaxy S4/5, Galaxy S6/7, Galaxy Tab, Galaxy Tab 7.7, Galaxy Tab/Note 10.1, Galaxy Note 3, Galaxy Note 4/5/7, Nexus 5, Nexus 6, Nexus 6P, Nexus 7 Tablet, Nexus 10 Tablet, Transformer TF300, Nook HD, Kindle Fire HD 7, Kindle Fire HD 8.9, Sony Xperia tipo, LG 4X HD P880, Vodafone Smart Mini 7, Surface RT, Surface Pro 4, ATIV Smart PC pro, 14” 800×600 (4.3), 14” 1024×768 (4.3), 17” 1280×1024 (4.3), 20” 1280×720 (16.9), 22” 1366×768 (16.9), 23” 1920×1080 (16.9), 15” 3840×2160 (16.9),  27” 3840×2160 (16.9), 40” 3840×2160 (16.9),  29” 2560×1080 (21.9), 34” 3440×1440 (21.9), iMac 21.5”4K (16.9), iMac 27” 5K (16.9), Preview Desktop 22″.

Toggle Orientation – Ctrl +  ->     toggles app display orientation from portrait to landscape.

Guidewires – Ctrl + ;  enables  guidewires on the workspace.

 

Insert

Page – will insert a new page in your app. The new page will appear in the page preview panel and in the scene tree.

Master will insert a new Master component page into the page preview panel which can be added to any other page in your app.

Foreground –will insert a new Foreground page into your app. Again this Foreground can be applied to any other page in your app.

Dialog –will insert a new Dialog or ‘pop-up’ into your app.  You can use the global popup to display notification style messages to your users. There is also a default loading spinner, 2 different combo boxes, a default activate camera screen and a code scanning screen for scanning barcodes or QR codes. You can, of course, also create your own dialog page.

Component – will open the Component Selector so you can select a new component to add to your page.

Feed – will open the Component Selector for the Data Driven components so you can select which type of Feed Component you want.

 

Modify

Arrange – >   will open dropdown of options for moving/layering components within the scene tree on a page; Bring to Front – Ctrl+Shift+[,  Bring Forward – Ctrl+[,  Send Backward – Ctrl+],  Send to Back – Ctrl+Shift+]. (iOS options use { and})

Align –      >  will open a dropdown of options for aligning selected components;

Left will align selected components to the leftmost one
Horizontal Center will center selected components horizontally to the average ‘y’ position
Right will align selected components to the rightmost one
Top will align selected components to the topmost one
Vertical Center will center selected components vertically to the average ‘x’ position
Bottom will align selected components to the bottom most one
Distribute Widths will evenly space selected components horizontally in their shared space
Distribute Heights will evenly space selected components vertically in their shared space
Make same Width will resize selected components to same width
Make same Height will resize selected components to same height

Group – Ctrl +G – allows you to group a set of selected components.

Ungroup – Ctrl + Shift + G – allows you to ungroup a set of components.

 

Profile

View/Edit Profile – opens the Dashboard and displays the profile of the logged in user.  

Offline – takes the user offline and displays a small unplugged icon top left.

Sign Out – Immediately logs you out and opens the ‘Sign In’ popup so that you can sign in to Umajin App Creator or Umajin Preview with different login details.

 

Help

These headings all link to relevant information.

Umajin Help – general help and support.

Umajin Developer Help – advanced help for developers who are creating custom scripts using code.

Contact Us

Left Hand Panel

Under the umajin logo, the name you have given the project that is open, will display in the left hand panel, as below.

On the right is the plus button for adding Components to any of your pages. We have placed it here so that it is always available for you to add a Component without having to take time to click back to the actual page in the scene tree. (Other plus buttons which sit directly on a Component indicate a parent/child relationship and are indented accordingly on the scene tree.)

Scene Tree

Underneath the App name is the Scene Tree. Displaying first will be the page and underneath it all the Components you have added to that page (most recently added component at the top).

When a Component is selected in the scene tree it is highlighted and shows small upward and downward facing triangles that let you change its position in the scene tree.

component arrows

All Pages and Components have a Properties Inspector to set Properties and Actions.  If an Action is set on a Page or a Component Event a ‘Lightning Bolt’ icon is displayed at the right end of the Page or Component name panel.

The Properties Inspector panel can be pinned to the left hand side with the pin icon or unpinned to float.

It can be stretched wider or longer with the triangular icon at the bottom right when it is floating.

Long Properties Inspectors have a scroll bar to move down the property list. The Properties Inspector has 2 tabs: a Properties panel and an Actions panel. The Properties panel sets form and function for the component/page and the Actions panel displays Events for that component/page that can have Actions attributed to them.

Properties and Actions

Bottom Panel

The double down/up arrows show and hide the pages view.

The plus button adds a new page in the page view and in the scene tree. If you are in the Masters or Foreground or Dialogs Tabs the plus button adds the appropriate item.

Duplicate page The double page icon enables you to duplicate a page.

The tabs: Pages, Masters, Foregrounds and Dialogs are tabs for viewing all the items you have created in each category. When you click the Pages tab you will see all the pages you have created in the page view. When you click the Masters tab you will see any Masters you have created, the Foregrounds tab will display all the foregrounds you have created and the Dialogs tab will display all the existing Dialogs (Global Popup, Loading Spinner, Combo Box Popup 1 and 2, Camera Display, Code Scanner) and any you have created.

  • Masters are used in feeds and other list type components to layout the individual items of the list.  Data is fed into the Master and the data feed can also be external, such as a blog, a Twitter feed or information you have entered into the Apps content management system on Umajin Cloud Services.
  • Foregrounds are overlays which sit on top of the Page.  They are usable on multiple pages and are good for use as tool-bars and other navigation items.
  • A Page is a container which is the size of the devices screen that allow you to layout components that are available in Umajin App Creator.  Pages can be transitioned to from navigation items using Actions and can also include Masters and Foregrounds.
  • Dialogs (or Popups) include a set of default (but customizable) message boxes that have specific purposes such as a loading spinner, standard combo boxes, the camera display and scanner. Additionally, you can make your own.

Setting Page Properties and Actions

  • The page can be renamed in the Name panel in the Properties panel. Double click on the Page Number to type in new name.
  • Position and size of pages are set by the device selected.
  • Appearance enables you to add a pre-made Foreground overlay to the page.
  • Checking the Pre-load page box will automatically pre-load the whole page.
  • Pages have a list of events that can have Actions added to them.

The up arrow pops up a list of devices and depending which you select, it will display in the name panel and resize the onscreen format accordingly. Scroll for further devices.

The next up arrow pops up the Zoom selector. The options range from 5% to 300% as well as Native and Fit. ‘Native’ is the accurate dimensions for the device selected and ‘Fit’ sizes the display to fit inside your screen window at a regular central placement.

Project Preview button. When you have your current app selected and you want to check how it looks on a range of devices, you can hit this button and the page you are working on will display on all 3 devices – the Sony Xperia tipo w:320 h:480 ppi:179, the GalaxyS3 w:720.h:1280 ppi:306 and the ipad3/4 w:1536 h:2048 ppi:263.

The page icon with swing arrows alters the page view from portrait/vertical to landscape/horizontal. This setting can be locked to either state or made to support rotation in the App Settings.

The right facing triangular button will take you to preview your app as you build it.

Close the preview mode using the black page icon that sits bottom right of the screen when you are in preview/play mode.

The Save icon will save your app. If there is an asterisk beside the ‘Save’ icon it indicates you have made changes to the app you are working on and so a ‘Save’ is in order. The first save will be to your local machine and then to the Cloud. Both saves are signalled with a success message at the top of your screen.

The ‘Publish’/Cloud icon opens the Publish Options screen. There are links to 4 different options; Umajin Preview, Publish to Stores, Publish to Portal and Publish Raw App Files.

Script Console Access: At the far right of the toolbar there is a button with a right facing arrow and an underscore. This button opens the Script Console. This is very useful for getting feedback when you create actions and controls using JavaScript. Errors you have made will be output to this console.

Onscreen Resizing Indicators

Both resizing and moving a Component show position and size measurements changing, both onscreen and in the Property Inspector.