Here you’ll find everything you need to start navigating Appeggio so you can get started.
Video: Getting To Know The Basics
The Basic Components of Appeggio
The two basic components of Appeggio are parts and connections.
Parts are the building blocks of Appeggio. There are also parts within parts! Each piece that you add or edit is a part, and each part has lots of different functionality so that your app is uniquely yours.
Connections represent the various pieces of data you want to display for your users, and can also be the data you collect from your users.
Navigating Appeggio - the Left Navigation Drawer and the Top Toolbar
To illustrate the navigation, let’s start with a template. You’ll notice there’s a navigation drawer on the left, and a toolbar across the top:
The left navigation drawer is your ‘working’ toolbar, and that will be used to add different parts to your app. The top toolbar will show what your app looks like in various sizes.
Left Navigation Drawer
Moving from left to right, the top toolbar shows the arrow to take you back to your dashboard, how to preview your app, the autosave indicator, and the QR code you can scan to see your app’s progress on your mobile device:
The middle of the top toolbar shows what your app will look like across a range of screen sizes:
a mobile with an extra small screen (size 1),
a mobile or tablet with a small screen (size 2),
a tablet with a medium screen (size 3),
on the web with a large screen (size 4),
on the web with an extra large screen (size 5),
and to fit the screen (size 6).
Before we go into more detail about the left navigation drawer, it’s worth providing a quick run down about using the editor to create, change, delete or connect actions, processes or data to parts in your application.
It is important to know that with Appeggio your application is always running so it looks and works to you the way your customers will experience it. Making an edit is instant in Appeggio and there is no waiting between edit and preview/run that you see in other tools. Don’t worry, your edits will only be visible to your customers when you publish them.
Navigating the screen
The mouse is the main method of navigating to a part on the screen you want to edit. There are also keyboard shortcuts you can use.
As you move the mouse around the screen the part under the mouse cursor will be highlighted.
Also, when you move the mouse over a tool or button you will see a ‘tooltip’ that describes what the tool or button will do:
Some tooltips will contain a letter or meta-key and a letter indicating what keyboard shortcut you can use to invoke the tool. For example ‘Click to Add a Part (A)’ indicates that the A key can be used as a keyboard shortcut:
In the image below there are two parts, the one on the left with the orange line around it is highlighted, and the one on the right is not. A left-click on the highlighted part will select it.
When the part you want to edit is highlighted you left-click the part to select it. Selecting a part will show a part toolbar with tools to modify the part. Here’s what a selected part and part toolbar looks like:
The Left Navigation Drawer in More Detail
Clicking on the '+' (add) in the left navigation drawer brings up the full list of parts you can add to your app. These parts range from layout helpers, cards, images, icons, buttons, text, videos, forms, lists and much more. You can either scroll through the list until you find the part you're looking for, or use the filter function at the top to find it.
You can either drag and drop the part into the correct place, or if you've already selected where the part should go on your screen, simply click on the part within the list and it will appear there.
Drag and Drop
To highlight drag and drop, following is an example of dragging and dropping an image between the subtitle text and the text, as shown below:
Drag your chosen image from the assets file. The black line is where your image will appear, so you need to ensure it is between the subtitle text and the text, as shown below:
Drop the image when the placement is in the correct position. The result is as follows:
Clicking on the navigation can help you locate the parts you want to edit.
In the example below, I want to edit the text “We'll help take your business to the next level.” By moving the mouse to the “We'll help take your business to the next level" part, I can now see where it is within the navigation, shown in the diagram below:
As you can see in the above diagram, there is a path that shows you exactly the part you’ve highlighted.
You can add a new screen to your app if you choose to via the Navigator. Click on the orange + button to add a screen.
A new screen will be added, using your existing color palette.
Your new screen will appear under your home screen. To select the screen you’re editing, just move the mouse to the screen in the navigation, and select. Once you've selected the screen, you can rename it in the Title field so you can easily find it again, as shown below:
Add an asset
Assets are files that you can upload. Examples of assets include images and videos. Assets that you have already uploaded will appear when you click assets. You can also add an asset by clicking ‘add’ which will open your browser. Just search for your file in your browser, then select upload.
This is where you can make a connection and then choose how and where your data flows. Your data may be from a database, or it may be from API.
When we refer to a connection we are usually referring to an API. An example of a connection might be that you need to send contact information to Salesforce. In that instance you would choose a Salesforce connector.
When we refer to a collection we are referring to a database that may be held locally. An example of a collection could be a list of menu items in a database that you want to display.
There’s more information on data connections here.
Manage texts and language
This is where you see the list of text items and can translate those texts.
The styles section is where you can set the primary color, the secondary color, accent color, default background color, default text color and default font.
This is where you can be really creative about your colour schemes and ensure that your app is in line with your branding, and supports the right ‘look and feel’ that you’re after.
Templates will already come with their own style, and it's up to you if or how you change the style. The template below has a preset default font, and default primary, accent, secondary and background colors:
You will also see that you have the option to use the dark theme or switch it to the light theme.
There’s more information on styles and colors here.
Settings is where you provide details about your iOS and Android apps, a description and keywords for your web application, and some general information about your app.
Within Appeggio there are several keyboard shortcuts to help you design and edit your app quicker. Find them here.